/* Reportes Gerencia · BITEL Flota — 3 tabs (Resumen · Sucursales · Áreas) */
:root{
  --blue:#03558B;
  --blue-dark:#023F68;
  --blue-20:#CDDDE8;
  --blue-40:#9BBBD1;
  --yellow:#FFF200;
  --turq:#29BDBC;
  --turq-20:#D4F1F0;
  --ok:#0F8A56;
  --ok-bg:#E6F4EC;
  --ok-strong:#0E6B44;
  --danger:#C7361E;
  --danger-bg:#FADCD5;
  --danger-strong:#9B2916;
  --warn:#D68B00;
  --warn-bg:#FAF0DC;
  --ground:#F5F7FA;
  --surface:#FFFFFF;
  --surface-2:#FAFBFD;
  --border:#E4E7ED;
  --border-strong:#C8CFD9;
  --text:#0F1E2E;
  --text-2:#5A6675;
  --text-muted:#8B95A3;
  --radius:10px;
  --radius-sm:6px;
  --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(15,30,46,0.04),0 1px 3px rgba(15,30,46,0.06);
  --shadow-md:0 2px 6px rgba(15,30,46,0.06),0 4px 12px rgba(15,30,46,0.08);
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,"SF Mono",Menlo,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:var(--font-sans);background:var(--ground);color:var(--text);-webkit-font-smoothing:antialiased;font-feature-settings:'ss01','cv11'}

/* ── Header con logo bien centrado ───────────────────────────────── */
.hdr{background:var(--blue);color:#fff;padding:14px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hdr .logo{
  background:var(--yellow);
  border-radius:8px;
  padding:8px 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:0;
  font-size:0;
  flex-shrink:0;
  min-height:44px;
}
.hdr .logo svg{display:block;width:auto;height:28px;overflow:visible}
.hdr h1{flex:1;margin:0;font-size:18px;font-weight:600;letter-spacing:-0.01em;min-width:220px}
.hdr h1 small{display:block;font-size:12px;font-weight:400;color:rgba(255,255,255,0.75);margin-top:2px;letter-spacing:0}
.hdr .fecha-box{background:rgba(255,255,255,0.12);border-radius:6px;padding:6px 12px;font-family:var(--font-mono);font-size:12px;line-height:1.35;text-align:right}
.hdr .fecha-box b{color:var(--yellow);font-weight:600}

/* ── Tab bar ─────────────────────────────────────────────────────── */
.tabs{background:var(--blue-dark);padding:0 24px;display:flex;gap:2px;overflow-x:auto;scrollbar-width:thin}
.tabs .tab{
  background:transparent;
  color:rgba(255,255,255,0.75);
  border:none;
  padding:12px 20px;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  border-radius:6px 6px 0 0;
  letter-spacing:0.02em;
  transition:background 0.15s, color 0.15s;
}
.tabs .tab:hover{background:rgba(255,255,255,0.08);color:#fff}
.tabs .tab.active{background:var(--ground);color:var(--blue);border-bottom:3px solid var(--yellow)}

/* ── Barra de filtros (contextual por tab) ───────────────────────── */
.filters{background:var(--surface);border-bottom:1px solid var(--border);padding:12px 24px;display:flex;flex-wrap:wrap;gap:12px;align-items:end}
.filters .fld{display:flex;flex-direction:column;gap:4px}
.filters label{font-size:10px;font-weight:600;color:var(--text-2);text-transform:uppercase;letter-spacing:0.08em}
.filters input[type=date],.filters input[type=month],.filters input[type=number],.filters select{
  padding:7px 10px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  background:#fff;color:var(--text);font-family:inherit;font-size:13px;min-width:0
}
.filters select{padding-right:26px;cursor:pointer}
.filters input:focus,.filters select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(3,85,139,0.12)}
.filters .fld-pct input{width:100px}
.filters .fld-suc select{min-width:180px}
.filters .btn{background:var(--yellow);color:var(--blue-dark);border:none;padding:8px 16px;border-radius:var(--radius-sm);font-weight:600;font-size:13px;cursor:pointer;font-family:inherit;letter-spacing:0.01em}
.filters .btn:hover{background:#ffe600}
.filters .btn:disabled{opacity:0.6;cursor:wait}
.filters .btn-ghost{background:transparent;color:var(--blue);border:1px solid var(--border-strong)}
.filters .btn-ghost:hover{background:var(--surface-2);border-color:var(--blue)}
.filters .spacer{flex:1;min-width:0}
.filters .autoref{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);text-align:right}

/* ── KPIs ────────────────────────────────────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:18px 24px 6px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;position:relative;overflow:hidden}
.kpi .kpi-lbl{font-size:12px;font-weight:600;color:var(--text-2);letter-spacing:0.02em}
.kpi .kpi-num{font-family:var(--font-mono);font-weight:700;font-size:44px;color:var(--blue);font-variant-numeric:tabular-nums;line-height:1}
.kpi .kpi-sub{font-size:11px;color:var(--text-muted);font-family:var(--font-mono)}
.kpi.kpi-alert{background:#FDF4F4;border-color:#F1C6C0}
.kpi.kpi-alert .kpi-num{color:var(--danger)}
.kpi.kpi-good{background:#F1FAF4;border-color:#C4E4CE}
.kpi.kpi-good .kpi-num{color:var(--ok)}
.kpi.kpi-turq{background:var(--turq-20);border-color:#A9E2E2}
.kpi.kpi-turq .kpi-num{color:#0E5251}
.kpi.kpi-warn{background:var(--warn-bg);border-color:#F0D9A2}
.kpi.kpi-warn .kpi-num{color:#8A5A00}

/* ── Banner de resumen ───────────────────────────────────────────── */
.banner{margin:14px 24px 4px;padding:11px 16px;border-radius:var(--radius-sm);font-size:13px;display:flex;align-items:center;gap:10px}
.banner .ico{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;flex-shrink:0;font-size:12px}
.banner.banner-ok{background:var(--ok-bg);color:var(--ok-strong);border:1px solid #BEE0CC}
.banner.banner-ok .ico{background:var(--ok)}
.banner.banner-warn{background:var(--warn-bg);color:#8A5A00;border:1px solid #F0D9A2}
.banner.banner-warn .ico{background:var(--warn)}
.banner.banner-bad{background:var(--danger-bg);color:var(--danger-strong);border:1px solid #F1B7AE}
.banner.banner-bad .ico{background:var(--danger)}

/* ── Cabecera "cumplimiento global" (tab Sucursales) ─────────────── */
.gcumpl{margin:14px 24px 8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 20px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;box-shadow:var(--shadow-sm)}
.gcumpl .g-l{display:flex;flex-direction:column;gap:2px}
.gcumpl .g-l small{font-size:11px;color:var(--text-2);text-transform:uppercase;letter-spacing:0.06em;font-weight:600}
.gcumpl .g-pct{font-family:var(--font-mono);font-weight:700;font-size:40px;color:var(--yellow);text-shadow:0 1px 0 rgba(0,0,0,0.25);line-height:1}
.gcumpl.big-blue{background:linear-gradient(90deg,var(--blue-dark),var(--blue));color:#fff;border-color:var(--blue-dark)}
.gcumpl.big-blue .g-l small{color:rgba(255,255,255,0.75)}
.gcumpl.big-blue .g-meta{color:rgba(255,255,255,0.8);font-size:12px}
.gcumpl .g-chips{display:flex;gap:6px;flex-wrap:wrap}
.gcumpl .g-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;background:rgba(255,255,255,0.12);border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:13px;color:#fff;font-weight:600}
.gcumpl .g-chip .dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.gcumpl .g-chip.g-v .dot{background:#3EB472}
.gcumpl .g-chip.g-a .dot{background:#F5C518}
.gcumpl .g-chip.g-r .dot{background:#E5533C}

/* ── Tabla base ──────────────────────────────────────────────────── */
.tbl-wrap{margin:14px 24px 24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow-x:auto}
table.rpt{width:100%;border-collapse:collapse;font-size:13px;color:var(--text);background:var(--surface);min-width:820px}
table.rpt thead th{background:var(--blue-dark);color:#fff;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:0.05em;padding:9px 12px;text-align:center;white-space:nowrap;border-bottom:2px solid var(--blue);position:sticky;top:0;z-index:2;line-height:1.2}
table.rpt thead th small{display:block;font-size:9px;font-weight:500;opacity:0.7;letter-spacing:0.03em;margin-top:2px;text-transform:none}
table.rpt thead th:nth-child(1),
table.rpt thead th.left{text-align:left}
table.rpt tbody td{padding:9px 12px;border-bottom:1px solid var(--border);text-align:center;background:var(--surface);color:var(--text);vertical-align:middle}
table.rpt tbody tr:last-child td{border-bottom:none}
table.rpt tbody tr:hover td{background:var(--surface-2)}
table.rpt .col-num{width:38px;color:var(--text-muted);font-family:var(--font-mono);font-size:12px;text-align:left}
table.rpt .col-suc,table.rpt .col-area{text-align:left;font-weight:700;color:var(--blue-dark);font-size:14px}
table.rpt .col-placas,table.rpt .col-dias,table.rpt .col-cnt{font-family:var(--font-mono);color:var(--text-2);font-variant-numeric:tabular-nums;font-weight:500}
table.rpt .col-cnt.n-v{color:var(--ok);font-weight:700}
table.rpt .col-cnt.n-a{color:#B78200;font-weight:700}
table.rpt .col-cnt.n-r{color:var(--danger);font-weight:700}
table.rpt .col-falta{text-align:left;color:var(--danger);font-size:12px;font-weight:500;min-width:200px}
table.rpt .col-falta.ok{color:var(--text-muted);font-style:italic;font-weight:400}
table.rpt .col-pct{font-family:var(--font-mono);font-weight:600;font-variant-numeric:tabular-nums;min-width:70px}

/* Pills OK / NOK */
.pill{display:inline-flex;align-items:center;justify-content:center;padding:3px 12px;border-radius:var(--radius-pill);font-family:var(--font-sans);font-weight:600;font-size:11px;letter-spacing:0.03em;border:1px solid transparent;min-width:44px}
.pill.ok{background:var(--ok-bg);color:var(--ok);border-color:#BEE0CC}
.pill.nok{background:var(--danger-bg);color:var(--danger);border-color:#F1B7AE}
.pill.warn{background:var(--warn-bg);color:#8A5A00;border-color:#F0D9A2}
.pill.na{background:var(--surface-2);color:var(--text-muted);border-color:var(--border);font-weight:500}

/* Barra de progreso dentro de la tabla */
.bar-wrap{display:flex;align-items:center;gap:10px;min-width:220px}
.bar-track{flex:1;height:22px;background:#EFEFEF;border-radius:4px;border:1px solid var(--border);overflow:hidden;position:relative}
.bar-fill{height:100%;border-radius:3px 0 0 3px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;color:#fff;font-family:var(--font-mono);font-size:11px;font-weight:700;transition:width 0.3s ease;min-width:26px}
.bar-fill.b-ok{background:linear-gradient(90deg,#3EB472,#2A9058)}
.bar-fill.b-warn{background:linear-gradient(90deg,#F5C518,#DDA80B)}
.bar-fill.b-bad{background:linear-gradient(90deg,#E5533C,#C7361E)}
.bar-fill.b-mid{background:linear-gradient(90deg,#8FCF64,#5FA83A)}

/* Sparkline (barras chicas por día) */
.spk{display:inline-flex;gap:2px;align-items:flex-end;height:24px;padding:0 2px}
.spk .spk-bar{width:5px;background:var(--border-strong);border-radius:2px}
.spk .spk-bar.v{background:#3EB472}
.spk .spk-bar.a{background:#F5C518}
.spk .spk-bar.r{background:#E5533C}
.spk .spk-bar.m{background:#8FCF64}

/* Estado carga / vacío / error */
.state{padding:60px 24px;text-align:center;color:var(--text-2);font-size:14px}
.state.err{color:var(--danger)}
.spinner{width:28px;height:28px;margin:0 auto 12px;border:3px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Toast */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--text);color:#fff;padding:10px 18px;border-radius:var(--radius-sm);font-size:13px;box-shadow:var(--shadow-md);z-index:9999;max-width:90vw}
.toast.err{background:var(--danger)}
.toast.ok{background:var(--ok)}

/* Footer */
.foot{padding:14px 24px 24px;text-align:center;color:var(--text-muted);font-size:11px}
.foot b{color:var(--text-2)}

/* Fix dark mode: forzar tabla legible */
table.rpt,
table.rpt tbody td,
table.rpt tbody tr td{color:#0F1E2E !important;background-color:#fff !important}
table.rpt tbody tr:nth-child(even) td{background-color:#F5F7FA !important}
table.rpt tbody tr:hover td{background-color:#EFF4F9 !important}
table.rpt thead th{background-color:#023F68 !important;color:#fff !important}

/* Hidden helper */
.hidden{display:none !important}

/* ── Filas clickeables (drill-down) ─────────────────────────────── */
table.rpt tbody tr.clickable{cursor:pointer}
table.rpt tbody tr.clickable:hover td{background:#EFF7FF !important}
table.rpt tbody tr.clickable td.col-suc::after{content:' ›';color:var(--blue-40);font-weight:400;margin-left:4px}

/* ── Modal drill-down ───────────────────────────────────────────── */
.mdl-back{position:fixed;inset:0;background:rgba(2,63,104,0.55);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;overflow-y:auto}
.mdl{background:var(--surface);border-radius:var(--radius);width:100%;max-width:1100px;max-height:92vh;display:flex;flex-direction:column;box-shadow:0 10px 40px rgba(0,0,0,0.35);overflow:hidden}
.mdl-hd{background:var(--blue);color:#fff;padding:14px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.mdl-hd h2{margin:0;font-size:18px;font-weight:700}
.mdl-hd h2 small{display:block;font-size:11px;font-weight:400;color:rgba(255,255,255,0.75);margin-top:2px}
.mdl-hd .mdl-close{background:transparent;border:none;color:var(--yellow);font-size:26px;cursor:pointer;line-height:1;padding:0 6px}
.mdl-hd .mdl-close:hover{color:#fff}
.mdl-body{padding:16px 20px;overflow-y:auto;background:var(--ground)}
.mdl-body .kpis{padding:0 0 12px;grid-template-columns:repeat(4,1fr)}
.mdl-body .kpi{padding:12px 14px}
.mdl-body .kpi .kpi-num{font-size:28px}
.mdl-foot{padding:10px 20px;background:var(--surface-2);border-top:1px solid var(--border);font-size:11px;color:var(--text-muted);text-align:right}
.mdl .tbl-wrap{margin:0;box-shadow:none;border:1px solid var(--border)}
.mdl-placa{font-family:var(--font-mono);font-weight:700;color:var(--blue-dark);letter-spacing:0.02em}
.mdl-area{font-size:11px;background:var(--blue-20);color:var(--blue-dark);padding:2px 8px;border-radius:var(--radius-pill);font-weight:600}
.mdl-dias{font-family:var(--font-mono);font-size:11px;color:var(--text-2);white-space:normal;max-width:280px;line-height:1.5}
.mdl-dias.empty{color:var(--text-muted);font-style:italic}

/* Progress bar carga masiva */
.prog{padding:20px 24px;text-align:center;color:var(--text-2)}
.prog-bar{width:100%;max-width:420px;margin:12px auto;height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--turq),var(--blue));transition:width 0.3s}
.prog-txt{font-family:var(--font-mono);font-size:12px;margin-top:6px}

/* Responsive */
@media (max-width:1000px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .kpi .kpi-num{font-size:36px}
  .filters{gap:8px}
}
@media (max-width:640px){
  .hdr{padding:12px 16px;gap:12px}
  .hdr h1{font-size:16px}
  .hdr .logo{padding:6px 10px;min-height:36px}
  .hdr .logo svg{height:22px}
  .filters{padding:10px 14px}
  .kpis{padding:14px 14px 4px}
  .banner,.tbl-wrap,.gcumpl{margin-left:14px;margin-right:14px}
  .foot{padding:14px 14px 20px}
  .tabs{padding:0 14px}
  .tabs .tab{padding:10px 14px;font-size:12px}
}