/* ¿Hoy rueda? — estilos */

/* Fuentes auto-hosteadas (variables, subset latín) — sin dependencia de Google Fonts */
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url(fonts/space-grotesk-latin.woff2) format('woff2');
}
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(fonts/hanken-grotesk-latin.woff2) format('woff2');
}

:root{
  --bg:#14161B; --surface:#1C1F27; --surface-2:#252934; --raised:#2E333F;
  --ink:#F5F6F8; --muted:#9298A4; --faint:#6B7280; --line:#2C303A;
  --plate:#F4C20D; --plate-ink:#181206;
  --go:#34C77B; --go-soft:rgba(52,199,123,.14); --go-line:rgba(52,199,123,.42);
  --stop:#F0565B; --stop-soft:rgba(240,86,91,.14); --stop-line:rgba(240,86,91,.45);
  --warn:#F4C20D; --warn-soft:rgba(244,194,13,.12);
  --r:18px; --r-sm:12px;
  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'Hanken Grotesk',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--body);
  -webkit-font-smoothing:antialiased; line-height:1.45;
  padding:env(safe-area-inset-top) 0 calc(86px + env(safe-area-inset-bottom));
}
.wrap{max-width:440px; margin:0 auto; padding:20px 18px 0}

/* Vistas (pestañas) */
.view:not([hidden]){animation:viewIn .22s ease}
@keyframes viewIn{from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none}}

/* Barra de pestañas */
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; justify-content:center; gap:2px;
  background:rgba(20,22,27,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
.tabbar button{appearance:none; border:0; background:transparent; cursor:pointer;
  flex:1; max-width:110px; display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--faint); font-family:var(--display); font-weight:600; font-size:.64rem;
  letter-spacing:.02em; padding:5px 2px 3px; border-radius:12px;
  transition:color .18s, background .18s}
.tabbar button[aria-selected="true"]{color:var(--plate)}
.tabbar button[aria-selected="true"] svg{filter:drop-shadow(0 0 7px rgba(244,194,13,.45))}
.tabbar button:active{transform:scale(.95)}
.tabbar button:focus-visible{outline:2px solid var(--plate); outline-offset:2px}

/* Bienvenida */
.welcome{position:fixed; inset:0; z-index:60; background:var(--bg); overflow-y:auto;
  display:flex; align-items:center; justify-content:center;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.welcome[hidden]{display:none}
.w-inner{max-width:400px; width:100%; padding:36px 26px; animation:viewIn .3s ease}
.w-brand{display:flex; align-items:center; gap:12px; margin-bottom:6px}
.w-light{width:18px; height:18px; border-radius:50%; background:var(--plate);
  box-shadow:0 0 0 6px rgba(244,194,13,.15), 0 0 24px 4px rgba(244,194,13,.35)}
.w-brand h2{font-family:var(--display); font-weight:700; font-size:2rem;
  letter-spacing:-.03em; margin:0}
.w-tag{margin:0 0 22px; color:var(--muted); font-size:.98rem}
.w-points{list-style:none; margin:0 0 26px; padding:0; display:flex;
  flex-direction:column; gap:12px}
.w-points li{display:flex; gap:11px; align-items:flex-start; font-size:.88rem;
  color:var(--muted); line-height:1.45}
.w-points li .w-ico{flex:0 0 auto; font-size:1.05rem; margin-top:1px}
.w-form input{display:block; width:100%; margin-bottom:8px; box-sizing:border-box;
  background:var(--surface); border:1px solid var(--line); color:var(--ink);
  border-radius:11px; padding:12px 13px; font-family:var(--body); font-size:.92rem;
  color-scheme:dark}
.w-form input:focus-visible{outline:2px solid var(--plate); outline-offset:1px}
.w-form input::placeholder{color:var(--faint)}
.w-skip{appearance:none; border:0; background:transparent; display:block;
  margin:20px auto 0; color:var(--faint); font-family:var(--body); font-size:.84rem;
  cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:6px}
.w-skip:hover{color:var(--muted)}

/* Acerca de */
.about{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:15px; font-size:.82rem; color:var(--muted); line-height:1.55}
.about p{margin:0 0 10px} .about p:last-child{margin:0}
.about b{color:var(--ink)}
.about-v{color:var(--faint); font-size:.72rem}

/* Header */
.top{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:18px}
.brand{display:flex; align-items:center; gap:9px}
.brand .light{width:13px; height:13px; border-radius:50%; background:var(--plate);
  box-shadow:0 0 0 4px rgba(244,194,13,.16)}
.brand h1{font-family:var(--display); font-weight:700; font-size:1.18rem; letter-spacing:-.02em; margin:0}
.brand h1 .tag{font-weight:500; font-size:.72rem; color:var(--muted); letter-spacing:0; margin-left:2px}
.today{font-family:var(--display); font-weight:500; font-size:.74rem; color:var(--muted);
  text-align:right; text-transform:capitalize; letter-spacing:.01em; line-height:1.25}

/* Segmented controls */
.seg{display:flex; gap:6px; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:5px; margin-bottom:10px}
.seg button{flex:1; appearance:none; border:0; background:transparent; color:var(--muted);
  font-family:var(--display); font-weight:600; font-size:.92rem; letter-spacing:-.01em;
  padding:11px 6px; border-radius:10px; cursor:pointer; transition:background .18s,color .18s}
.seg button[aria-pressed="true"]{background:var(--raised); color:var(--ink)}
.seg.veh button[aria-pressed="true"]{background:var(--plate); color:var(--plate-ink)}
.seg button:focus-visible{outline:2px solid var(--plate); outline-offset:2px}
.seg.city button.home{position:relative}
.seg.city button.home::after{content:"★"; position:absolute; top:4px; right:7px;
  font-size:.46rem; line-height:1; color:var(--plate); opacity:.95}
.seg.city button.home[aria-pressed="false"]::after{opacity:.55}

/* Plate input */
.pick-label{display:flex; align-items:center; justify-content:space-between;
  font-size:.78rem; color:var(--muted); margin:16px 2px 9px; font-weight:500}
.pick-label .hint{color:var(--faint); font-size:.72rem}
/* La placa de Mi carro ES una placa colombiana: marco negro, amarilla, ciudad abajo */
.plate-box{display:flex; flex-direction:column; align-items:stretch; border-radius:12px;
  background:var(--plate); border:4px solid #15100a; box-shadow:0 3px 0 rgba(0,0,0,.45);
  outline:2px solid rgba(244,194,13,.35); outline-offset:2px; padding:6px 10px 5px}
.plate-box input{min-width:0; border:0; background:transparent; outline:none;
  color:#15100a; font-family:var(--display); font-weight:700; font-size:2rem;
  letter-spacing:.18em; text-align:center; text-transform:uppercase;
  padding:2px 0 0; line-height:1.15}
.plate-box input::placeholder{color:rgba(24,18,6,.3); letter-spacing:.18em}
.plate-box-city{text-align:center; font-family:var(--display); font-weight:700;
  color:#15100a; font-size:.6rem; letter-spacing:.3em; text-transform:uppercase;
  line-height:1.4; padding-left:.3em}
.plate-box:focus-within{outline:2px solid var(--ink)}
.plate-msg{font-size:.72rem; color:var(--faint); margin:7px 2px 0; min-height:1em}
.plate-msg.err{color:var(--warn)}
.plate .hl{background:var(--plate-ink); color:var(--plate); border-radius:3px; padding:0 3px}

/* Placa estilo Colombia (grande, en el veredicto) */
.plateco{display:inline-flex; flex-direction:column; align-items:center;
  background:var(--plate); border:3px solid #15100a; border-radius:9px;
  padding:5px 14px 4px; box-shadow:0 2px 0 rgba(0,0,0,.4);
  outline:2px solid rgba(244,194,13,.35); outline-offset:1px}
.plateco .pnum{font-family:var(--display); font-weight:700; color:#15100a;
  font-size:1.55rem; line-height:1.05; letter-spacing:.1em; white-space:nowrap}
.plateco .pnum .psep{letter-spacing:0; display:inline-block; width:.35em}
.plateco .pnum .hl{background:#15100a; color:var(--plate); border-radius:4px; padding:0 4px}
.plateco .pcity{font-family:var(--display); font-weight:700; color:#15100a;
  font-size:.52rem; letter-spacing:.22em; text-transform:uppercase;
  line-height:1.4; margin-top:1px; white-space:nowrap}

/* Ciudad de la placa (input en Mi carro) */
.plate-city{display:block; width:100%; box-sizing:border-box;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink);
  border-radius:10px; padding:11px 12px; font-family:var(--display); font-weight:600;
  font-size:.9rem; letter-spacing:.06em; text-transform:uppercase}
.plate-city::placeholder{color:var(--faint); font-weight:500; letter-spacing:.02em}
.plate-city:focus-visible{outline:2px solid var(--plate); outline-offset:1px}

/* Verdict card */
.verdict{margin-top:18px; border-radius:var(--r); border:1px solid var(--line);
  background:var(--surface); padding:22px 20px; position:relative; overflow:hidden;
  transition:background .25s, border-color .25s}
.verdict.go{background:var(--go-soft); border-color:var(--go-line)}
.verdict.stop{background:var(--stop-soft); border-color:var(--stop-line)}
.verdict.warn{background:var(--warn-soft); border-color:rgba(244,194,13,.4)}
.v-row{display:flex; align-items:center; gap:18px}
.v-light{flex:0 0 auto; width:62px; height:62px; border-radius:50%;
  background:var(--raised); display:grid; place-items:center; position:relative}
.v-light::after{content:""; width:30px; height:30px; border-radius:50%; background:var(--faint);
  transition:background .25s, box-shadow .25s}
.go .v-light::after{background:var(--go); box-shadow:0 0 22px 2px rgba(52,199,123,.55)}
.stop .v-light::after{background:var(--stop); box-shadow:0 0 22px 2px rgba(240,86,91,.55)}
.warn .v-light::after{background:var(--warn); box-shadow:0 0 22px 2px rgba(244,194,13,.5)}
.v-text .big{font-family:var(--display); font-weight:700; font-size:2.5rem; line-height:.95;
  letter-spacing:-.03em}
.go .v-text .big{color:var(--go)} .stop .v-text .big{color:var(--stop)}
.warn .v-text .big{color:var(--warn)}
.v-text .sub{font-size:.92rem; color:var(--ink); margin-top:5px; font-weight:500}
/* ✕ para borrar una fecha puesta por error (sin pelear con el calendario de iOS) */
.dclear{appearance:none; flex:0 0 auto; border:1px solid rgba(0,0,0,.22);
  background:rgba(255,255,255,.7); color:#a03535; border-radius:8px;
  width:30px; height:30px; cursor:pointer; font-size:.85rem; line-height:1; padding:0}
.dclear:hover{background:#fff}
.soat-card.taller .dclear{border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.08); color:#ff9d9d}

/* Aviso de vencimiento que pide "✓ Recibido" (no se va hasta que lo confirmen) */
.aviso1[hidden]{display:none}
.aviso1{display:flex; flex-direction:column; gap:8px; margin-bottom:14px}
.av1-row{display:flex; align-items:center; gap:10px; padding:12px 14px;
  background:rgba(244,194,13,.1); border:1px solid rgba(244,194,13,.45); border-radius:14px}
.av1-row.hoy{background:rgba(240,86,91,.12); border-color:rgba(240,86,91,.5)}
.av1-txt{flex:1; font-size:.9rem; color:var(--ink); line-height:1.35}
.av1-btn{flex-shrink:0; border:0; border-radius:10px; padding:9px 14px; cursor:pointer;
  font-family:var(--display); font-weight:700; font-size:.82rem;
  background:var(--plate); color:#141414}
.av1-row.hoy .av1-btn{background:var(--stop); color:#fff}

.v-meta[hidden]{display:none}
.v-meta{margin-top:15px; padding-top:14px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  font-size:.78rem; color:var(--muted)}
.v-meta-col{display:flex; flex-direction:column; gap:10px; min-width:0}
.v-meta b{display:block; color:var(--ink); font-family:var(--display); font-weight:600;
  font-size:.92rem; margin-top:1px; letter-spacing:-.01em; white-space:nowrap}
.v-meta-plate{flex-shrink:0; text-align:right}
.v-meta-plate b{margin-top:4px}
.verdict.empty .v-text .big{color:var(--ink); font-size:1.5rem; letter-spacing:-.02em}
.verdict.empty .v-light::after{background:var(--plate); box-shadow:0 0 14px 1px rgba(244,194,13,.35)}
.verdict.empty{cursor:pointer; border-style:dashed; border-color:rgba(244,194,13,.35)}
.verdict.empty:hover{background:var(--surface-2)}

/* Plate chip inside meta */
.plate{display:inline-flex; align-items:center; gap:0; border-radius:6px; overflow:hidden;
  background:var(--plate); height:30px; box-shadow:0 1px 0 rgba(0,0,0,.3)}
.plate .col{width:7px; align-self:stretch; background:
  linear-gradient(var(--plate) 0 33%, #1f5fd6 33% 66%, #d63a3a 66% 100%)}
.plate .num{font-family:var(--display); font-weight:700; color:var(--plate-ink);
  font-size:1.05rem; padding:0 10px 0 8px; letter-spacing:.04em}

/* Week strip */
.section-h{font-family:var(--display); font-weight:600; font-size:.82rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.08em; margin:24px 2px 11px;
  display:flex; align-items:center; gap:8px}
.section-h::before{content:""; width:4px; height:13px; border-radius:2px;
  background:var(--plate); opacity:.7}
/* Los 7 días caben completos sin deslizar: celdas compactas a partes iguales */
.week{display:flex; gap:4px}
.day{flex:1 1 0; min-width:0;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:7px 1px 8px; text-align:center}
.day .dow{font-size:.5rem; color:var(--faint); font-weight:600; letter-spacing:.03em}
.day .dnum{font-family:var(--display); font-weight:600; font-size:.88rem; margin:1px 0 4px}
.day .dstat{min-height:1.3em; line-height:1.3; margin-bottom:1px;
  font-family:var(--display); font-weight:700; font-size:.62rem; letter-spacing:.02em}
.day .dstat.ok{color:var(--go)}
.day .dstat.bad{color:var(--stop)}
.day .dstat.free{color:var(--go); font-size:.45rem; letter-spacing:.05em; line-height:1.8}
.day .digs{font-family:var(--display); font-weight:600; font-size:.5rem; color:var(--muted);
  min-height:1.1em; letter-spacing:0; white-space:nowrap}
.day.today{border-color:var(--plate); background:var(--surface-2)}
.day.today .dnum{color:var(--plate)}
.day.hit{border-color:var(--stop-line); background:var(--stop-soft)}
.day.hit .digs{color:var(--stop)}
.day.hit.today{border-color:var(--stop)}

/* Mi carro — vencimientos */
.car{display:flex; flex-direction:column; gap:7px}
.car-row{display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:11px 13px}
.car-row .lbl{font-weight:600; font-size:.86rem; color:var(--ink)}
.car-row .hint{grid-column:1 / -1; font-size:.72rem; color:var(--faint); line-height:1.35}
.car-row .ctrl{display:flex; align-items:center; gap:8px; justify-self:end}
.car-row input[type="date"]{appearance:none; -webkit-appearance:none; color-scheme:dark;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink);
  border-radius:9px; padding:7px 9px; font-family:var(--body); font-size:.82rem; min-width:132px}
.car-row input[type="date"]:focus-visible{outline:2px solid var(--plate); outline-offset:1px}
.chip{font-family:var(--display); font-weight:600; font-size:.68rem; letter-spacing:.03em;
  padding:4px 9px; border-radius:999px; white-space:nowrap}
.chip.ok{color:var(--go); background:var(--go-soft); border:1px solid var(--go-line)}
.chip.soon{color:var(--warn); background:var(--warn-soft); border:1px solid rgba(244,194,13,.4)}
.chip.due{color:var(--stop); background:var(--stop-soft); border:1px solid var(--stop-line)}
.chip.none{color:var(--faint); background:var(--surface-2); border:1px solid var(--line)}

/* Hoja de vida v3: dato base → vencimiento calculado */
.car-row.v3{display:block}
.car-row.v3 .head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.car-row.v3 .q{display:block; font-size:.74rem; color:var(--muted); margin:9px 0 5px}
.car-row.v3 .inline{display:flex; gap:7px; flex-wrap:wrap; align-items:center}
.car-row.v3 select{appearance:none; background:var(--surface-2); border:1px solid var(--line);
  color:var(--ink); border-radius:9px; padding:8px 10px; font-family:var(--body);
  font-size:.8rem; color-scheme:dark}
.car-row.v3 .mini{appearance:none; border:1px solid var(--go-line); background:var(--go-soft);
  color:var(--go); font-family:var(--display); font-weight:600; font-size:.72rem;
  padding:8px 10px; border-radius:9px; cursor:pointer; white-space:nowrap}
.car-row.v3 .mini:active{transform:scale(.95)}
.car-row.v3 .calc{display:block; margin-top:9px; font-size:.8rem; color:var(--muted)}
.car-row.v3 .calc b{color:var(--ink); font-family:var(--display); font-weight:600}
.car-row.v3 .calc.due{color:var(--stop)} .car-row.v3 .calc.due b{color:var(--stop)}
.car-row.v3 .calc.soon{color:var(--warn)} .car-row.v3 .calc.soon b{color:var(--warn)}
.car-row.v3 .calc.pend{color:var(--faint); font-style:italic}
.car-row.v3 .hint{display:block; margin-top:6px}

/* Tarjeta compacta del otro vehículo (carro y moto a la vez en Hoy) */
.verdict2{display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  appearance:none; cursor:pointer; margin-top:10px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:12px 14px; color:var(--muted); font-family:var(--body); font-size:.82rem;
  line-height:1.4; transition:background .16s, border-color .16s}
.verdict2[hidden]{display:none}
.verdict2:hover{background:var(--surface-2)}
.verdict2 b{color:var(--ink)}
.verdict2 .dot{flex:0 0 auto; width:11px; height:11px; border-radius:50%; background:var(--faint)}
.verdict2.go{border-color:var(--go-line)} .verdict2.go .dot{background:var(--go);
  box-shadow:0 0 9px 1px rgba(52,199,123,.5)}
.verdict2.stop{border-color:var(--stop-line); background:var(--stop-soft)}
.verdict2.stop .dot{background:var(--stop); box-shadow:0 0 9px 1px rgba(240,86,91,.5)}
.verdict2.warn{border-color:rgba(244,194,13,.4)} .verdict2.warn .dot{background:var(--warn)}
.verdict2 .v2txt{flex:1; min-width:0}
.verdict2 .v2arrow{flex:0 0 auto; color:var(--faint); font-size:1.1rem}

/* De un vistazo (pantalla Hoy) */
.glance{display:flex; flex-direction:column; gap:7px}
.grow{display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  appearance:none; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:12px 14px; color:var(--muted); font-family:var(--body); font-size:.82rem;
  line-height:1.4; transition:background .16s, border-color .16s}
.grow:hover{background:var(--surface-2)}
.grow b{color:var(--ink)}
.grow .ico{flex:0 0 auto; font-size:1rem}
.grow .txt{flex:1; min-width:0}
.grow.soon{border-color:rgba(244,194,13,.4)} .grow.soon b{color:var(--warn)}
.grow.due{border-color:var(--stop-line); background:var(--stop-soft)} .grow.due b{color:var(--stop)}

/* Salud del vehículo (resumen en Hoy) */
.salud{margin-top:12px; border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--surface); padding:12px 14px; font-size:.82rem; color:var(--muted);
  cursor:pointer; line-height:1.45; transition:background .16s, border-color .16s}
.salud[hidden]{display:none}
.salud b{color:var(--ink)}
.salud:hover{background:var(--surface-2)}
.salud.ok{border-color:var(--go-line); background:var(--go-soft)} .salud.ok b{color:var(--go)}
.salud.soon{border-color:rgba(244,194,13,.4); background:var(--warn-soft)} .salud.soon b{color:var(--warn)}
.salud.due{border-color:var(--stop-line); background:var(--stop-soft)} .salud.due b{color:var(--stop)}

/* Gastos: combustible y cuentas */
.gstats{display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:2px}
.gstat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:11px 10px; text-align:center}
.gstat .num{font-family:var(--display); font-weight:700; font-size:1.02rem; color:var(--ink);
  letter-spacing:-.01em; line-height:1.15}
.gstat .num.accent{color:var(--plate)}
.gstat .cap{font-size:.64rem; color:var(--faint); margin-top:3px; line-height:1.3}
.gform select[hidden]{display:none}
.gform select{display:block; width:100%; margin-bottom:8px; box-sizing:border-box;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink);
  border-radius:10px; padding:11px 12px; font-family:var(--body); font-size:.9rem;
  color-scheme:dark; appearance:none}
.seg.gtipo{margin-bottom:12px; background:var(--surface-2)}
.seg.gtipo button[aria-pressed="true"]{background:var(--plate); color:var(--plate-ink)}
.glist{display:flex; flex-direction:column; gap:6px}
.gmov{display:flex; align-items:center; gap:11px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px}
.gmov .ico{flex:0 0 auto; font-size:1rem}
.gmov .txt{flex:1; min-width:0}
.gmov .what{font-weight:600; font-size:.84rem; color:var(--ink)}
.gmov .when{font-size:.7rem; color:var(--faint)}
.gmov .val{font-family:var(--display); font-weight:600; font-size:.9rem; white-space:nowrap}
.gmov .del{appearance:none; border:0; background:transparent; color:var(--faint);
  cursor:pointer; font-size:.9rem; padding:5px}
.gmov .del:hover{color:var(--stop)}
.gempty{font-size:.8rem; color:var(--faint); text-align:center; padding:16px 8px;
  font-style:italic}

/* Comparendos */
.cmp{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:12px 14px}
.cmp.et50{border-color:var(--go-line); background:var(--go-soft)}
.cmp.et25{border-color:rgba(244,194,13,.4); background:var(--warn-soft)}
.cmp.etfull{border-color:var(--stop-line); background:var(--stop-soft)}
.cmp .head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.cmp .lbl{font-family:var(--display); font-weight:700; font-size:.95rem; color:var(--ink)}
.cmp .lbl .nota{font-family:var(--body); font-weight:500; font-size:.76rem; color:var(--muted)}
.cmp .line{margin-top:7px; font-size:.82rem; color:var(--muted); line-height:1.45}
.cmp .line b{color:var(--ink)}
.cmp.et50 .line b{color:var(--go)}
.cmp.et25 .line b{color:var(--warn)}
.cmp.etfull .line b{color:var(--stop)}
.cmp .btns{display:flex; align-items:center; gap:7px; margin-top:10px}
.cmp .del{appearance:none; border:0; background:transparent; color:var(--faint);
  cursor:pointer; font-size:.9rem; padding:5px; margin-left:auto}
.cmp .del:hover{color:var(--stop)}

/* Tarjeta SOAT con cara de SOAT real (certificado claro) */
.soat-card{border-radius:var(--r-sm); overflow:hidden; background:#eef3f9;
  border:1px solid #b9c9dc; box-shadow:0 2px 0 rgba(0,0,0,.35)}
.soat-head{display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:#1f5fd6; color:#fff; padding:9px 13px}
.soat-head .t{display:flex; flex-direction:column; line-height:1.15; min-width:0}
.soat-head .t b{font-family:var(--display); font-weight:700; font-size:1.05rem;
  letter-spacing:.12em}
.soat-head .t span{font-size:.5rem; font-weight:600; letter-spacing:.08em; opacity:.85;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.soat-head .chip{flex:0 0 auto; background:rgba(255,255,255,.92)}
.soat-head .chip.ok{color:#117a46; border-color:transparent}
.soat-head .chip.soon{color:#8a6d00; border-color:transparent}
.soat-head .chip.due{color:#b3261e; border-color:transparent}
.soat-head .chip.none{color:#5a6b80; border-color:transparent}
.soat-body{display:flex; gap:8px; padding:11px 13px 6px}
.soat-body .f{flex:1; min-width:0; background:#fff; border:1px solid #c9d6e6;
  border-radius:8px; padding:6px 8px}
.soat-body .k{display:block; font-size:.46rem; font-weight:700; letter-spacing:.1em;
  color:#5a6b80}
.soat-body .v{display:block; font-family:var(--display); font-weight:700;
  font-size:.86rem; color:#152338; white-space:nowrap; letter-spacing:.02em}
.soat-body .f.hasta .v{color:#1f5fd6}
.soat-body .f.hasta.soon{border-color:#e3b93f; background:#fdf6e0}
.soat-body .f.hasta.soon .v{color:#8a6d00}
.soat-body .f.hasta.due{border-color:#e08a86; background:#fdeceb}
.soat-body .f.hasta.due .v{color:#b3261e}
.soat-note{padding:0 13px 9px; font-size:.74rem; color:#44556c; font-weight:600}
.soat-note.pend{font-style:italic; font-weight:400; color:#5a6b80}
.soat-foot{background:#e2eaf4; border-top:1px dashed #b9c9dc; padding:9px 13px 11px}
.soat-foot .q{display:block; font-size:.72rem; color:#44556c; margin-bottom:5px}
.soat-foot .inline{display:flex; gap:7px; flex-wrap:wrap; align-items:center}
.soat-foot input[type="date"],
.soat-foot input[type="number"],
.soat-foot input[type="text"]{background:#fff; border:1px solid #c9d6e6; color:#152338;
  color-scheme:light; border-radius:8px; padding:7px 9px; font-family:var(--body);
  font-size:.82rem}
.soat-foot input.kmin{width:110px}

.soat-body.wrap{flex-wrap:wrap}
.soat-body.wrap .f{flex:1 1 45%}
.soat-foot select{background:#fff; border:1px solid #c9d6e6; color:#152338;
  border-radius:8px; padding:7px 9px; font-family:var(--body); font-size:.82rem;
  appearance:none}
.soat-ley{display:block; margin-top:8px; font-size:.62rem; color:#5a6b80; line-height:1.4}

/* Variante RTM del certificado: verde CDA */
.soat-card.rtm{background:#eef7f1; border-color:#b7d4c2}
.soat-card.rtm .soat-head{background:#1d7a4f}
.soat-card.rtm .soat-body .f{border-color:#c3dacd}
.soat-card.rtm .soat-body .f.hasta .v{color:#1d7a4f}
.soat-card.rtm .soat-foot{background:#e0efe6; border-top-color:#b7d4c2}
.soat-card.rtm .soat-foot input{border-color:#c3dacd}
.soat-card.rtm .soat-foot input[type="number"]{background:#fff; border:1px solid #c3dacd;
  color:#152338; color-scheme:light; border-radius:8px; padding:7px 9px;
  font-family:var(--body); font-size:.82rem; width:110px}

/* Variante TALLER (aceite / correa): grafito y crema, como orden de servicio */
.soat-card.taller{background:#f7f4ec; border-color:#cfc8b6}
.soat-card.taller .soat-head{background:#3a3f47}
.soat-card.taller .soat-body .f{border-color:#d8d2c2; background:#fffdf7}
.soat-card.taller .soat-body .f.hasta .v,
.soat-card.taller .soat-body .v{color:#2b2f36}
.soat-card.taller .soat-foot{background:#efeadd; border-top-color:#cfc8b6}
.soat-card.taller .soat-foot input,
.soat-card.taller .soat-foot select{border-color:#d8d2c2}
.soat-card.taller .soat-foot input[type="number"].kmin{background:#fff;
  border:1px solid #d8d2c2; color:#152338; color-scheme:light; border-radius:8px;
  padding:7px 9px; font-family:var(--body); font-size:.82rem; width:90px}
.soat-card.taller .fixedint{font-size:.78rem; color:#44556c; font-weight:600;
  background:#fff; border:1px solid #d8d2c2; border-radius:8px; padding:7px 10px}

/* Variante EXTINTOR: rojo bombero */
.soat-card.ext{background:#fbeeee; border-color:#e3b6b4}
.soat-card.ext .soat-head{background:#c62f2a}
.soat-card.ext .soat-body .f{border-color:#e8c5c3; background:#fff}
.soat-card.ext .soat-body .f.hasta .v{color:#c62f2a}
.soat-card.ext .soat-foot{background:#f6e2e1; border-top-color:#e3b6b4}
.soat-card.ext .soat-foot input{border-color:#e8c5c3}

/* Kit de carretera: hoja de inspección naranja seguridad */
.kit-card{background:#fdf7ec; border:1px solid #e4cfa3; border-radius:var(--r-sm);
  overflow:hidden; padding:0; box-shadow:0 2px 0 rgba(0,0,0,.35)}
.kit-head{display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:#e07b12; color:#fff; padding:9px 13px}
.kit-head .kt{font-family:var(--display); font-weight:700; font-size:.82rem;
  letter-spacing:.08em; color:#fff}
.kit-head .chip{background:rgba(255,255,255,.92); border-color:transparent}
.kit-head .chip.ok{color:#117a46} .kit-head .chip.soon{color:#8a6d00}
.kit-head .chip.none{color:#5a6b80}
.kit-row{display:flex; align-items:center; gap:11px; padding:9px 13px; cursor:pointer;
  font-size:.85rem; color:#6b5c40; border-bottom:1px dashed #e4cfa3}
.kit-row input[type="checkbox"]{width:19px; height:19px; accent-color:#1d7a4f;
  flex:0 0 auto; cursor:pointer}
.kit-row:has(input:checked) span{color:#1d7a4f; font-weight:600}
.kit-ley{display:block; padding:8px 13px 11px; color:#9a8a68; margin-top:0}

/* Licencia de conducción (carnet) */
.soat-card.lic{background:#eef2f8; border-color:#b9c6da}
.soat-card.lic .soat-head{background:#15306b}
.lic-body{display:flex; gap:9px; padding:11px 13px 6px; align-items:stretch}
.lic-photo{flex:0 0 64px; display:flex; align-items:center; justify-content:center;
  background:#dde6f2; border:1px solid #c2cfdf; border-radius:8px; font-size:2rem}
.lic-fields{flex:1; min-width:0; padding:0 !important}
.soat-card.lic .soat-body .f{border-color:#c2cfdf}
.soat-card.lic .soat-body .f.hasta .v{color:#15306b}
.soat-card.lic .soat-foot{background:#e1e8f2; border-top-color:#b9c6da}
.soat-card.lic .soat-foot input,
.soat-card.lic .soat-foot select{border-color:#c2cfdf}
.soat-card.lic.collapsed .lic-body{display:none}
.lic-table{flex:1; min-width:0; background:#fff; border:1px solid #c2cfdf;
  border-radius:8px; padding:7px 9px; color:#152338}
.lt-title{font-family:var(--display); font-weight:700; font-size:.6rem;
  letter-spacing:.12em; text-align:center; color:#15306b; margin-bottom:5px}
.lt-row{display:grid; grid-template-columns:34px 1fr auto 22px; gap:6px;
  align-items:center; padding:4px 0; border-top:1px solid #e3eaf3;
  font-size:.68rem; color:#44556c}
.lt-row.lt-head{font-size:.5rem; font-weight:700; letter-spacing:.08em;
  color:#8a99ad; border-top:0; padding-bottom:1px}
.lt-cat{font-family:var(--display); font-weight:700; font-size:.82rem; color:#15306b}
.lt-vig{font-family:var(--display); font-weight:700; white-space:nowrap; color:#15306b}
.lt-vig.soon{color:#8a6d00}
.lt-vig.due{color:#b3261e}
.lt-row .del{color:#8a99ad; margin-left:0; padding:2px}
.lt-empty{font-size:.7rem; color:#8a99ad; font-style:italic; padding:6px 0}

/* Tarjetas desplegables */
.soat-card .soat-head, .kit-card .kit-head, .car-row.v3 > .head, #tax-title{
  cursor:pointer; -webkit-user-select:none; user-select:none}
.chev{flex:0 0 auto; opacity:.65; font-size:.8rem; margin-left:2px;
  display:inline-block; transition:transform .18s}
.collapsed .chev, .chev.rot{transform:rotate(-90deg)}
.soat-card.collapsed > :not(.soat-head){display:none}
.kit-card.collapsed > :not(.kit-head){display:none}
.car-row.v3.collapsed > :not(.head){display:none}
.tax[hidden]{display:none}

/* Gastos: tarjetas temáticas de la misma línea */
.soat-card.greg{background:var(--surface); border-color:rgba(244,194,13,.45)}
.soat-card.greg .soat-head{background:var(--plate)}
.soat-card.greg .soat-head .t b, .soat-card.greg .soat-head .t span{color:var(--plate-ink)}
.soat-card.greg .soat-head .chev{color:var(--plate-ink)}
.soat-card.gmovs{background:var(--surface); border-color:var(--line)}
.soat-card.gmovs .soat-head{background:#3a3f47}
.soat-card.gcomp{background:var(--surface); border-color:var(--stop-line)}
.soat-card.gcomp .soat-head{background:#c62f2a}
.gcard-body{padding:11px 12px 12px}
.soat-card .account{border:0; background:transparent; border-radius:0; padding:13px 14px 14px}
.soat-card.gmovs .soat-head .chip, .soat-card.gcomp .soat-head .chip{
  background:rgba(255,255,255,.92); border-color:transparent}
.soat-card.gmovs .soat-head .chip.ok, .soat-card.gcomp .soat-head .chip.ok{color:#117a46}
.soat-card.gcomp .soat-head .chip.soon{color:#8a6d00}
.soat-card.gcomp .soat-head .chip.due{color:#b3261e}
.soat-card.gmovs .soat-head .chip.none, .soat-card.gcomp .soat-head .chip.none{color:#5a6b80}

/* Consultas y Cuenta: misma línea */
.soat-card.gcons{background:var(--surface); border-color:var(--line)}
.soat-card.gcons .soat-head{background:#2c3e75}
.soat-card.grules{background:var(--surface); border-color:rgba(244,194,13,.45)}
.soat-card.grules .soat-head{background:var(--plate)}
.soat-card.grules .soat-head .t b, .soat-card.grules .soat-head .t span,
.soat-card.grules .soat-head .chev{color:var(--plate-ink)}
.soat-card.grules .soat-head .chip{background:rgba(24,18,6,.85); color:var(--plate);
  border-color:transparent}
.soat-card.gacc{background:var(--surface); border-color:rgba(244,194,13,.45)}
.soat-card.gacc .soat-head{background:var(--plate)}
.soat-card.gacc .soat-head .t b, .soat-card.gacc .soat-head .t span,
.soat-card.gacc .soat-head .chev{color:var(--plate-ink)}
.soat-card.gacc .soat-head .chip{background:rgba(24,18,6,.85); border-color:transparent}
.soat-card.gacc .soat-head .chip.ok{color:var(--go)}
.soat-card.gacc .soat-head .chip.none{color:var(--muted)}
.soat-card.gavisos{background:var(--surface); border-color:var(--line)}
.soat-card.gavisos .soat-head{background:#3a3f47}
.soat-card.gavisos .soat-head .chip{background:rgba(255,255,255,.92);
  border-color:transparent; color:#117a46}
.soat-card.gabout{background:var(--surface); border-color:var(--line)}
.soat-card.gabout .soat-head{background:var(--surface-2)}
.soat-card.gabout .soat-head .t b, .soat-card.gabout .soat-head .t span{color:var(--ink)}
.soat-card.gabout .soat-head .t span{color:var(--muted)}
.soat-card .about{border:0; background:transparent; border-radius:0; padding:13px 15px}
.soat-card .facts{margin-top:0; border-top:0; padding-top:4px}

/* Impuesto vehicular: formulario verde institucional */
.soat-card.timp{background:#eef7f0; border-color:#b5d4bd}
.soat-card.timp .soat-head{background:#0b7a43}
.timp-rows{padding:9px 13px 4px}
.timp-row{display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center;
  padding:6px 0; border-bottom:1px dashed #c4dccb; font-size:.76rem; color:#44584a}
.timp-row:last-of-type{border-bottom:0}
.timp-row .tw{font-family:var(--display); font-weight:700; color:#143d26; white-space:nowrap}
.timp-row .te{font-size:.58rem; font-weight:700; letter-spacing:.06em; color:#6b8a74}
.timp-row .te .tdue{color:#b3261e} .timp-row .te .tsoon{color:#8a6d00}
.timp-row.pagado{opacity:.55}
.soat-card.timp .soat-note.tok{color:#0b7a43; font-weight:700}
.soat-card.timp .soat-foot{background:#e2efe5; border-top-color:#b5d4bd}
.soat-card.timp .soat-foot input,
.soat-card.timp .soat-foot select{background:#fff; border:1px solid #c4dccb; color:#143d26;
  color-scheme:light; border-radius:8px; padding:7px 9px; font-family:var(--body); font-size:.82rem}
.soat-card.timp .soat-foot .del{color:#6b8a74}
.soat-card.timp.collapsed .timp-rows{display:none}

/* Impuesto vehicular (estilos viejos del bloque plano) */
.tax{background:transparent; border:0; padding:0}
.tax-row{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--line); font-size:.82rem; color:var(--muted)}
.tax-row:last-of-type{border-bottom:0}
.tax-row .when{font-family:var(--display); font-weight:600; color:var(--ink);
  font-size:.85rem; white-space:nowrap}
.tax-note{font-size:.72rem; color:var(--faint); padding:9px 0 10px; line-height:1.45;
  border-top:1px solid var(--line)}

/* Consultas rápidas */
.qlinks{display:flex; flex-direction:column; gap:7px}
.qlink{display:flex; align-items:center; gap:12px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px;
  text-decoration:none; transition:border-color .16s, background .16s}
.qlink:hover{border-color:var(--raised); background:var(--surface-2)}
.qlink .txt{flex:1; min-width:0}
.qlink .lbl{display:block; font-weight:600; font-size:.86rem; color:var(--ink)}
.qlink .desc{display:block; font-size:.72rem; color:var(--faint); margin-top:1px}
.qlink .arrow{flex:0 0 auto; color:var(--plate); font-family:var(--display); font-weight:700}

/* Mi cuenta */
.account{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 15px}
.acc-blurb{margin:0 0 12px; font-size:.82rem; color:var(--muted); line-height:1.5}
.acc-blurb b{color:var(--ink)}
.acc-ok{color:var(--go); font-size:.76rem}
.account input{display:block; width:100%; margin-bottom:8px; box-sizing:border-box;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink);
  border-radius:10px; padding:11px 12px; font-family:var(--body); font-size:.9rem;
  color-scheme:dark}
.account input:focus-visible{outline:2px solid var(--plate); outline-offset:1px}
.account input::placeholder{color:var(--faint)}
.acc-btns{display:flex; gap:8px; margin-top:4px}
.acc-btn{flex:1; appearance:none; border:1px solid var(--line); background:var(--surface-2);
  color:var(--ink); font-family:var(--display); font-weight:600; font-size:.88rem;
  padding:11px 8px; border-radius:10px; cursor:pointer; transition:background .16s}
.acc-btn:hover{background:var(--raised)}
.acc-btn.primary{background:var(--plate); border-color:var(--plate); color:var(--plate-ink)}
.acc-btn:disabled{opacity:.55; cursor:default}
.acc-btn:focus-visible{outline:2px solid var(--plate); outline-offset:2px}
.acc-msg{min-height:1.1em; margin-top:9px; font-size:.78rem; color:var(--muted)}
.acc-msg.err{color:var(--stop)}
.acc-msg.ok{color:var(--go)}

/* Facts */
.facts{margin-top:22px; border-top:1px solid var(--line); padding-top:16px}
.fact{display:flex; gap:11px; padding:7px 0; font-size:.82rem; color:var(--muted)}
.fact svg{flex:0 0 auto; margin-top:2px; color:var(--plate)}
.fact b{color:var(--ink); font-weight:600}
.src{margin-top:14px; font-size:.74rem; color:var(--faint); line-height:1.5}
.src a{color:var(--muted); text-decoration:underline; text-underline-offset:2px}

.banner{display:none; gap:9px; align-items:flex-start; background:var(--warn-soft);
  border:1px solid rgba(244,194,13,.35); color:var(--ink); border-radius:var(--r-sm);
  padding:11px 13px; font-size:.79rem; margin-bottom:14px}
.banner.show{display:flex}
.banner svg{flex:0 0 auto; margin-top:2px; color:var(--warn)}

@media (prefers-reduced-motion: reduce){ *{transition:none !important} }