/* ═══════════════════════════════════════════════════════════════════════════
   VERBIER ELECTRIC PREMIUM · TAXI MANAGEMENT SUITE
   Design system — Phase 1 prototype (no build step)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── 1. TOKENS ─────────────────────────── */
:root {
  /* brand */
  --navy-900:#08152B; --navy-800:#0B1F3A; --navy-700:#122A4C; --navy-600:#1B3A63;
  --blue-600:#1D5FD6; --blue-500:#2E7DF7; --blue-400:#5B9BFF;
  --ice-400:#38BDF8; --ice-300:#7DD3FC; --ice-200:#BAE6FD;
  --mint-500:#10B981; --amber-500:#F59E0B; --orange-600:#EA580C;
  --rose-500:#E11D48; --violet-500:#7C3AED; --slate-500:#64748B;

  /* data-viz palette (colour-blind aware ordering) */
  --c1:#2E7DF7; --c2:#10B981; --c3:#F59E0B; --c4:#7C3AED;
  --c5:#06B6D4; --c6:#E11D48; --c7:#84CC16; --c8:#F97316;
  --c9:#0EA5E9; --c10:#A855F7; --c11:#14B8A6; --c12:#EF4444;

  /* semantic */
  --pos:#0E9F6E; --neg:#DC2626; --warn:#D97706; --info:#2563EB;

  /* radii + shadow */
  --r-xs:6px; --r-sm:9px; --r-md:13px; --r-lg:18px; --r-xl:24px; --r-full:999px;
  --sh-1:0 1px 2px rgba(9,22,44,.06), 0 1px 3px rgba(9,22,44,.05);
  --sh-2:0 2px 6px rgba(9,22,44,.07), 0 8px 20px -8px rgba(9,22,44,.14);
  --sh-3:0 12px 34px -10px rgba(9,22,44,.26), 0 3px 10px rgba(9,22,44,.10);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.55);

  /* type */
  --font: "Inter var","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-num: "SF Mono",ui-monospace,"JetBrains Mono","Cascadia Mono",Consolas,monospace;
  --fs-9:10px; --fs-10:11px; --fs-11:12px; --fs-12:13px; --fs-13:14px;
  --fs-14:15px; --fs-16:17px; --fs-18:20px; --fs-22:24px; --fs-28:30px; --fs-34:38px;

  /* layout */
  --sb-w:266px; --sb-w-collapsed:78px; --top-h:62px; --foot-h:38px;
  --gap:16px; --gap-sm:10px; --gap-lg:24px;
  --maxw:1720px;

  --tr-fast:120ms cubic-bezier(.4,0,.2,1);
  --tr:190ms cubic-bezier(.4,0,.2,1);
  --tr-slow:320ms cubic-bezier(.16,1,.3,1);
}

/* LIGHT */
[data-theme="light"] {
  --bg:#EEF2F8; --bg-2:#E6ECF5; --surface:#FFFFFF; --surface-2:#F7F9FC; --surface-3:#EFF3F9;
  --sidebar-bg:linear-gradient(178deg,#0B1F3A 0%,#0A1A33 55%,#08152B 100%);
  --sidebar-fg:#C9D8EE; --sidebar-fg-strong:#FFFFFF; --sidebar-hover:rgba(125,211,252,.10);
  --sidebar-active:rgba(46,125,247,.22); --sidebar-border:rgba(125,211,252,.14);
  --text:#0D1B2E; --text-2:#3C4E68; --muted:#6B7C96; --faint:#93A2B8;
  --border:#DFE6F0; --border-2:#EAF0F7; --border-strong:#C8D4E4;
  --grid:rgba(13,27,46,.07); --axis:#8595AD;
  --track:#E7EDF6;
  --glass:rgba(255,255,255,.82);
  --hover:rgba(46,125,247,.055); --sel:rgba(46,125,247,.12);
}

/* DARK */
[data-theme="dark"] {
  --bg:#070F1E; --bg-2:#0A1425; --surface:#101C31; --surface-2:#16243D; --surface-3:#1B2B47;
  --sidebar-bg:linear-gradient(178deg,#0A1730 0%,#081426 60%,#060E1D 100%);
  --sidebar-fg:#9FB4D4; --sidebar-fg-strong:#EAF2FF; --sidebar-hover:rgba(125,211,252,.09);
  --sidebar-active:rgba(46,125,247,.26); --sidebar-border:rgba(125,211,252,.12);
  --text:#E9F0FA; --text-2:#B9C8DE; --muted:#8A9CB8; --faint:#6B7C96;
  --border:#1E2E4A; --border-2:#182742; --border-strong:#2C4266;
  --grid:rgba(233,240,250,.08); --axis:#6B7C96;
  --track:#1C2C46;
  --glass:rgba(16,28,49,.86);
  --hover:rgba(125,211,252,.07); --sel:rgba(46,125,247,.2);
  --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 4px 14px rgba(0,0,0,.42);
  --sh-3:0 18px 44px -12px rgba(0,0,0,.66);
}

[data-density="compact"] { --gap:12px; --gap-sm:8px; --gap-lg:18px; }

/* ─────────────────────────── 2. RESET ─────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
/* El atributo hidden tiene que ganar SIEMPRE. Si no, un componente que declare
   display (grid, flex…) sigue visible aunque lleve [hidden] y puede acabar
   cubriendo toda la pantalla e interceptando los clics. */
[hidden] { display:none !important; }
html,body { height:100%; }
body {
  margin:0; font-family:var(--font); background:var(--bg); color:var(--text);
  font-size:var(--fs-13); line-height:1.48; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow:hidden;
}
h1,h2,h3,h4,h5,p,figure { margin:0; }
a { color:var(--blue-500); text-decoration:none; }
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; background:none; border:0; }
ul,ol { margin:0; padding:0; list-style:none; }
svg { display:block; }
::selection { background:var(--sel); }
:focus-visible { outline:2px solid var(--blue-500); outline-offset:2px; border-radius:var(--r-xs); }
.num { font-family:var(--font-num); font-variant-numeric:tabular-nums; }
.mono { font-family:var(--font-num); }
.nowrap { white-space:nowrap; }
.mt-a { margin-top:auto; }
.hide-sm { display:initial; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* scrollbars */
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-track { background:transparent; }
*::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:99px; border:3px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover { background:var(--muted); background-clip:content-box; }

/* ─────────────────────────── 3. APP LAYOUT ─────────────────────────── */
.app { display:flex; height:100vh; overflow:hidden; }

.sidebar {
  width:var(--sb-w); flex:0 0 var(--sb-w); background:var(--sidebar-bg); color:var(--sidebar-fg);
  display:flex; flex-direction:column; transition:width var(--tr-slow), flex-basis var(--tr-slow);
  border-right:1px solid var(--sidebar-border); position:relative; z-index:40;
}
.app.is-collapsed .sidebar { width:var(--sb-w-collapsed); flex-basis:var(--sb-w-collapsed); }

.sidebar__brand {
  display:flex; align-items:center; gap:11px; padding:0 16px; height:var(--top-h);
  border-bottom:1px solid var(--sidebar-border); flex:0 0 auto;
}
.brand__mark { width:34px; height:34px; flex:0 0 34px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--blue-500),var(--ice-400)); box-shadow:0 4px 14px -4px rgba(46,125,247,.7); }
.brand__mark svg { width:20px; height:20px; }
.brand__text { display:flex; flex-direction:column; line-height:1.15; overflow:hidden; }
.brand__text strong { color:var(--sidebar-fg-strong); font-size:var(--fs-13); letter-spacing:.2px; }
.brand__text small { font-size:var(--fs-9); text-transform:uppercase; letter-spacing:.11em; color:var(--ice-300); opacity:.85; }
.app.is-collapsed .brand__text { display:none; }
.sidebar__collapse { margin-left:auto; color:var(--sidebar-fg); }
.sidebar__collapse:hover { background:var(--sidebar-hover); }
.app.is-collapsed .sidebar__collapse { margin:0 auto; }
.app.is-collapsed .sidebar__collapse svg { transform:rotate(180deg); }

.sidebar__season { padding:12px 16px 4px; }
.season-chip {
  display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--r-sm);
  background:rgba(125,211,252,.09); border:1px solid var(--sidebar-border); font-size:var(--fs-10);
  color:var(--sidebar-fg); overflow:hidden; white-space:nowrap;
}
.season-chip b { color:var(--sidebar-fg-strong); }
.season-chip .dot { width:7px; height:7px; border-radius:50%; flex:0 0 7px; }
.app.is-collapsed .season-chip span:not(.dot) { display:none; }
.app.is-collapsed .season-chip { justify-content:center; padding:8px 0; }

.sidebar__nav { flex:1 1 auto; overflow-y:auto; overflow-x:hidden; padding:10px 10px 16px; }
.sidebar__nav::-webkit-scrollbar { width:6px; }
.nav-group { margin-bottom:4px; }
.nav-group__title { font-size:var(--fs-9); text-transform:uppercase; letter-spacing:.12em; color:var(--ice-300);
  opacity:.6; padding:12px 12px 6px; }
.app.is-collapsed .nav-group__title { text-align:center; padding:12px 0 6px; overflow:hidden; height:26px; }
.app.is-collapsed .nav-group__title span { display:none; }

.nav-item {
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:var(--r-sm);
  color:var(--sidebar-fg); font-size:var(--fs-12); width:100%; text-align:left;
  transition:background var(--tr-fast), color var(--tr-fast); position:relative; margin-bottom:1px;
}
.nav-item:hover { background:var(--sidebar-hover); color:var(--sidebar-fg-strong); }
.nav-item.is-active { background:var(--sidebar-active); color:#fff; font-weight:600; }
.nav-item.is-active::before { content:""; position:absolute; left:-10px; top:50%; transform:translateY(-50%);
  width:3px; height:20px; border-radius:0 3px 3px 0; background:var(--ice-400); }
.nav-item.sub { padding-left:40px; font-size:var(--fs-11); }
.nav-item.sub .nav-item__icon { display:none; }
.nav-item__icon { width:18px; height:18px; flex:0 0 18px; opacity:.9; }
.nav-item__label { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-item__count { font-size:var(--fs-9); font-weight:700; padding:2px 6px; border-radius:var(--r-full);
  background:rgba(125,211,252,.16); color:var(--ice-200); font-family:var(--font-num); }
.nav-item__count.warn { background:rgba(245,158,11,.22); color:#FCD34D; }
.nav-item__count.danger { background:rgba(225,29,72,.24); color:#FDA4AF; }
.app.is-collapsed .nav-item { justify-content:center; padding:10px 0; }
.app.is-collapsed .nav-item__label, .app.is-collapsed .nav-item__count { display:none; }
.app.is-collapsed .nav-item.sub { display:none; }
.app.is-collapsed .nav-group.has-active .nav-item.sub { display:flex; }

.sidebar__foot { flex:0 0 auto; padding:10px; border-top:1px solid var(--sidebar-border); }
.sidebar__status { display:grid; gap:6px; padding:4px 4px 10px; }
.mini-veh { display:flex; align-items:center; gap:8px; font-size:var(--fs-10); color:var(--sidebar-fg); }
.mini-veh__bar { flex:1 1 auto; height:5px; border-radius:99px; background:rgba(255,255,255,.11); overflow:hidden; }
.mini-veh__bar i { display:block; height:100%; border-radius:99px; }
.mini-veh b { font-family:var(--font-num); font-size:var(--fs-10); color:var(--sidebar-fg-strong); min-width:30px; text-align:right; }
.app.is-collapsed .mini-veh span.lbl { display:none; }
.sidebar__user { display:flex; align-items:center; gap:10px; width:100%; padding:8px; border-radius:var(--r-sm);
  color:var(--sidebar-fg); text-align:left; }
.sidebar__user:hover { background:var(--sidebar-hover); }
.sidebar__user__meta { display:flex; flex-direction:column; line-height:1.25; overflow:hidden; }
.sidebar__user__meta b { color:var(--sidebar-fg-strong); font-size:var(--fs-11); }
.sidebar__user__meta small { font-size:var(--fs-9); color:var(--ice-300); }
.app.is-collapsed .sidebar__user__meta { display:none; }

/* main column */
.main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; height:100vh; }

.topbar {
  height:var(--top-h); flex:0 0 var(--top-h); display:flex; align-items:center; gap:12px;
  padding:0 18px; background:var(--glass); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); position:relative; z-index:30;
}
.topbar__burger { display:grid; }   /* siempre visible: pliega el menú en escritorio, lo abre en móvil */
.topbar__crumb { display:flex; align-items:baseline; gap:8px; min-width:0; }
.crumb__title { font-size:var(--fs-16); font-weight:700; letter-spacing:-.2px; white-space:nowrap; }
.crumb__sub { font-size:var(--fs-11); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crumb__sep { color:var(--faint); }

.topbar__search { position:relative; margin-left:auto; width:min(340px,32vw); }
.topbar__search input {
  width:100%; height:38px; padding:0 78px 0 36px; border-radius:var(--r-full);
  border:1px solid var(--border); background:var(--surface-2); color:var(--text); font-size:var(--fs-12);
  transition:border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.topbar__search input::placeholder { color:var(--faint); }
.topbar__search input:focus { outline:none; border-color:var(--blue-500); box-shadow:0 0 0 3px var(--sel); background:var(--surface); }
.search__icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--faint); pointer-events:none; }
.topbar__search kbd {
  position:absolute; right:10px; top:50%; transform:translateY(-50%); font-family:var(--font-num);
  font-size:var(--fs-9); color:var(--muted); background:var(--surface-3); border:1px solid var(--border);
  border-radius:5px; padding:2px 5px; pointer-events:none;
}
.topbar__search kbd:nth-of-type(2) { right:34px; }
.search__results {
  position:absolute; top:46px; left:0; right:0; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); box-shadow:var(--sh-3); max-height:60vh; overflow:auto; padding:6px; z-index:60;
}
.search__group { font-size:var(--fs-9); text-transform:uppercase; letter-spacing:.1em; color:var(--faint); padding:8px 10px 4px; }
.search__hit { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:8px 10px; border-radius:var(--r-sm); }
.search__hit:hover, .search__hit.is-cur { background:var(--hover); }
.search__hit b { font-size:var(--fs-12); font-weight:600; }
.search__hit small { color:var(--muted); font-size:var(--fs-10); margin-left:auto; }

.topbar__actions { display:flex; align-items:center; gap:8px; }
.icon-btn {
  width:36px; height:36px; border-radius:var(--r-sm); display:grid; place-items:center; color:var(--text-2);
  transition:background var(--tr-fast), color var(--tr-fast); position:relative;
}
.icon-btn:hover { background:var(--hover); color:var(--text); }
.icon-btn svg { width:19px; height:19px; }
.icon-btn--sm { width:27px; height:27px; border-radius:8px; }
.icon-btn--sm svg { width:15px; height:15px; }
.icon-btn.has-badge .badge-dot { position:absolute; top:7px; right:7px; width:8px; height:8px; border-radius:50%;
  background:var(--rose-500); border:2px solid var(--surface); }
.icon-btn.has-badge.no-alerts .badge-dot { display:none; }

.langpicker { position:relative; }
.langpicker__btn { display:flex; align-items:center; gap:6px; height:36px; padding:0 10px; border-radius:var(--r-sm);
  border:1px solid var(--border); background:var(--surface-2); font-size:var(--fs-11); font-weight:600; }
.langpicker__btn:hover { background:var(--surface-3); }
.langpicker__btn .flag { font-size:15px; line-height:1; }
.langpicker__menu { position:absolute; right:0; top:42px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); box-shadow:var(--sh-3); padding:6px; min-width:190px; z-index:60; }
.langpicker__menu button { display:flex; align-items:center; gap:9px; width:100%; padding:8px 10px; border-radius:var(--r-sm);
  font-size:var(--fs-12); text-align:left; }
.langpicker__menu button:hover { background:var(--hover); }
.langpicker__menu button.is-on { background:var(--sel); font-weight:600; }
.langpicker__menu button small { margin-left:auto; color:var(--faint); font-size:var(--fs-9); text-transform:uppercase; }

.alerts-panel {
  position:absolute; top:var(--top-h); right:18px; width:min(430px,92vw); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-3); z-index:70;
  max-height:70vh; overflow:auto; padding:10px;
}
.alert-row { display:flex; gap:11px; padding:11px; border-radius:var(--r-sm); align-items:flex-start; }
.alert-row:hover { background:var(--hover); }
.alert-row__ico { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:0 0 30px; }
.alert-row__ico svg { width:16px; height:16px; }
.alert-row b { display:block; font-size:var(--fs-12); }
.alert-row p { font-size:var(--fs-11); color:var(--muted); }
.alert-row time { font-size:var(--fs-10); color:var(--faint); margin-left:auto; white-space:nowrap; }

.view { flex:1 1 auto; overflow-y:auto; overflow-x:hidden; padding:var(--gap-lg); scroll-behavior:smooth; }
.view > .view-inner { max-width:var(--maxw); margin:0 auto; display:flex; flex-direction:column; gap:var(--gap-lg); }
.view:focus { outline:none; }

.footer { height:var(--foot-h); flex:0 0 var(--foot-h); display:flex; align-items:center; justify-content:space-between;
  padding:0 18px; border-top:1px solid var(--border); font-size:var(--fs-10); color:var(--muted); background:var(--surface); }
.footer__right { display:flex; align-items:center; gap:8px; }
.dot-sep { width:3px; height:3px; border-radius:50%; background:var(--faint); }

/* ─────────────────────────── 4. PAGE HEADER ─────────────────────────── */
.page-head { display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap; }
.page-head__txt { flex:1 1 320px; min-width:0; }
.page-head h1 { font-size:var(--fs-22); font-weight:750; letter-spacing:-.4px; display:flex; align-items:center; gap:10px; }
.page-head h1 > svg { width:23px; height:23px; flex:0 0 23px; }
.section-head h2 > svg, .card__head h3 > svg { width:15px; height:15px; flex:0 0 15px; }
.page-head p { color:var(--muted); font-size:var(--fs-12); margin-top:3px; max-width:82ch; }
.page-head__actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.section-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.section-head h2 { font-size:var(--fs-14); font-weight:700; letter-spacing:-.15px; display:flex; align-items:center; gap:8px; }
.section-head h3 { font-size:var(--fs-13); font-weight:650; }
.section-head .spacer { flex:1 1 auto; }
.section-head__hint { font-size:var(--fs-10); color:var(--muted); }

/* ─────────────────────────── 5. BUTTONS & CONTROLS ─────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px; height:38px; padding:0 15px;
  border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface); color:var(--text);
  font-size:var(--fs-12); font-weight:600; white-space:nowrap; transition:all var(--tr-fast);
}
.btn:hover { background:var(--surface-3); border-color:var(--border-strong); }
.btn:active { transform:translateY(1px); }
.btn svg { width:16px; height:16px; }
.btn--primary { background:linear-gradient(180deg,var(--blue-500),var(--blue-600)); border-color:var(--blue-600); color:#fff;
  box-shadow:0 1px 2px rgba(29,95,214,.3); }
.btn--primary:hover { background:linear-gradient(180deg,var(--blue-400),var(--blue-500)); border-color:var(--blue-500); }
.btn--ghost { background:transparent; border-color:transparent; color:var(--text-2); }
.btn--ghost:hover { background:var(--hover); }
.btn--danger { background:var(--rose-500); border-color:var(--rose-500); color:#fff; }
.btn--danger:hover { background:#BE123C; }
.btn--dark { background:var(--navy-800); border-color:var(--navy-800); color:#fff; }
.btn--dark:hover { background:var(--navy-700); }
.btn--sm { height:32px; padding:0 11px; font-size:var(--fs-11); }
.btn--xs { height:26px; padding:0 9px; font-size:var(--fs-10); border-radius:var(--r-xs); }
.btn--block { width:100%; }
.btn[disabled] { opacity:.5; pointer-events:none; }
.btn-group { display:inline-flex; border:1px solid var(--border); border-radius:var(--r-sm); overflow:hidden; background:var(--surface); }
.btn-group .btn { border:0; border-radius:0; height:34px; }
.btn-group .btn + .btn { border-left:1px solid var(--border); }

.seg { display:inline-flex; padding:3px; gap:2px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm); }
.seg button { padding:6px 12px; border-radius:7px; font-size:var(--fs-11); font-weight:600; color:var(--muted); transition:all var(--tr-fast); }
.seg button:hover { color:var(--text); }
.seg button.is-on { background:var(--surface); color:var(--text); box-shadow:var(--sh-1); }
.seg--sm button { padding:5px 9px; font-size:var(--fs-10); }

.field { display:flex; flex-direction:column; gap:5px; min-width:0; }
.field > label { font-size:var(--fs-10); font-weight:650; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.input, .select, .textarea {
  height:38px; padding:0 11px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface);
  color:var(--text); font-size:var(--fs-12); width:100%; transition:border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.textarea { height:auto; padding:9px 11px; resize:vertical; min-height:74px; }
.select { appearance:none; padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7C96' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center; background-size:15px; }
.input:focus, .select:focus, .textarea:focus { outline:none; border-color:var(--blue-500); box-shadow:0 0 0 3px var(--sel); }
.input--sm, .select--sm { height:32px; font-size:var(--fs-11); }
.field-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; }
.field-row--full { grid-column:1/-1; }

.check { display:flex; align-items:center; gap:8px; font-size:var(--fs-12); cursor:pointer; }
.check input { width:16px; height:16px; accent-color:var(--blue-500); }
.switch { position:relative; width:40px; height:22px; flex:0 0 40px; }
.switch input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.switch i { position:absolute; inset:0; border-radius:99px; background:var(--track); transition:background var(--tr); }
.switch i::after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform var(--tr); }
.switch input:checked + i { background:var(--blue-500); }
.switch input:checked + i::after { transform:translateX(18px); }

.toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.toolbar .spacer { flex:1 1 auto; }
.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px; border-radius:var(--r-full);
  border:1px solid var(--border); background:var(--surface); font-size:var(--fs-11); font-weight:600; color:var(--text-2); }
.chip:hover { border-color:var(--border-strong); }
.chip.is-on { background:var(--navy-800); border-color:var(--navy-800); color:#fff; }
[data-theme="dark"] .chip.is-on { background:var(--blue-500); border-color:var(--blue-500); }
.chip .x { opacity:.6; }
.chip .x:hover { opacity:1; }

/* ─────────────────────────── 6. CARDS & GRID ─────────────────────────── */
.grid { display:grid; gap:var(--gap); }
.g-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.g-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.g-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.g-6 { grid-template-columns:repeat(6,minmax(0,1fr)); }
.g-auto { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.g-21 { grid-template-columns:2fr 1fr; }
.g-12 { grid-template-columns:1fr 2fr; }
.g-31 { grid-template-columns:3fr 1fr; }
.span-2 { grid-column:span 2; }
.span-3 { grid-column:span 3; }
.span-4 { grid-column:span 4; }
.span-full { grid-column:1/-1; }

.card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); display:flex; flex-direction:column; min-width:0; overflow:hidden;
}
.card--pad { padding:var(--gap); }
.card__head { display:flex; align-items:center; gap:12px; padding:14px var(--gap); border-bottom:1px solid var(--border-2); flex:0 0 auto; }
.card__head h3 { font-size:var(--fs-13); font-weight:700; letter-spacing:-.1px; display:flex; align-items:center; gap:8px; }
.card__head p { font-size:var(--fs-10); color:var(--muted); }
.card__head .spacer { flex:1 1 auto; }
.card__body { padding:var(--gap); flex:1 1 auto; min-width:0; }
.card__body--flush { padding:0; }
.card__foot { padding:11px var(--gap); border-top:1px solid var(--border-2); font-size:var(--fs-11); color:var(--muted);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.card--accent { border-top:3px solid var(--blue-500); }
.card--flush-body > .card__body { padding:0; }

/* KPI */
.kpi { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:14px 15px;
  box-shadow:var(--sh-1); display:flex; flex-direction:column; gap:9px; position:relative; overflow:hidden; min-width:0;
  transition:box-shadow var(--tr), transform var(--tr); }
.kpi:hover { box-shadow:var(--sh-2); }
.kpi::after { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--kpi-accent,var(--blue-500)); opacity:.9; }
.kpi__top { display:flex; align-items:center; gap:9px; }
.kpi__ico { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; flex:0 0 32px;
  background:color-mix(in srgb, var(--kpi-accent,var(--blue-500)) 14%, transparent); color:var(--kpi-accent,var(--blue-500)); }
.kpi__ico svg { width:17px; height:17px; }
.kpi__label { font-size:var(--fs-10); text-transform:uppercase; letter-spacing:.075em; color:var(--muted); font-weight:650; }
.kpi__val { font-size:var(--fs-28); font-weight:750; letter-spacing:-1px; line-height:1.05; font-family:var(--font-num); }
.kpi__val small { font-size:var(--fs-12); font-weight:650; color:var(--muted); margin-left:4px; letter-spacing:0; }
.kpi__row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.kpi__delta { display:inline-flex; align-items:center; gap:3px; font-size:var(--fs-11); font-weight:700; font-family:var(--font-num);
  padding:2px 7px; border-radius:var(--r-full); }
.kpi__delta.up { color:var(--pos); background:color-mix(in srgb,var(--pos) 12%,transparent); }
.kpi__delta.down { color:var(--neg); background:color-mix(in srgb,var(--neg) 12%,transparent); }
.kpi__delta.flat { color:var(--muted); background:var(--surface-3); }
.kpi__delta svg { width:12px; height:12px; }
.kpi__sub { font-size:var(--fs-10); color:var(--muted); }
.kpi__spark { margin-top:-4px; }
.kpi--row { flex-direction:row; align-items:center; gap:14px; }
.kpi--row .kpi__main { display:flex; flex-direction:column; gap:3px; min-width:0; }
.kpi--mini .kpi__val { font-size:var(--fs-18); }

/* stat strip */
.strip { display:flex; align-items:stretch; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); overflow:hidden; flex-wrap:wrap; }
.strip__cell { flex:1 1 150px; padding:13px 16px; border-right:1px solid var(--border-2); min-width:0; }
.strip__cell:last-child { border-right:0; }
.strip__cell .k { font-size:var(--fs-10); color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:650; }
.strip__cell .v { font-size:var(--fs-18); font-weight:750; font-family:var(--font-num); letter-spacing:-.4px; }
.strip__cell .d { font-size:var(--fs-10); color:var(--muted); }
.strip--dark { background:linear-gradient(120deg,var(--navy-800),var(--navy-600)); border-color:transparent; color:#fff; }
.strip--dark .strip__cell { border-color:rgba(255,255,255,.12); }
.strip--dark .strip__cell .k { color:var(--ice-200); opacity:.85; }
.strip--dark .strip__cell .d { color:var(--ice-200); opacity:.7; }

/* ─────────────────────────── 7. TABLES ─────────────────────────── */
.table-wrap { overflow:auto; max-width:100%; }
table.tbl { width:100%; border-collapse:separate; border-spacing:0; font-size:var(--fs-12); }
table.tbl thead th {
  position:sticky; top:0; z-index:2; background:var(--surface-2); text-align:left; font-size:var(--fs-10);
  text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; padding:9px 12px;
  border-bottom:1px solid var(--border); white-space:nowrap;
}
table.tbl thead th.sortable { cursor:pointer; user-select:none; }
table.tbl thead th.sortable:hover { color:var(--text); }
table.tbl thead th .sort-ind { opacity:.35; margin-left:4px; }
table.tbl thead th.is-sorted .sort-ind { opacity:1; color:var(--blue-500); }
table.tbl tbody td { padding:9px 12px; border-bottom:1px solid var(--border-2); vertical-align:middle; }
table.tbl tbody tr:hover { background:var(--hover); }
table.tbl tbody tr.is-click { cursor:pointer; }
table.tbl tbody tr.is-sel { background:var(--sel); }
table.tbl tfoot td { padding:10px 12px; border-top:2px solid var(--border); font-weight:700; background:var(--surface-2); }
table.tbl td.r, table.tbl th.r { text-align:right; }
table.tbl td.c, table.tbl th.c { text-align:center; }
table.tbl .num { font-family:var(--font-num); font-variant-numeric:tabular-nums; }
table.tbl--zebra tbody tr:nth-child(even) { background:var(--surface-2); }
table.tbl--zebra tbody tr:nth-child(even):hover { background:var(--hover); }
table.tbl--compact tbody td { padding:6px 10px; }
.cell-strong { font-weight:650; }
.cell-sub { font-size:var(--fs-10); color:var(--muted); }
.cell-2l { display:flex; flex-direction:column; line-height:1.3; }
.cell-with-avatar { display:flex; align-items:center; gap:9px; }
.pos { color:var(--pos); } .neg { color:var(--neg); } .warnc { color:var(--warn); }
.muted { color:var(--muted); } .faint { color:var(--faint); }

/* ─────────────────────────── 8. BADGES / PILLS / AVATARS ─────────────────────────── */
.pill { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:var(--r-full);
  font-size:var(--fs-10); font-weight:700; letter-spacing:.01em; white-space:nowrap;
  background:var(--surface-3); color:var(--text-2); border:1px solid transparent; }
.pill .dot { width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 6px; }
.pill--ok { background:color-mix(in srgb,var(--pos) 13%,transparent); color:var(--pos); }
.pill--info { background:color-mix(in srgb,var(--info) 13%,transparent); color:var(--info); }
.pill--warn { background:color-mix(in srgb,var(--warn) 15%,transparent); color:var(--warn); }
.pill--danger { background:color-mix(in srgb,var(--neg) 13%,transparent); color:var(--neg); }
.pill--violet { background:color-mix(in srgb,var(--violet-500) 14%,transparent); color:var(--violet-500); }
.pill--muted { background:var(--surface-3); color:var(--muted); }
.pill--solid { background:var(--navy-800); color:#fff; }
.pill--lg { padding:4px 11px; font-size:var(--fs-11); }
[data-theme="dark"] .pill--ok { color:#34D399; } [data-theme="dark"] .pill--warn { color:#FBBF24; }
[data-theme="dark"] .pill--danger { color:#FB7185; } [data-theme="dark"] .pill--info { color:#60A5FA; }

.avatar { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex:0 0 34px;
  font-size:var(--fs-11); font-weight:750; color:#fff; background:linear-gradient(140deg,var(--navy-600),var(--navy-800)); }
.avatar--sm { width:26px; height:26px; flex-basis:26px; font-size:var(--fs-9); }
.avatar--lg { width:52px; height:52px; flex-basis:52px; font-size:var(--fs-16); }
.avatar--sq { border-radius:var(--r-sm); }
.avatar--ring { box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--blue-500); }

.tag { display:inline-block; padding:2px 8px; border-radius:var(--r-xs); background:var(--surface-3); color:var(--text-2);
  font-size:var(--fs-10); font-weight:600; }

/* ─────────────────────────── 9. TABS ─────────────────────────── */
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--border); overflow-x:auto; }
.tabs button { padding:10px 14px; font-size:var(--fs-12); font-weight:600; color:var(--muted); border-bottom:2px solid transparent;
  margin-bottom:-1px; white-space:nowrap; display:flex; align-items:center; gap:7px; transition:all var(--tr-fast); }
.tabs button:hover { color:var(--text); }
.tabs button.is-on { color:var(--blue-500); border-bottom-color:var(--blue-500); }
.tabs button .cnt { font-size:var(--fs-9); background:var(--surface-3); border-radius:var(--r-full); padding:1px 6px;
  font-family:var(--font-num); font-weight:700; }
.tabs--pill { border:0; gap:6px; }
.tabs--pill button { border:1px solid var(--border); border-radius:var(--r-full); padding:6px 13px; margin:0; }
.tabs--pill button.is-on { background:var(--navy-800); color:#fff; border-color:var(--navy-800); }
[data-theme="dark"] .tabs--pill button.is-on { background:var(--blue-500); border-color:var(--blue-500); }

/* ─────────────────────────── 10. PROGRESS / METERS ─────────────────────────── */
.bar { height:8px; border-radius:99px; background:var(--track); overflow:hidden; }
.bar > i { display:block; height:100%; border-radius:99px; background:var(--blue-500); transition:width var(--tr-slow); }
.bar--sm { height:5px; } .bar--lg { height:12px; }
.bar--stacked { display:flex; }
.bar--stacked > i { border-radius:0; }
.bar--stacked > i:first-child { border-radius:99px 0 0 99px; }
.bar--stacked > i:last-child { border-radius:0 99px 99px 0; }
.meter { display:flex; flex-direction:column; gap:5px; }
.meter__top { display:flex; align-items:baseline; justify-content:space-between; font-size:var(--fs-11); }
.meter__top b { font-family:var(--font-num); font-weight:700; }
.legend { display:flex; gap:12px; flex-wrap:wrap; font-size:var(--fs-10); color:var(--muted); }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.legend i { width:9px; height:9px; border-radius:3px; display:block; }
.legend i.line { width:14px; height:3px; border-radius:2px; }
.legend i.dash { width:14px; height:0; border-top:2px dashed currentColor; }

/* battery visual */
.batt { position:relative; width:100%; height:26px; border-radius:7px; border:2px solid var(--border-strong); padding:2px; }
.batt::after { content:""; position:absolute; right:-5px; top:50%; transform:translateY(-50%); width:4px; height:11px;
  border-radius:0 3px 3px 0; background:var(--border-strong); }
.batt > i { display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,var(--pos),#34D399); transition:width var(--tr-slow); }
.batt.low > i { background:linear-gradient(90deg,var(--amber-500),#FBBF24); }
.batt.crit > i { background:linear-gradient(90deg,var(--rose-500),#FB7185); }
.batt__txt { position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-num); font-weight:750;
  font-size:var(--fs-11); text-shadow:0 1px 2px rgba(255,255,255,.5); color:#062B1C; }

/* ─────────────────────────── 11. VEHICLE CARDS ─────────────────────────── */
.veh-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--sh-1); display:flex; flex-direction:column; transition:box-shadow var(--tr), transform var(--tr); }
.veh-card:hover { box-shadow:var(--sh-3); transform:translateY(-2px); }
.veh-card__hero { position:relative; padding:16px 18px 14px; color:#fff; overflow:hidden;
  background:linear-gradient(125deg,var(--navy-800) 0%,var(--navy-600) 60%,color-mix(in srgb,var(--veh-accent,#2E7DF7) 55%,var(--navy-600)) 100%); }
.veh-card__hero::after { content:""; position:absolute; right:-40px; top:-60px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--veh-accent,#2E7DF7) 60%,transparent),transparent 68%); }
.veh-card__top { display:flex; align-items:flex-start; gap:12px; position:relative; z-index:1; }
.veh-card__plate { font-family:var(--font-num); font-weight:800; font-size:var(--fs-16); letter-spacing:1px; }
.veh-card__model { font-size:var(--fs-11); color:rgba(255,255,255,.82); }
.veh-card__silhouette { position:absolute; right:12px; bottom:6px; opacity:.22; z-index:0; }
.veh-card__silhouette svg { width:150px; height:auto; }
.veh-card__hero-stats { display:flex; gap:18px; margin-top:14px; position:relative; z-index:1; flex-wrap:wrap; }
.veh-card__hero-stats div { display:flex; flex-direction:column; }
.veh-card__hero-stats .k { font-size:var(--fs-9); text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.72); }
.veh-card__hero-stats .v { font-size:var(--fs-16); font-weight:750; font-family:var(--font-num); }
.veh-card__body { padding:14px 18px; display:grid; gap:12px; flex:1 1 auto; }
.veh-card__foot { padding:11px 18px; border-top:1px solid var(--border-2); display:flex; gap:8px; align-items:center; }
.veh-card__foot .spacer { flex:1 1 auto; }

.spec-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:1px; background:var(--border-2); }
.spec-grid > div { background:var(--surface); padding:11px 13px; display:flex; flex-direction:column; gap:2px; }
.spec-grid .k { font-size:var(--fs-9); text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:650; }
.spec-grid .v { font-size:var(--fs-12); font-weight:650; font-family:var(--font-num); }
.spec-grid .v.txt { font-family:var(--font); }

/* ─────────────────────────── 12. TIMELINE / ACTIVITY ─────────────────────────── */
.timeline { position:relative; padding-left:26px; }
.timeline::before { content:""; position:absolute; left:9px; top:4px; bottom:4px; width:2px; background:var(--border); }
.tl-item { position:relative; padding:0 0 16px; }
.tl-item:last-child { padding-bottom:0; }
.tl-item::before { content:""; position:absolute; left:-22px; top:3px; width:12px; height:12px; border-radius:50%;
  background:var(--surface); border:2.5px solid var(--blue-500); }
.tl-item.ok::before { border-color:var(--pos); } .tl-item.warn::before { border-color:var(--warn); }
.tl-item.danger::before { border-color:var(--neg); } .tl-item.muted::before { border-color:var(--border-strong); }
.tl-item b { font-size:var(--fs-12); display:block; }
.tl-item p { font-size:var(--fs-11); color:var(--muted); }
.tl-item time { font-size:var(--fs-10); color:var(--faint); }

/* ─────────────────────────── 13. CALENDAR ─────────────────────────── */
.cal { border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); }
.cal__head { display:grid; grid-template-columns:repeat(7,1fr); background:var(--surface-2); border-bottom:1px solid var(--border); }
.cal__head div { padding:9px; text-align:center; font-size:var(--fs-10); text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:700; }
.cal__grid { display:grid; grid-template-columns:repeat(7,1fr); }
.cal__day { min-height:112px; border-right:1px solid var(--border-2); border-bottom:1px solid var(--border-2); padding:7px;
  display:flex; flex-direction:column; gap:4px; position:relative; transition:background var(--tr-fast); }
.cal__day:nth-child(7n) { border-right:0; }
.cal__day:hover { background:var(--hover); }
.cal__day.is-out { background:var(--surface-2); opacity:.5; }
.cal__day.is-today { background:color-mix(in srgb,var(--blue-500) 7%,transparent); }
.cal__day.is-today .cal__dn { background:var(--blue-500); color:#fff; }
.cal__dn { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:var(--fs-11);
  font-family:var(--font-num); font-weight:700; }
.cal__ev { font-size:var(--fs-10); padding:3px 6px; border-radius:5px; background:var(--surface-3); cursor:pointer;
  display:flex; gap:5px; align-items:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  border-left:3px solid var(--blue-500); transition:transform var(--tr-fast); }
.cal__ev:hover { transform:translateX(2px); }
.cal__ev time { font-family:var(--font-num); font-weight:700; opacity:.75; }
.cal__ev.v2 { border-left-color:var(--mint-500); }
.cal__ev.v3 { border-left-color:var(--amber-500); }
.cal__ev.is-done { opacity:.6; }
.cal__more { font-size:var(--fs-9); color:var(--muted); }
.cal__dayfoot { font-size:var(--fs-9); color:var(--muted); margin-top:auto; display:flex; justify-content:space-between; }

/* ─────────────────────────── 14. HEATMAP ─────────────────────────── */
.heat { display:grid; gap:3px; }
.heat__row { display:grid; grid-template-columns:44px repeat(24,1fr); gap:3px; align-items:center; }
.heat__lbl { font-size:var(--fs-9); color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.heat__cell { aspect-ratio:1; border-radius:3px; background:var(--track); }
.heat__axis { display:grid; grid-template-columns:44px repeat(24,1fr); gap:3px; }
.heat__axis span { font-size:var(--fs-8,9px); color:var(--faint); text-align:center; }

/* ─────────────────────────── 15. MAP / ROUTE STRIP ─────────────────────────── */
.routemap { position:relative; background:linear-gradient(160deg,var(--surface-2),var(--surface-3)); border-radius:var(--r-md);
  padding:14px; border:1px solid var(--border-2); }
.routemap svg text { font-family:var(--font); }
.routeline { display:flex; align-items:center; gap:0; }
.routenode { display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; flex:0 0 auto; width:96px; }
.routenode i { width:13px; height:13px; border-radius:50%; border:3px solid var(--blue-500); background:var(--surface); z-index:1; }
.routenode.pick i { border-color:var(--pos); } .routenode.drop i { border-color:var(--rose-500); }
.routenode span { font-size:var(--fs-10); font-weight:650; line-height:1.2; }
.routenode small { font-size:var(--fs-9); color:var(--muted); }
.routebar { flex:1 1 auto; height:4px; background:repeating-linear-gradient(90deg,var(--blue-500) 0 8px,transparent 8px 14px); }

/* ─────────────────────────── 16. MODAL / DRAWER ─────────────────────────── */
.scrim { position:fixed; inset:0; background:rgba(6,14,28,.55); backdrop-filter:blur(3px); z-index:100; animation:fade var(--tr); }
.modal-root { position:fixed; inset:0; z-index:110; display:grid; place-items:center; padding:20px; }
.modal { background:var(--surface); border-radius:var(--r-xl); box-shadow:var(--sh-3); width:min(880px,100%);
  max-height:92vh; display:flex; flex-direction:column; overflow:hidden; animation:pop var(--tr-slow); border:1px solid var(--border); }
.modal--sm { width:min(520px,100%); } .modal--lg { width:min(1180px,100%); }
.modal--xl { width:min(1440px,100%); }
.modal__head { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; gap:14px; }
.modal__head h2 { font-size:var(--fs-16); font-weight:750; letter-spacing:-.2px; }
.modal__head p { font-size:var(--fs-11); color:var(--muted); }
.modal__head .spacer { flex:1 1 auto; }
.modal__body { padding:18px 20px; overflow:auto; flex:1 1 auto; }
.modal__foot { padding:13px 20px; border-top:1px solid var(--border); display:flex; gap:9px; align-items:center; background:var(--surface-2); }
.modal__foot .spacer { flex:1 1 auto; }
@keyframes pop { from { transform:translateY(14px) scale(.98); opacity:0; } }
@keyframes fade { from { opacity:0; } }
@keyframes slideL { from { transform:translateX(30px); opacity:0; } }

.drawer-root { position:fixed; inset:0; z-index:110; display:flex; justify-content:flex-end; pointer-events:none; }
.drawer { pointer-events:auto; width:min(560px,96vw); background:var(--surface); height:100%; box-shadow:var(--sh-3);
  display:flex; flex-direction:column; animation:slideL var(--tr-slow); border-left:1px solid var(--border); }
.drawer--wide { width:min(780px,96vw); }
.drawer__head { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; gap:12px; }
.drawer__body { padding:18px 20px; overflow:auto; flex:1 1 auto; display:flex; flex-direction:column; gap:16px; }
.drawer__foot { padding:13px 20px; border-top:1px solid var(--border); display:flex; gap:9px; background:var(--surface-2); }

.toast-root { position:fixed; right:20px; bottom:20px; z-index:200; display:flex; flex-direction:column; gap:9px; align-items:flex-end; }
.toast { display:flex; align-items:center; gap:11px; background:var(--navy-800); color:#fff; padding:11px 15px;
  border-radius:var(--r-md); box-shadow:var(--sh-3); font-size:var(--fs-12); animation:slideL var(--tr); max-width:390px; }
.toast.ok { background:linear-gradient(120deg,#0E9F6E,#059669); }
.toast.warn { background:linear-gradient(120deg,#D97706,#B45309); }
.toast.err { background:linear-gradient(120deg,#E11D48,#BE123C); }
.toast svg { width:17px; height:17px; flex:0 0 17px; }

.tooltip-root { position:fixed; inset:0; pointer-events:none; z-index:300; }
.tip { position:absolute; background:var(--navy-900); color:#fff; font-size:var(--fs-10); padding:7px 10px;
  border-radius:var(--r-sm); box-shadow:var(--sh-3); pointer-events:none; transform:translate(-50%,-100%);
  white-space:nowrap; line-height:1.5; }
.tip b { color:var(--ice-300); }
.tip .tiprow { display:flex; gap:10px; justify-content:space-between; }
.tip .tiprow i { width:8px; height:8px; border-radius:2px; display:inline-block; margin-right:5px; }

/* ─────────────────────────── 17. CHARTS ─────────────────────────── */
.chart { position:relative; width:100%; }
.chart svg { width:100%; height:auto; overflow:visible; }
.chart text { font-family:var(--font); }
.chart .grid-line { stroke:var(--grid); stroke-width:1; }
.chart .axis-lbl { fill:var(--axis); font-size:10px; }
.chart .axis-lbl.b { font-weight:700; fill:var(--muted); }
.chart .series-line { fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.chart .series-area { opacity:.16; }
.chart .bar-r { transition:opacity var(--tr-fast); }
.chart .bar-r:hover { opacity:.82; }
.chart .hitbox { fill:transparent; cursor:crosshair; }
.chart .crosshair { stroke:var(--border-strong); stroke-width:1; stroke-dasharray:3 3; }
.chart .dot { stroke:var(--surface); stroke-width:2; }
.chart .zero-line { stroke:var(--border-strong); stroke-width:1.4; }
.chart .donut-seg { transition:transform var(--tr), opacity var(--tr-fast); transform-origin:center; }
.chart .donut-seg:hover { opacity:.85; }
.chart legend { display:flex; }
.chart-empty { display:grid; place-items:center; color:var(--faint); font-size:var(--fs-11); min-height:120px; }

.chart-legend { display:flex; gap:14px; flex-wrap:wrap; font-size:var(--fs-10); color:var(--muted); padding-top:8px; }
.chart-legend button { display:inline-flex; align-items:center; gap:6px; color:inherit; font-size:inherit; }
.chart-legend button.off { opacity:.4; text-decoration:line-through; }
.chart-legend i { width:10px; height:10px; border-radius:3px; display:block; }
.chart-legend i.line { width:15px; height:3px; border-radius:2px; }

.gauge-wrap { display:flex; align-items:center; gap:16px; }
.gauge { flex:0 0 auto; }
.gauge__val { font-family:var(--font-num); font-weight:800; }
.gauge-meta { display:grid; gap:7px; flex:1 1 auto; min-width:0; }

/* ─────────────────────────── 18. MISC ─────────────────────────── */
.empty { display:grid; place-items:center; gap:9px; padding:36px 20px; text-align:center; color:var(--muted); }
.empty svg { width:38px; height:38px; opacity:.4; }
.empty b { color:var(--text); font-size:var(--fs-13); }
.empty p { font-size:var(--fs-11); max-width:44ch; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:7px 16px; font-size:var(--fs-12); align-items:baseline; }
.kv dt { color:var(--muted); font-size:var(--fs-11); }
.kv dd { margin:0; font-weight:650; text-align:right; font-family:var(--font-num); }
.kv dd.txt { font-family:var(--font); font-weight:600; }
.kv--wide { grid-template-columns:1fr auto; }
.panel-note { display:flex; gap:10px; padding:11px 13px; border-radius:var(--r-md); font-size:var(--fs-11);
  background:color-mix(in srgb,var(--info) 9%,transparent); border:1px solid color-mix(in srgb,var(--info) 22%,transparent); }
.panel-note svg { width:16px; height:16px; flex:0 0 16px; color:var(--info); margin-top:1px; }
.panel-note.warn { background:color-mix(in srgb,var(--warn) 10%,transparent); border-color:color-mix(in srgb,var(--warn) 26%,transparent); }
.panel-note.warn svg { color:var(--warn); }
.panel-note.ok { background:color-mix(in srgb,var(--pos) 9%,transparent); border-color:color-mix(in srgb,var(--pos) 22%,transparent); }
.panel-note.ok svg { color:var(--pos); }
.panel-note b { display:block; }

.invoice-doc { background:#fff; color:#111827; border-radius:var(--r-md); padding:26px; box-shadow:var(--sh-2); }
[data-theme="dark"] .invoice-doc { background:#F8FAFC; }
.inv-head { display:flex; justify-content:space-between; gap:20px; border-bottom:2px solid #0B1F3A; padding-bottom:14px; }
.inv-head h2 { font-size:20px; color:#0B1F3A; letter-spacing:-.4px; }
.inv-meta { text-align:right; font-size:11px; color:#475569; }
.inv-table { width:100%; border-collapse:collapse; font-size:11px; margin-top:16px; }
.inv-table th { background:#EEF2F8; text-align:left; padding:7px 9px; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:#475569; }
.inv-table td { padding:7px 9px; border-bottom:1px solid #E5E9F0; }
.inv-totals { margin-left:auto; width:280px; margin-top:14px; font-size:12px; }
.inv-totals div { display:flex; justify-content:space-between; padding:5px 0; }
.inv-totals .grand { border-top:2px solid #0B1F3A; margin-top:6px; padding-top:9px; font-size:15px; font-weight:800; color:#0B1F3A; }
.qrbox { width:92px; height:92px; border:1px solid #CBD5E1; border-radius:6px; display:grid; place-items:center; font-size:9px;
  color:#64748B; text-align:center; padding:5px; line-height:1.3; }
.inv-foot { margin-top:20px; border-top:1px solid #E5E9F0; padding-top:12px; font-size:10px; color:#64748B; display:flex; justify-content:space-between; gap:16px; }

.mini-list { display:flex; flex-direction:column; }
.mini-list > * { display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid var(--border-2); }
.mini-list > *:last-child { border-bottom:0; }
.mini-list .spacer { flex:1 1 auto; }

.split { display:grid; grid-template-columns:1fr auto; gap:6px 16px; align-items:baseline; }

.drivers { display:grid; gap:12px; }
.driver-card { display:flex; gap:13px; padding:13px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); }
.driver-card__meta { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }

.permissions { width:100%; border-collapse:collapse; font-size:var(--fs-11); }
.permissions th, .permissions td { padding:8px 10px; border-bottom:1px solid var(--border-2); text-align:center; }
.permissions th:first-child, .permissions td:first-child { text-align:left; }
.permissions thead th { background:var(--surface-2); font-size:var(--fs-10); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.perm-toggle { width:22px; height:22px; border-radius:6px; border:1.6px solid var(--border-strong); display:inline-grid; place-items:center; }
.perm-toggle.on { background:var(--pos); border-color:var(--pos); color:#fff; }
.perm-toggle svg { width:13px; height:13px; }
.perm-toggle.locked { opacity:.42; cursor:not-allowed; }

.stat-donut-row { display:flex; align-items:center; gap:14px; }

.kpi-hero { background:linear-gradient(125deg,var(--navy-800),var(--navy-600) 55%,#1D4E8F); color:#fff; border-radius:var(--r-xl);
  padding:20px 22px; box-shadow:var(--sh-2); position:relative; overflow:hidden; }
.kpi-hero::after { content:""; position:absolute; right:-70px; bottom:-90px; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle,rgba(125,211,252,.28),transparent 70%); }
.kpi-hero h2 { font-size:var(--fs-12); text-transform:uppercase; letter-spacing:.1em; color:var(--ice-200); font-weight:650; }
.kpi-hero .big { font-size:var(--fs-34); font-weight:800; font-family:var(--font-num); letter-spacing:-1.4px; margin-top:6px; }
.kpi-hero .sub { font-size:var(--fs-11); color:var(--ice-200); opacity:.9; }
.kpi-hero__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:16px; margin-top:18px; position:relative; z-index:1; }
.kpi-hero__grid .k { font-size:var(--fs-9); text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.68); }
.kpi-hero__grid .v { font-size:var(--fs-14); font-weight:750; font-family:var(--font-num); }

/* ─────────────────────────── 19. RESPONSIVE ─────────────────────────── */
@media (max-width:1440px) {
  .g-6 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .g-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:1180px) {
  .g-3, .g-21, .g-12, .g-31 { grid-template-columns:1fr; }
  .span-2, .span-3, .span-4 { grid-column:auto; }
  .topbar__search { width:200px; }
  .topbar__search kbd { display:none; }
}
@media (max-width:980px) {
  .sidebar { position:fixed; left:0; top:0; bottom:0; transform:translateX(-100%); transition:transform var(--tr-slow); z-index:80; }
  .app.is-mobile-open .sidebar { transform:none; box-shadow:var(--sh-3); }
  /* el velo lo muestra el JavaScript quitando el atributo hidden */
  .topbar__burger { display:grid; }
  .hide-sm { display:none; }
  .g-2, .g-4, .g-6, .g-auto { grid-template-columns:1fr 1fr; }
  .view { padding:16px; }
}
@media (max-width:720px) {
  .g-2, .g-4, .g-6, .g-auto, .field-row { grid-template-columns:1fr; }
  .page-head { flex-direction:column; align-items:stretch; }
  .seg { display:none; }
  .topbar__search { display:none; }
}

/* ─────────────────────────── 20. PRINT ─────────────────────────── */
@media print {
  .sidebar, .topbar, .footer, .toolbar, .page-head__actions, .toast-root, .scrim, .modal__foot, .drawer__foot { display:none !important; }
  body, .app, .main, .view { overflow:visible !important; height:auto !important; background:#fff !important; }
  .view { padding:0 !important; }
  .card, .modal { box-shadow:none !important; border:0 !important; }
  .invoice-doc { box-shadow:none; padding:0; }
}