:root{
  --sb:220px; --top:56px;
  --azul:#1e3a8a; --azul2:#1d4ed8; --verde:#059669; --ambar:#d97706; --rojo:#dc2626;
  --bg:#f0f5ff; --card:#fff; --border:rgba(29,78,216,.13); --r:12px;
  --muted:#64748b; --text:#1e3a5f;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,sans-serif;font-size:.83rem;}

/* SIDEBAR */
#sidebar{width:var(--sb);height:100vh;position:fixed;top:0;left:0;z-index:1001;
  background:linear-gradient(180deg,#0f172a 0%,#1e3a8a 100%);
  display:flex;flex-direction:column;padding:16px 10px;overflow-y:auto;}
.sb-brand{color:#fff;font-weight:800;font-size:.95rem;display:flex;align-items:center;
  gap:8px;padding:4px 8px 14px;border-bottom:1px solid rgba(255,255,255,.15);margin-bottom:10px;}
.sb-section{color:rgba(255,255,255,.4);font-size:.62rem;text-transform:uppercase;
  letter-spacing:.07em;padding:10px 10px 3px;}
.sb-link{color:rgba(255,255,255,.72);border-radius:7px;padding:7px 10px;
  display:flex;align-items:center;gap:8px;text-decoration:none;
  margin-bottom:2px;transition:background .15s;}
.sb-link:hover,.sb-link.active{background:rgba(255,255,255,.16);color:#fff;}
.sb-user{margin-top:auto;border-top:1px solid rgba(255,255,255,.15);padding-top:12px;color:#fff;}
.sb-user .nm{font-weight:700;font-size:.82rem;}
.sb-user .rl{font-size:.7rem;opacity:.65;}

/* CONTENT */
#content{margin-left:var(--sb);padding:22px;min-height:100vh;}

/* TOPBAR */
.topbar{background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  padding:11px 16px;margin-bottom:18px;display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;box-shadow:0 2px 8px rgba(29,78,216,.06);}

/* TIPO TABS */
.tipo-tab{background:var(--bg);border:1.5px solid var(--border);border-radius:8px;
  padding:6px 16px;font-size:.78rem;font-weight:700;cursor:pointer;color:var(--muted);
  transition:all .15s;}
.tipo-tab.active{background:var(--azul2);color:#fff;border-color:var(--azul2);}
.tipo-tab.tab-reserva.active{background:#7c3aed;border-color:#7c3aed;}

/* KPI STRIP */
.kpi-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;margin-bottom:18px;}
.kpi-b{background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  padding:12px 14px;box-shadow:0 2px 6px rgba(29,78,216,.05);}
.kpi-b .lbl{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
.kpi-b .val{font-size:1.1rem;font-weight:800;margin-top:3px;}
.kpi-b .sub{font-size:.68rem;color:var(--muted);margin-top:1px;}

/* GRID FICHAS */
.fichas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;margin-bottom:22px;}
.ficha-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  padding:16px 16px 14px;box-shadow:0 2px 8px rgba(29,78,216,.06);cursor:pointer;
  transition:box-shadow .15s,transform .1s;position:relative;overflow:hidden;}
.ficha-card:hover{box-shadow:0 6px 20px rgba(29,78,216,.13);transform:translateY(-2px);}
.ficha-card .fc-tipo{position:absolute;top:10px;right:10px;font-size:.62rem;font-weight:800;
  padding:2px 8px;border-radius:99px;}
.fc-tipo.ficha{background:#dbeafe;color:#1d4ed8;}
.fc-tipo.reserva{background:#ede9fe;color:#6d28d9;}
.ficha-card .fc-cod{font-size:.72rem;font-weight:700;color:var(--muted);margin-bottom:3px;}
.ficha-card .fc-desc{font-weight:700;font-size:.82rem;color:var(--text);margin-bottom:8px;
  line-height:1.3;min-height:36px;}
.ficha-card .fc-unidad{font-size:.68rem;color:var(--muted);margin-bottom:10px;}
.fc-nums{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:10px;}
.fc-num-item .fc-num-lbl{font-size:.62rem;font-weight:600;color:var(--muted);text-transform:uppercase;}
.fc-num-item .fc-num-val{font-size:.82rem;font-weight:800;}

/* BARRA PROGRESO */
.prog-track{height:6px;background:#e2e8f0;border-radius:99px;overflow:hidden;margin-bottom:4px;}
.prog-fill{height:100%;border-radius:99px;transition:width .6s ease;}
.prog-pct{font-size:.7rem;font-weight:800;text-align:right;}

/* PANEL DETALLE */
#panel-detalle{background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  padding:20px;box-shadow:0 4px 18px rgba(29,78,216,.1);margin-bottom:22px;
  display:none;}
#panel-detalle.visible{display:block;}
.det-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;flex-wrap:wrap;}
.det-badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}

/* VELOCÍMETROS */
.gauges-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:18px;}
.gauge-wrap{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);
  padding:16px 12px 10px;text-align:center;}
.gauge-wrap .g-title{font-size:.75rem;font-weight:700;color:var(--text);margin-bottom:6px;}
.g-svg-wrap{width:180px;height:100px;margin:0 auto 4px;}
.g-pct{display:none;}
.g-sub{font-size:.7rem;color:var(--muted);}
.g-monto{font-size:.8rem;font-weight:700;margin-top:2px;}

/* CHARTS */
.charts-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px;}
.chart-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:14px;}
.chart-card h6{font-size:.78rem;font-weight:700;margin-bottom:10px;}
.chart-card .ch-wrap{height:200px;position:relative;}

/* TABLA */
.v-table{width:100%;border-collapse:collapse;font-size:.77rem;}
.v-table th{padding:8px 11px;font-weight:700;color:var(--muted);background:var(--bg);
  border-bottom:2px solid var(--border);white-space:nowrap;text-align:right;}
.v-table th:first-child{text-align:left;}
.v-table td{padding:7px 11px;border-bottom:1px solid #f1f5f9;text-align:right;vertical-align:middle;}
.v-table td:first-child{text-align:left;}
.v-table tr:hover td{background:#f0f7ff;}
.v-table tfoot tr td{background:var(--bg);font-weight:800;border-top:2px solid var(--border);}

@media(max-width:768px){
  #sidebar{display:none;}
  #content{margin-left:0;padding:14px;}
  .fichas-grid{grid-template-columns:1fr;}
  .charts-row{grid-template-columns:1fr;}
}