/* BavaroTravel CRM · estilos. Marca BT: azul #3060A8, dorado #DCA23A, Work Sans + Inter */
:root{
  --brand:#3060A8; --brand-d:#1E3A5F; --brand-l:#E7F6FF; --brand-xl:#F0F6FF;
  --gold:#DCA23A; --gold-l:#FBF3E1;
  --ink:#22344F; --muted:#64748B; --line:#E5EAF1; --bg:#F5F8FC; --card:#FFFFFF;
  --ok:#2E7D5B; --ok-l:#E4F3EC; --warn:#B7791F; --warn-l:#FBF3E1; --bad:#C0392B; --bad-l:#FBE9E7;
  --info:#3060A8; --info-l:#E7F6FF; --gray-l:#EEF2F7;
  --r:12px; --sh:0 1px 2px rgba(30,58,95,.06), 0 4px 14px rgba(30,58,95,.06);
  --nav-h:64px; --top-h:56px;
  --font-t:"Work Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-b:"Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:15px/1.45 var(--font-b);-webkit-text-size-adjust:100%}
body{min-height:100dvh;padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom))}
a{color:var(--brand);text-decoration:none}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--font-t);color:var(--brand-d);margin:0;line-height:1.2;text-wrap:balance}
h1{font-size:1.35rem;font-weight:700}
h2{font-size:1.05rem;font-weight:600}
h3{font-size:.95rem;font-weight:600}
.muted{color:var(--muted)}
.small{font-size:.82rem}
.num{font-variant-numeric:tabular-nums}
.right{text-align:right}
.hidden{display:none!important}
.mt{margin-top:1rem}.mb{margin-bottom:1rem}

/* ---------- login ---------- */
#login{position:fixed;inset:0;background:linear-gradient(160deg,var(--brand-d) 0%,var(--brand) 70%,#4A7BC8 100%);display:flex;align-items:center;justify-content:center;padding:1.5rem;z-index:50}
#login .caja{background:var(--card);border-radius:18px;padding:2rem 1.6rem;width:100%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
#login .logo{display:flex;align-items:center;gap:.7rem;margin-bottom:1.4rem}
#login .logo .m{width:44px;height:44px;border-radius:12px;background:var(--brand);color:#fff;display:grid;place-items:center;font-family:var(--font-t);font-weight:700;font-size:1.1rem}
#login .logo b{font-family:var(--font-t);font-size:1.15rem;color:var(--brand-d);display:block}
#login .logo span{color:var(--muted);font-size:.8rem}
.campo{display:block;margin-bottom:.9rem}
.campo span{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.3rem;font-weight:600}
.campo input,.campo select,.campo textarea{width:100%;padding:.75rem .85rem;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:1rem}
.campo input:focus,.campo select:focus,.campo textarea:focus,button:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.75rem 1.1rem;border-radius:10px;border:1px solid transparent;font-weight:600;background:var(--brand);color:#fff;min-height:44px}
.btn:disabled{opacity:.55;cursor:default}
.btn.sec{background:#fff;color:var(--brand-d);border-color:var(--line)}
.btn.gold{background:var(--gold);color:#3A2A08}
.btn.ok{background:var(--ok)}
.btn.bad{background:var(--bad)}
.btn.block{width:100%}
.btn.sm{padding:.45rem .75rem;min-height:36px;font-size:.88rem}
.error{background:var(--bad-l);color:var(--bad);padding:.6rem .8rem;border-radius:8px;font-size:.9rem;margin:.6rem 0}
.aviso{background:var(--gold-l);color:#6B4E12;padding:.6rem .8rem;border-radius:8px;font-size:.9rem;margin:.6rem 0}

/* ---------- armazón ---------- */
#top{position:sticky;top:0;z-index:20;height:var(--top-h);background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:.7rem;padding:0 1rem}
#top .marca{display:flex;align-items:center;gap:.5rem;font-family:var(--font-t);font-weight:700;color:var(--brand-d)}
#top .marca .m{width:30px;height:30px;border-radius:8px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:.8rem}
#top .titulo{font-family:var(--font-t);font-weight:600;font-size:1.05rem;color:var(--brand-d);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#top .usuario{font-size:.8rem;color:var(--muted);white-space:nowrap}
#top .atras{border:0;background:none;color:var(--brand);font-size:1.4rem;line-height:1;padding:.2rem .4rem;margin-left:-.4rem}
#sync{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
#sync.mal{background:var(--bad)} #sync.dudoso{background:var(--gold)}
#vista{max-width:1100px;margin:0 auto;padding:1rem}
#nav{position:fixed;left:0;right:0;bottom:0;height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--card);border-top:1px solid var(--line);display:flex;z-index:20}
#nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;color:var(--muted);font-size:.7rem;font-weight:600}
#nav a svg{width:24px;height:24px}
#nav a.act{color:var(--brand)}
#nav a.act svg{stroke:var(--brand)}
@media (min-width:900px){
  body{padding-bottom:0;padding-left:220px}
  #nav{top:0;bottom:auto;left:0;right:auto;width:220px;height:100dvh;flex-direction:column;justify-content:flex-start;border-top:0;border-right:1px solid var(--line);padding:1rem .6rem;gap:.15rem}
  #nav a{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:.7rem;padding:.6rem .8rem;border-radius:10px;font-size:.92rem}
  #nav a.act{background:var(--brand-l)}
  #nav .brand-side{display:flex!important;align-items:center;gap:.6rem;padding:.4rem .8rem 1rem;font-family:var(--font-t);font-weight:700;color:var(--brand-d)}
  #nav .brand-side .m{width:32px;height:32px;border-radius:9px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:.8rem}
  #top .marca{display:none}
}
#nav .brand-side{display:none}

/* ---------- componentes ---------- */
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
@media (min-width:700px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.8rem .9rem;box-shadow:var(--sh)}
.kpi .v{font-family:var(--font-t);font-size:1.6rem;font-weight:700;color:var(--brand-d);line-height:1.1}
.kpi .l{font-size:.78rem;color:var(--muted);margin-top:.15rem}
.kpi.gold .v{color:var(--warn)}
.kpi.bad .v{color:var(--bad)}
.sec{margin-top:1.3rem}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.5rem;gap:.5rem}
.sec-h a{font-size:.85rem;font-weight:600}
.lista{display:flex;flex-direction:column;gap:.5rem}
.item{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.75rem .9rem;display:grid;grid-template-columns:1fr auto;gap:.15rem .8rem;color:inherit;box-shadow:var(--sh)}
.item:active{background:var(--brand-xl)}
.item .t{font-weight:600;color:var(--brand-d);grid-column:1}
.item .s{font-size:.85rem;color:var(--muted);grid-column:1}
.item .d{grid-column:2;grid-row:1/span 2;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:.25rem;justify-content:center}
.item .d .imp{font-family:var(--font-t);font-weight:700;color:var(--brand-d)}
.chip{display:inline-block;font-size:.72rem;font-weight:600;padding:.15em .55em;border-radius:999px;background:var(--gray-l);color:var(--muted);white-space:nowrap}
.chip.ok{background:var(--ok-l);color:var(--ok)}
.chip.warn{background:var(--warn-l);color:var(--warn)}
.chip.bad{background:var(--bad-l);color:var(--bad)}
.chip.info{background:var(--info-l);color:var(--info)}
.chip.brand{background:var(--brand-l);color:var(--brand-d)}
.vacio{padding:1.4rem;text-align:center;color:var(--muted);background:var(--card);border:1px dashed var(--line);border-radius:var(--r)}
.cargando{padding:1.4rem;text-align:center;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem;box-shadow:var(--sh)}
.card + .card{margin-top:.8rem}
.filtros{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.3rem;margin-bottom:.6rem;-webkit-overflow-scrolling:touch}
.filtros button{flex:none;border:1px solid var(--line);background:var(--card);color:var(--muted);border-radius:999px;padding:.4rem .85rem;font-size:.85rem;font-weight:600}
.filtros button.act{background:var(--brand);border-color:var(--brand);color:#fff}
.buscador{position:relative;margin-bottom:.8rem}
.buscador input{width:100%;padding:.85rem 1rem .85rem 2.6rem;border:1px solid var(--line);border-radius:12px;background:var(--card);font-size:1.05rem;box-shadow:var(--sh)}
.buscador svg{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);width:20px;height:20px;stroke:var(--muted)}
.dl{display:grid;grid-template-columns:minmax(110px,35%) 1fr;gap:.35rem .8rem;font-size:.93rem}
.dl dt{color:var(--muted)}
.dl dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.acciones{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin-top:.8rem}
@media (min-width:700px){.acciones{grid-template-columns:repeat(3,1fr)}}
.acciones .btn{flex-direction:column;gap:.15rem;padding:.7rem .4rem;font-size:.85rem}
.acciones .btn small{font-weight:400;opacity:.8;font-size:.7rem}
.dia-h{font-family:var(--font-t);font-weight:600;color:var(--brand-d);margin:1rem 0 .4rem;display:flex;align-items:baseline;gap:.5rem}
.dia-h .muted{font-family:var(--font-b);font-weight:400;font-size:.85rem}
.tabla{width:100%;border-collapse:collapse;font-size:.9rem;background:var(--card);border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.tabla th,.tabla td{padding:.55rem .7rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tabla th{background:var(--brand-l);color:var(--brand-d);font-size:.75rem;text-transform:uppercase;letter-spacing:.04em}
.tabla tr:last-child td{border-bottom:0}
.tw{overflow-x:auto}
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 1rem);transform:translateX(-50%);background:var(--brand-d);color:#fff;padding:.7rem 1.1rem;border-radius:10px;font-size:.9rem;z-index:60;box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:92vw}
@media (min-width:900px){.toast{bottom:1.5rem}}
/* ---------- modal / hoja inferior ---------- */
.backdrop{position:fixed;inset:0;background:rgba(20,34,55,.45);z-index:40;display:flex;align-items:flex-end;justify-content:center}
@media (min-width:700px){.backdrop{align-items:center}}
.hoja{background:var(--card);width:100%;max-width:480px;border-radius:18px 18px 0 0;padding:1.1rem 1.15rem calc(1.1rem + env(safe-area-inset-bottom));box-shadow:0 -8px 30px rgba(0,0,0,.2);max-height:92dvh;overflow-y:auto}
@media (min-width:700px){.hoja{border-radius:16px;margin:1rem}}
.hoja h2{margin-bottom:.2rem}
.hoja .sub{color:var(--muted);font-size:.88rem;margin-bottom:.9rem}
.hoja .cierra{float:right;border:0;background:var(--gray-l);color:var(--muted);width:32px;height:32px;border-radius:50%;font-size:1.1rem;line-height:1}
.seg{display:flex;gap:.4rem;flex-wrap:wrap;margin:.2rem 0 .3rem}
.seg button{flex:1;min-width:calc(50% - .2rem);border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:.6rem .4rem;font-weight:600;font-size:.9rem}
.seg button.act{background:var(--brand-l);border-color:var(--brand);color:var(--brand-d)}
.imp-in{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;padding:.2rem .8rem;background:#fff}
.imp-in input{border:0;outline:0;font-size:1.6rem;font-weight:700;font-family:var(--font-t);color:var(--brand-d);width:100%;text-align:right;background:transparent}
.imp-in .cur{font-size:1.3rem;color:var(--muted);font-weight:700}
.check{display:flex;align-items:center;gap:.6rem;padding:.7rem .2rem;font-weight:500}
.check input{width:22px;height:22px;accent-color:var(--brand)}
.mini{font-size:.8rem;color:var(--muted);text-align:center;margin-top:.5rem}
/* ---------- gráficos de barras (informes) ---------- */
.bars{display:flex;flex-direction:column;gap:.7rem}
.bar .top{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;margin-bottom:.28rem;font-size:.9rem}
.bar .top .l{color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .top .v{color:var(--brand-d);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.bar .top .v small{color:var(--muted);font-weight:500}
.bar .track{height:9px;background:var(--gray-l);border-radius:999px;overflow:hidden}
.bar .fill{height:100%;background:var(--brand);border-radius:999px;min-width:3px;transition:width .5s ease}
.bar.gold .fill{background:var(--gold)} .bar.bad .fill{background:var(--bad)} .bar.ok .fill{background:var(--ok)}
.rep-sec{margin-top:1.4rem}
.rep-sec > h2{margin-bottom:.7rem}
.export{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:600;color:var(--brand)}
@media (prefers-reduced-motion:reduce){.bar .fill{transition:none}}
/* ---------- botón flotante + iframe nueva reserva ---------- */
#fab{position:fixed;right:1rem;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + .8rem);z-index:25;display:flex;align-items:center;gap:.4rem;background:var(--brand);color:#fff;border-radius:999px;padding:.8rem 1.1rem;font-weight:700;box-shadow:0 6px 20px rgba(30,58,95,.3)}
#fab svg{width:20px;height:20px}
@media (min-width:900px){#fab{bottom:1.5rem;right:1.5rem}}
.iframe-wrap{position:relative;width:100%;height:calc(100dvh - var(--top-h) - var(--nav-h) - 2.6rem);min-height:420px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
@media (min-width:900px){.iframe-wrap{height:calc(100dvh - var(--top-h) - 3rem)}}
.iframe-wrap iframe{width:100%;height:100%;border:0;display:block}
.progreso{height:3px;background:var(--brand-l);position:fixed;top:var(--top-h);left:0;right:0;z-index:19;overflow:hidden}
.progreso::after{content:"";position:absolute;left:-40%;width:40%;height:100%;background:var(--brand);animation:barra 1s infinite linear}
@keyframes barra{to{left:100%}}
@media (prefers-reduced-motion:reduce){.progreso::after{animation:none;left:0;width:100%}}