/* ══════════════════ CarLog · Design System "Cockpit" ══════════════════
   Dirección de diseño: salpicadero de coche eléctrico moderno.
   · Noche profunda (azul negro), superficies de cristal, luz neón.
   · El color SOLO donde significa algo: menta = cubierto, ámbar = cerca,
     coral = vencido. Todo lo demás es materia oscura.
   · Números-tabla enormes con tracking negativo (lectura de cuadro).
   · Glow: las alertas iluminan su entorno. La calma no brilla.
   Tokens → átomos → moléculas → pantallas. Mismo contrato de variables
   que v3: los componentes existentes cambian de piel, no de nombres.
   Modo "Papel" (claro) = equivalente AA para quien no vea bien en oscuro.
   ═══════════════════════════════════════════════════════════════════ */

/* ───────── fuentes ───────── */
@font-face{ font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(../fonts/inter-var.woff2) format('woff2'); }

/* ───────── tokens · NOCHE (por defecto) — capas de carbón ───────── */
:root{
  color-scheme: dark;
  /* capas por luminancia: la profundidad viene de la luz, no de bordes */
  --bg:#121316; --surface:#191B1E; --surface-2:#202327; --surface-3:#282B30; --elevated:#202327;
  /* texto */
  --text:#F3F4F5; --text-2:#C3C9D0; --text-3:#969CA4;
  /* marca: menta, uso contenido (CTA, selección, progreso positivo) */
  --brand:#43E3C4; --brand-press:#2FCDB0; --brand-ink:#06130F;
  --accent:#7CC5FF;
  /* semánticos */
  --ok:#43E3C4; --ok-bg:rgba(67,227,196,.10);
  --warn:#E9A94E; --warn-bg:rgba(233,169,78,.10);
  --bad:#F2707A; --bad-bg:rgba(242,112,122,.10);
  --info:#7CC5FF; --info-bg:rgba(124,197,255,.10);
  /* estructura: hairlines y sombras ambientales */
  --border:rgba(255,255,255,.07); --border-2:rgba(255,255,255,.13);
  --shadow-1:0 1px 2px rgba(0,0,0,.3);
  --shadow-2:0 2px 4px rgba(0,0,0,.25), 0 16px 40px -20px rgba(0,0,0,.55);
  --shadow-3:0 32px 80px -24px rgba(0,0,0,.7);
  --glass:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012));
  /* radios */
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-full:999px;
  /* espaciado · escala única */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:48px;
  /* tipografía — escala real, nada por debajo de 12px */
  --f-ui:'Inter','SF Pro Text',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --f-display:900 32px/1.08 var(--f-ui);
  --f-hero:800 26px/1.15 var(--f-ui);
  --f-h1:750 22px/1.2 var(--f-ui);
  --f-h2:700 17px/1.3 var(--f-ui);
  --f-body:500 15.5px/1.5 var(--f-ui);
  --f-sub:550 13.5px/1.45 var(--f-ui);
  --f-micro:650 12.5px/1.3 var(--f-ui);
  /* motion */
  --t-fast:120ms; --t-base:200ms; --t-slow:360ms;
  --ease:cubic-bezier(.2,.7,.3,1); --ease-out:cubic-bezier(.16,1,.3,1);
  /* layout */
  --tab-h:64px; --fab:56px;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  --fs:1;
}
/* ───────── tokens · PAPEL (claro, diseñado independiente) ───────── */
[data-theme="light"]{
  color-scheme: light;
  --bg:#F5F4F0; --surface:#FFFFFF; --surface-2:#FAF9F6; --surface-3:#F1EFE9; --elevated:#FFFFFF;
  --text:#1A1C1E; --text-2:#4E5157; --text-3:#6C7076;
  --brand:#0E9C80; --brand-press:#0A8570; --brand-ink:#FFFFFF;
  --accent:#1F6FA8;
  --ok:#0E9C80; --ok-bg:rgba(14,156,128,.09);
  --warn:#7A5A12; --warn-bg:rgba(143,106,31,.10);
  --bad:#B93A3A; --bad-bg:rgba(198,69,69,.08);
  --info:#1F6FA8; --info-bg:rgba(31,111,168,.09);
  --border:rgba(26,28,30,.09); --border-2:rgba(26,28,30,.16);
  --shadow-1:0 1px 2px rgba(45,38,28,.05);
  --shadow-2:0 2px 4px rgba(45,38,28,.04), 0 14px 34px -18px rgba(45,38,28,.22);
  --shadow-3:0 28px 64px -24px rgba(45,38,28,.32);
  --glass:linear-gradient(180deg,#FFFFFF,#FCFBF8);
}
/* compat con el viejo selector de tema */
[data-theme="dark"]{ color-scheme: dark; }
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ───────── base ───────── */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:calc(16px*var(--fs));overflow-x:hidden;background:var(--bg)}
body{margin:0;background:transparent;color:var(--text);font-family:var(--f-ui);font-weight:500;
  letter-spacing:-.005em;line-height:1.5;min-height:100dvh;max-width:100vw;overflow-x:hidden;
  padding-bottom:calc(var(--tab-h) + var(--safe-b) + 140px);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p{margin:0}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none;padding:0}
input,select,textarea{font:inherit;color:var(--text)}
[hidden]{display:none!important}
a{color:var(--brand)}
.num{font-variant-numeric:tabular-nums}
.tnum{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
::selection{background:color-mix(in srgb,var(--brand) 30%,transparent);color:var(--text)}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:2px;border-radius:6px}
.ic{width:22px;height:22px;flex:0 0 auto;display:block}
.ic-sm{width:16px;height:16px}.ic-lg{width:26px;height:26px}.ic-xl{width:34px;height:34px}

/* ───────── appbar (cristal ahumado) ───────── */
.appbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:calc(10px + var(--safe-t)) var(--s4) 10px;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-logo{width:30px;height:30px;flex:0 0 auto}
.brand-name{font:900 17.5px/1 var(--f-ui);letter-spacing:-.025em}
.brand-name i{font-style:normal;color:var(--brand)}
.vchip{display:inline-flex;align-items:center;gap:6px;font:800 12px/1 var(--f-ui);letter-spacing:.06em;
  color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:7px 10px;
  font-variant-numeric:tabular-nums;max-width:40vw;white-space:nowrap}
.vchip .ic{width:13px;height:13px;color:var(--text-3)}
.appbar-actions{display:flex;gap:7px}
@media(max-width:480px){
  .appbar .vchip{display:none} /* el selector de vehículos ya aparece bajo la cabecera */
}

/* ───────── botones ───────── */
.icon-btn{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:var(--glass);border:1px solid var(--border);color:var(--text-2);transition:transform var(--t-fast)}
.icon-btn:active{transform:scale(.9);background:var(--surface-3)}
.icon-btn[disabled]{opacity:.4;pointer-events:none}
.icon-btn.urgent{position:relative}
[data-theme="light"] .icon-btn.urgent{box-shadow:none}
.icon-btn .hb-dot{position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%;background:var(--bad);
  box-shadow:0 0 0 2px var(--bg);animation:pulse 1.6s var(--ease) infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.65}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:12px 20px;
  border-radius:var(--r-md);font:800 15px/1 var(--f-ui);letter-spacing:-.01em;transition:transform var(--t-fast),opacity var(--t-fast)}
.btn:active{transform:scale(.97)}
.btn .ic{width:19px;height:19px;stroke-width:2.2}
.btn--primary{background:var(--brand);color:var(--brand-ink);
  box-shadow:0 4px 14px -6px rgba(0,0,0,.5)}
[data-theme="light"] .btn--primary{box-shadow:0 3px 10px -5px rgba(45,38,28,.35)}
.btn--primary:active{background:var(--brand-press)}
.btn--secondary{background:var(--glass);border:1px solid var(--border-2);color:var(--text)}
.btn--ghost{color:var(--brand);background:transparent;min-height:44px}
.btn--danger{color:var(--bad);background:transparent;min-height:44px;justify-content:flex-start;width:100%}
.btn--block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn--loading{pointer-events:none;opacity:.75}
.btn--loading .ic{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ───────── layout de vistas ───────── */
main{max-width:560px;margin:0 auto;padding:var(--s4) var(--s4) var(--s2)}
.view{animation:fadeUp var(--t-base) var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.section-title{display:flex;align-items:center;gap:10px;font:var(--f-micro);text-transform:uppercase;
  letter-spacing:.16em;color:var(--text-3);margin:var(--s6) var(--s1) var(--s3)}
.section-title::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent)}
.card{background:var(--glass);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
[data-theme="light"] .card{background:var(--surface)}
.card--pad{padding:var(--s4)}

/* ───────── switcher de vehículo ───────── */
.vswitch{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.vswitch::-webkit-scrollbar{display:none}
.vpill{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border-radius:var(--r-full);
  background:var(--glass);border:1px solid var(--border);font:800 13px/1 var(--f-ui);white-space:nowrap;color:var(--text-2)}
.vpill.on{background:var(--brand);color:var(--brand-ink);border-color:transparent;
  box-shadow:0 4px 22px -4px color-mix(in srgb,var(--brand) 65%,transparent)}
[data-theme="light"] .vpill.on{box-shadow:none}
.vpill .ic{width:15px;height:15px}
.vpill.add{border-style:dashed;color:var(--brand)}

/* ───────── hero estado ───────── */
.status-hero{position:relative;overflow:hidden;padding:var(--s5) var(--s5) var(--s4);border-radius:var(--r-xl)}
.status-hero::before{content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--brand),var(--accent),transparent);opacity:.9}
.sh-head{display:flex;align-items:flex-start;gap:var(--s4)}
.sh-gauge{position:relative;flex:0 0 auto}
.sh-gauge svg{transform:rotate(-90deg)}
.gauge-bg{fill:none;stroke:var(--surface-3);stroke-width:9}
.gauge-val{fill:none;stroke-width:9;stroke-linecap:round;
  transition:stroke-dashoffset var(--t-slow) var(--ease-out),stroke var(--t-base)}
.gauge-center{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1}
.gauge-center b{font:900 25px/1 var(--f-ui);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.gauge-center span{font:800 9px/1.4 var(--f-ui);color:var(--text-3);text-transform:uppercase;letter-spacing:.14em}
.sh-headline{flex:1;min-width:0}
.sh-car{font:800 15px/1.3 var(--f-ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2)}
.sh-state{font:900 21px/1.15 var(--f-ui);letter-spacing:-.035em;margin-top:2px}
.sh-state.warn{color:var(--warn)}.sh-state.bad{color:var(--bad)}.sh-state.ok{color:var(--text)}
.sh-sub{font:var(--f-sub);color:var(--text-3);margin-top:4px}
.sh-km{display:flex;align-items:center;gap:8px;margin-top:var(--s5);padding-top:var(--s4);
  border-top:1px solid var(--border)}
.sh-km b{font:900 26px/1 var(--f-ui);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.sh-km small{font:800 10px/1 var(--f-ui);color:var(--text-3);text-transform:uppercase;letter-spacing:.1em}
.tag{display:inline-flex;align-items:center;gap:4px;font:800 10px/1 var(--f-ui);padding:4px 8px;border-radius:var(--r-full);
  text-transform:uppercase;letter-spacing:.07em}
.tag--real{background:var(--surface-3);color:var(--text-2)}
.tag--est{background:color-mix(in srgb,var(--info) 18%,transparent);color:color-mix(in srgb,var(--info) 85%,#fff)}
.sh-km .btn--ghost{margin-left:auto;min-height:40px;padding:8px 12px}

/* ───────── SETTINGS v5 · aburridamente perfecto ───────── */
.settings-group-t{font:700 13.5px/1 var(--f-ui);color:var(--text-3);margin:var(--s6) 0 var(--s2) 2px}
.settings-group{margin-top:0;padding:var(--s1) var(--s4)}
.settings-group .row{padding:13px 2px}
.set-ic{width:20px;flex:0 0 auto;display:flex;color:var(--text-2)}
.set-ic .ic{width:19px;height:19px}
.set-ic.danger{color:var(--bad)}
.row-body b.danger{color:var(--bad)}
#v-settings{padding-bottom:40px}

/* ───────── CAR v5 · ficha digital del vehículo ───────── */
.car-id{padding:var(--s5) var(--s5) 0;position:relative}
.car-id-art{width:64px;height:32px;color:var(--text-3);opacity:.8;margin-bottom:var(--s3)}
.car-id h1{font:850 26px/1.1 var(--f-ui);letter-spacing:-.035em;margin:0}
.car-id p{font:var(--f-sub);color:var(--text-2);margin:6px 0 0}
.car-id .plate{display:inline-flex;align-items:stretch;margin-top:12px;border-radius:7px;overflow:hidden;
  background:#F4F5F7;color:#16181C;box-shadow:0 1px 3px rgba(0,0,0,.35);height:32px}
.car-id .plate .plate-eu{display:flex;align-items:center;justify-content:center;width:22px;
  background:linear-gradient(180deg,#1B4FD8,#0D3BB0)}
.car-id .plate .plate-eu svg{width:15px;height:24px;fill:#FFD54A}
.car-id .plate .plate-eu svg text{fill:#fff}
.car-id .plate b{display:flex;align-items:center;padding:0 12px 0 9px;font:800 15px/1 var(--f-ui);
  letter-spacing:.08em;font-variant-numeric:tabular-nums;color:#16181C}
.car-odo{display:flex;align-items:baseline;justify-content:space-between;padding:var(--s5) var(--s5) 0}
.car-odo b{font:800 30px/1 var(--f-ui);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.car-odo small{font:var(--f-sub);color:var(--text-3);margin-left:4px}
.car-odo .odo-update{display:inline-flex;align-items:center;gap:6px;font:650 13px/1 var(--f-ui);
  color:var(--text);background:var(--surface-3);border:1px solid var(--border-2);padding:9px 14px;border-radius:var(--r-full);cursor:pointer}
.car-odo .odo-update .ic{width:14px;height:14px}
.car-odo .odo-update:active{transform:scale(.96)}
.car-facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s6);padding:var(--s5)}
.car-facts small{display:block;font:var(--f-micro);color:var(--text-3);margin-bottom:3px}
.car-facts b{font:700 14.5px/1.2 var(--f-ui);font-variant-numeric:tabular-nums}
.car-facts .span2{grid-column:1/-1}
/* etiqueta DGT como pegatina oficial */
.car-facts b.dgt{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;
  border-radius:6px;font:800 14px/1 var(--f-ui);color:#fff;background:#0A7D33;border:1.5px solid #BFE8CC}
.car-facts b.dgt-eco{background:linear-gradient(135deg,#0A7D33 50%,#2FA8E0 50%)}
.car-facts b.dgt-cero{background:#2FA8E0}
.car-facts b.dgt-b{background:#F2C230;color:#3B3416}
.car-facts b.dgt-c{background:#0A7D33}
.car-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 var(--s5) var(--s4)}
.car-chips-itm{font:650 12.5px/1 var(--f-ui);padding:8px 11px;border-radius:var(--r-full);cursor:pointer;
  background:var(--ok-bg);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 25%,transparent)}
.car-chips-itm.warn{background:var(--warn-bg);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 25%,transparent)}
.car-chips-itm.bad{background:var(--bad-bg);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 30%,transparent)}
.car-actions .surface,.car-actions{margin-top:var(--s6)}
.car-actions .care-group:first-child{margin-top:0}
.car-actions .care-group{background:var(--surface);border-radius:var(--r-lg);padding:var(--s5) var(--s5) var(--s3);
  margin-top:var(--s4);box-shadow:var(--shadow-1)}
[data-theme="light"] .car-actions .care-group{border:1px solid var(--border);box-shadow:var(--shadow-2)}
.car-actions .care-group+.care-group{border-top:0}
.car-actions .care-group-t{font:700 15px/1 var(--f-ui);color:var(--text);margin-bottom:var(--s2)}
#carProfile .add-line{padding:14px var(--s5);width:100%}
#v-car{padding-bottom:40px}

/* ───────── COST v5 · experiencia financiera ───────── */
/* paleta categórica (donut + filas) — menta/hielo/ámbar y derivados, sin rojo */
:root{
  --cat-0:var(--brand); --cat-1:var(--info); --cat-2:#E9A94E;
  --cat-3:color-mix(in srgb,var(--brand) 55%,var(--surface-3));
  --cat-4:color-mix(in srgb,var(--info) 55%,var(--surface-3));
  --cat-5:color-mix(in srgb,#E9A94E 55%,var(--surface-3));
  --cat-6:color-mix(in srgb,var(--brand) 32%,var(--surface-3));
  --cat-7:color-mix(in srgb,var(--info) 32%,var(--surface-3));
}
.donut-wrap{display:flex;justify-content:center;padding:var(--s2) 0 var(--s4)}
.cat-dot{width:9px;height:9px;border-radius:3px;background:var(--c,var(--brand));flex:0 0 auto}
#costMetrics,#fuelStats,#chargeStats{display:block}
#v-cost{padding-bottom:84px}
@media (min-width:900px){ #v-cost{padding-bottom:0} }
.cost-hero{padding:var(--s4) var(--s1) 0}
.cost-hero-k{font:var(--f-sub);color:var(--text-3);display:block}
.cost-hero-v{display:block;font:800 40px/1.05 var(--f-ui);letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin-top:4px;white-space:nowrap}
.cost-hero-v small{font:700 18px/1 var(--f-ui);color:var(--text-2);margin-left:5px;letter-spacing:-.01em}
.cost-hero-cmp{font:650 13.5px/1 var(--f-ui);margin:8px 0 0;color:var(--text-3)}
.cost-hero-cmp.up{color:var(--bad)}
.cost-hero-cmp.down{color:var(--ok)}
.cost-sub{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s7);padding:var(--s5) var(--s1) 0;margin-top:var(--s4);border-top:1px solid var(--border)}
.cost-sub b{display:block;font:800 17px/1.1 var(--f-ui);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cost-sub small{display:block;font:var(--f-micro);color:var(--text-3);margin-top:3px}
.yr-sel{font:800 12px/1 var(--f-ui);background:var(--surface-3);color:var(--text);border:0;border-radius:8px;padding:6px 8px;float:right}
.phev-comb{margin:var(--s4) var(--s1) 0;padding:var(--s4) var(--s5);background:var(--surface-2);border-radius:var(--r-md)}
.phev-comb b{display:block;font:750 15px/1.2 var(--f-ui);font-variant-numeric:tabular-nums}
.phev-comb small{display:block;font:var(--f-micro);color:var(--text-3);margin-top:4px}
#homeTariffCard .surface{margin-top:var(--s4);padding:var(--s2) var(--s4)}
#homeTariffCard .btn--quiet{font:650 13.5px/1 var(--f-ui);color:var(--brand);background:transparent;border:0;padding:8px 10px;cursor:pointer}
#homeTariffCard .btn--quiet:active{opacity:.6}
#costResumen .surface .surface-title, #costFuel .surface .surface-title{margin-bottom:var(--s4)}

/* ───────── CARE v5 · plan de mantenimiento ───────── */
.care-head{font:650 15px/1.4 var(--f-ui);color:var(--text);margin:0 0 var(--s4) 2px}
.care-group+.care-group{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--border)}
.care-group-t{font:700 13.5px/1 var(--f-ui);color:var(--text-3);margin:0 0 2px 2px;letter-spacing:0}
.care-group-t span{font-weight:600;opacity:.65;font-variant-numeric:tabular-nums}
@media (max-width:899px){ #careTasks{padding-bottom:84px} }   /* móvil: el FAB nunca tapa la última fila */
.care-group .hlist .row{padding:13px 2px}
.care-group .hlist .row-body small{white-space:normal;overflow:visible;text-overflow:clip}
.state-dot.off{background:var(--text-3);opacity:.5}
.add-line{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:0;
  padding:16px 2px 6px;font:650 14px/1 var(--f-ui);color:var(--brand);cursor:pointer}
.add-line .ic{width:18px;height:18px}
.add-line:active{opacity:.6}

/* ───────── HOME v5 · el coche protagonista ───────── */
.car-hero{padding:var(--s5) var(--s1) var(--s4)}
.car-hero-id h1{font:850 28px/1.12 var(--f-ui);letter-spacing:-.035em;margin:0}
.car-hero-id p{font:var(--f-sub);color:var(--text-2);margin-top:6px}
.car-hero-odo{display:flex;align-items:baseline;gap:7px;margin-top:var(--s5)}
.car-hero-odo .odo-note{align-self:center;margin-left:2px}
.car-hero-odo b{font:800 27px/1 var(--f-ui);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.car-hero-odo small{font:650 13.5px/1 var(--f-ui);color:var(--text-3)}
.odo-note{font:var(--f-micro);color:var(--text-2)}
.link-btn{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:650 13.5px/1 var(--f-ui);
  color:var(--text-2);min-height:44px;padding:0 4px;transition:color var(--t-fast)}
.link-btn:active{color:var(--brand)}
.link-btn .ic{width:15px;height:15px}
.car-hero-state{display:flex;align-items:center;gap:9px;margin-top:var(--s4);padding-top:var(--s3);
  border-top:1px solid var(--border);font:var(--f-sub)}
.state-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--ok)}
.state-dot.warn{background:var(--warn)}
.state-dot.bad{background:var(--bad)}
.car-hero-state b{font:700 15px/1.3 var(--f-ui);letter-spacing:-.01em}
.car-hero-state span{color:var(--text-2)}

/* UNA superficie para todo lo que necesita atención */
.attention{background:var(--surface);border-radius:var(--r-lg);margin-top:var(--s4);
  padding:var(--s1) var(--s4) var(--s1);box-shadow:var(--shadow-2);animation:fadeUp var(--t-base) var(--ease)}
[data-theme="light"] .attention{border:1px solid var(--border)}
.status-card{padding:var(--s3) 0 var(--s3);position:relative}
.status-card.sc-bad{--sc-accent:var(--bad)}
.status-card.sc-warn{--sc-accent:var(--warn)}
.status-card.sc-ok{--sc-accent:var(--ok)}
.sc-row{display:flex;align-items:center;gap:13px}
.sc-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--surface-2);color:var(--sc-accent)}
.sc-ic .ic{width:20px;height:20px}
.sc-ic.sm{width:36px;height:36px;border-radius:11px;background:var(--surface-2);color:var(--bad)}
.sc-ic.sm .ic{width:18px;height:18px}
.sc-row b{font:var(--f-h2);letter-spacing:-.015em;display:block}
.sc-row small{font:var(--f-sub);color:var(--text-2);display:block;margin-top:2px}
.sc-row small.bad{color:var(--bad);font-weight:600}
.sc-note{font:var(--f-sub);color:var(--text-3);margin-top:var(--s3)}
.sc-actions{display:flex;gap:var(--s2);margin-top:var(--s3)}
.sc-actions .btn{flex:1;min-height:46px}
.sc-actions .btn--quiet{flex:0 0 auto;color:var(--text-2);background:var(--surface-2);padding:0 var(--s4);min-height:46px;border-radius:var(--r-md);
  display:inline-flex;align-items:center;font:700 14px/1 var(--f-ui)}
.sc-actions .btn--quiet:active{background:var(--surface-3)}
.status-extra{display:flex;flex-direction:column}
.status-extra:empty{display:none}
.attention .status-card + .status-extra{border-top:1px solid var(--border)}
.status-extra .row{background:transparent;border:0;padding:13px 0;box-shadow:none}
.status-extra .row+.row{border-top:1px solid var(--border)}
.status-extra .row:active{opacity:.7}
.status-extra .row-body b{font:700 14.5px/1.3 var(--f-ui);color:var(--text)}
.status-extra .row-body small.bad{color:var(--bad);font-weight:600}
.status-extra .row-end .chev{color:var(--text-3);display:flex}
.status-extra .row-end .chev .ic{width:16px;height:16px}

/* surfaces agrupadas: proximamente / vistazo */
.surface{background:var(--surface);border-radius:var(--r-lg);padding:var(--s4) var(--s4) var(--s3);
  margin-top:var(--s6);box-shadow:var(--shadow-1);animation:fadeUp var(--t-base) var(--ease)}
[data-theme="light"] .surface{border:1px solid var(--border);box-shadow:var(--shadow-2)}
.surface-title{font:var(--f-h2);letter-spacing:-.015em;margin-bottom:var(--s3)}
.hlist{display:flex;flex-direction:column}
.hlist .row{background:transparent;border:0;box-shadow:none;padding:14px 2px;border-radius:0}
.hlist .row+.row{border-top:1px solid var(--border)}
.hlist .row:active{background:var(--surface-2);border-radius:var(--r-md)}
.hlist .row .ic{width:19px;height:19px;color:var(--text-3);flex:0 0 auto}
.hlist .row .ic.warn{color:var(--warn)}
.hlist .row-body b{font:700 15px/1.3 var(--f-ui)}
.hlist .row-body small{font:var(--f-sub);color:var(--text-3);margin-top:2px}
.hlist .row-end{flex-direction:row;align-items:center;gap:6px}
.hlist .when{font:700 13.5px/1 var(--f-ui);color:var(--text-2);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.hlist .when.muted{font-weight:500;color:var(--text-3)}
#catFilter button i{font-style:normal;font-weight:700;font-size:11px;opacity:.7;font-variant-numeric:tabular-nums}
.hlist .when.warn{color:var(--warn)}
.hlist .when.bad{color:var(--bad)}
.hlist .chev{color:var(--text-3);display:flex}
.hlist .chev .ic{width:16px;height:16px}
.hlist .see-all{width:fit-content;font:650 13.5px/1 var(--f-ui);color:var(--brand);justify-content:flex-start;gap:8px;
  padding:13px 10px 9px 2px;border-top:0;margin-top:2px}
.hlist .see-all:active{background:transparent;opacity:.7}
.hlist .see-all .chev .ic{width:14px;height:14px;color:var(--brand)}

.glance{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);padding:var(--s3) 0 var(--s4);position:relative}
.glance-item b{display:block;font:800 19px/1.1 var(--f-ui);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.glance-item span{display:block;font:var(--f-micro);color:var(--text-3);margin-top:5px}
/* ───────── comparar flota (§61) ───────── */
.cmp-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:680px){.cmp-grid{grid-template-columns:1fr 1fr}}
.cmp-col{background:var(--surface-2);border-radius:var(--r-lg);padding:14px 16px}
.cmp-col>b{display:block;font:800 15.5px/1.2 var(--f-ui);margin-bottom:8px}
.cmp-col .kv{padding:7px 0;font-size:13px}
.cmp-col .kv small{color:var(--text-3);font-weight:600}

/* ───────── combustible cerca (§26-27) ───────── */
.fuel-setup,.fuel-loading{display:flex;align-items:center;gap:12px;padding:16px}
.fuel-setup .tile,.fuel-loading .tile{width:40px;height:40px;flex:0 0 auto;display:grid;place-content:center;border-radius:12px;background:var(--surface-2);color:var(--brand)}
.fuel-setup .tile .ic,.fuel-loading .tile .ic{width:20px;height:20px}
.fuel-setup div:nth-child(2),.fuel-loading div:nth-child(2){flex:1;min-width:0}
.fuel-setup b,.fuel-loading b{display:block;font:700 15px/1.3 var(--f-ui);color:var(--text)}
.fuel-setup small,.fuel-loading small{display:block;font:var(--f-micro);color:var(--text-3);margin-top:3px;line-height:1.45}
.fuel-setup .btn{flex:0 0 auto;min-height:38px}
.fuel-setup{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:start}
.fuel-setup .btn{grid-column:1/-1;width:100%;min-height:44px}
.fuel-card{padding:16px}
.fuel-head{display:flex;align-items:center;gap:12px}
.fuel-head .tile{width:40px;height:40px;flex:0 0 auto;display:grid;place-content:center;border-radius:12px;background:var(--ok-bg);color:var(--ok)}
.fuel-head .tile .ic{width:20px;height:20px}
.fuel-head div:nth-child(2){flex:1;min-width:0}
.fuel-head b{display:block;font:700 15px/1.3 var(--f-ui);color:var(--text)}
.fuel-head small{display:block;font:var(--f-micro);color:var(--text-3);margin-top:2px}
.fuel-min{color:var(--ok);font-size:14px}
.fuel-list{margin-top:12px;display:grid;gap:2px}
.fuel-row{display:flex;align-items:center;gap:12px;padding:10px 2px;border-top:1px solid var(--border);text-decoration:none;color:inherit}
.fuel-row:active{background:var(--surface-2);border-radius:var(--r-md)}
.fuel-price{flex:0 0 62px;text-align:right;font:800 16px/1 var(--f-ui);font-variant-numeric:tabular-nums;color:var(--text)}
.fuel-name{flex:1;min-width:0}
.fuel-name b{display:block;font:650 13.5px/1.3 var(--f-ui);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fuel-name small{display:block;font:var(--f-micro);color:var(--text-3);margin-top:2px}
.fuel-row .chev{flex:0 0 auto;color:var(--text-3);opacity:.55}
.fuel-row .chev .ic{width:15px;height:15px}
.fuel-save{font-style:normal;font:800 10.5px/1 var(--f-ui);color:var(--ok);background:var(--ok-bg);
  padding:3px 6px;border-radius:6px;margin-left:6px;white-space:nowrap;vertical-align:1px}
.fuel-note{margin-top:8px;font:var(--f-micro);color:var(--text-3);opacity:.85;line-height:1.45}
.fuel-row--best{background:color-mix(in srgb,var(--ok) 8%,transparent);border-radius:10px;border-top:0}
.fuel-row--best .fuel-name b{white-space:normal}
.sv-good{color:var(--ok);font-variant-numeric:tabular-nums}
.fuel-src{margin-top:10px;font:var(--f-micro);color:var(--text-3);opacity:.8}

/* TCO real: fila hairline a lo ancho de la surface, sin caja propia */
.glance-tco{grid-column:1/-1;display:flex;align-items:baseline;gap:6px;margin-top:var(--s2);
  padding-top:var(--s3);border-top:1px solid var(--border);color:var(--text-3);font:600 12.5px/1 var(--f-ui)}
.glance-tco .ic{width:14px;height:14px;align-self:center;stroke-width:2.2;flex:0 0 auto;min-width:14px}
.glance-tco b{margin-left:2px;color:var(--text);font:800 14px/1 var(--f-ui);font-variant-numeric:tabular-nums}
.glance-tco span{margin-left:auto;color:var(--text-3);font:600 11.5px/1 var(--f-ui);font-variant-numeric:tabular-nums}
.add-inline{width:100%;min-height:50px;margin-top:var(--s2);border-radius:var(--r-md);
  background:var(--surface-2);color:var(--text-2);font:700 14.5px/1 var(--f-ui);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background var(--t-fast)}
.add-inline .ic{width:17px;height:17px;stroke-width:2.4}
.add-inline:active{background:var(--surface-3)}
[data-theme="light"] .add-inline{border:1px solid var(--border)}

/* compat: section-title vieja sigue usándose en otras vistas */
.section-title{font:var(--f-h2);letter-spacing:-.015em;color:var(--text);margin:var(--s7) var(--s1) var(--s3);
  display:block}
.section-title::after{display:none}

/* ───────── "lo siguiente" (legacy) ───────── */
.next-card{display:flex;align-items:center;gap:var(--s4);padding:var(--s4)}
.next-card .tile{width:52px;height:52px;border-radius:16px}
.next-body{flex:1;min-width:0}
.next-body small{font:var(--f-micro);text-transform:uppercase;letter-spacing:.12em;color:var(--text-3);display:block}
.next-body b{font:800 17px/1.25 var(--f-ui);letter-spacing:-.02em;display:block;margin-top:2px}
.next-body span{font:var(--f-sub);color:var(--text-2);display:block;margin-top:2px}
.next-when{text-align:right;flex:0 0 auto}

/* ───────── chips métricos ───────── */
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.metric{text-align:center;padding:13px 4px 11px;border-radius:var(--r-md);background:var(--glass);
  border:1px solid var(--border);box-shadow:var(--shadow-1)}
[data-theme="light"] .metric{background:var(--surface)}
.metric b{display:block;font:900 21px/1.1 var(--f-ui);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.metric span{font:800 9.5px/1.4 var(--f-ui);color:var(--text-3);text-transform:uppercase;letter-spacing:.08em}
.metric.c-bad{border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.metric.c-bad b{color:var(--bad)}
.metric.c-warn{border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.metric.c-warn b{color:var(--warn)}
.metric.c-ok{border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.metric.c-ok b{color:var(--ok)}
.metric--money b{color:var(--text)}
[data-theme="light"] .metric.c-bad{box-shadow:none}

/* ───────── tiles e iconos estado ───────── */
.tile{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--surface-2);
  border:1px solid var(--border);color:var(--text-2);flex:0 0 auto}
.tile .ic{width:20px;height:20px}
.tile.s-bad{background:var(--bad-bg);border-color:color-mix(in srgb,var(--bad) 40%,transparent);color:var(--bad)}
.tile.s-warn{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 40%,transparent);color:var(--warn)}
.tile.s-ok{background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 35%,transparent);color:var(--ok)}
.tile.s-info{background:var(--info-bg);border-color:color-mix(in srgb,var(--info) 35%,transparent);color:var(--info)}
.tile.s-off{background:var(--surface-3);border-color:var(--border);color:var(--text-3)}
.tile.s-brand{background:color-mix(in srgb,var(--brand) 12%,transparent);border-color:color-mix(in srgb,var(--brand) 38%,transparent);color:var(--brand)}

/* ───────── badges ───────── */
.badge{display:inline-flex;align-items:center;padding:4.5px 10px;border-radius:var(--r-full);
  font:800 10.5px/1 var(--f-ui);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;
  border:1px solid transparent}
.badge.ok{background:var(--ok-bg);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.badge.warn{background:var(--warn-bg);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.badge.bad{background:var(--bad-bg);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.badge.info{background:var(--info-bg);color:var(--info);border-color:color-mix(in srgb,var(--info) 30%,transparent)}
.badge.off,.badge.snoozed{background:var(--surface-3);color:var(--text-3);border-color:var(--border)}

/* ───────── task rows ───────── */
.rows{display:flex;flex-direction:column;gap:8px}
.sheet-actions{display:flex;flex-direction:column;gap:8px}
.sheet-action{display:flex;align-items:center;gap:13px;padding:13px;border-radius:var(--r-md);
  background:var(--glass);border:1px solid var(--border);font:800 14.5px/1.3 var(--f-ui);text-align:left;color:inherit;text-decoration:none}
.sheet-action:active{transform:scale(.99);background:var(--surface-3)}
.sheet-action span{min-width:0}
.sheet-action small{display:block;font:600 12px/1.4 var(--f-ui);color:var(--text-2);margin-top:2px}
.sheet-action .tile{width:38px;height:38px;border-radius:12px;background:var(--surface)}
.sheet-action .tile .ic{width:19px;height:19px}
.row{width:100%;text-align:left;display:flex;align-items:center;gap:13px;padding:13px 15px}
.row:active{transform:scale(.995);background:var(--surface-2)}
.row-body{flex:1;min-width:0}
.row-body b{display:block;font:800 14.5px/1.3 var(--f-ui);letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-body small{display:block;font:var(--f-sub);color:var(--text-2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-end{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:0 0 auto}
.row-chev{color:var(--text-3);display:flex}
.bar{height:5px;border-radius:var(--r-full);background:var(--surface-3);overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;border-radius:inherit;background:var(--ok);transition:width var(--t-slow) var(--ease-out)}
.bar i.warn{background:var(--warn)}.bar i.bad{background:var(--bad)}
.row-add{border-style:dashed;justify-content:flex-start;color:var(--brand);font-weight:800;min-height:52px}
.pill{font:800 11px/1 var(--f-ui);padding:5px 9px;border-radius:var(--r-full);background:var(--surface-3);color:var(--text-2)}

/* ───────── segmented ───────── */
.seg{display:flex;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:3px;gap:3px}
.seg button{flex:1;min-height:38px;border-radius:10px;font:800 12.5px/1 var(--f-ui);color:var(--text-2);transition:all var(--t-fast)}
.seg button.on{background:var(--glass),var(--surface);color:var(--text);border:1px solid var(--border-2);
  box-shadow:0 4px 18px -8px rgba(0,0,0,.7)}
[data-theme="light"] .seg button.on{background:var(--surface);box-shadow:var(--shadow-1)}

/* ───────── sheets + dialogs ───────── */
.backdrop{position:fixed;inset:0;z-index:50;background:rgba(3,6,12,.66);backdrop-filter:blur(6px);animation:fade var(--t-base)}
@keyframes fade{from{opacity:0}}
.sheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:51;
  width:min(560px,100%);max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;
  background:linear-gradient(180deg, var(--elevated), var(--surface));
  border-radius:var(--r-xl) var(--r-xl) 0 0;padding:6px var(--s5) calc(var(--s5) + var(--safe-b));
  box-shadow:var(--shadow-3);border:1px solid var(--border-2);border-bottom:none;
  animation:slideUp var(--t-slow) var(--ease-out)}
[data-theme="light"] .sheet{background:var(--surface)}
@keyframes slideUp{from{transform:translate(-50%,72px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.sheet-handle{width:42px;height:5px;border-radius:var(--r-full);background:var(--border-2);margin:8px auto 14px}
.sheet-title{font:900 17px/1.3 var(--f-ui);letter-spacing:-.025em;margin-bottom:var(--s4);display:flex;align-items:center;gap:10px}
.sheet-title .ic{color:var(--brand)}
.sheet-footer{display:flex;gap:10px;margin-top:var(--s5)}
.sheet-footer .btn{flex:1}
.dialog{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:52;width:min(400px,calc(100vw - 40px));
  background:linear-gradient(180deg,var(--elevated),var(--surface));border:1px solid var(--border-2);border-radius:var(--r-xl);
  box-shadow:var(--shadow-3);padding:var(--s5);animation:pop var(--t-base) var(--ease-out)}
[data-theme="light"] .dialog{background:var(--surface)}
@keyframes pop{from{transform:translate(-50%,-50%) scale(.94);opacity:0}}
.dialog h3{font:800 17px/1.3 var(--f-ui);letter-spacing:-.02em}
.dialog p{font:var(--f-body);color:var(--text-2);margin-top:8px}
.dialog-btns{display:flex;gap:10px;margin-top:var(--s5)}
.dialog-btns .btn{flex:1;min-height:46px}

/* ───────── formularios ───────── */
.field{display:block;margin-bottom:var(--s4)}
.field>span{display:flex;align-items:baseline;justify-content:space-between;font:var(--f-micro);color:var(--text-3);
  margin-bottom:6px;text-transform:uppercase;letter-spacing:.09em}
.field input,.field select,.field textarea{width:100%;min-height:52px;padding:13px 14px;border-radius:var(--r-md);
  border:1.5px solid var(--border-2);background:var(--surface-2);font:700 16px/1.3 var(--f-ui);
  color-scheme:inherit;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
[data-theme="light"] .field input,[data-theme="light"] .field select,[data-theme="light"] .field textarea{background:var(--surface)}
.field input::placeholder{color:var(--text-3);font-weight:600;opacity:.9}
.field textarea{min-height:76px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);background:var(--surface);
  box-shadow:0 0 0 3.5px color-mix(in srgb,var(--brand) 18%,transparent)}
.field.err input{border-color:var(--bad)}
.field-err{display:none;font:700 12px/1.4 var(--f-ui);color:var(--bad);margin-top:5px}
.field.err .field-err{display:block}
.field-2col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 2px;font-weight:700;font-size:14px}
.fhint{display:block;font:600 12px/1.5 var(--f-ui);color:var(--text-3);text-transform:none;letter-spacing:0;margin-top:6px}
.field--hero input{font-size:28px;font-weight:900;text-align:center;font-variant-numeric:tabular-nums}
.unit-in{position:relative}
.unit-in input{padding-right:52px}
.unit-in em{position:absolute;right:14px;top:50%;transform:translateY(-50%);font:800 12.5px/1 var(--f-ui);
  font-style:normal;color:var(--text-3);pointer-events:none;text-transform:uppercase;letter-spacing:.06em}
.switch{position:relative;width:52px;height:31px;flex:0 0 auto}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.slider{position:absolute;inset:0;border-radius:var(--r-full);background:var(--surface-3);border:1.5px solid var(--border-2);transition:var(--t-fast)}
.slider::before{content:"";position:absolute;width:22px;height:22px;border-radius:50%;left:2.5px;top:3px;background:var(--surface);
  box-shadow:0 2px 5px rgba(0,0,0,.45);transition:var(--t-fast)}
.switch input:checked+.slider{background:var(--brand);border-color:var(--brand);
}
.switch input:checked+.slider::before{transform:translateX(21px);background:var(--brand-ink)}
.switch input:focus-visible+.slider{outline:2.5px solid var(--brand);outline-offset:2px}
.opt{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s4)}
.opt button{min-height:40px;padding:8px 14px;border-radius:var(--r-full);border:1.5px solid var(--border);
  background:var(--surface-2);font:800 12.5px/1 var(--f-ui);color:var(--text-2);transition:all var(--t-fast)}
.opt button.on{border-color:var(--brand);color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,transparent);
}
[data-theme="light"] .opt button.on{box-shadow:none}

/* ───────── FAB píldora y tabbar nativa ───────── */
.fab{position:fixed;right:var(--s4);bottom:calc(var(--tab-h) + var(--safe-b) + 14px);z-index:35;
  height:48px;padding:0 20px 0 16px;border-radius:var(--r-full);display:inline-flex;align-items:center;gap:7px;
  color:var(--bg);font:700 14.5px/1 var(--f-ui);letter-spacing:-.01em;
  background:var(--text);border:0;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.5);
  transition:transform var(--t-base) var(--ease-out),opacity var(--t-base)}
[data-theme="light"] .fab{box-shadow:0 6px 18px -6px rgba(26,28,32,.35)}
.fab:active{transform:scale(.96)}
.fab .ic{width:17px;height:17px;stroke-width:2.6}
.fab.fab--hide{transform:translateY(calc(100% + var(--tab-h) + 30px));pointer-events:none;opacity:0}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:44;display:flex;justify-content:space-around;align-items:stretch;
  padding:4px 4px calc(4px + var(--safe-b));
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);
  border-top:1px solid var(--border)}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;min-height:56px;justify-content:center;
  padding:8px 4px 6px;border-radius:14px;color:var(--text-3);transition:color var(--t-base),background var(--t-base)}
.tab .ic{width:22px;height:22px;transition:transform var(--t-base) var(--ease-out)}
.tab span{font:650 10.5px/1 var(--f-ui);letter-spacing:.01em}
.tab:active{background:var(--surface-2)}
.tab.on{color:var(--brand);background:color-mix(in srgb,var(--brand) 9%,transparent)}
.tab.on .ic{stroke-width:2.2}
.tab .dot{position:absolute;transform:translate(12px,-10px);width:7px;height:7px;border-radius:50%;background:var(--bad);box-shadow:0 0 0 2px var(--bg)}

/* ───────── estados vacíos ───────── */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:var(--s8) var(--s5);
  border-radius:var(--r-lg);border:1.5px dashed var(--border-2);background:transparent}
.empty .tile{width:56px;height:56px;border-radius:18px;background:color-mix(in srgb,var(--brand) 10%,transparent);
  border-color:color-mix(in srgb,var(--brand) 30%,transparent);color:var(--brand)}
.empty .tile .ic{width:26px;height:26px}
.empty b{font:800 15.5px/1.35 var(--f-ui);letter-spacing:-.015em;max-width:30ch}
.empty p{font:var(--f-sub);color:var(--text-3);max-width:34ch;line-height:1.55}
.empty .btn{margin-top:8px}

.empty-art{width:96px;height:52px;color:color-mix(in srgb,var(--brand) 40%,var(--text-3));opacity:.85}
.empty-art .ic,svg.empty-art{width:96px;height:52px}

/* ───────── toast ───────── */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tab-h) + var(--safe-b) + var(--fab) + 26px);z-index:70;
  background:color-mix(in srgb,var(--elevated) 92%,var(--brand));color:var(--text);
  font:800 13.5px/1.35 var(--f-ui);padding:13px 18px;border-radius:var(--r-md);
  box-shadow:var(--shadow-3);border:1px solid var(--border-2);max-width:calc(100vw - 40px);text-align:center;
  animation:fadeUp var(--t-base) var(--ease);display:flex;align-items:center;gap:9px}
.toast .ic{width:16px;height:16px;color:var(--brand)}

/* ───────── timeline historial ───────── */
.tl{position:relative;padding-left:22px}
.tl::before{content:"";position:absolute;left:7px;top:6px;bottom:10px;width:2px;
  background:linear-gradient(180deg,var(--brand),var(--border) 40%,transparent)}
.tl-item{position:relative;margin-bottom:10px}
.tl-item::before{content:"";position:absolute;left:-20px;top:17px;width:12px;height:12px;border-radius:50%;
  background:var(--surface);border:3px solid var(--brand);
}
.tl-item.m::before{border-color:var(--accent)}
.tl-day{font:800 11px/1 var(--f-ui);color:var(--text-3);text-transform:uppercase;letter-spacing:.1em;margin:var(--s4) 0 8px}
.tl .hitem{margin:0 0 8px}

/* ───────── timeline unificado v7 (sheet Vida del vehículo) ───────── */
.tl-list .tl-year{font:750 15px/1 var(--f-ui);color:var(--text);margin:var(--s5) 2px 4px;font-variant-numeric:tabular-nums}
.tl-list .tl-year:first-child{margin-top:var(--s2)}
.tl-list .tl-row{padding:12px 2px}
.tl-list .tl-row+.tl-row{border-top:1px solid var(--border)}
.tl-list .tl-row:active{background:var(--surface-2);border-radius:var(--r-md)}
.tl-ic{width:34px;height:34px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border-radius:10px;background:var(--surface-2);color:var(--text-2)}
.tl-ic .ic{width:17px;height:17px}
.tl-ic.t-fuel{color:var(--info);background:color-mix(in srgb,var(--info) 12%,transparent)}
.tl-ic.t-charge{color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.tl-ic.t-service,.tl-ic.t-itv{color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,transparent)}
.tl-ic.t-repair{color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent)}

/* ───────── gráficos ───────── */
.spark{width:100%;height:76px;display:block}
.spark path.line{fill:none;stroke:var(--brand);stroke-width:2.5;stroke-linecap:round}

.spark path.area{fill:color-mix(in srgb,var(--brand) 14%,transparent);stroke:none}
.spark circle{fill:var(--surface);stroke:var(--brand);stroke-width:2.5}
[data-theme="light"] .spark path.line{filter:none}
.bars{display:flex;align-items:flex-end;gap:5px;height:96px;padding-top:8px}
.bars b{flex:1;min-width:8px;border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 85%,transparent),color-mix(in srgb,var(--brand) 35%,transparent));position:relative}
.bars b.top{background:linear-gradient(180deg,var(--brand),color-mix(in srgb,var(--brand) 55%,transparent));
}
[data-theme="light"] .bars b.top{box-shadow:none}
.bars em{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font:700 9px/1 var(--f-ui);
  font-style:normal;color:var(--text-3)}
.legend{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:14px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle}
.legend span{font:700 11.5px/1 var(--f-ui);color:var(--text-2)}

/* ───────── neumáticos ───────── */
.tire-diagram{position:relative;width:170px;height:210px;margin:0 auto}
.tire-diagram .wheel{position:absolute;width:52px;height:74px;border-radius:12px;border:2px solid var(--border-2);
  background:var(--surface-2);display:grid;place-content:center;text-align:center;gap:2px}
.tire-diagram .wheel b{font:900 12px/1 var(--f-ui);font-variant-numeric:tabular-nums}
.tire-diagram .wheel small{font:800 8px/1 var(--f-ui);color:var(--text-3);text-transform:uppercase}
.wheel.st-ok{border-color:var(--ok);background:var(--ok-bg)}
.wheel.st-warn{border-color:var(--warn);background:var(--warn-bg)}
.wheel.st-bad{border-color:var(--bad);background:var(--bad-bg)}
.wheel.fl{left:8px;top:4px}.wheel.fr{right:8px;top:4px}.wheel.rl{left:8px;bottom:4px}.wheel.rr{right:8px;bottom:4px}

/* ───────── docs / grids ───────── */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:11px 0;font-size:13.5px}
.kv+.kv{border-top:1px solid var(--border)}
.kv span{color:var(--text-3);font-weight:700;min-width:0}
.kv b{text-align:right;font-weight:800;letter-spacing:-.01em}
.cat-title{font:var(--f-micro);text-transform:uppercase;letter-spacing:.14em;color:var(--text-3);margin:var(--s4) 2px 8px}
.added{display:flex;align-items:center;gap:8px;color:var(--ok);font-weight:800;font-size:13px;padding:10px 14px;
  background:var(--ok-bg);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent);border-radius:var(--r-md)}

/* ───────── settings ───────── */
.settings-group{margin-bottom:var(--s3)}
.s-row{width:100%;display:flex;align-items:center;gap:13px;padding:14px 15px;text-align:left}
.s-row+.s-row{border-top:1px solid var(--border)}
.s-row:active{background:var(--surface-2)}
.s-row b{flex:1;font-size:14px;font-weight:800;letter-spacing:-.01em;min-width:0}
.s-row small{display:block;font-weight:600;color:var(--text-3);font-size:11.5px;margin-top:1px}
.app-version{text-align:center;color:var(--text-3);font:500 11px/1.8 var(--f-ui);margin:var(--s8) 0 var(--s4)}
.app-version b{color:var(--text-2)}

/* ───────── wizard ───────── */
.wiz{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column;padding:0}
.wiz-top{padding:calc(var(--s4) + var(--safe-t)) var(--s5) 0;max-width:520px;width:100%;margin:0 auto}
.wiz-progress{display:flex;gap:5px;margin-bottom:var(--s6)}
.wiz-progress i{flex:1;height:4px;border-radius:var(--r-full);background:var(--surface-3);transition:var(--t-base)}
.wiz-progress i.on{background:var(--brand)}
[data-theme="light"] .wiz-progress i.on{box-shadow:none}
.wiz-body{flex:1;overflow-y:auto;max-width:520px;width:100%;margin:0 auto;padding:0 var(--s5)}
.wiz-foot{padding:var(--s4) var(--s5) calc(var(--s5) + var(--safe-b));max-width:520px;width:100%;margin-top:auto;
  display:flex;gap:10px;border-top:1px solid var(--border);
  background:color-mix(in srgb,var(--bg) 86%,transparent)}
.wiz-foot .btn{flex:1}
.wiz-step{display:none}
.wiz-step.on{display:block;animation:fadeUp var(--t-base) var(--ease)}
.wiz-step h2{font:900 26px/1.1 var(--f-ui);letter-spacing:-.035em;margin-bottom:6px}
.wiz-step>p{font:var(--f-body);color:var(--text-2);margin-bottom:var(--s5)}
.wiz-kicker{font:800 11px/1 var(--f-ui);text-transform:uppercase;letter-spacing:.2em;color:var(--brand);display:block;margin-bottom:10px}
.wiz-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:14vh}
.wiz-hero .brand-logo{width:76px;height:76px;margin-bottom:var(--s5)}
.wiz-hero h2{font-size:29px}

/* utilidades puntuales */
.money-input{direction:ltr}

/* ───────── desktop ≥900px: rail lateral + 2 columnas ───────── */
@media (min-width:900px){
  body{padding-bottom:var(--s6)}
  .tabbar{left:0;right:auto;top:0;bottom:0;width:92px;flex-direction:column;justify-content:flex-start;gap:6px;
    padding:calc(var(--s5) + var(--safe-t)) var(--s2);border-top:0;border-right:1px solid var(--border)}
  .tab{flex:0 0 auto;width:100%;min-height:64px;border-radius:16px}
  .tab span{font-size:11px}
  main{margin-left:92px;max-width:none;
    padding:var(--s7) max(var(--s8), calc((100vw - 92px - 980px)/2))}
  .appbar{padding-left:calc(92px + var(--s8))}
  .sheet{left:calc(92px + (100vw - 92px)/2)}
  .fab{right:max(var(--s8), calc((100vw - 92px - 980px)/2 + var(--s8)));bottom:var(--s8)}
  .vswitch{max-width:520px}
  /* home en 2 columnas: estado a la izquierda, planes a la derecha */
  #v-home{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);grid-template-areas:
    "vsw vsw"
    "hero next"
    "attn next"
    "attn glance"
    ". glance";gap:0 var(--s8);align-items:start}
  #v-home .vswitch{grid-area:vsw}
  #v-home .car-hero{grid-area:hero;padding-top:var(--s5)}
  #v-home .attention{grid-area:attn}
  #v-home #nextSurface{grid-area:next;margin-top:var(--s5)}
  #v-home #glanceSurface{grid-area:glance;margin-top:var(--s6)}
}

/* ───────── escritorio ≥900px: las 4 vistas restantes (W2: solo Home tenía grid) ───────── */
@media (min-width:900px){
  /* CUIDADOS: filtros arriba a la izquierda, lista en dos columnas */
  #v-care #careSeg{max-width:520px}
  #v-care #catFilter{display:none}                     /* en desktop el filtrado sobra: 2 columnas lo resuelven solas */
  #careList > .surface{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6) var(--s7);align-items:start}
  /* en grid el separador vertical del móvil descoloca el primer grupo de la fila derecha: ritmo solo por gap */
  #careList > .surface > .care-group{break-inside:avoid}
  #careList > .surface > .care-group + .care-group{border-top:0;margin-top:0;padding-top:0}
  #careList .add-line{display:none}   /* en desktop sobra: el FAB ya es la acción de añadir */
  /* CARE: calendario también en 2 columnas */
  #careCalend{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 var(--s8);align-items:start}
  #careCalend .section-title{grid-column:1/-1;margin-top:0}
  #careCalend #cal30,#careCalend #cal30Empty{margin-bottom:0}
  #careCalend #calLater,#careCalend #calLaterEmpty{margin-bottom:0}
  #careAvisos #avisosList{max-width:640px}

  /* COSTES: hero a la izquierda, gráficas a la derecha */
  #costResumen{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr);gap:var(--s5) var(--s8);align-items:start}
  #costResumen .metrics{grid-column:1/-1;gap:var(--s5)}
  #costResumen #costMetrics{display:grid;grid-column:1/-1}
  /* hero arriba; barras+donut a la izquierda (equilibrio 2 tarjetas), TCO+savings derecha */
  #costChartCard{grid-row:2;grid-column:1}
  #costCatsCard{grid-row:3;grid-column:1}
  #realCostCard{grid-column:2;grid-row:2/4}
  #savingsCard:not([hidden]){grid-column:2;grid-row:4}
  #costResumen .cost-sub{border-top:0;padding-top:0}   /* el filete móvil ya no separa nada aquí */
  /* fuel/charge: estadísticas arriba, gráfica + lista en columnas */
  #costFuel,#costCharge{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);gap:var(--s5) var(--s8);align-items:start}
  #costFuel>.metrics,#costCharge>.metrics{grid-column:1/-1}
  #costFuel>.btn,#costCharge>.btn{grid-column:2;grid-row:2;align-self:start;margin:0}
  #fuelChartCard:not([hidden]),#chargeChartCard:not([hidden]){grid-column:2;grid-row:3}
  #homeTariffCard:not(:empty){grid-column:2;grid-row:4}
  #costFuel .section-title,#costCharge .section-title{grid-column:1;grid-row:2;margin-top:0}
  #costFuel .rows,#costCharge .rows{grid-column:1;grid-row:3}
  #costFuel .empty,#costCharge .empty{grid-column:1;grid-row:3}
  #costGastos .rows,#costGastos .empty{max-width:620px}
  #costGastos>.btn{max-width:620px}

  /* MI COCHE: ficha a la izquierda, acciones a la derecha, historial abajo a la izquierda */
  #v-car{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);grid-template-rows:auto min-content 1fr;gap:var(--s5) var(--s8);align-items:start}
  #v-car .vswitch{grid-column:1/-1}
  #carProfile{grid-column:1;grid-row:2}
  #carActions{grid-column:2;grid-row:2/4;margin-top:0}
  #carHistorySection{grid-column:1;grid-row:3}
  #carHistorySection .section-title{margin-top:var(--s3)}

  /* AJUSTES: grupos en dos columnas */
  #settingsBody{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5) var(--s8);align-items:start}
  #settingsBody .settings-group-t{margin-top:0}
  .app-version{grid-column:1/-1}
}

/* utilidades puntuales (legacy) */
.nearby-controls,.nearby-links{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.nearby-controls .btn{flex:1 1 140px}
.nearby-filter{margin:16px 0}
.nearby-place{border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;margin:12px 0;background:var(--surface)}
.nearby-heading{display:flex;align-items:center;gap:12px}
.nearby-heading>div{min-width:0}
.nearby-heading h4{margin:4px 0;font-size:16px;overflow-wrap:anywhere}
.nearby-heading small{color:var(--text-2)}
.nearby-place p{overflow-wrap:anywhere;margin:12px 0}
.nearby-links .btn{text-decoration:none;min-height:44px}
.nearby-empty{padding:16px;border:1px solid var(--border);border-radius:var(--r-md)}

.muted{color:var(--text-3)}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.sheet .card{box-shadow:none;background:var(--surface-2)}
.sheet .card{border-color:var(--border)}

/* ───────── progreso de escaneo ───────── */
.scan-prog{position:fixed;inset:0;z-index:80;display:grid;place-items:center;
  background:rgba(3,6,12,.7);backdrop-filter:blur(6px);animation:fade var(--t-base)}
.scan-card{background:linear-gradient(180deg,var(--elevated),var(--surface));border:1px solid var(--border-2);border-radius:var(--r-lg);
  padding:22px 28px;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:var(--shadow-3)}
[data-theme="light"] .scan-card{background:var(--surface)}
.scan-card .ic{width:30px;height:30px;color:var(--brand);animation:spin 1.1s linear infinite}

.scan-card b{font:800 14px/1.3 var(--f-ui);letter-spacing:-.01em}
.scan-card .bar{width:170px}

/* ─ modo simple (T3.3): oculta lo económico-avanzado, deja lo esencial ─ */
html.simple-mode #homeFuel,
html.simple-mode .glance-tco,
html.simple-mode #realCostCard,
html.simple-mode #savingsCard{display:none!important}

/* ─ coach marks ─ */
.coach-overlay{position:fixed;inset:0;z-index:100;background:transparent}
/* spotlight: el objetivo debe VERSE iluminado, no solo recortado:
   halo interno (inset) + anillo exterior brillante sobre el scrim */
.coach-spotlight{position:fixed;z-index:101;border-radius:14px;
  box-shadow:0 0 0 9999px rgba(3,6,12,.78),
             0 0 0 2px rgba(62,229,197,.9),
             0 0 28px 6px rgba(62,229,197,.22),
             inset 0 0 0 2px rgba(62,229,197,.9),
             inset 0 0 18px rgba(62,229,197,.16);
  pointer-events:none;animation:cfade var(--t-base) var(--ease-out)}
[data-theme="light"] .coach-spotlight{box-shadow:0 0 0 9999px rgba(0,0,0,.38)}
.coach-pop{position:fixed;z-index:102;max-width:300px;background:var(--surface);
  border:1px solid var(--border-2);border-radius:var(--r-lg);padding:18px 20px 14px;
  box-shadow:var(--shadow-3);animation:cpop var(--t-base) var(--ease-out)}
[data-theme="light"] .coach-pop{background:var(--elevated)}
.coach-title{font:var(--f-h2);color:var(--text);display:block;margin-bottom:6px}
.coach-desc{font:var(--f-body);color:var(--text-2);margin:0 0 14px;line-height:1.45}
.coach-foot{text-align:right}
.coach-btn{font:600 14px/1 var(--f-ui);color:var(--brand);background:none;border:none;
  padding:8px 12px;border-radius:var(--r-sm);cursor:pointer;transition:background var(--t-fast)}
.coach-pop::after{content:"";position:absolute;left:var(--coach-tail,50%);width:12px;height:12px;
  background:inherit;border:1px solid var(--border-2);transform:translateX(-50%) rotate(45deg)}
.coach-pop--b::after{top:-7px;border-right:0;border-bottom:0}
.coach-pop--t::after{bottom:-7px;border-left:0;border-top:0}
.coach-btn:hover{background:var(--ok-bg)}
.coach-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@keyframes cfade{from{opacity:0}to{opacity:1}}
@keyframes cpop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  .coach-spotlight,.coach-pop{animation:none!important;transition:none!important}
}