/* «Mi auto» · piel 3. Concepto: el tablero de tu auto. El auto del usuario es el protagonista (foto o silueta 3/4 en su color),
   la salud es un velocímetro y el estado se dice con un brillo sobrio y una etiqueta. Celular primero, vitrina en computadora.
   Marca: azul noche y grafito con acentos ámbar; patrón de chakana casi imperceptible. El semáforo se reserva para el estado. */
:root {
  --bg: #F2F4F7; --surface: #FFFFFF; --surface-2: #E8ECF1; --surface-3: #DCE2E9;
  --ink: #101820; --ink-2: #4E5B6A; --ink-3: #75818F; --line: #D9DFE6;
  --accent: #A3640A; --accent-2: #8A5300; --accent-soft: #FBEFD9; --accent-ink: #FFFFFF; --ambar: #F0A93B;
  --primario: #0F1E33; --primario-ink: #FFFFFF; --tinta: #101820; --tinta-ink: #FFFFFF;
  --t-mant: #FBEFD9; --t-mant-ink: #8A5300; --t-doc: #E3EBF5; --t-doc-ink: #234A78; --t-rev: #ECEFF3; --t-rev-ink: #3A4B5E;
  --ev-mant: #E39B2D; --ev-doc: #3D6FB5; --ev-gasto: #5B6B7E;
  --carro: #E4E9EF; --carro-borde: #B7C1CC; --sombra-auto: #EDF1F5;
  --ilus-fondo: #E9EDF2; --ilus-tablero: #D6DDE5; --ilus-linea: #4E5B6A; --ilus-rodilla: #C9B8A6;
  --wa: #13793E; --wa-ink: #FFFFFF;
  --shadow: 0 1px 2px rgb(16 24 32 / .05), 0 12px 30px -16px rgb(16 24 32 / .22);
  --shadow-lg: 0 30px 70px -30px rgb(16 24 32 / .5);
  --noche: linear-gradient(162deg, #1B2F4D 0%, #0F1E33 52%, #08111D 100%);
  --cielo-1: #5F90CF; --cielo-2: #A9C9EC; --cielo-3: #DCEAF7; --cielo-4: #EEF5FB; --horizonte: #FFFFFF; --suelo: #D7DFE8; --suelo-2: #E9EEF3; --ci-tinta: #0E1A2A; --ci-tinta-2: #2F4258;
  --vidrio: rgb(255 255 255 / .72); --vidrio-borde: rgb(255 255 255 / .95); --vidrio-btn: rgb(255 255 255 / .42);
  --montes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='44' viewBox='0 0 520 44'%3E%3Cpath d='M0 44V30l26-9 18 6 30-19 22 13 20-7 18 10 32-22 24 16 22-9 20 12 34-20 26 15 22-8 24 13 30-17 24 12 22-7 26 11 30-14 24 10 26-6V44z' fill='%2394AECB' fill-opacity='.55'/%3E%3Cpath d='M0 44V36l40-7 30 5 44-11 36 9 40-8 34 7 44-10 38 8 40-6 36 6 44-9 36 7 38-4V44z' fill='%23B6C8DB' fill-opacity='.6'/%3E%3C/svg%3E");
  --estrellas: none;
  --display: "Archivo", system-ui, sans-serif; --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tap: 52px; --r: 22px; --r-sm: 14px;
  --chakana: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M22 8h12v8h8v8h8v8h-8v8h-8v8H22v-8h-8v-8H6v-8h8v-8h8z M25 25h6v6h-6z' fill='none' stroke='%23FFFFFF' stroke-opacity='.045' stroke-width='1.4'/%3E%3C/svg%3E");
  --chakana-fondo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 56 56'%3E%3Cpath d='M22 8h12v8h8v8h8v8h-8v8h-8v8H22v-8h-8v-8H6v-8h8v-8h8z M25 25h6v6h-6z' fill='none' stroke='%234E5B6A' stroke-opacity='.06' stroke-width='1.3'/%3E%3C/svg%3E");
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --cielo-1: #030812; --cielo-2: #0A1D3C; --cielo-3: #1D4C88; --cielo-4: #3F7BC0; --horizonte: #A9D2F8; --suelo: #0A1628; --suelo-2: #0A111B; --ci-tinta: #FFFFFF; --ci-tinta-2: #B8C9DD;
  --vidrio: rgb(18 30 46 / .72); --vidrio-borde: rgb(255 255 255 / .08); --vidrio-btn: rgb(255 255 255 / .08);
  --montes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='44' viewBox='0 0 520 44'%3E%3Cpath d='M0 44V30l26-9 18 6 30-19 22 13 20-7 18 10 32-22 24 16 22-9 20 12 34-20 26 15 22-8 24 13 30-17 24 12 22-7 26 11 30-14 24 10 26-6V44z' fill='%23122A4A' fill-opacity='.9'/%3E%3Cpath d='M0 44V36l40-7 30 5 44-11 36 9 40-8 34 7 44-10 38 8 40-6 36 6 44-9 36 7 38-4V44z' fill='%230E2240'/%3E%3C/svg%3E");
  --estrellas: radial-gradient(1px 1px at 18px 22px, #FFFFFF 50%, transparent 51%), radial-gradient(1px 1px at 74px 64px, #DDE8FF 50%, transparent 51%), radial-gradient(1.5px 1.5px at 120px 18px, #FFFFFF 50%, transparent 51%), radial-gradient(1px 1px at 150px 92px, #C9D9FF 50%, transparent 51%), radial-gradient(1px 1px at 44px 108px, #FFFFFF 50%, transparent 51%);
  --bg: #090F18; --surface: #101A27; --surface-2: #172334; --surface-3: #1F2E43; --ink: #E9EEF5; --ink-2: #9DAABB; --ink-3: #74839A; --line: #1E2B3D;
  --accent: #F0A93B; --accent-2: #F5B95C; --accent-soft: #2E2310; --accent-ink: #1A1206; --ambar: #F0A93B;
  --primario: #F0A93B; --primario-ink: #17110A; --tinta: #E9EEF5; --tinta-ink: #0B121C;
  --t-mant: #2B2111; --t-mant-ink: #F5B95C; --t-doc: #142338; --t-doc-ink: #8EB6EE; --t-rev: #172334; --t-rev-ink: #B5C3D4;
  --ev-mant: #F0A93B; --ev-doc: #6E9BE0; --ev-gasto: #8FA0B5;
  --carro: #1C2A3D; --carro-borde: #3A4B5E; --vidrio-auto: #34506A; --sombra-auto: #0E1622;
  --ilus-fondo: #172334; --ilus-tablero: #1F2E43; --ilus-linea: #9DAABB; --ilus-rodilla: #6E5E50; --wa: #2FB86A; --wa-ink: #04170B;
  --ok: #5CD65C; --ok-soft: #10301A; --leve: #FFC94D; --leve-soft: #3A2C0A; --media: #F5A27F; --media-soft: #3D2116; --grave: #FF7B70; --grave-soft: #3D1714;
  --shadow: none; --shadow-lg: 0 30px 70px -30px rgb(0 0 0 / .85); color-scheme: dark; } }
:root[data-theme="dark"] {
  --cielo-1: #030812; --cielo-2: #0A1D3C; --cielo-3: #1D4C88; --cielo-4: #3F7BC0; --horizonte: #A9D2F8; --suelo: #0A1628; --suelo-2: #0A111B; --ci-tinta: #FFFFFF; --ci-tinta-2: #B8C9DD;
  --vidrio: rgb(18 30 46 / .72); --vidrio-borde: rgb(255 255 255 / .08); --vidrio-btn: rgb(255 255 255 / .08);
  --montes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='44' viewBox='0 0 520 44'%3E%3Cpath d='M0 44V30l26-9 18 6 30-19 22 13 20-7 18 10 32-22 24 16 22-9 20 12 34-20 26 15 22-8 24 13 30-17 24 12 22-7 26 11 30-14 24 10 26-6V44z' fill='%23122A4A' fill-opacity='.9'/%3E%3Cpath d='M0 44V36l40-7 30 5 44-11 36 9 40-8 34 7 44-10 38 8 40-6 36 6 44-9 36 7 38-4V44z' fill='%230E2240'/%3E%3C/svg%3E");
  --estrellas: radial-gradient(1px 1px at 18px 22px, #FFFFFF 50%, transparent 51%), radial-gradient(1px 1px at 74px 64px, #DDE8FF 50%, transparent 51%), radial-gradient(1.5px 1.5px at 120px 18px, #FFFFFF 50%, transparent 51%), radial-gradient(1px 1px at 150px 92px, #C9D9FF 50%, transparent 51%), radial-gradient(1px 1px at 44px 108px, #FFFFFF 50%, transparent 51%);
  --bg: #090F18; --surface: #101A27; --surface-2: #172334; --surface-3: #1F2E43; --ink: #E9EEF5; --ink-2: #9DAABB; --ink-3: #74839A; --line: #1E2B3D;
  --accent: #F0A93B; --accent-2: #F5B95C; --accent-soft: #2E2310; --accent-ink: #1A1206; --ambar: #F0A93B;
  --primario: #F0A93B; --primario-ink: #17110A; --tinta: #E9EEF5; --tinta-ink: #0B121C;
  --t-mant: #2B2111; --t-mant-ink: #F5B95C; --t-doc: #142338; --t-doc-ink: #8EB6EE; --t-rev: #172334; --t-rev-ink: #B5C3D4;
  --ev-mant: #F0A93B; --ev-doc: #6E9BE0; --ev-gasto: #8FA0B5;
  --carro: #1C2A3D; --carro-borde: #3A4B5E; --vidrio-auto: #34506A; --sombra-auto: #0E1622;
  --ilus-fondo: #172334; --ilus-tablero: #1F2E43; --ilus-linea: #9DAABB; --ilus-rodilla: #6E5E50; --wa: #2FB86A; --wa-ink: #04170B;
  --ok: #5CD65C; --ok-soft: #10301A; --leve: #FFC94D; --leve-soft: #3A2C0A; --media: #F5A27F; --media-soft: #3D2116; --grave: #FF7B70; --grave-soft: #3D1714;
  --shadow: none; --shadow-lg: 0 30px 70px -30px rgb(0 0 0 / .85); color-scheme: dark; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.5 var(--font); font-variant-numeric: tabular-nums; overflow-x: hidden; }
body.no-scroll { overflow: hidden; }
[hidden] { display: none !important; }
img { max-width: 100%; }
h1, h2, h3 { margin: 0; line-height: 1.12; text-wrap: balance; font-family: var(--display); }
h1 { font-size: 1.7rem; font-weight: 760; font-stretch: 100%; letter-spacing: -.02em; }
h2 { font-size: 1.2rem; font-weight: 720; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
h3 { font-size: 1.1rem; font-weight: 740; }
p { margin: 0; }
a { color: var(--accent); }
.mono { font-family: var(--mono); letter-spacing: .02em; }
.muted { color: var(--ink-2); }
.small { font-size: .88rem; }
.centro { text-align: center; display: flex; justify-content: center; }
.ic { flex: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.bandera { display: inline-block; width: 18px; height: 12px; border-radius: 3px; background: linear-gradient(90deg, #D91023 0 33.3%, #FFFFFF 33.3% 66.6%, #D91023 66.6%); box-shadow: 0 0 0 1px rgb(38 19 31 / .12); flex: none; }

/* ---------- Teléfono: la app ocupa toda la pantalla, en una columna que nunca se estira ---------- */
.escena, .telefono, .tel-marco, .tel-pantalla { display: contents; }
.vitrina, .tel-estado, .tel-gesto { display: none; }
#sheetHost:empty { display: none; }
.topbar { position: sticky; top: 0; z-index: 30; padding-top: env(safe-area-inset-top, 0px); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.topbar.scrolled { border-bottom-color: var(--line); }
.topbar:empty { display: none; }
.topbar-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; min-height: 62px; max-width: 560px; margin: 0 auto; }
.top-title { flex: 1; min-width: 0; font: 720 1.15rem/1.2 var(--display); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo { width: 44px; height: 44px; border-radius: 14px; background: var(--noche); color: var(--ambar); display: grid; place-items: center; flex: none; }
.logo.grande { width: 64px; height: 64px; border-radius: 20px; }
.icon-btn { width: 48px; height: 48px; border-radius: 16px; border: 0; background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; flex: none; position: relative; }
.icon-btn:hover { background: var(--surface-2); }
.icon-btn.redondo { border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); }
:root[data-theme="dark"] .icon-btn.redondo { box-shadow: 0 0 0 1px var(--line); }
.icon-btn.confirmar { color: var(--grave); background: var(--grave-soft); }
main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 8px 16px calc(120px + env(safe-area-inset-bottom, 0px)); max-width: 560px; margin: 0 auto; }
body.sin-tabs main { padding-bottom: 32px; }
body.sin-tabs .tabbar { display: none; }
main.enter > * { animation: rise .42s var(--ease) both; }
main.enter > *:nth-child(2) { animation-delay: .04s; } main.enter > *:nth-child(3) { animation-delay: .08s; } main.enter > *:nth-child(4) { animation-delay: .12s; } main.enter > *:nth-child(5) { animation-delay: .16s; } main.enter > *:nth-child(6) { animation-delay: .2s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Barra de pestañas flotante (5) */
.tabbar { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 30; max-width: 540px; margin: 0 auto; background: var(--vidrio); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 26px; box-shadow: 0 12px 34px -12px rgb(8 17 29 / .35), 0 0 0 1px var(--line); }
.tabbar-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.65fr) minmax(0, 1fr) minmax(0, .8fr); padding: 6px; container-type: inline-size; }
/* La etiqueta larga recibe espacio propio: la letra no se encoge en el celular. */
.tab { background: none; border: 0; color: var(--ink-2); font: 650 max(11px, .75rem)/1.2 var(--font); font-stretch: 85%; letter-spacing: -.005em; min-width: 0; min-height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; padding: 4px 2px; border-radius: 18px; overflow-wrap: anywhere; text-align: center; }
.tab-ic { width: 44px; height: 32px; border-radius: 12px; display: grid; place-items: center; transition: background .2s, color .2s; font-style: normal; }
.tab[aria-current="true"] { background: var(--primario); color: var(--primario-ink); font-weight: 750; }
.tab[aria-current="true"] .tab-ic { color: var(--ambar); }
:root[data-theme="dark"] .tab[aria-current="true"] .tab-ic { color: inherit; }
.toast { position: fixed; left: 16px; right: 16px; bottom: calc(100px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; justify-content: center; pointer-events: none; opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: none; }
.toast div { background: var(--tinta); color: var(--tinta-ink); padding: 14px 18px; border-radius: 16px; font-weight: 650; max-width: 480px; box-shadow: var(--shadow-lg); }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--tap); padding: 10px 18px; border-radius: var(--r-sm); border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: 750 1rem/1.2 var(--font); cursor: pointer; text-decoration: none; text-align: center; transition: transform .14s var(--ease), box-shadow .2s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .6; }
.btn.primary { background: var(--primario); border-color: var(--primario); color: var(--primario-ink); }
.btn.wa { background: var(--wa); border-color: var(--wa); color: var(--wa-ink); }
.btn.danger { color: var(--grave); border-color: color-mix(in srgb, var(--grave) 40%, var(--line)); background: transparent; }
.btn.small { min-height: 44px; padding: 8px 12px; font-size: .92rem; }
.btn.lg { min-height: 58px; font-size: 1.06rem; }
.btn.xl { min-height: 64px; font-size: 1.14rem; border-radius: 20px; }
.btn.xxl { min-height: 70px; font: 740 1.2rem/1.1 var(--display); letter-spacing: -.005em; border-radius: 20px; box-shadow: 0 14px 30px -16px rgb(8 17 29 / .6); }
.btn.xxl .ic { color: var(--ambar); }
:root[data-theme="dark"] .btn.xxl .ic { color: inherit; }
.btn.block { display: flex; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-row .btn { flex: 1 1 150px; }
.btn-col { display: grid; gap: 10px; }
.link { background: none; border: 0; color: var(--accent-2); font: 750 1rem var(--font); padding: 10px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; min-height: 44px; }

/* ---------- Tarjetas y texto ---------- */
.card { background: var(--surface); border-radius: var(--r); padding: 18px; box-shadow: var(--shadow); border: 1px solid transparent; display: grid; gap: 10px; text-align: left; color: inherit; font: inherit; width: 100%; }
:root[data-theme="dark"] .card, :root[data-theme="dark"] .fila, :root[data-theme="dark"] .vital, :root[data-theme="dark"] .hechos li, :root[data-theme="dark"] .doc, :root[data-theme="dark"] .prob, :root[data-theme="dark"] .testigo-btn { border: 1px solid var(--line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card, :root:not([data-theme="light"]) .fila, :root:not([data-theme="light"]) .vital, :root:not([data-theme="light"]) .hechos li, :root:not([data-theme="light"]) .doc, :root:not([data-theme="light"]) .prob, :root:not([data-theme="light"]) .testigo-btn { border: 1px solid var(--line); } }
button.card { cursor: pointer; }
.card.destacada { position: relative; overflow: hidden; background-color: #0F1E33; color: #FFFFFF; background-image: var(--chakana), var(--noche); }
.card.destacada .muted, .card.destacada .grande { color: inherit; opacity: .92; }
.card.destacada .btn.primary { background: #F0A93B; color: #17110A; border-color: #F0A93B; }
.card.mini { gap: 4px; padding: 14px; }
.card.mini small, .cinco small, .vital small, .km-rapido small, .tile-cat, .cejilla, .ajuste-tit { display: block; font-size: .78rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.card.mini b { font-size: 1.15rem; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ok-card h2 { color: var(--ok); } .no-card h2 { color: var(--grave); }
.intro { font-size: 1.06rem; color: var(--ink-2); }
.grande { font-size: 1.08rem; }
.sec { margin-top: 8px; font-size: 1.22rem; }
.sub { margin-top: -10px; }
.est { display: block; font-size: .85rem; color: var(--ink-2); }
.precio { font: 760 1.9rem/1.1 var(--display); letter-spacing: -.02em; }
.nota { position: relative; font-size: .95rem; color: var(--ink-2); background: var(--surface-2); padding: 14px 14px 14px 44px; border-radius: var(--r-sm); }
.nota > .ic:first-child, .calma > .ic:first-child, .pieza > .ic:first-child, .aviso-suave > .ic:first-child { position: absolute; left: 14px; top: 16px; }
.nota.fuerte { color: var(--ink); background: var(--accent-soft); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; font-weight: 750; font-size: .88rem; background: var(--surface-2); color: var(--ink); white-space: nowrap; }
.chip.u-ok { background: var(--ok-soft); color: var(--ok); } .chip.u-atento { background: var(--leve-soft); color: var(--leve); } .chip.u-pronto { background: var(--media-soft); color: var(--media); } .chip.u-detente { background: var(--grave-soft); color: var(--grave); }
.vacio { text-align: center; display: grid; gap: 10px; justify-items: center; padding: 30px 10px; color: var(--ink-2); }
.vacio h3 { color: var(--ink); }
.alerta { display: flex; gap: 12px; padding: 16px; border-radius: var(--r); background: var(--leve-soft); color: var(--ink); align-items: flex-start; }
.alerta .ic { color: var(--leve); flex: none; }
.alerta.fuerte { background: var(--grave-soft); border: 2px solid var(--grave-fill); }
.alerta.fuerte .ic { color: var(--grave); }
.alerta ol { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: 1.04rem; }
.aviso-suave { position: relative; padding-left: 30px; color: var(--ink-2); font-size: .95rem; } .aviso-suave > .ic:first-child { left: 0; top: 2px; }
.todo-bien { display: flex; gap: 14px; align-items: center; padding: 18px; border-radius: var(--r); background: var(--ok-soft); color: var(--ok); font-size: 1.08rem; }
.todo-bien p { color: var(--ink); }

/* ---------- Inicio ---------- */
.saludo-fila { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
.saludo { font-size: 1.04rem; color: var(--ink-2); }
.distrito { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 4px 0; color: var(--ink); font: 750 1.08rem var(--font); cursor: pointer; min-height: 40px; }
.distrito > .ic:first-child { color: var(--accent); }
.saludo-acc { display: flex; gap: 10px; }
.punto-aviso { position: absolute; top: 11px; right: 12px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
.pastillas { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 4px 16px 6px; }
.pastillas::-webkit-scrollbar { display: none; }
.pastilla { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 52px; padding: 6px 18px 6px 6px; border-radius: 99px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: 760 1.02rem var(--font); cursor: pointer; transition: transform .15s var(--ease); }
.pastilla:hover { transform: translateY(-1px); }
.pastilla.on { background: var(--tinta); border-color: var(--tinta); color: var(--tinta-ink); }
.pastilla-ava { width: 28px; height: 28px; margin-left: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--color-auto) 55%, #FFFFFF), var(--color-auto) 60%, color-mix(in srgb, var(--color-auto) 70%, #000000)); box-shadow: 0 0 0 2px var(--line); flex: none; }
.pastilla.on .pastilla-ava { box-shadow: 0 0 0 2px var(--tinta-ink); }
.pastilla.agregar { border-style: dashed; color: var(--ink-2); padding: 6px 18px; }
/* Inicio inmersivo: cielo (día en claro, noche en oscuro), cordillera en el horizonte, el auto con su reflejo */
html.en-inicio main { padding-top: 0; }
.cielo { display: grid; margin: 0 -16px; color: var(--ci-tinta); }
.cielo > * { padding-inline: 16px; }
.ci-fila, .ci-datos { background: var(--estrellas), linear-gradient(180deg, var(--cielo-1), var(--cielo-2)); background-size: 170px 130px, auto; }
.ci-fila { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
.ci-datos { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; background: var(--estrellas), linear-gradient(180deg, var(--cielo-2), var(--cielo-3)); background-size: 170px 130px, auto; }
.ci-hola { display: grid; gap: 0; font-size: .95rem; color: var(--ci-tinta-2); }
.ci-hola .distrito { color: var(--ci-tinta); }
.ci-hola .distrito > .ic:first-child { color: inherit; }
.ci-acc { display: flex; gap: 8px; }
.icon-btn.vidrio { border-radius: 50%; width: 44px; height: 44px; background: var(--vidrio-btn); color: var(--ci-tinta); box-shadow: inset 0 0 0 1px var(--vidrio-borde); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ci-datos .velocimetro { color: var(--ci-tinta); flex: none; margin-left: -8px; }
.ci-estado { display: grid; gap: 2px; justify-items: start; min-width: 0; }
.ci-estado h1 { font-size: 1.75rem; font-weight: 740; letter-spacing: -.02em; color: var(--ci-tinta); overflow-wrap: anywhere; margin-top: 6px; }
.ci-estado p { color: var(--ci-tinta-2); font-weight: 550; font-size: .95rem; }
.estado-eti { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 99px; background: var(--vidrio-btn); box-shadow: inset 0 0 0 1px var(--vidrio-borde); font: 700 .8rem var(--font); color: var(--ci-tinta); white-space: nowrap; backdrop-filter: blur(8px); }
.estado-eti i { width: 8px; height: 8px; border-radius: 50%; background: #1FB866; box-shadow: 0 0 10px #2BD07A; }
.estado-eti.u-atento i { background: #E9A71F; box-shadow: 0 0 10px #F2B53A; } .estado-eti.u-pronto i { background: #EC7A35; box-shadow: 0 0 10px #F08A4B; } .estado-eti.u-detente i { background: #F23D3D; box-shadow: 0 0 10px #FF4D4D; }
.ci-auto { display: grid; place-items: center; padding-top: 4px; }
.escenario { position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, var(--cielo-3) 0%, var(--cielo-4) 50%, var(--horizonte) 65.5%, var(--suelo) 67%, var(--suelo) 100%); }
.escenario::before { content: ""; position: absolute; left: 0; right: 0; top: calc(65.5% - 44px); height: 44px; background: var(--montes) repeat-x bottom / 520px 44px; z-index: -1; }
.escenario::after { content: ""; position: absolute; left: 10%; right: 10%; top: 63%; height: 10px; border-radius: 50%; background: var(--horizonte); filter: blur(8px); opacity: .7; z-index: -1; }
.ci-auto svg { width: 100%; max-width: 420px; height: auto; }
.ci-auto img { width: 100%; max-height: 230px; object-fit: cover; border-radius: 20px; margin: 12px 0; box-shadow: 0 0 0 1px var(--vidrio-borde), 0 0 44px -6px var(--brillo, #2BD07A); }
.cielo.u-atento .ci-auto img { --brillo: #F2B53A; } .cielo.u-pronto .ci-auto img { --brillo: #F08A4B; } .cielo.u-detente .ci-auto img { --brillo: #FF4D4D; }
.ci-frase, .cielo .pastillas { background: linear-gradient(180deg, var(--suelo), var(--suelo-2)); }
.ci-frase { padding-top: 2px; padding-bottom: 10px; text-align: center; font-size: 1.02rem; line-height: 1.4; color: var(--ci-tinta); }
.cielo .pastillas { margin: 0; padding: 4px 16px 14px; background: linear-gradient(180deg, var(--suelo-2), var(--bg)); }
.cielo .pastilla { background: var(--vidrio); border-color: var(--vidrio-borde); min-height: 44px; font-size: .95rem; }
.cielo .pastilla.on { background: var(--primario); border-color: var(--primario); color: var(--primario-ink); }
.rapidas { display: grid; grid-template-columns: 1.9fr 1fr 1fr; gap: 10px; }
.rapida { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 72px; padding: 8px; border-radius: 20px; border: 1px solid var(--vidrio-borde); background: var(--vidrio); color: var(--ink); font: 650 .86rem/1.15 var(--font); cursor: pointer; box-shadow: var(--shadow); backdrop-filter: blur(12px); text-align: center; }
.rapida .ic { color: var(--accent); }
.rapida.principal { grid-auto-flow: column; gap: 8px; background: var(--primario); border-color: var(--primario); color: var(--primario-ink); font: 720 .98rem/1.15 var(--display); white-space: nowrap; }
.rapida.principal .ic { color: var(--ambar); }
:root[data-theme="dark"] .rapida.principal .ic { color: inherit; }
.pt { width: 7px; height: 7px; border-radius: 50%; flex: none; transform: translateY(-1px); background: #1FB866; }
.pt.u-atento { background: #E9A71F; } .pt.u-pronto { background: #EC7A35; } .pt.u-detente { background: #F23D3D; }
.velo-val { stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--v)); animation: velo 1.2s var(--ease) both; }
@keyframes velo { from { stroke-dashoffset: 100; } }
.velo-aguja { transform-box: view-box; transform-origin: 100px 100px; animation: aguja 1.3s var(--ease) both; }
@keyframes aguja { from { transform: rotate(-120deg); } to { transform: rotate(var(--ang)); } }
.auto34-brillo { animation: brillo 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes brillo { 0%, 100% { opacity: .85; } 50% { opacity: 1; transform: scale(1.03); } }
.semana { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); padding: 10px; display: grid; gap: 8px; }
:root[data-theme="dark"] .semana { border: 1px solid var(--line); }
.sem-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dia { display: grid; justify-items: center; gap: 2px; padding: 8px 0 6px; border-radius: 16px; border: 0; background: none; color: var(--ink); cursor: pointer; font: inherit; }
.dia small { font-size: .74rem; font-weight: 700; color: var(--ink-2); }
.dia b { font: 720 1.15rem/1.1 var(--display); }
.dia.hoy { background: var(--primario); color: var(--primario-ink); } .dia.hoy small { color: inherit; opacity: .8; }
.dia.sel:not(.hoy) { background: var(--accent-soft); }
.dia-puntos { display: flex; gap: 3px; min-height: 7px; }
.dia-puntos i, .leyenda i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.ev-mant { background: var(--ev-mant); } .ev-doc { background: var(--ev-doc); } .ev-gasto { background: var(--ev-gasto); }
.dia.hoy .dia-puntos i { box-shadow: 0 0 0 1.5px var(--tinta-ink); }
.sem-info { font-size: .92rem; color: var(--ink-2); padding: 0 6px 4px; }
.sem-info .prox { display: block; color: var(--ink); font-weight: 650; margin-top: 2px; }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .86rem; color: var(--ink-2); margin-top: -6px; }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Bienvenida ---------- */
.bienvenida { min-height: calc(100dvh - 60px); display: grid; align-content: center; justify-items: center; gap: 18px; text-align: center; padding-top: 10px; }
.bv-top { width: 100%; display: flex; justify-content: flex-end; }
.bv-ilus { position: relative; width: 260px; height: 230px; display: grid; place-items: center; color: var(--ink); border-radius: 50%; background: radial-gradient(circle, var(--surface-2) 0 62%, transparent 63%); }
.bv-ilus.ancha { width: min(340px, 100%); height: auto; padding: 18px 8px 0; border-radius: 28px; background: linear-gradient(180deg, var(--cielo-3) 0%, var(--cielo-4) 50%, var(--horizonte) 65.5%, var(--suelo) 67%, var(--suelo) 100%); }
.bv-badge { position: absolute; right: 12px; top: 12px; width: 52px; height: 52px; border-radius: 50%; background: var(--ambar); color: #17110A; display: grid; place-items: center; box-shadow: var(--shadow-lg); }
.bienvenida h1 { font-size: 1.8rem; max-width: 20ch; }
.bv-p { font-size: 1.1rem; color: var(--ink-2); max-width: 34ch; }
.dots { display: flex; gap: 8px; justify-content: center; }
.dots i { width: 10px; height: 10px; border-radius: 99px; background: var(--line); transition: width .25s var(--ease); }
.dots i.on { width: 30px; background: var(--accent); }
.dots.pasos { width: 100%; } .dots.pasos i { flex: 1; width: auto; height: 6px; }

/* ---------- Formularios ---------- */
.form { display: grid; gap: 16px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid2 .wide { grid-column: 1 / -1; }
.field { display: grid; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field label, .field legend { font-weight: 700; font-size: .92rem; color: var(--ink-2); padding: 0; }
.field input, .field select, .nombre-card input { width: 100%; min-height: var(--tap); padding: 10px 14px; border-radius: var(--r-sm); border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: 550 1.06rem var(--font); }
.field.big input { min-height: 62px; font-size: 1.35rem; font-weight: 750; }
.field input:focus, .field select:focus, .nombre-card input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 4px var(--accent-soft); }
.unit { display: flex; align-items: center; gap: 8px; } .unit span { color: var(--ink-2); font-weight: 650; }
.check { display: flex; gap: 10px; align-items: center; font-weight: 650; min-height: 44px; }
.check input { width: 24px; height: 24px; accent-color: var(--accent); }
.colores { display: flex; flex-wrap: wrap; gap: 10px; }
.color { position: relative; display: grid; justify-items: center; gap: 4px; font-size: .8rem; color: var(--ink-2); cursor: pointer; }
.color input, .cat-chip input { position: absolute; opacity: 0; pointer-events: none; }
.color i { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--line); }
.color input:checked + i { outline: 3px solid var(--accent); outline-offset: 2px; }
.foto-auto { display: grid; justify-items: center; gap: 10px; border-radius: var(--r); padding: 16px 16px 14px; color: var(--ink); }
.foto-auto img { width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--r-sm); }
.foto-auto svg { max-width: 100%; height: auto; }
.mas-datos { background: var(--surface); border-radius: var(--r); padding: 4px 16px; box-shadow: var(--shadow); }
.mas-datos > summary, .tecnico > summary, .tabla-det > summary { cursor: pointer; font-weight: 750; min-height: 52px; display: flex; align-items: center; gap: 8px; list-style: none; }
.mas-datos > summary::after, .tecnico > summary::after { content: "▾"; margin-left: auto; color: var(--ink-3); }
.mas-datos[open] > summary::after, .tecnico[open] > summary::after { content: "▴"; }
.mas-datos[open] { padding-bottom: 14px; display: grid; gap: 10px; }
.vin-info { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.cat-chip { position: relative; display: grid; justify-items: center; gap: 4px; padding: 10px 6px; border-radius: var(--r-sm); border: 2px solid var(--line); cursor: pointer; font-weight: 700; font-size: .9rem; }
.cat-chip:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-2); }
.nombre-card label { font-weight: 750; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- Listas ---------- */
.lista { display: grid; gap: 10px; }
.fila { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; background: var(--surface); border: 0; border-radius: var(--r); color: var(--ink); text-align: left; cursor: pointer; font: inherit; box-shadow: var(--shadow); min-height: 74px; transition: transform .15s var(--ease); }
.fila:hover { transform: translateY(-1px); }
.fila-ic { width: 48px; height: 48px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.fila-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fila-txt b { font-size: 1.04rem; }
.fila-txt span { color: var(--ink-2); font-size: .92rem; }
.fila-txt .chip { justify-self: start; margin-top: 4px; font-size: .86rem; }
.fila > .ic:last-child { color: var(--ink-3); }
.aviso { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; border-radius: var(--r-sm); border: 0; background: var(--surface); color: var(--ink); font: 650 1rem/1.3 var(--font); text-align: left; cursor: pointer; box-shadow: var(--shadow); border-left: 6px solid var(--line); }
.aviso-txt { flex: 1; display: grid; gap: 2px; } .aviso-txt small { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-weight: 750; }
.aviso-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--surface-2); }
.aviso.u-atento { border-left-color: var(--leve-fill); } .aviso.u-pronto { border-left-color: var(--media-fill); } .aviso.u-detente { border-left-color: var(--grave-fill); }
.auto-fila { display: flex; align-items: center; gap: 6px; background: var(--surface); border-radius: var(--r); padding: 6px 6px 6px 0; box-shadow: var(--shadow); border: 2px solid transparent; }
.auto-fila.activo { border-color: var(--accent); }
.auto-fila-main { flex: 1; display: flex; align-items: center; gap: 12px; background: none; border: 0; color: var(--ink); font: inherit; text-align: left; padding: 8px 12px; cursor: pointer; min-width: 0; flex-wrap: wrap; }
.auto-fila-main > span:nth-child(2) { display: grid; flex: 1; min-width: 120px; }
.mini-auto { width: 104px; height: 64px; flex: none; border-radius: 14px; background: var(--noche); display: grid; place-items: center; overflow: hidden; }
.mini-auto img { width: 100%; height: 100%; object-fit: cover; } .mini-auto svg { width: 100px; height: auto; }
.pasos-lista { margin: 0; padding-left: 22px; display: grid; gap: 8px; font-size: 1.03rem; }
.hechos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hechos li { display: flex; gap: 12px; align-items: center; background: var(--surface); padding: 12px 14px; border-radius: var(--r-sm); box-shadow: var(--shadow); }
.hechos li > div { flex: 1; display: grid; min-width: 0; }
.hechos .muted { font-size: .9rem; }
.h-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; }
.cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cats li { display: flex; gap: 12px; align-items: center; } .cats span { flex: 1; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 1.06rem; }
.checks li { display: flex; gap: 10px; align-items: center; } .checks .ic { color: var(--ok); }
.cod { background: var(--surface); border-radius: var(--r-sm); padding: 4px 14px; box-shadow: var(--shadow); }
.cod summary { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; min-height: 56px; cursor: pointer; padding: 8px 0; list-style: none; }
.cod summary .chip { grid-column: 2; justify-self: start; }
.cod[open] { padding-bottom: 12px; }
.km-rapido { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border-radius: var(--r-sm); border: 1px dashed var(--line); background: transparent; color: var(--ink-2); font: 650 1rem var(--font); cursor: pointer; text-align: left; min-height: var(--tap); }
.km-rapido span { flex: 1; } .km-rapido b { color: var(--accent); }
.km-rapido.grande { background: var(--surface); border: 0; padding: 16px 18px; border-radius: var(--r); background-image: var(--chakana-fondo); }
.km-rapido.grande span { color: var(--ink); font: 740 1.45rem/1.15 var(--display); letter-spacing: -.015em; }

/* ---------- Revisar ---------- */
.paso { display: grid; gap: 16px; }
.ilus { width: 100%; height: auto; display: block; border-radius: 22px; }
.pulso circle, .glow { animation: pulso 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulso { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(1.12); } }
.enchufa { animation: enchufa 2.4s var(--ease) infinite; }
@keyframes enchufa { 0%, 20% { transform: translateY(30px); } 50%, 100% { transform: translateY(0); } }
.llave { animation: llave 2.4s var(--ease) infinite; transform-box: view-box; }
@keyframes llave { 0%, 45% { transform: rotate(-40deg); } 70%, 100% { transform: rotate(0); } }
.onda { animation: onda 1.5s ease-out infinite; opacity: 0; }
@keyframes onda { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.demo-box { background: var(--surface); border-radius: var(--r); padding: 18px; display: grid; gap: 10px; border: 2px dashed var(--line); }
.demo-box h3 { display: flex; align-items: center; gap: 8px; }
.demo-btns { display: grid; gap: 10px; }
.leyendo { min-height: 60vh; display: grid; place-content: center; justify-items: center; gap: 18px; text-align: center; }
.escaner { position: relative; overflow: hidden; border-radius: 28px; padding: 6px 30px; background: var(--surface); box-shadow: var(--shadow); }
.barrido { position: absolute; left: 0; right: 0; height: 60px; top: -60px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 40%, transparent), transparent); animation: barrido 1.8s linear infinite; }
@keyframes barrido { to { top: 100%; } }
.progreso { width: min(280px, 80vw); height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.progreso i { display: block; height: 100%; width: 4%; background: var(--accent); border-radius: 99px; transition: width .4s var(--ease); }
.luz-card { text-align: left; }
.mini-testigos { display: flex; gap: 8px; }

/* ---------- Resultado y problemas ---------- */
.sema { position: relative; display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 28px; background: var(--surface); box-shadow: var(--shadow); border: 3px solid var(--line); overflow: hidden; }
.sema h2 { font-size: 1.35rem; display: block; }
.sema p { margin-top: 6px; color: var(--ink-2); font-size: 1rem; }
.sema > div:nth-child(2) { flex: 1; min-width: 0; }
.sema-ava { width: 128px; flex: none; display: grid; place-items: center; }
@media (max-width: 440px), (min-width: 1000px) { .sema .luces { display: none; } .sema-ava { width: 112px; } .sema-ava svg { width: 112px; } .sema h2 { font-size: 1.25rem; } }
.sema-ava svg { width: 128px; height: auto; }
.sema.u-ok { border-color: var(--ok-fill); } .sema.u-atento { border-color: var(--leve-fill); } .sema.u-pronto { border-color: var(--media-fill); } .sema.u-detente { border-color: var(--grave-fill); background: var(--grave-soft); }
.luces { display: grid; gap: 5px; background: #10151C; padding: 6px; border-radius: 14px; flex: none; }
.luces i { width: 14px; height: 14px; border-radius: 50%; background: #2A3340; }
.luces i.on.l-ok { background: var(--ok-fill); box-shadow: 0 0 10px var(--ok-fill); } .luces i.on.l-atento { background: var(--leve-fill); box-shadow: 0 0 10px var(--leve-fill); }
.luces i.on.l-pronto { background: var(--media-fill); box-shadow: 0 0 10px var(--media-fill); } .luces i.on.l-detente { background: var(--grave-fill); box-shadow: 0 0 10px var(--grave-fill); }
.meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ink-2); font-size: .94rem; }
.auto-grande { display: flex; align-items: center; gap: 18px; justify-content: center; background: var(--surface); border-radius: var(--r); padding: 14px; box-shadow: var(--shadow); }
.zonas-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-weight: 750; font-size: 1.04rem; }
.zonas-lista a { color: var(--ink); text-decoration: none; }
.prob { background: var(--surface); border-radius: 28px; box-shadow: var(--shadow); border-top: 8px solid var(--line); padding: 18px; display: grid; gap: 14px; }
.prob.u-atento { border-top-color: var(--leve-fill); } .prob.u-pronto { border-top-color: var(--media-fill); } .prob.u-detente { border-top-color: var(--grave-fill); } .prob.u-ok { border-top-color: var(--ok-fill); }
.prob header { display: flex; gap: 12px; align-items: flex-start; }
.prob header h3 { font-size: 1.2rem; font-weight: 740; }
.punto { font-size: 1.6rem; line-height: 1; }
.prob-cuerpo { display: grid; gap: 14px; }
.prob-dibujo { display: grid; justify-items: center; gap: 2px; background: var(--surface-2); background-image: var(--chakana-fondo); border-radius: 20px; padding: 10px; font-weight: 750; color: var(--ink-2); font-size: .92rem; }
.cinco { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cinco li { display: flex; gap: 12px; align-items: flex-start; }
.cinco li > div { flex: 1; min-width: 0; display: grid; gap: 6px; }
.cinco .n { width: 30px; height: 30px; border-radius: 50%; background: var(--primario); color: var(--primario-ink); font-weight: 820; display: grid; place-items: center; flex: none; font-size: .92rem; }
.cinco .que { font-size: 1.1rem; font-weight: 700; }
.cinco .pieza { color: var(--ink-2); display: block !important; position: relative; padding-left: 26px; } .cinco .pieza > .ic:first-child { left: 0; top: 3px; }
.cinco p { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cinco p.manejar { display: block; font-size: 1.08rem; }
.frase { color: var(--ink-2); }
.manejar.m-no b { color: var(--grave); } .manejar.m-si b { color: var(--ok); } .manejar.m-cuidado b { color: var(--leve); }
.costo { font: 760 1.45rem/1.15 var(--display); letter-spacing: -.015em; }
.burbuja { background: var(--accent-soft); border-radius: 20px 20px 20px 6px; padding: 14px 16px; font-size: 1rem; }
.calma { position: relative; padding: 14px 14px 14px 44px; color: var(--ink); background: var(--ok-soft); border-radius: var(--r-sm); font-size: 1rem; }
.calma .ic { color: var(--ok); }
.tecnico { background: var(--surface-2); border-radius: var(--r-sm); padding: 2px 14px; font-size: .95rem; }
.tecnico[open] { padding-bottom: 14px; }
.grande-det { background: var(--surface); box-shadow: var(--shadow); }
.tec { display: grid; gap: 4px; margin: 0; }
.tec dt { font-weight: 750; color: var(--ink-2); font-size: .84rem; margin-top: 8px; }
.tec dd { margin: 0; }
.mons { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .mons li { display: flex; gap: 6px; align-items: center; }
.vitales { display: grid; gap: 12px; }
.vital { background: var(--surface); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--shadow); display: grid; gap: 8px; }
.vital-top { display: flex; gap: 12px; align-items: center; }
.vital-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); flex: none; }
.vital.u-atento .vital-ic { background: var(--leve-soft); color: var(--leve); } .vital.u-pronto .vital-ic { background: var(--media-soft); color: var(--media); } .vital.u-detente .vital-ic { background: var(--grave-soft); color: var(--grave); }
.vital b { font-size: 1.18rem; } .vital b span { font-weight: 500; color: var(--ink-2); font-size: 1rem; }
.vbar { position: relative; height: 12px; border-radius: 99px; background: var(--surface-2); }
.vnorm { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--ok-fill) 35%, transparent); border-radius: 99px; }
.vpos { position: absolute; top: -5px; width: 6px; height: 22px; margin-left: -3px; border-radius: 4px; background: var(--ink); box-shadow: 0 0 0 2px var(--surface); }
.vrango { font-size: .85rem; color: var(--ink-2); }

/* ---------- Testigos ---------- */
.testigos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.testigo-btn { display: grid; justify-items: center; gap: 6px; padding: 16px 8px; background: var(--surface); border: 0; border-radius: var(--r); box-shadow: var(--shadow); color: var(--ink); font: inherit; cursor: pointer; text-align: center; transition: transform .15s var(--ease); }
.testigo-btn:hover { transform: translateY(-2px); }
.testigo-btn b { font-size: 1rem; line-height: 1.2; overflow-wrap: anywhere; } .testigo-btn span { font-size: .84rem; color: var(--ink-2); }
.testigo { display: inline-grid; place-items: center; border-radius: 20px; background: #0B0F14; flex: none; }
.testigo.t-rojo { color: #FF4B3E; } .testigo.t-amarillo { color: #FFB020; } .testigo.t-verde { color: #3DDC6A; }
.testigo svg { filter: drop-shadow(0 0 5px currentColor); }
.testigo.parpadea svg { animation: parpadea 1s steps(2, start) infinite; }
@keyframes parpadea { to { opacity: .15; } }
.testigo-top { display: flex; gap: 16px; align-items: center; }

/* ---------- Mantenimiento, documentos, gastos ---------- */
.tl { list-style: none; margin: 0; padding: 0; display: grid; position: relative; }
.tl::before { content: ""; position: absolute; left: 31px; top: 28px; bottom: 28px; width: 3px; background: var(--line); border-radius: 3px; }
.tl-item button { display: flex; align-items: center; gap: 14px; width: 100%; background: none; border: 0; padding: 10px 6px; color: var(--ink); font: inherit; text-align: left; cursor: pointer; border-radius: var(--r-sm); position: relative; }
.tl-item button:hover { background: var(--surface); }
.tl-nodo { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--ok-soft); color: var(--ok); border: 3px solid var(--bg); position: relative; z-index: 1; }
.tl-item.u-atento .tl-nodo { background: var(--leve-soft); color: var(--leve); } .tl-item.u-pronto .tl-nodo { background: var(--media-soft); color: var(--media); } .tl-item.u-detente .tl-nodo { background: var(--grave-soft); color: var(--grave); }
.tl-txt { flex: 1; display: grid; gap: 3px; min-width: 0; }
.tl-txt b { font-size: 1.04rem; } .tl-txt > span { color: var(--ink-2); font-size: .94rem; }
.tl-bar { display: block; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: 4px; }
.tl-bar i { display: block; height: 100%; background: var(--ok-fill); border-radius: 99px; }
.tl-item.u-atento .tl-bar i { background: var(--leve-fill); } .tl-item.u-pronto .tl-bar i { background: var(--media-fill); }
.item-top, .testigo-top { padding: 18px; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); }
.item-top { display: flex; gap: 16px; align-items: center; }
.item-top h1 { font-size: 1.6rem; }
.item-top p { margin-top: 6px; }
.item-ic { width: 76px; height: 76px; border-radius: 24px; display: grid; place-items: center; background: var(--surface); color: var(--accent); flex: none; box-shadow: var(--shadow); }
.item-top.u-ok .item-ic { color: var(--ok); } .item-top.u-atento .item-ic { color: var(--leve); } .item-top.u-pronto .item-ic { color: var(--media); }
.doc { background: var(--surface); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow); display: grid; gap: 10px; border-left: 6px solid var(--ok-fill) !important; }
.doc.u-atento { border-left-color: var(--leve-fill) !important; } .doc.u-pronto { border-left-color: var(--media-fill) !important; } .doc.u-detente { border-left-color: var(--grave-fill) !important; }
.doc-head { display: flex; gap: 12px; align-items: center; } .doc-head > div { flex: 1; display: grid; gap: 4px; justify-items: start; }
.doc-ic { width: 48px; height: 48px; border-radius: 16px; background: var(--t-doc); color: var(--t-doc-ink); display: grid; place-items: center; flex: none; }
.doc .btn-row .btn { flex-basis: 100%; }
.vacio-doc { display: flex; align-items: center; gap: 12px; border: 2px dashed var(--line) !important; box-shadow: none; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.vacio-doc > span:nth-child(2) { flex: 1; display: grid; }
.cpk { border-radius: 24px; padding: 20px; display: grid; gap: 4px; color: #FFFFFF; background-color: #0F1E33; background-image: var(--chakana), var(--noche); box-shadow: 0 22px 40px -24px rgb(8 17 29 / .7); }
.cpk b { color: var(--ambar); }
.cpk small { font-weight: 700; font-size: 1rem; opacity: .9; }
.cpk b { font: 760 2.5rem/1.05 var(--display); letter-spacing: -.025em; } .cpk b span { font-size: 1.05rem; font-weight: 600; color: #FFFFFF; opacity: .85; letter-spacing: 0; }
.cpk .muted { color: inherit; opacity: .9; }
.barras-v { display: flex; align-items: flex-end; gap: 8px; height: 180px; padding-top: 22px; }
.bv { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
.bv b { font-size: .8rem; white-space: nowrap; color: var(--ink); }
.bv i { display: block; width: 100%; max-width: 44px; border-radius: 4px 4px 0 0; background: var(--accent); }
.bv span { font-size: .8rem; color: var(--ink-2); }
.tabla { width: 100%; border-collapse: collapse; } .tabla td { padding: 8px 0; border-bottom: 1px solid var(--line); } .tabla td:last-child { text-align: right; font-weight: 750; }
.pas-prev { display: grid; justify-items: center; gap: 10px; background: var(--surface); border-radius: 28px; padding: 18px; box-shadow: var(--shadow); color: var(--ink); }
.pas-datos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; width: 100%; }
.pas-datos li { display: flex; gap: 10px; align-items: center; font-size: 1.03rem; } .pas-datos .ic { color: var(--accent); }

/* ---------- Hojas ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet-back { position: absolute; inset: 0; background: rgb(5 10 18 / .55); opacity: 0; transition: opacity .2s; }
.sheet { position: relative; width: 100%; max-width: 560px; max-height: 92%; overflow: auto; background: var(--bg); border-radius: 30px 30px 0 0; padding: 8px 18px calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateY(30px); opacity: 0; transition: transform .26s var(--ease), opacity .2s; }
.sheet-wrap.open .sheet { transform: none; opacity: 1; } .sheet-wrap.open .sheet-back { opacity: 1; }
.sheet-grip { width: 44px; height: 5px; border-radius: 9px; background: var(--line); margin: 4px auto 14px; }
.sheet-body { display: grid; gap: 16px; }

@media (min-width: 600px) and (max-width: 999px) { body { background-image: var(--chakana-fondo); } }
@media (max-width: 380px) {
  body { font-size: 16px; }
  .grid2 { grid-template-columns: 1fr; }
  h1 { font-size: 1.6rem; }
  .btn.xxl { font-size: 1.16rem; }
  .testigos { grid-template-columns: 1fr 1fr; }
  .auto-grande { flex-direction: column; }
  .dos { grid-template-columns: 1fr; }
  .ta-nom h1 { font-size: 1.6rem; } .ta-datos .velocimetro { width: 112px; height: 84px; }

}

/* ---------- Computadora: vitrina a la izquierda y el celular con la app viva a la derecha ---------- */
@media (min-width: 1000px) {
  html, body { height: 100%; }
  body { background-color: var(--bg); background-image: var(--chakana-fondo); overflow: hidden; }
  .escena { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(40px, 6vw, 110px); max-width: 1260px; height: 100%; margin: 0 auto; padding-block: 24px; padding-inline: clamp(32px, 5vw, 72px); }
  .vitrina { display: grid; gap: 18px; align-content: center; max-width: 640px; overflow: auto; max-height: 100%; scrollbar-width: none; }
  .marca-fila { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .marca-logo { width: 58px; height: 58px; border-radius: 18px; background: var(--noche); color: var(--ambar); display: grid; place-items: center; box-shadow: 0 12px 24px -12px rgb(8 17 29 / .7); }
  .marca-nombre { font: 760 1.9rem/1 var(--display); letter-spacing: -.02em; }
  .sello { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; background: var(--surface); box-shadow: var(--shadow); font-weight: 700; font-size: .92rem; }
  :root[data-theme="dark"] .sello { box-shadow: 0 0 0 1px var(--line); }
  .cejilla { color: var(--accent) !important; font-size: .86rem !important; letter-spacing: .16em !important; margin-top: 8px; }
  .titular { font: 780 clamp(2.5rem, 4vw, 4rem)/1.02 var(--display); letter-spacing: -.035em; text-wrap: balance; }
  .titular span { display: block; color: var(--accent); margin-top: .06em; }
  .bajada { font-size: 1.1rem; line-height: 1.55; color: var(--ink-2); max-width: 56ch; }
  .beneficios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 26px; }
  .beneficios li { display: flex; gap: 14px; align-items: flex-start; }
  .beneficios b { display: block; font-size: 1.04rem; } .beneficios li > div > span { display: block; color: var(--ink-2); font-size: .94rem; line-height: 1.45; margin-top: 2px; }
  .ben-ic { width: 50px; height: 50px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); color: var(--accent); display: grid; place-items: center; flex: none; }
  :root[data-theme="dark"] .ben-ic { box-shadow: 0 0 0 1px var(--line); }
  .tiendas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
  .tienda { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px 10px 16px; border-radius: 14px; background: var(--primario); color: var(--primario-ink); font: 800 1.08rem/1.1 var(--font); cursor: default; }
  .tienda small { display: block; font-size: .74rem; font-weight: 550; opacity: .85; }
  .prueba { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 650; }
  .ajustes { display: flex; flex-wrap: wrap; gap: 14px 34px; }
  .ajuste { display: flex; align-items: center; gap: 14px; }
  .ajuste-tit { color: var(--accent) !important; letter-spacing: .14em !important; }
  .segmento { display: inline-flex; padding: 5px; border-radius: 18px; background: var(--surface-2); gap: 2px; }
  .segmento button { border: 0; background: none; padding: 9px 16px; border-radius: 14px; font: 700 .98rem var(--font); color: var(--ink-2); cursor: pointer; transition: background .2s, color .2s; min-height: 44px; }
  .segmento button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
  :root[data-theme="dark"] .segmento button[aria-checked="true"] { box-shadow: 0 0 0 1px var(--line); }

  .telefono { --tel-h: clamp(620px, calc(100vh - 48px), 860px); --tel-w: calc(var(--tel-h) * .4615); --borde: 12px; --radio: 58px; --estado-h: 50px; display: block; position: relative; animation: aparece .7s var(--ease) both; }
  [data-plat="android"] .telefono { --borde: 9px; --radio: 40px; --estado-h: 36px; }
  @keyframes aparece { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
  .tel-marco { display: block; position: relative; width: var(--tel-w); height: var(--tel-h); padding: var(--borde); border-radius: var(--radio); background: #0D1117; box-shadow: var(--shadow-lg), inset 0 0 0 2px #2A3340, 0 0 0 2px #3A4552; }
  .tel-marco::before, .tel-marco::after { content: ""; position: absolute; right: -4px; width: 4px; border-radius: 0 3px 3px 0; background: #2A3340; }
  .tel-marco::before { top: 22%; height: 9%; } .tel-marco::after { top: 34%; height: 13%; }
  [data-plat="android"] .tel-marco::before { top: 18%; height: 7%; } [data-plat="android"] .tel-marco::after { top: 28%; height: 16%; }
  .tel-pantalla { display: block; position: relative; width: 100%; height: 100%; border-radius: calc(var(--radio) - var(--borde)); overflow: hidden; background: var(--bg); transform: translateZ(0); isolation: isolate; }
  .tel-estado { display: flex; align-items: center; justify-content: space-between; position: absolute; top: 0; left: 0; right: 0; height: var(--estado-h); padding: 0 28px; z-index: 40; color: var(--ink); background: color-mix(in srgb, var(--bg) 90%, transparent); font: 750 .95rem var(--font); }
  [data-plat="android"] .tel-estado { padding: 0 18px; font-size: .84rem; }
  .tel-camara { position: absolute; left: 50%; top: 11px; width: 34%; height: 32px; margin-left: -17%; border-radius: 99px; background: #0B0709; }
  [data-plat="android"] .tel-camara { top: 10px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; }
  .tel-iconos { display: inline-flex; align-items: center; gap: 6px; } .tel-iconos svg { fill: currentColor; }
  .tel-gesto { display: block; position: absolute; bottom: 7px; left: 50%; width: 36%; height: 5px; margin-left: -18%; border-radius: 9px; background: var(--ink); opacity: .55; z-index: 45; }
  [data-plat="android"] .tel-gesto { width: 26%; margin-left: -13%; height: 4px; }
  html.en-inicio .tel-estado { background: transparent; color: var(--ci-tinta); }
  html.en-inicio .app-scroll { top: 0; }
  html.en-inicio .ci-fila { padding-top: calc(var(--estado-h) + 4px); }
  .app-scroll { position: absolute; top: var(--estado-h); left: 0; right: 0; bottom: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; overscroll-behavior: contain; }
  .app-scroll::-webkit-scrollbar { display: none; }
  .topbar { padding-top: 0; }
  main { padding: 6px 14px 118px; }
  .tabbar { left: 8px; right: 8px; bottom: 18px; }
  .toast { bottom: 108px; }
  .sheet { max-height: 88%; }
  .saludo-fila { padding-top: 4px; }
  .bienvenida { min-height: calc(var(--tel-h) - var(--estado-h) - 60px); }
  body { font-size: 16px; }
}
@media (min-width: 1000px) and (max-height: 820px) { .beneficios li > div > span { display: none; } .beneficios li { align-items: center; } .bajada { font-size: 1rem; } .vitrina { gap: 14px; } .titular { font-size: clamp(2.4rem, 3.6vw, 3.5rem); } }

/* ===== v6 · acabado de app de marca (10/10/2026) =====
   Portada: cielo nocturno siempre (en claro y en oscuro), el auto de estudio sobre un piso que lo refleja,
   la salud como una cifra grande, tres acciones sueltas. Paneles con color propio, placa de icono y efectos. */
.cielo { --n1: #02060E; --n2: #071630; --n3: #0E2D57; --n4: #1F4F8C; --hz: #8EC2F2;
  position: relative; isolation: isolate; color: #FFFFFF; gap: 0;
  background:
    radial-gradient(1px 1px at 22px 30px, #FFFFFF 50%, transparent 51%) 0 0 / 180px 140px,
    radial-gradient(1px 1px at 96px 84px, #DCE7FF 50%, transparent 51%) 0 0 / 180px 140px,
    radial-gradient(1.4px 1.4px at 150px 20px, #FFFFFF 50%, transparent 51%) 0 0 / 180px 140px,
    radial-gradient(120% 60% at 50% 46%, rgb(80 150 230 / .35), transparent 70%),
    linear-gradient(180deg, var(--n1) 0%, var(--n2) 22%, var(--n3) 40%, var(--n4) 50%, var(--hz) 55.5%, #0B1B33 56.5%, #06101F 78%, var(--bg) 100%); }
.cielo::before { content: ""; position: absolute; left: 0; right: 0; top: calc(55.5% - 22px); height: 22px; z-index: -1; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='22' viewBox='0 0 520 22'%3E%3Cpath d='M0 22V15l40-6 30 4 44-9 36 7 40-6 34 5 44-8 38 6 40-5 36 5 44-7 36 6 38-3V22z' fill='%23255A93'/%3E%3C/svg%3E") repeat-x bottom / 520px 22px; filter: blur(.6px); }
.cielo > * { padding-inline: 18px; }
.cielo .ci-fila, .cielo .ci-sub, .cielo .ci-frase, .cielo .pastillas { background: none; }
.ci-fila { align-items: center; padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
.ci-salud { display: grid; gap: 6px; }
.ci-num { display: flex; align-items: flex-end; gap: 8px; }
.ci-num b { font: 300 3.1rem/0.9 var(--display); letter-spacing: -.03em; color: #FFFFFF; }
.ci-num span { display: grid; padding-bottom: 3px; font: 700 .72rem/1.25 var(--font); letter-spacing: .06em; text-transform: uppercase; color: #B9CBE2; }
.ci-barra { display: block; width: 132px; height: 3px; border-radius: 3px; background: rgb(255 255 255 / .18); position: relative; overflow: hidden; }
.ci-barra::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 1%); border-radius: inherit; background: #FFFFFF; animation: barra 1.2s var(--ease) both; }
@keyframes barra { from { width: 0; } }
.cielo .icon-btn.vidrio { background: rgb(255 255 255 / .08); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); }
.ci-sub { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; }
.cielo .ci-hola { color: #B9CBE2; font-size: .88rem; line-height: 1.25; }
.cielo .ci-hola .distrito { color: #FFFFFF; font-size: .95rem; min-height: 0; padding: 0; }
.cielo .estado-eti { background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); color: #FFFFFF; }
.cielo .ci-auto { display: grid; place-items: center; padding: 18px 6px 0; margin-top: 8px; min-height: 0; background: none; }
.ci-foto { width: 100%; max-height: 230px; object-fit: cover; border-radius: 20px; box-shadow: 0 0 0 1px rgb(255 255 255 / .14), 0 0 44px -6px var(--brillo, #2BD07A); }
.ci-nombre { text-align: center; margin-top: 6px; }
.ci-nombre h1 { font: 650 1.45rem/1.15 var(--display); letter-spacing: -.01em; color: #FFFFFF; }
.ci-nombre p { color: #B9CBE2; font-size: .9rem; font-weight: 550; margin-top: 2px; }
.cielo .ci-frase { color: #DCE6F3; font-size: .98rem; padding-top: 8px; padding-bottom: 6px; }
.ci-acciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-top: 10px; padding-bottom: 6px; }
.ci-accion { display: grid; justify-items: center; gap: 7px; padding: 6px 2px; border: 0; background: none; color: #FFFFFF; font: 600 .86rem/1.2 var(--font); cursor: pointer; border-radius: 16px; }
.ci-accion span { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); transition: transform .3s var(--ease), background .3s; }
.ci-accion.principal span { background: var(--ambar); color: #17110A; box-shadow: 0 10px 26px -10px var(--ambar); }
@media (hover: hover) and (pointer: fine) { .ci-accion:hover span { transform: translateY(-3px); background: rgb(255 255 255 / .14); } }
.ci-accion:active span { transform: scale(.94); background: rgb(255 255 255 / .14); }
@media (hover: hover) and (pointer: fine) { .ci-accion.principal:hover span { background: #F5B95C; } }
.ci-accion.principal:active span { background: #F5B95C; }
.cielo .pastillas { padding-top: 8px; padding-bottom: 18px; justify-content: center; }
.cielo .pastilla { min-height: 44px; font-size: .9rem; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .16); color: #FFFFFF; }
.cielo .pastilla.on { background: #FFFFFF; border-color: #FFFFFF; color: #0B1626; }
.cielo .pastilla.agregar { color: #B9CBE2; border-style: dashed; }

/* El auto de estudio: sombra de contacto, reflejo en el piso y brillo del color de su estado */
.auto34 { position: relative; margin: 0; width: min(var(--w, 360px), 100%); display: grid; isolation: isolate; }
.auto34-img { width: 100%; height: auto; display: block; position: relative; z-index: 2; user-select: none; }
.auto34-sombra { position: absolute; left: 7%; right: 5%; bottom: 1.5%; height: 9%; border-radius: 50%; z-index: 1; background: radial-gradient(closest-side, rgb(0 0 0 / .75), rgb(0 0 0 / .35) 60%, transparent); filter: blur(4px); }
.auto34-reflejo { width: 100%; height: auto; display: block; transform: scaleY(-1); margin-top: -1%; opacity: .32; z-index: 0; filter: blur(1.2px) saturate(.9);
  -webkit-mask-image: linear-gradient(0deg, rgb(0 0 0 / .9), transparent 45%); mask-image: linear-gradient(0deg, rgb(0 0 0 / .9), transparent 45%); }
.auto34-brillo { position: absolute; left: 4%; right: 4%; bottom: 18%; height: 34%; border-radius: 50%; z-index: 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--brillo) 55%, transparent), transparent); filter: blur(18px); opacity: .55; animation: brillo 3.6s ease-in-out infinite; }
.auto34:not(.sin-piso) .auto34-sombra { bottom: 45%; height: 5%; }
.auto34:not(.sin-piso) .auto34-brillo { bottom: 42%; height: 26%; }
.auto34.sin-piso .auto34-sombra { bottom: -2%; }
.mini-auto .auto34, .sema-ava .auto34 { width: 100%; }
.foto-auto .auto34, .bv-ilus .auto34 { width: min(var(--w), 100%); }

@keyframes panelIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
}
/* v6 · el horizonte va detrás del auto (no a una altura fija de la sección) y el cielo termina oscuro */
.cielo { background:
    radial-gradient(1px 1px at 22px 30px, #FFFFFF 50%, transparent 51%) 0 0 / 180px 140px,
    radial-gradient(1px 1px at 96px 84px, #DCE7FF 50%, transparent 51%) 0 0 / 180px 140px,
    radial-gradient(1.4px 1.4px at 150px 20px, #FFFFFF 50%, transparent 51%) 0 0 / 180px 140px,
    linear-gradient(180deg, var(--n1) 0%, var(--n2) 16%, var(--n3) 30%, #081428 52%, #060F1E calc(100% - 26px), var(--bg) 100%); }
.cielo::before { content: none; }
.cielo .ci-auto { position: relative; isolation: isolate; margin-inline: 0; padding: 26px 10px 0;
  background: linear-gradient(180deg, transparent 0%, rgb(31 79 140 / .55) 16%, rgb(70 130 205 / .85) 30%, #9CCBF5 33.6%, #2A5D96 34.4%, #0D2340 40%, #081428 100%); }
.cielo .ci-auto::before { content: ""; position: absolute; left: 0; right: 0; top: calc(33.6% - 20px); height: 20px; z-index: -1; opacity: .6;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='20' viewBox='0 0 520 20'%3E%3Cpath d='M0 20V14l40-6 30 4 44-9 36 7 40-6 34 5 44-8 38 6 40-5 36 5 44-7 36 6 38-3V20z' fill='%23356FAE'/%3E%3C/svg%3E") repeat-x bottom / 520px 20px; }
.cielo .ci-auto::after { content: ""; position: absolute; left: 8%; right: 8%; top: calc(33.6% - 5px); height: 10px; border-radius: 50%; z-index: -1; background: #CFE6FF; filter: blur(7px); opacity: .55; }
.ci-auto .auto34 img { max-height: none; border-radius: 0; box-shadow: none; margin: 0; object-fit: contain; }
.auto34-brillo { opacity: .32; }
.auto34:not(.sin-piso) { margin-bottom: -19%; }
.auto34-reflejo { -webkit-mask-image: linear-gradient(0deg, rgb(0 0 0 / .9), transparent 38%); mask-image: linear-gradient(0deg, rgb(0 0 0 / .9), transparent 38%); }
.cielo .ci-auto { background: linear-gradient(180deg, transparent 0%, rgb(31 79 140 / .55) 14%, rgb(78 140 215 / .9) 30%, #BFE0FF 36.5%, #3069A6 37.5%, #0E2645 46%, #081428 100%); }
.cielo .ci-auto::before { top: calc(36.5% - 20px); }
.cielo .ci-auto::after { left: 0; right: 0; top: calc(36.5% - 12px); height: 24px; filter: blur(12px); opacity: .7; }
/* v6 · el mismo escenario nocturno en la bienvenida y en el formulario del auto */
.escenario, .bv-ilus.ancha { color: #FFFFFF; background: linear-gradient(180deg, #071630 0%, #0E2D57 28%, rgb(78 140 215) 40%, #BFE0FF 46%, #3069A6 47%, #0E2645 60%, #081428 100%); }
.escenario::before { top: calc(46% - 30px); height: 30px; background-size: 520px 30px; opacity: .5; filter: hue-rotate(0deg) brightness(.6); }
.escenario::after { top: calc(46% - 8px); height: 16px; background: #CFE6FF; filter: blur(10px); opacity: .6; }
.escenario .auto34:not(.sin-piso) { margin-bottom: -19%; }
/* ===== S137 (15/10/2026, P3013) · la portada son los papeles =====
   Arriba, cuántos papeles están al día; debajo del auto, «Tus papeles»: una fila por papel con los días que le quedan.
   El color de estado solo aparece cuando algo urge (I15); lo que falta anotar va en gris, no en ámbar. */
.ci-num span small { font-size: 11px; }
.estado-eti.u-falta i { background: #8FA3BC; box-shadow: none; }
.ci-num b i { font-style: normal; font-size: .5em; letter-spacing: 0; color: #B9CBE2; margin-left: 2px; }
.papeles { --t: #6C6FE0; display: grid; gap: 8px; margin-top: 4px; padding: 14px 12px 12px; border-radius: 18px;
  background: radial-gradient(130% 70% at 0% 0%, color-mix(in srgb, var(--t) 18%, transparent) 0%, transparent 60%), var(--surface);
  border: 1px solid color-mix(in srgb, var(--t) 28%, var(--line)); box-shadow: 0 12px 30px -20px rgb(0 0 0 / .55); }
.pap-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px 2px; }
.pap-cab h2 { font: 700 1.05rem/1.2 var(--display); color: var(--ink); }
.pap-cab .link { display: inline-flex; align-items: center; gap: 2px; font-size: .88rem; min-height: 40px; }
.papel { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--t) 4%, var(--surface)); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  transition: transform .3s var(--ease-out), border-color .3s; animation: panelIn .6s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
@media (hover: hover) and (pointer: fine) { .papel:hover { border-color: color-mix(in srgb, var(--t) 55%, var(--line)); } }
.papel-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #FFFFFF;
  background: linear-gradient(140deg, var(--t), color-mix(in srgb, var(--t) 50%, #0B0E12)); }
.papel-txt { display: grid; gap: 2px; min-width: 0; }
.papel-txt b { font: 700 1rem/1.2 var(--display); }
.papel-txt small { display: flex; align-items: center; gap: 6px; font-size: .84rem; line-height: 1.3; color: var(--ink-2); }
.papel-cifra { display: grid; justify-items: end; min-width: 48px; color: var(--ink); }
.papel-cifra b { font: 300 1.7rem/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.papel-cifra small { font: 700 11px/1.3 var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.papel-ok, .papel-mas { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--t) 12%, transparent); color: var(--t); }
.papel.falta .papel-ic { background: color-mix(in srgb, var(--t) 22%, var(--surface)); color: var(--t); }
.papel.u-atento { border-color: var(--leve-fill); } .papel.u-atento .papel-cifra b { color: var(--leve); }
.papel.u-pronto { border-color: var(--media-fill); } .papel.u-pronto .papel-cifra b, .papel.u-pronto .papel-ok { color: var(--media); }
.papel.u-detente { border-color: var(--grave-fill); background: var(--grave-soft); } .papel.u-detente .papel-ok { color: var(--grave); background: transparent; }
a.fila { text-decoration: none; }
.fila.consulta > .ic:last-child { color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .papel { animation: none !important; transition: none !important; } }
/* S137 · la moto dibujada (provisional, hasta la foto con IA): de perfil, más baja que el sedán */
.auto34.moto .auto34-img, .auto34.moto .auto34-reflejo { width: 86%; height: auto; justify-self: center; }
.auto34.moto:not(.sin-piso) { margin-bottom: -24%; }
.auto34.moto .auto34-sombra { left: 14%; right: 14%; }
/* S137 (P3019) · los avisos con la app cerrada, en «Papeles» */
.avisos-card { display: grid; gap: 8px; border: 1px solid color-mix(in srgb, #6C6FE0 30%, var(--line)); }
.avisos-card h2 { display: flex; align-items: center; gap: 8px; }
.avisos-on { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #6C6FE0 10%, var(--surface)); color: var(--ink-2); font-size: .9rem; }
.avisos-on .link { min-height: 40px; }
/* S137 (P3022) · campos que ayudan solos */
.field select { width: 100%; }
.field .otra { margin-top: 8px; }
.hint { margin: 2px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--leve-soft); color: var(--ink); font-size: .9rem; line-height: 1.35; }
.chips-fecha { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -4px; }
.chip-btn { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 .88rem var(--font); cursor: pointer; }
.chip-btn:active { transform: scale(.97); }
/* S137 (gemelo, P3022): el botón del distrito medía 16 px de alto; se agranda la zona de toque a 40 px sin mover nada */
.cielo .ci-hola .distrito { min-height: 40px; padding-block: 12px; margin-block: -12px; }
/* S137 (P3024) · el lector: elegir por lo que dice la caja, y los dos tipos en la guía de compra */
.vias { display: grid; gap: 10px; }
.via-lector { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--shadow); }
.via-lector .via-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, #4A86E8 16%, var(--surface)); color: #4A86E8; }
.via-lector .via-txt { display: grid; gap: 3px; min-width: 0; }
.via-lector .via-txt b { font: 700 1rem/1.25 var(--display); }
.via-lector .via-txt small { color: var(--ink-2); font-size: .86rem; line-height: 1.3; }
.via-lector.apagada { opacity: .55; cursor: not-allowed; }
.tipos-lector { display: grid; gap: 12px; }
.tipos-lector > div { display: grid; gap: 4px; padding: 12px; border-radius: 12px; background: var(--surface-2, color-mix(in srgb, var(--ink) 4%, var(--surface))); }
.tipos-lector span { color: var(--ink-2); font-size: .92rem; line-height: 1.4; }
.tipos-lector .precio { margin: 4px 0 0; }

/* S138 · parte 5 (P3032): el servicio en mano de obra y repuestos, y «Compara el presupuesto» del taller.
   Sin semáforo: el veredicto es texto e icono; la franja verde de la barra es «lo normal», como en los signos vitales. */
.desglose { display: grid; gap: 12px; padding: 14px; border-radius: var(--r-sm); background: var(--surface-2); min-width: 0; }
.dz-titulo { font-size: 1.02rem; }
.dz-partes { display: grid; gap: 12px; }
.dz-tit { font-weight: 700; font-size: .92rem; color: var(--ink-2); }
.dz-lista { display: grid; gap: 8px; margin-top: 6px; }
.dz-rep { display: grid; grid-template-columns: minmax(0, 1fr) 6.6rem 44px; gap: 8px; align-items: center; }
.dz-rep input { width: 100%; min-width: 0; min-height: var(--tap); padding: 10px 12px; border-radius: var(--r-sm); border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: 550 1.02rem var(--font); }
.dz-rep input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 4px var(--accent-soft); }
.dz-rep .icon-btn { width: 44px; height: 44px; color: var(--ink-2); }
.desglose[data-solo] .dz-partes { display: none; }
.desglose:not([data-solo]) .dz-total-campo { display: none; }
.dz-total { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.dz-total b { font-size: 1.3rem; } .dz-total .muted { font-size: .9rem; }
.dz-total:empty { display: none; }
.desglose .est { margin: 0; }
.dz-modo { justify-self: start; min-height: 40px; padding: 4px 0; }
.presu { display: grid; gap: 14px; padding: 16px; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.presu-v { display: flex; gap: 12px; align-items: flex-start; }
.presu-v h3 { margin: 0 0 4px; font-size: 1.15rem; line-height: 1.25; } .presu-v p { margin: 0; }
.presu-v .ic { flex: none; color: var(--ink-2); }
.presu.p-alto .presu-v .ic, .presu.p-muyalto .presu-v .ic, .presu.p-bajo .presu-v .ic { color: var(--accent); }
.presu-barra { display: grid; gap: 8px; margin-top: 4px; }
.vult { position: absolute; top: -3px; width: 3px; height: 18px; margin-left: -1.5px; border-radius: 2px; background: var(--ink-3); }
.presu-esc { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: .9rem; color: var(--ink-2); }
.presu-esc b { color: var(--ink); }
.dz-split { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--surface-2); }
.dz-split i:first-child { background: var(--ev-doc); } .dz-split i:last-child { background: var(--ev-mant); }
.dz-leyenda { margin: -6px 0 0; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: .9rem; color: var(--ink-2); }
.dz-leyenda span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; background: var(--ev-doc); }
.dz-leyenda span + span::before { background: var(--ev-mant); }
.presu-antes { margin: 0; display: flex; gap: 8px; align-items: flex-start; } .presu-antes svg { flex: none; margin-top: 2px; color: var(--ink-2); }
.presu .est { margin: 0; }
.hechos .det { display: block; font-size: .85rem; }

/* S138 · parte 6 (P3034): el menú ≡ (Ajustes), los textos legales y el pasaporte con QR */
.menu-aj { gap: 18px; }
.aj-grupo { display: grid; gap: 10px; }
.aj-tema { display: flex; flex-wrap: wrap; gap: 8px; }
.aj-tema .chip-btn { display: inline-flex; align-items: center; gap: 6px; }
.chip-btn.on { background: var(--primario); color: var(--primario-ink); border-color: var(--primario); }
.switch { flex: none; width: 46px; height: 28px; border-radius: 99px; background: var(--surface-3); position: relative; transition: background .2s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: transform .2s; }
.switch[data-on="true"] { background: var(--accent); } .switch[data-on="true"]::after { transform: translateX(18px); }
.legal { display: grid; gap: 18px; }
.legal section { display: grid; gap: 8px; }
.legal h2 { font-size: 1.12rem; margin: 0; }
.legal p, .legal li { line-height: 1.5; }
.legal a { color: var(--accent-2); font-weight: 700; }
.bv-legal .link { font-size: .92rem; }
.pas-qr { display: grid; gap: 12px; }
.qr-caja { display: block; width: min(100%, 260px); justify-self: center; padding: 10px; border: 0; border-radius: 18px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); cursor: zoom-in; }
.qr-caja svg { display: block; width: 100%; height: auto; }
.qr-caja.xl { width: min(100%, 360px); cursor: default; }
.qr-grande { justify-items: center; }

/* S138 · parte 7 (P3040), la accesibilidad medida en el gemelo: los enlaces y lo elegido con --accent-2 (4,8 a 6,3:1; con --accent
   quedaban en 4,0-4,4 sobre los grises), el verde de WhatsApp a #13793E (5,5:1) y, en oscuro, las ventanas del dibujo del auto en
   --vidrio-auto: antes compartían el nombre --vidrio con el vidrio de las barras y la de abajo salía gris azulado y opaca (3,6:1). */

/* S138 · P3051: el ejemplo se nombra como tal, y el tacho de cada vehículo en la lista */
.chip-ej { margin-left: 6px; background: var(--surface-2); color: var(--ink-2); font-size: .8rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.auto-fila .icon-btn.confirmar { color: var(--grave); background: var(--grave-soft); }


/* ===== S139 (16/10/2026, P3059) · el diseño al nivel de Michiguau =====
   Las cuatro movidas que eligió Jorge (docs/propuesta-diseno-s139.md): A · el auto vive · B · la letra de auto ·
   C · el ámbar manda · D · un Inicio con bloques; y el acabado, con la vara de las skills de diseño de la fábrica
   (Emil Kowalski: tres curvas, menos de 300 ms, el botón que se hunde; mobile-native; Impeccable: piso de calidad). */
:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --ease: var(--ease-out); --frio: #4A86E8; }

/* Acabado · lo que delata «página web» en el celular */
html { overscroll-behavior-y: none; }
button, .btn, [role="button"], a.fila { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.btn, .icon-btn, .fila, .papel, .pastilla, .bt, .hoy-fila, .logro, .aviso, .via-lector, .testigo-btn, .chip-btn { transition: transform 160ms var(--ease-out), background-color 160ms ease, border-color 160ms ease; }
@media (hover: none) { .btn:hover, .pastilla:hover, .fila:hover, .testigo-btn:hover { transform: none; } }
.btn:active, .icon-btn:active, .fila:active, .papel:active, .pastilla:active, .bt:active, .hoy-fila:active, .logro:active, .aviso:active, .via-lector:active, .testigo-btn:active { transform: scale(.97); }
/* El contenido nunca nace invisible: la entrada solo lo desliza (si el celular pausa la animación, igual se lee) */
@keyframes panelIn { from { transform: translateY(8px); } to { transform: none; } }
@keyframes rise { from { transform: translateY(8px); } to { transform: none; } }
/* Sin mayúsculas diminutas: la etiqueta en frase normal y a tamaño legible (y sin cortes como «ATENCIÓ») */
.card.mini small, .cinco small, .vital small, .km-rapido small, .cejilla, .ajuste-tit, .aviso-txt small, .papel-cifra small { text-transform: none; letter-spacing: 0; font-size: .8rem; }
.ci-num span { text-transform: none; letter-spacing: 0; font: 650 .82rem/1.2 var(--font); }
.ci-num span small { font-size: inherit; }
.pt { display: inline-block; vertical-align: middle; margin-right: 7px; }
.chip .pt, .hoy-txt b .pt, .bt small .pt, .papel-txt small .pt { margin-right: 0; }
.punto .pt { width: 16px; height: 16px; margin: 0; }
/* La hoja sube con la curva de iOS y se cierra arrastrándola desde la agarradera (base.js, arrastrarHoja) */
.sheet { transform: translateY(100%); opacity: 1; transition: transform 380ms var(--ease-drawer); }
.sheet-wrap.open .sheet { transform: none; }
.sheet.arrastrando { transition: none; }
.sheet-grip { position: relative; touch-action: none; cursor: grab; }
.sheet-grip::before { content: ""; position: absolute; inset: -16px -80px; }
@media (prefers-reduced-motion: reduce) { .sheet { transform: none; opacity: 0; transition: opacity .2s; } .sheet-wrap.open .sheet { opacity: 1; } }

/* B · La letra de auto: Archivo expandido y grueso (su eje de ancho llega a 125 %) para el nombre y las cifras grandes */
.ci-nombre h1 { font: 800 1.95rem/1.05 var(--display); font-stretch: 125%; letter-spacing: -.015em; }
.ci-num b { font-weight: 700; font-stretch: 125%; letter-spacing: -.02em; }
.papel-cifra b { font-weight: 650; font-stretch: 115%; }
/* C · El ámbar manda: la luz del tablero bajo el nombre y en los títulos; un solo color frío para lo demás */
.ci-nombre h1::after { content: ""; display: block; width: 40px; height: 3px; margin: 10px auto 0; border-radius: 3px; background: var(--ambar); box-shadow: 0 0 12px rgb(240 169 59 / .55); }
.b-tit, .pap-cab h2 { font: 750 1.15rem/1.2 var(--display); font-stretch: 112%; color: var(--accent-2); letter-spacing: -.005em; margin: 0; }
.papeles { --t: var(--frio); }
.avisos-card { border-color: color-mix(in srgb, var(--frio) 30%, var(--line)); }
.avisos-on { background: color-mix(in srgb, var(--frio) 10%, var(--surface)); }

/* D · Un Inicio con bloques distintos, como Michiguau: «Hoy», el bento, la semana, la fecha especial y los logros */
.bloque { display: grid; gap: 10px; }
.bloque > .b-tit { padding: 4px 4px 0; }
.hoy-lista { display: grid; gap: 8px; }
.hoy-fila { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.hoy-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--ambar) 16%, var(--surface)); color: var(--accent-2); }
.hoy-txt { display: grid; gap: 2px; min-width: 0; }
.hoy-txt b { display: flex; align-items: center; gap: 7px; font: 700 1rem/1.25 var(--display); }
.hoy-txt small { color: var(--ink-2); font-size: .88rem; line-height: 1.3; }
.hoy-fila > .ic:last-child { color: var(--ink-3); }
.hoy-nada { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); line-height: 1.4; }
.hoy-nada .ic { color: var(--ok); flex: none; }
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bt { display: grid; align-content: start; gap: 6px; min-height: 152px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.bt.ancho { grid-column: 1 / -1; min-height: 0; }
.bt-cab { display: flex; align-items: center; gap: 6px; font: 650 .85rem/1.2 var(--font); color: var(--ink-2); }
.bt-cab .ic { color: var(--frio); flex: none; }
.bt-big { font: 750 1.12rem/1.2 var(--display); font-stretch: 110%; overflow-wrap: anywhere; }
.t-gasto .bt-big { font-size: 1.5rem; font-stretch: 115%; letter-spacing: -.01em; }
.bt small { display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: .86rem; line-height: 1.3; }
.bt-ir { margin-top: auto; display: inline-flex; align-items: center; gap: 2px; padding-top: 6px; font: 700 .86rem var(--font); color: var(--accent-2); }
.bt-qr { display: block; width: 88px; padding: 6px; border-radius: 10px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); }
.bt-qr svg { display: block; width: 100%; height: auto; }
.fecha-esp { grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px; border-radius: 18px; color: #FFFFFF; background: linear-gradient(150deg, #1B2F4D 0%, #0F1E33 55%, #08111D 100%); }
.fe-auto { display: block; } .fe-auto .auto34 { width: 96px; }
.fe-txt { display: grid; gap: 4px; min-width: 0; }
.fe-txt b { font: 750 1.05rem/1.25 var(--display); }
.fe-txt small { color: #B9CBE2; font-size: .88rem; line-height: 1.35; }
.fe-btn { grid-column: 1 / -1; }
.fecha-esp .btn.primary { background: var(--ambar); border-color: var(--ambar); color: #17110A; }
.logros-fila { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.logro { display: grid; justify-items: center; align-content: start; gap: 6px; min-height: 44px; padding: 6px 0; border: 0; border-radius: 14px; background: none; color: var(--ink-2); font: 600 .76rem/1.2 var(--font); text-align: center; cursor: pointer; }
.logro-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-3); }
.logro.ok { color: var(--ink); }
.logro.ok .logro-ic { background: color-mix(in srgb, var(--ambar) 20%, var(--surface)); color: var(--accent-2); box-shadow: inset 0 0 0 2px var(--ambar); }

/* A · El auto vive: las luces sobre la foto, en las coordenadas de sus faros (1000 × 406).
   ok = faros encendidos y un haz suave · atento = luces bajas · alerta = intermitentes. Al abrir, se encienden (una vez al día). */
.ci-tocar { display: grid; place-items: center; width: 100%; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.ci-tocar:active .auto34 { transform: scale(.985); }
.ci-tocar .auto34 { transition: transform 160ms var(--ease-out); }
.auto34-cuerpo { position: relative; display: block; z-index: 2; }
.faros { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.faro, .giro, .haz { position: absolute; display: block; opacity: 0; transform: translate(-50%, -50%) rotate(var(--r, 0deg)); transition: opacity 400ms var(--ease-out); }
.faro { height: 2.6%; border-radius: 50%; mix-blend-mode: screen; background: radial-gradient(closest-side, #FFFFFF, rgb(214 236 255 / .9) 45%, rgb(160 205 255 / 0)); box-shadow: 0 0 12px 4px rgb(205 232 255 / .85), 0 0 34px 12px rgb(150 200 255 / .45), 0 0 70px 26px rgb(120 180 255 / .22); }
.f-cerca { left: 37.2%; top: 48.8%; width: 17.5%; --r: -8.6deg; }
.f-lejos { left: 5.6%; top: 50.4%; width: 5%; --r: 26deg; }
.giro { width: 4.6%; height: 6.4%; border-radius: 50%; mix-blend-mode: screen; background: radial-gradient(closest-side, #FFE2A6, #FFB020 55%, rgb(255 176 32 / 0)); box-shadow: 0 0 18px 8px rgb(255 176 32 / .75), 0 0 44px 16px rgb(255 160 20 / .35); }
.g-cerca { left: 29.6%; top: 51.4%; } .g-lejos { left: 3.8%; top: 48.6%; }
.haz { left: 16%; top: 80%; width: 64%; height: 30%; border-radius: 50%; --r: -4deg; filter: blur(8px); mix-blend-mode: screen; background: radial-gradient(closest-side, rgb(205 230 255 / .7), rgb(170 210 255 / .25) 55%, rgb(170 210 255 / 0)); }
.auto34.luz-ok .faro { opacity: 1; } .auto34.luz-ok .haz { opacity: .9; }
.auto34.luz-atento .faro { opacity: .5; --o-fin: .5; } .auto34.luz-atento .haz { --o-fin: 0; }
.auto34.luz-alerta .faro { opacity: .45; --o-fin: .45; } .auto34.luz-alerta .haz { --o-fin: 0; }
.auto34.luz-alerta .giro { opacity: 1; animation: intermitente 1.1s steps(1, end) infinite; }
@keyframes intermitente { 0% { opacity: 1; } 50% { opacity: 0; } }
.auto34.enciende .faro { animation: encender 900ms var(--ease-out) both; }
.auto34.enciende .f-cerca { animation-delay: 160ms; }
.auto34.enciende .haz { animation: encender 900ms var(--ease-out) 320ms both; }
@keyframes encender { 0% { opacity: 0; } 30% { opacity: 1; } 45% { opacity: .35; } 100% { opacity: var(--o-fin, 1); } }
.auto34.destello .faro { animation: destello 650ms var(--ease-out); }
.auto34.destello .haz { animation: destello-haz 650ms var(--ease-out); }
@keyframes destello { 0%, 100% { opacity: var(--o-fin, 1); } 20% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(1.5, 2.2); } 45% { opacity: .25; } 65% { opacity: 1; } }
@keyframes destello-haz { 25%, 65% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .auto34 .faro, .auto34 .haz, .auto34 .giro { animation: none !important; } .ci-tocar:active .auto34 { transform: none; } }

/* S139 · B3 (P3051): el plan en tres grupos, «No aplica a mi vehículo» y la fila «No aplican (N)». */
.plan-grupo { margin-top: 18px; display: grid; gap: 4px; }
.plan-grupo > .sec { margin: 0; font-size: 1.1rem; }
.plan-grupo > .sub { margin: 0 0 6px; font-size: .92rem; }
#planForm .no-aplica { margin-top: 2px; }
#planForm .no-aplica + .muted { margin: 6px 2px 0; font-size: .88rem; line-height: 1.35; }
.no-aplican > .muted { margin: 0 0 4px; font-size: .92rem; }
.no-aplican .hechos li .btn { flex: none; min-height: 44px; padding: 0 14px; }

/* 2.2 · Primera parte: portada más breve y acciones antes de los papeles.
   Se conserva la escena completa, con su reflejo y sus faros. También en la vitrina. */
.cielo .ci-auto { padding-top: 10px; margin-top: 0; }
.ci-tocar .auto34 { max-width: 300px; }
.ci-nombre { margin-top: 0; }
.ci-nombre h1 { font-size: 1.75rem; overflow-wrap: anywhere; }
.ci-nombre h1::after { margin-top: 6px; }
.cielo .ci-frase { padding-top: 6px; padding-bottom: 4px; font-size: .9375rem; }
.ci-acciones { padding-top: 4px; padding-bottom: 2px; }
.ci-accion { min-width: 0; min-height: 64px; gap: 4px; overflow-wrap: anywhere; }
.ci-accion span { width: 46px; height: 46px; }
.cielo .pastillas { padding-top: 4px; padding-bottom: 10px; }
.ci-sub { flex-wrap: wrap; row-gap: 4px; }
.ci-hola { min-width: 0; }
.cielo .ci-hola .distrito { min-height: 44px; }

/* 2.2 · El auto en un escenario de luz: noche azul y piso de estudio.
   El vehículo queda quieto; al tocarlo conserva el destello de sus faros. */
.cielo .ci-auto {
  background:
    radial-gradient(ellipse at 50% 36%, rgb(151 199 244 / .25), transparent 65%),
    linear-gradient(180deg, transparent 0%, #102A4A 21%, #244D78 35%, #7198B9 37%, #162E46 39%, #0B1B2D 57%, #081428 100%);
  perspective: 850px;
}
.cielo .ci-auto::before {
  top: 37%; height: 1px; opacity: .65; filter: none;
  background: linear-gradient(90deg, transparent, #AACCE8 30%, #E2EFF9 50%, #AACCE8 70%, transparent);
}
.cielo .ci-auto::after {
  left: 7%; right: 7%; top: 23%; height: 28%; border-radius: 50%;
  background: radial-gradient(ellipse, rgb(167 206 242 / .28), transparent 70%);
  filter: blur(12px); opacity: .8;
}
.ci-tocar .auto34 { transition: none; }
.ci-tocar .auto34-cuerpo { filter: drop-shadow(0 10px 8px rgb(0 0 0 / .32)); }
.ci-tocar .auto34-reflejo { opacity: .24; }
.ci-tocar:active .auto34 { transform: none; }
.ci-tocar:focus-visible { outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) {
  .ci-tocar .auto34, .ci-tocar:hover .auto34, .ci-tocar:active .auto34 { transform: none; transition: none; animation: none; }
}

/* 2.2 · «Noche de estudio», elegida por Jorge: la escena acompaña al auto,
   y el estado conserva los colores que ya le corresponden. */
.cielo {
  background: radial-gradient(ellipse at 85% 7%, rgb(23 55 89 / .4), transparent 38%),
    linear-gradient(180deg, #071322, #0B1220 65%, #080F1A);
  border-radius: 0 0 24px 24px;
}
.cielo .ci-auto {
  padding-top: 12px;
  background: radial-gradient(ellipse 65% 50% at 52% 32%, rgb(82 105 129 / .3), transparent),
    linear-gradient(180deg, transparent 55%, rgb(128 154 182 / .1) 56%, rgb(35 54 74 / .2) 57%, transparent 95%);
}
.cielo .ci-auto::before {
  left: 13%; right: 13%; top: 44%; height: 41%;
  background: none; border: 1px solid rgb(181 201 220 / .16); border-radius: 50%;
  transform: perspective(400px) rotateX(64deg); opacity: 1;
  box-shadow: 0 8px 32px rgb(115 138 165 / .1);
}
.cielo .ci-auto::after {
  top: 15%; left: 9%; right: 9%; height: 42%;
  background: radial-gradient(ellipse, rgb(167 191 216 / .16), transparent 70%);
  filter: blur(12px); opacity: .8;
}
.ci-tocar .auto34 { max-width: 340px; }
.ci-tocar .auto34-reflejo { opacity: .18; }
.ci-nombre { text-align: left; margin-top: 2px; padding-inline: 20px; }
.ci-nombre h1 { font-size: 1.5625rem; font-stretch: 115%; }
.ci-nombre h1::after { width: 28px; height: 2px; margin: 7px 0 0; box-shadow: none; }
.ci-nombre p { margin-top: 5px; font-size: .8125rem; }
.ci-acciones { padding-top: 12px; padding-bottom: 8px; }
.ci-accion { font-weight: 550; }
.ci-accion span { width: 44px; height: 44px; }
.cielo .ci-frase {
  margin: 10px 18px 0; padding: 12px 14px;
  text-align: left; font-size: .875rem; line-height: 1.45;
  color: #DCE6F3; background: linear-gradient(105deg, #1F2937, #131E2B);
  border: 1px solid rgb(150 170 194 / .18); border-left-width: 3px; border-radius: 16px;
}
.cielo:has(.estado-eti.u-atento) .ci-frase { border-left-color: var(--leve-fill); }
.cielo:has(.estado-eti.u-pronto) .ci-frase { border-left-color: var(--media-fill); }
.cielo:has(.estado-eti.u-detente) .ci-frase { border-left-color: var(--grave-fill); }
.cielo:has(.estado-eti.u-ok) .ci-frase { border-left-color: var(--ok-fill); }
.cielo .pastillas { padding-top: 8px; }
.papeles { border-radius: 20px; padding: 14px 12px; }
.pap-cab .link { min-height: 44px; }
.papel { border-radius: 16px; }
.papel.u-atento { border-left: 3px solid var(--leve-fill); }
.papel.u-pronto { border-left: 3px solid var(--media-fill); }
.papel.u-detente { border-left: 3px solid var(--grave-fill); }
.papel-ic { background: color-mix(in srgb, var(--t) 15%, var(--surface)); color: var(--t); }
.papel-cifra small { text-transform: none; letter-spacing: 0; font-size: .75rem; }

/* 2.2 · Inicio: un solo bloque de estado y tarjetas con jerarquía propia. */
.cielo .ci-sub { margin-top: 6px; }
.cielo .ci-hola { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; width: 100%; }
.cielo .ci-hola .distrito { margin-block: 0; padding-block: 8px; max-width: 100%; }
.cielo .ci-hola .distrito b { overflow-wrap: anywhere; }
.cielo .ci-auto { padding-top: 2px; }
.ci-tocar .auto34:not(.sin-piso) { margin-bottom: -25%; }
.ci-identidad { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 12px; padding: 0 20px; }
.ci-identidad .ci-nombre { flex: 1 1 110px; min-width: 0; padding: 0; }
.ci-identidad .ci-nombre h1 { font-stretch: 105%; }
.ci-identidad .pastillas { flex: 1 1 160px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; min-width: 0; overflow: visible; padding: 0; margin: 0; }
.ci-identidad .pastilla { max-width: 100%; white-space: normal; overflow-wrap: anywhere; padding: 5px 9px; min-height: 44px; font-size: .75rem; gap: 5px; }
.ci-identidad .pastilla-ava { width: 20px; height: 20px; flex: none; }
.ci-identidad .pastilla.on .pastilla-ava { box-shadow: none; }
.ci-identidad .pastilla.agregar { padding-inline: 9px; }
.cielo .ci-acciones { padding-top: 10px; padding-bottom: 0; }
.cielo .ci-aviso {
  margin: 10px 18px 14px; padding: 12px 14px;
  background: linear-gradient(105deg, #1F2937, #131E2B); color: #DCE6F3;
  border: 1px solid rgb(150 170 194 / .18); border-left-width: 3px; border-radius: 18px;
}
.ci-aviso .estado-eti { background: none; box-shadow: none; padding: 0; font-size: .8125rem; line-height: 1.3; }
.ci-aviso .estado-eti i { width: 6px; height: 6px; box-shadow: none; }
.cielo .ci-aviso .ci-frase { margin: 5px 0 0; padding: 0; border: 0; border-radius: 0; background: none; font-size: .875rem; line-height: 1.4; }
.ci-aviso:has(.estado-eti.u-atento) { border-left-color: var(--leve-fill); }
.ci-aviso:has(.estado-eti.u-pronto) { border-left-color: var(--media-fill); }
.ci-aviso:has(.estado-eti.u-detente) { border-left-color: var(--grave-fill); }
.ci-aviso:has(.estado-eti.u-ok) { border-left-color: var(--ok-fill); }
.en-inicio .papeles { margin-top: 0; gap: 6px; background: var(--surface); box-shadow: none; }
.en-inicio .papel { min-height: 60px; padding: 9px 10px; gap: 10px; }
.en-inicio .papel-txt b { font-size: .9375rem; font-weight: 650; }
.en-inicio .papel-txt small { font-size: .8125rem; }
.en-inicio .papel-cifra b { font-size: 1.625rem; }
.en-inicio .pap-cab h2, .en-inicio .b-tit { font-stretch: 100%; font-weight: 650; }
.en-inicio .bento { gap: 10px; container-type: inline-size; }
.en-inicio .bt { border-radius: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--frio) 5%, var(--surface)), var(--surface)); }
.en-inicio .bt-big { font-stretch: 100%; font-weight: 650; }
.en-inicio .t-mant {
  grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px;
  min-height: 112px; padding: 16px; border-color: color-mix(in srgb, var(--frio) 40%, var(--line));
  background: linear-gradient(115deg, color-mix(in srgb, var(--frio) 12%, var(--surface)), var(--surface));
}
.en-inicio .t-mant .bt-cab { grid-column: 1 / -1; }
.en-inicio .t-mant .bt-big { grid-column: 1; font-size: 1.25rem; }
.en-inicio .t-mant small { grid-column: 1; }
.en-inicio .t-mant .bt-ir { grid-column: 2; grid-row: 2 / 4; align-self: center; margin: 0; padding: 10px; min-height: 44px; border-radius: 12px; background: var(--surface-2); font-size: .8125rem; }
.en-inicio .t-gasto .bt-big { font-size: 1.75rem; }
.en-inicio .t-pas, .en-inicio .t-gasto { min-height: 150px; }
.en-inicio .bt-qr { width: 80px; }
.en-inicio .t-diag { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; min-height: 0; gap: 4px 12px; }
.en-inicio .t-diag .bt-cab, .en-inicio .t-diag .bt-big, .en-inicio .t-diag small { grid-column: 1; }
.en-inicio .t-diag .bt-big { font-size: 1rem; }
.en-inicio .t-diag .bt-ir { grid-column: 2; grid-row: 1 / 4; align-self: center; margin: 0; min-height: 44px; padding: 10px 0 10px 10px; }
.en-inicio .t-taller .bt-big { font-size: 1rem; line-height: 1.35; }
.en-inicio .hoy-fila { border-radius: 18px; }
.en-inicio .hoy-txt b { font-weight: 650; }
@container (max-width: 260px) {
  .en-inicio .t-mant { grid-template-columns: minmax(0, 1fr); }
  .en-inicio .t-mant .bt-ir { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* 2.2 · Un solo menú arriba: las cuatro pestañas quedan para el uso diario. */
.tabbar-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); }
.tabbar-in > .tab[data-go="#/mas"] { display: none; }
.menu-avisos { position: relative; border-radius: 50%; }
.cielo .menu-avisos { width: 56px; height: 56px; background: linear-gradient(145deg, rgb(255 255 255 / .09), rgb(255 255 255 / .025)); box-shadow: inset 0 1px rgb(255 255 255 / .12), 0 0 0 1px rgb(255 255 255 / .12); }
.menu-contador { position: absolute; top: 2px; right: 1px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 20px; background: var(--ambar); color: #17110A; border: 2px solid var(--bg); font: 750 11px/1 var(--font); }
.cielo .menu-contador { border-color: #0C192A; }
.menu-cabecera { display: flex; align-items: center; gap: 12px; padding: 0 0 8px; position: sticky; top: 0; z-index: 2; background: var(--bg); }
.menu-cabecera > div { flex: 1; }
.menu-cabecera h2 { font: 700 1.4rem/1.2 var(--display); }
.menu-cabecera p { margin-top: 3px; font-size: .875rem; color: var(--ink-2); }
.menu-aj .dz-tit { font-size: .875rem; font-weight: 650; color: var(--ink-2); }
.menu-aj .lista { display: grid; gap: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.menu-aj .fila { min-height: 68px; }
.menu-aj .lista .fila { border: 0; border-radius: 0; box-shadow: none; padding: 10px 12px; }
.menu-aj .lista .fila + .fila { border-top: 1px solid var(--line); }
.menu-aj .fila-txt { min-width: 0; }
.menu-aj .fila-txt b { font-size: .9375rem; font-weight: 650; overflow-wrap: anywhere; }
.menu-aj .fila-txt span { font-size: .8125rem; line-height: 1.35; overflow-wrap: anywhere; }
.menu-aj .menu-ver-avisos { border-radius: 18px; border: 1px solid color-mix(in srgb, var(--ambar) 35%, var(--line)); background: color-mix(in srgb, var(--ambar) 7%, var(--surface)); }
.menu-ver-avisos .fila-ic { background: var(--accent-soft); color: var(--accent-2); }
.menu-total { margin-left: auto; min-width: 28px; height: 28px; padding: 0 7px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-2); font-size: .875rem; font-weight: 750; }
.menu-aj .aj-tema { display: flex; flex-wrap: wrap; gap: 8px; }
.menu-aj .chip-btn { min-height: 44px; }
.menu-detalle > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 0; cursor: pointer; font-size: .9375rem; font-weight: 650; list-style: none; }
.menu-detalle > summary::-webkit-details-marker { display: none; }
.menu-detalle[open] > summary { margin-bottom: 8px; }
.menu-detalle[open] > summary .ic { transform: rotate(180deg); }
.menu-detalle > .muted { padding-block: 12px; }

/* 2.2 · Botones aprobados: ámbar satinado, cristal y cuatro espacios iguales. */
:root {
  --boton-oro: linear-gradient(155deg, #F9C776, #E9A33C 62%, #D78C28);
  --boton-cristal: linear-gradient(145deg, var(--surface-2), var(--surface));
  --boton-canto: color-mix(in srgb, var(--ink) 12%, transparent);
  --boton-luz: color-mix(in srgb, var(--surface) 80%, #FFFFFF 20%);
}
.tabbar {
  background: linear-gradient(155deg, color-mix(in srgb, var(--surface-2) 90%, transparent), color-mix(in srgb, var(--surface) 94%, transparent));
  border: 1px solid var(--line); border-top-color: var(--boton-canto);
  box-shadow: inset 0 1px var(--boton-luz), 0 12px 30px -12px rgb(0 0 0 / .4);
}
.tabbar-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); gap: 0; padding: 7px 5px 8px; }
.tab { min-height: 64px; padding: 3px 0; gap: 5px; font-size: max(11px, .75rem); font-weight: 550; font-stretch: 90%; line-height: 1.25; border-radius: 17px; }
.tab-ic { width: 50px; height: 34px; border: 1px solid transparent; }
.tab .ic { width: 22px; height: 22px; stroke-width: 1.8; }
.tab[aria-current="true"] { background: none; color: var(--ink); font-weight: 650; }
.tab[aria-current="true"] .tab-ic,
:root[data-theme="dark"] .tab[aria-current="true"] .tab-ic {
  color: #231705; background: var(--boton-oro); border-color: #FAD59688;
  box-shadow: inset 0 1px #FFF2CFA6, 0 5px 12px -8px #D88B2680;
}
.btn { position: relative; isolation: isolate; overflow: hidden; min-width: 0; min-height: 52px; border-width: 1px; border-radius: 16px; font-weight: 650; background: var(--boton-cristal); box-shadow: inset 0 1px var(--boton-luz), 0 5px 10px -8px rgb(0 0 0 / .4); }
.btn.small { min-height: 44px; border-radius: 12px; }
.btn.primary, .card.destacada .btn.primary, .fecha-esp .btn.primary {
  color: #231705; background: var(--boton-oro); border-color: #FAD59688;
  box-shadow: inset 0 1px #FFF2CFA6, inset 0 -1px #8A4D2040, 0 8px 18px -10px #D88B267A;
}
.btn.primary .ic { color: inherit; }
.btn.wa { background: var(--wa); }
.btn.danger { background: transparent; box-shadow: none; }
.btn:disabled { opacity: 1; background: var(--surface-2); color: var(--ink-3); border-color: var(--line); box-shadow: none; cursor: default; }
.btn::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 25%, #FFFFFF20 50%, transparent 75%); transform: translateX(-110%); }
.btn .ic, .icon-btn .ic, .fila-ic .ic, .ci-accion .ic, .rapida .ic { stroke-width: 1.8; }
.icon-btn:not(.confirmar) { border: 1px solid var(--line); background: var(--boton-cristal); box-shadow: inset 0 1px var(--boton-luz), 0 5px 9px -7px rgb(0 0 0 / .4); }
.icon-btn:not(.redondo):not(.vidrio):not(.menu-avisos) { border-radius: 16px; }
.icon-btn .ic { width: 22px; height: 22px; }
.cielo .icon-btn.vidrio { background: linear-gradient(145deg, #223349, #111E30); border-color: #435166; box-shadow: inset 0 1px #FFFFFF26, 0 5px 9px -7px #0008; }
.cielo .ci-accion span { width: 50px; height: 50px; border-radius: 16px; background: linear-gradient(145deg, #223349, #111E30); border: 1px solid #435166; box-shadow: inset 0 1px #FFFFFF26, 0 5px 9px -7px #0008; }
.cielo .ci-accion.principal span { background: var(--boton-oro); color: #231705; border-color: #FAD59688; box-shadow: inset 0 1px #FFF2CFA6, 0 7px 18px -10px #D88B2680; }
.ci-accion .ic { width: 22px; height: 22px; }
.ci-accion { min-height: 78px; }
.rapida { background: var(--boton-cristal); border-color: var(--line); box-shadow: inset 0 1px var(--boton-luz), var(--shadow); }
.rapida.principal { background: var(--boton-oro); color: #231705; border-color: #FAD59688; }
.rapida.principal .ic { color: inherit; }
.fila-ic { box-shadow: inset 0 1px var(--boton-canto); border-radius: 14px; }
.chip-btn { min-height: 44px; background: var(--boton-cristal); box-shadow: inset 0 1px var(--boton-luz); font-weight: 550; }
.chip-btn.on { background: var(--boton-oro); color: #231705; border-color: #FAD59688; }
.segmento button[aria-checked="true"] { border: 1px solid var(--line); box-shadow: inset 0 1px var(--boton-luz); }
.btn, .icon-btn, .ci-accion, .tab, .chip-btn, .segmento button { transition: transform 150ms var(--ease), box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease; }
.btn:focus-visible, .icon-btn:focus-visible, .ci-accion:focus-visible, .tab:focus-visible, .chip-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .btn:not(:disabled):hover, .icon-btn:not(.confirmar):hover { transform: translateY(-1px); border-color: var(--ambar); }
  .btn:not(:disabled):hover::after { transform: translateX(110%); transition: transform 500ms ease; }
  .ci-accion:hover span { transform: translateY(-1px); border-color: #F0AF4C; }
  .tab:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
}
.btn:not(:disabled):active, .icon-btn:active, .ci-accion:active, .tab:active, .chip-btn:active { transform: scale(.97); }
.ci-accion:active span { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .btn, .icon-btn, .ci-accion, .ci-accion span, .tab, .tab-ic, .chip-btn, .segmento button { transition: none !important; }
  .btn:not(:disabled):hover, .btn:not(:disabled):active, .icon-btn:hover, .icon-btn:active, .ci-accion:hover span, .ci-accion:active, .tab:active, .chip-btn:active { transform: none; }
  .btn::after { display: none; }
}

/* 2.2 · Identidad arriba y resumen del vehículo bajo una escena continua. */
.cielo .ci-auto {
  background: radial-gradient(ellipse 65% 50% at 52% 50%, rgb(82 105 129 / .3), transparent 100%);
}
.ci-fila .ci-nombre-superior { padding: 0; margin: 0; min-width: 0; flex: 1; }
.ci-nombre-superior h1 { font-size: clamp(21px, 5.5cqi, 27px); font-stretch: 100%; line-height: 1.15; }
.ci-nombre-superior h1::after { display: none; }
.ci-nombre-superior p { color: #B9CBE2; font-size: 13px; margin-top: 5px; }
.ci-fila .ci-acc { flex: none; }
.ci-identidad { justify-content: flex-end; padding-inline: 18px; }
.ci-identidad .pastillas { flex: 0 1 auto; justify-content: flex-end; gap: 6px; }
.ci-identidad .pastilla { font-size: 11px; padding: 3px 8px; gap: 5px; border-radius: 12px; }
.ci-identidad .pastilla-ava { width: 14px; height: 14px; }
.ci-identidad .pastilla.agregar .ic { width: 14px; height: 14px; }
.resumen-inicio { margin: 20px 0; padding: 18px 12px 12px; border: 1px solid var(--line); border-radius: 24px; background: radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--frio) 10%, transparent), transparent 65%), var(--surface); box-shadow: inset 0 1px var(--boton-luz), 0 16px 32px -24px #0009; }
.resumen-inicio h2 { margin: 0 4px 5px; font: 700 1.25rem/1.2 var(--font); letter-spacing: -.025em; }
.resumen-subtitulo { margin: 0 4px 16px; color: var(--ink-2); font-size: 12px; line-height: 1.4; }
.resumen-trio { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; }
.resumen-trio button { --senal: var(--ink-3); display: grid; grid-template-columns: 42px minmax(0, 1fr) 10px 12px; align-items: center; text-align: left; min-width: 0; min-height: 108px; gap: 10px; padding: 14px 12px; color: var(--ink); background: radial-gradient(ellipse at 100% 50%, color-mix(in srgb, var(--senal) 8%, transparent), transparent 70%), var(--boton-cristal); border: 1px solid color-mix(in srgb, var(--senal) 24%, var(--line)); border-radius: 18px; box-shadow: inset 0 1px var(--boton-luz); font: 550 12px/1.3 var(--font); overflow-wrap: anywhere; cursor: pointer; }
.resumen-trio .u-ok { --senal: var(--ok); }
.resumen-trio .u-atento { --senal: var(--leve); }
.resumen-trio .u-pronto { --senal: var(--media); }
.resumen-trio .u-detente { --senal: var(--grave); }
.resumen-icono { display: grid; place-items: center; width: 42px; height: 46px; border-radius: 14px; background: linear-gradient(145deg, color-mix(in srgb, var(--senal) 12%, var(--surface-2)), var(--surface)); color: var(--senal); box-shadow: inset 0 1px var(--boton-canto), 0 5px 14px -10px var(--senal); }
.resumen-texto { display: grid; gap: 5px; min-width: 0; }
.resumen-texto > span { font-size: 12px; color: var(--ink-2); font-weight: 550; }
.resumen-trio b { font-size: 19px; line-height: 1.17; letter-spacing: -.025em; font-weight: 700; }
.resumen-trio small { font-size: 12px; line-height: 1.4; color: var(--ink-2); }
.resumen-luz { width: 10px; height: 10px; border-radius: 50%; background: var(--senal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--senal) 10%, transparent), 0 0 14px color-mix(in srgb, var(--senal) 45%, transparent); }
.resumen-trio button > .ic { width: 12px; color: var(--ink-2); }
.resumen-trio button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pap-contador { margin: 5px 0 0; font-size: 13px; color: var(--ink-2); }
.pap-contador b { font-size: 20px; font-weight: 650; color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .resumen-trio button { transition: transform 150ms var(--ease), border-color 180ms ease; }
  .resumen-trio button:active { transform: scale(.97); }
}

/* El logo se integra al fondo y conserva contraste en los dos temas. */
.logo:has(img), .marca-logo:has(img) { background: transparent; overflow: visible; box-shadow: none; }
.logo img, .marca-logo img { width: 100%; height: 100%; display: block; object-fit: contain; filter: brightness(.28); }
:root[data-theme="dark"] .logo img, :root[data-theme="dark"] .marca-logo img,
.card.destacada .logo img { filter: drop-shadow(0 0 3px rgb(172 204 235 / .25)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo img, :root:not([data-theme="light"]) .marca-logo img { filter: drop-shadow(0 0 3px rgb(172 204 235 / .25)); }
}

/* 2.2 · Primera parte: superficies limpias e iconos definidos en Inicio. */
.tabbar {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--ink) 14%, var(--surface));
  box-shadow: 0 8px 24px -14px rgb(0 0 0 / .45);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.tab .ic { width: 24px; height: 24px; stroke-width: 1.8; }
.tab-ic { width: 48px; height: 34px; border-radius: 13px; }
.tab[aria-current="true"] .tab-ic,
:root[data-theme="dark"] .tab[aria-current="true"] .tab-ic {
  background: var(--boton-oro);
  box-shadow: inset 0 1px rgb(255 255 255 / .35);
}
.cielo .icon-btn.vidrio,
.cielo .ci-accion span {
  background: linear-gradient(160deg, #273445, #1B2635);
  border-color: #4B5869;
  box-shadow: inset 0 1px rgb(255 255 255 / .08);
}
.cielo .ci-accion span { width: 54px; height: 54px; border-radius: 18px; }
.cielo .ci-accion.principal span {
  background: var(--boton-oro); color: #231705;
  border-color: #FAD59688;
  box-shadow: inset 0 1px rgb(255 255 255 / .4);
}
.ci-accion .ic { width: 25px; height: 25px; stroke-width: 1.8; }
.ci-accion { font-size: max(12px, .8125rem); line-height: 1.35; gap: 8px; }
.ci-nombre-superior h1 { font-weight: 600; letter-spacing: -.015em; }
.resumen-inicio { padding: 20px 0 0; border: 0; background: none; box-shadow: none; }
.resumen-inicio h2 { margin-inline: 2px; font-size: 21px; font-weight: 650; }
.resumen-subtitulo { margin: 7px 2px 18px; font-size: 13px; }
.resumen-trio { gap: 12px; }
.resumen-trio button {
  grid-template-columns: 44px minmax(0, 1fr) 10px 16px;
  min-height: 108px; padding: 18px 14px; gap: 12px;
  background: var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, var(--surface-2));
  border-radius: 22px; box-shadow: none;
}
.resumen-icono { width: 44px; height: 48px; background: none; box-shadow: none; border-radius: 0; }
.resumen-icono .ic { width: 28px; height: 28px; stroke-width: 1.8; }
.resumen-texto { gap: 6px; }
.resumen-texto > span { font-size: 13px; }
.resumen-trio b { font-size: 21px; font-weight: 600; line-height: 1.2; }
.resumen-trio small { font-size: 13px; }
.resumen-luz { width: 8px; height: 8px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--senal) 12%, transparent); }
.resumen-trio button > .ic { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .resumen-trio button:hover { border-color: color-mix(in srgb, var(--ink) 28%, var(--surface-2)); }
}
/* 2.2 · Acabado integral: grafito, luz de estudio y lectura sin ruido.
   Colores de urgencia y funciones existentes conservados. Fuentes locales. */
@font-face {
  font-family: "Figtree Auto";
  src: url("../../compartido/fonts/figtree.woff2") format("woff2");
  font-weight: 300 900; font-display: swap;
}
:root {
  --font: "Figtree Auto", "Segoe UI", sans-serif;
  --bg: #F3F5F7; --surface: #FFFFFF; --surface-2: #E9EDF1; --surface-3: #DFE5EB;
  --ink: #18212B; --ink-2: #52606F; --ink-3: #596979; --line: #D5DDE5;
  --r: 24px; --r-sm: 16px;
  --boton-oro: linear-gradient(165deg, #F7CB81, #EDB256 72%, #E6A344);
  --boton-cristal: var(--surface-2);
  --shadow: 0 4px 16px -12px rgb(15 23 32 / .22);
  --panel-borde: color-mix(in srgb, var(--ink) 10%, var(--surface));
  --panel-luz: rgb(255 255 255 / .6);
}
:root[data-theme="dark"] {
  --bg: #0B1017; --surface: #181F29; --surface-2: #212A35; --surface-3: #2B3643;
  --ink: #F0F3F7; --ink-2: #B4BFCD; --ink-3: #96A4B7; --line: #303B4A;
  --panel-luz: rgb(255 255 255 / .035); --shadow: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B1017; --surface: #181F29; --surface-2: #212A35; --surface-3: #2B3643;
    --ink: #F0F3F7; --ink-2: #B4BFCD; --ink-3: #96A4B7; --line: #303B4A;
    --panel-luz: rgb(255 255 255 / .035); --shadow: none;
  }
}
body { font-size: 1rem; line-height: 1.5; }
button, input, select, textarea { font-family: var(--font); }
h1, h2, h3, .top-title { font-stretch: 100%; letter-spacing: -.025em; }
h1 { font-weight: 650; }
h2, h3 { font-weight: 620; line-height: 1.22; }
main { gap: 20px; }
main > *, .btn > span, .doc-head > div, .btn-row > *, .km-rapido span { min-width: 0; }
main p, .fila-txt, .doc-head, .tl-txt, .btn { overflow-wrap: anywhere; }
.ic { stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.topbar { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
.topbar-row { min-height: 72px; padding: 12px 18px; gap: 12px; }
.top-title { font-size: 1.25rem; font-weight: 650; }
.topbar-row .logo { width: 36px; height: 36px; }
.icon-btn:not(.confirmar) { background: var(--surface-2); box-shadow: inset 0 1px var(--panel-luz); border-color: var(--line); }
.icon-btn .ic { width: 24px; height: 24px; }
.btn { border-radius: 17px; font-weight: 600; line-height: 1.35; box-shadow: inset 0 1px var(--panel-luz); }
.btn.primary, .card.destacada .btn.primary, .fecha-esp .btn.primary {
  box-shadow: inset 0 1px rgb(255 255 255 / .35); border-color: #EFC17A;
}
.btn::after { display: none; }
.btn.xl, .btn.xxl { min-height: 58px; font-size: 1.0625rem; border-radius: 18px; }
.btn.wa { color: var(--wa-ink); }
.link { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.card, .fila, .doc, .vital, .testigo-btn, .hechos li, .presu {
  border: 1px solid var(--panel-borde); box-shadow: inset 0 1px var(--panel-luz);
}
.card { padding: 22px 18px; gap: 14px; }
.card:not(.destacada), .vital, .testigo-btn { background: var(--surface); }
.card.destacada {
  background: radial-gradient(ellipse at 85% 0%, #34475F, transparent 70%), #142133;
  border-color: #43536A; border-radius: 28px;
}
.card.destacada h2 { font-size: 1.5rem; font-weight: 600; }
.card.destacada .muted { color: #D4DEEB; opacity: 1; }
.card.destacada > .centro { padding-block: 12px; }
.card.destacada > .centro svg { max-width: 100%; }
.card.mini { padding: 18px 14px; }
.card.mini small, .tile-cat, .cejilla, .ajuste-tit {
  text-transform: none; letter-spacing: 0; font-size: max(11px, .8125rem); font-weight: 550;
}
.chip { padding: 6px 10px; font-size: max(11px, .8125rem); font-weight: 600; white-space: normal; }
.fila { padding: 16px; gap: 12px; border-radius: 20px; text-decoration: none; }
.fila-ic, .doc-ic, .h-ic, .ben-ic { background: var(--surface-2); box-shadow: none; border-radius: 15px; }
.fila-ic .ic, .doc-ic .ic { width: 26px; height: 26px; }
.fila-txt { gap: 5px; }
.fila-txt b { font-weight: 600; }
.fila-txt span { font-size: .875rem; line-height: 1.45; }
.fila > .ic:last-child { width: 18px; height: 18px; }
.field { gap: 8px; }
.field label, .field legend { font-weight: 600; font-size: .875rem; }
.field input, .field select, .nombre-card input {
  border-width: 1px; min-height: 54px; background: var(--surface); font-size: max(16px, 1rem);
}
.field input:focus, .field select:focus, .nombre-card input:focus {
  box-shadow: 0 0 0 3px var(--accent-soft); outline: 1px solid var(--accent);
}
.sheet { background: var(--surface); border: 1px solid var(--line); border-bottom: 0; border-radius: 30px 30px 0 0; }
.sheet-grip { background: var(--ink-3); width: 36px; height: 4px; opacity: .65; }
.sheet-body { gap: 20px; }
.sheet-body h2 { font-size: 1.375rem; }
.sheet-back { background: rgb(3 7 12 / .7); }
.menu-aj .lista { gap: 0; background: var(--surface); }
.menu-aj .fila { padding-block: 15px; min-height: 80px; }
.menu-aj .fila + .fila { border-top: 1px solid var(--line); }
.menu-aj .fila-ic { width: 44px; height: 44px; }
.menu-cabecera { padding-bottom: 8px; }
.menu-total { border-radius: 9px; }
.menu-detalle > summary { min-height: 54px; }
/* Inicio: se conserva la escena nocturna aprobada y el auto real. */
.cielo { background: radial-gradient(ellipse at 80% 8%, #1A2B41, transparent 52%), linear-gradient(180deg, #0B1421, #0B1017); border-radius: 0 0 28px 28px; }
.ci-fila { padding-inline: 20px; padding-top: calc(20px + env(safe-area-inset-top, 0px)); }
.ci-nombre-superior h1 { font-size: clamp(23px, 6cqi, 29px); line-height: 1.15; font-weight: 600; }
.ci-nombre-superior p { margin-top: 7px; font-size: .8125rem; color: #BFCBDB; }
.ci-sub { padding-inline: 20px; margin-top: 14px; }
.cielo .ci-hola { font-size: .875rem; color: #BFCBDB; }
.cielo .ci-hola .distrito { min-height: 44px; font-size: .9375rem; }
.cielo .menu-avisos { width: 48px; height: 48px; border-radius: 17px; }
.cielo .ci-acciones { gap: 10px; padding: 16px 18px 20px; }
.cielo .ci-accion { font-weight: 500; font-size: .8125rem; min-height: 84px; }
.cielo .ci-accion span { width: 56px; height: 56px; border-radius: 19px; border-color: #465366; }
.cielo .ci-accion:not(.principal) span { background: #263243; }
.ci-identidad .pastillas { flex-wrap: wrap; overflow: visible; margin: 0; }
.ci-identidad .pastilla { font-size: max(11px, .75rem); }
.resumen-inicio h2 { font: 620 1.375rem/1.25 var(--display); }
.resumen-subtitulo { font-size: .875rem; }
.resumen-trio button { background: var(--surface); border-color: var(--panel-borde); min-height: 112px; }
.resumen-trio b { font: 550 1.375rem/1.2 var(--display); letter-spacing: -.025em; }
.resumen-texto > span, .resumen-trio small { font-size: .875rem; }
.en-inicio .papeles { padding: 0; background: none; border: 0; box-shadow: none; gap: 10px; }
.pap-cab { padding: 0 2px 8px; }
.en-inicio .pap-cab h2, .en-inicio .b-tit { color: var(--ink); font-size: 1.25rem; font-weight: 620; }
.papel { background: var(--surface); border-radius: 19px; border-color: var(--panel-borde); min-height: 84px; animation: none; }
.papel-ic { background: var(--surface-2); color: var(--t-doc-ink); border-radius: 14px; }
.en-inicio .papel-txt b { font-weight: 600; }
.en-inicio .papel-cifra b { font-weight: 550; }
.en-inicio .bt { background: var(--surface); border-color: var(--panel-borde); box-shadow: inset 0 1px var(--panel-luz); border-radius: 24px; }
.en-inicio .bt::before, .en-inicio .bt::after { display: none; }
.en-inicio .bt-cab { color: var(--ink-2); }
.en-inicio .bt-cab .ic { color: var(--accent); }
.en-inicio .bt-big { font-weight: 600; }
.en-inicio .hoy-fila { background: var(--surface); border: 1px solid var(--panel-borde); box-shadow: none; }
.logro-ic { box-shadow: none; }
.dia { min-height: 64px; }
/* Documentos: borde de estado preciso, separado del texto y las acciones. */
.doc { padding: 20px 16px; gap: 16px; border-radius: 24px; border-left-width: 3px !important; }
.doc-head { gap: 12px; }
.doc-head > div { min-width: 0; gap: 7px; }
.doc-head b { font-size: 1.125rem; font-weight: 620; }
.doc .btn-row { gap: 8px; }
.doc .btn-row .btn { min-height: 48px; font-size: .9375rem; }
.doc > .muted { font-size: .9375rem; line-height: 1.5; }
.doc .icon-btn { width: 44px; height: 44px; border-radius: 14px; }
/* Mantenimiento: recorrido limpio con nodos claros y progreso fino. */
.km-rapido.grande { background: var(--surface); border: 1px solid var(--panel-borde); padding: 20px 16px; gap: 12px; }
.km-rapido.grande span { font: 550 1.75rem/1.15 var(--display); }
.km-rapido.grande small { margin-bottom: 6px; font: 500 .8125rem/1.4 var(--font); text-transform: none; letter-spacing: 0; }
.km-rapido.grande b { font-size: .8125rem; font-weight: 600; max-width: 7ch; }
.km-rapido > .ic { width: 28px; height: 28px; color: var(--accent); }
.plan-grupo { gap: 12px; }
.plan-grupo > .sec { font-size: 1.125rem; font-weight: 620; }
.tl::before { left: 27px; width: 1px; background: var(--line); }
.tl-item button { min-height: 100px; gap: 14px; padding: 16px 4px; }
.tl-nodo { width: 48px; height: 48px; border: 4px solid var(--bg); }
.tl-nodo .ic { width: 24px; height: 24px; }
.tl-txt { gap: 7px; }
.tl-txt b { font-weight: 600; font-size: 1rem; line-height: 1.35; }
.tl-txt > span { font-size: .875rem; }
.tl-bar { height: 4px; margin-top: 3px; background: var(--surface-3); }
.tl-item button > .ic:last-child { width: 18px; height: 18px; color: var(--ink-3); }
.item-top { gap: 16px; }
.item-top h1 { font-size: 1.625rem; line-height: 1.2; }
.item-ic { border-radius: 22px; }
.mas-datos, .tecnico, .cod { border: 1px solid var(--panel-borde); box-shadow: none; }
/* Revisar, guías y resultados: ilustraciones y señales sobre bases limpias. */
.luz-card { border-radius: 26px; }
.mini-testigos { gap: 12px; padding-block: 8px; flex-wrap: wrap; }
.testigo { border-radius: 14px; }
.testigo svg { filter: none; }
.testigos { gap: 12px; }
.testigo-btn { padding: 22px 12px; gap: 12px; border-radius: 24px; }
.testigo-btn b { font-weight: 600; }
.testigo-btn span { font-size: .875rem; }
.paso { gap: 22px; }
.paso > svg { max-width: 100%; height: auto; justify-self: center; }
.paso h1 { font-size: 1.75rem; line-height: 1.2; }
.via-lector { border-radius: 22px; box-shadow: none; }
.via-ic { border-radius: 15px; }
.prob { padding: 22px 18px; box-shadow: none; border-radius: 26px; border-top-width: 4px; }
.prob-dibujo { background-image: none; padding: 18px; }
.vital { padding: 20px 16px; gap: 14px; }
.vbar { height: 6px; }
.vpos { height: 16px; }
.vacio { padding: 44px 20px; gap: 16px; }
.vacio > .ic { width: 48px; height: 48px; color: var(--ink-3); stroke-width: 1.5; }
.vacio h3 { font-size: 1.25rem; font-weight: 600; }
.dz-rep input { font-size: max(16px, 1rem); }
.cpk {
  padding: 24px 20px; gap: 10px;
  background: radial-gradient(ellipse at 100% 0%, #34475F, transparent 75%), #142133;
  border: 1px solid #43536A; box-shadow: none; border-radius: 26px;
}
.cpk b { font-weight: 550; font-style: normal; }
.cpk .muted { color: #D4DEEB; opacity: 1; }
.barras-v { gap: 10px; }
.bv i { border-radius: 7px 7px 0 0; }
.bv b, .bv span { font-size: max(11px, .8125rem); }
.pas-prev { border: 1px solid var(--panel-borde); box-shadow: none; padding: 24px 18px; gap: 18px; }
.cat-chip { border-width: 1px; min-height: 56px; font-weight: 550; gap: 7px; }
.chip-btn { border-radius: 13px; box-shadow: none; }
/* Navegación: cuatro destinos, área táctil estable y foco visible. */
.tabbar { border-radius: 25px; background: var(--surface); }
.tabbar-in { padding: 6px 4px 7px; }
.tab { min-height: 68px; gap: 5px; font-size: max(11px, .75rem); font-stretch: 100%; font-weight: 500; }
.tab[aria-current="true"] { font-weight: 650; }
.tab-ic { height: 34px; width: 48px; }
.tab .ic { width: 24px; height: 24px; }
:where(button, a, summary, input, select):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .card:not(.destacada):is(button):hover, .fila:hover, .testigo-btn:hover { border-color: var(--ink-3); }
}
@media (max-width: 390px) {
  .resumen-trio button { gap: 10px; padding-inline: 12px; grid-template-columns: 38px minmax(0, 1fr) 8px 14px; }
  .resumen-icono { width: 38px; }
  .resumen-trio b { font-size: 1.25rem; }
  .doc { padding-inline: 14px; }
  .doc-ic { width: 40px; height: 44px; }
}
@media (min-width: 1000px) {
  body { background-image: radial-gradient(ellipse at 78% 45%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%); }
  .cielo { margin-inline: -14px; }
  .vitrina { gap: 22px; }
  .titular { font-weight: 650; line-height: 1.08; }
  .bajada { font-size: 1.0625rem; }
  .ben-ic { box-shadow: none; border: 1px solid var(--line); }
  .tel-marco { box-shadow: 0 32px 65px -24px #0009, inset 0 0 0 2px #49515D, 0 0 0 1px #626B78; }
  .tel-estado { font-weight: 600; background: var(--bg); }
  .tel-gesto { opacity: .6; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  main.enter > *, .papel, .bt, .logro, .dia { animation: none !important; }
  .resumen-trio button:active, .fila:hover, .btn:hover, .ci-accion:hover span { transform: none !important; }
}

/* 2.2 · Iconos propios: silueta de auto y herramientas, selección por luz y punto. */
.tab { min-height: 74px; gap: 10px; padding-block: 5px; }
.tab .tab-ic,
.tab[aria-current="true"] .tab-ic,
:root[data-theme="dark"] .tab[aria-current="true"] .tab-ic {
  position: relative; width: 38px; height: 30px;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  color: inherit;
}
.tab .tab-ic > .ic { display: none; }
.tab-ic::before {
  content: ""; display: block; width: 28px; height: 28px;
  background: currentColor;
  -webkit-mask: var(--icono-tab) center / contain no-repeat;
  mask: var(--icono-tab) center / contain no-repeat;
}
.tab[data-go="#/"] { --icono-tab: url("../img/iconos/inicio-auto.svg"); }
.tab[data-go="#/docs"] { --icono-tab: url("../img/iconos/papeles.svg"); }
.tab[data-go="#/mant"] { --icono-tab: url("../img/iconos/mantenimiento.svg"); }
.tab[data-go="#/revisar"] { --icono-tab: url("../img/iconos/revisar.svg"); }
.tab[aria-current="true"] { color: var(--accent-2); background: none; }
.tab[aria-current="true"] .tab-ic::after {
  content: ""; position: absolute; width: 4px; height: 4px;
  left: calc(50% - 2px); bottom: -6px; border-radius: 50%; background: currentColor;
}
.tabbar {
  background: radial-gradient(ellipse at 50% 110%, color-mix(in srgb, var(--ambar) 7%, transparent), transparent 65%), var(--surface);
}
@media (hover: hover) and (pointer: fine) {
  .tab:hover { color: var(--accent-2); background: none; }
}
/* 2.2 · Proporciones y lenguaje común de todos los menús de la app. */
:root { --menu-icono: 28px; --menu-separacion: 12px; --menu-radio: 22px; }
.tabbar-in { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 6px; }
.tab { min-height: 70px; padding: 6px 0; gap: 9px; justify-content: flex-start; font-size: max(11px, .71875rem); }
.tab > span { width: 100%; line-height: 1.4; overflow-wrap: normal; }
.tab .tab-ic { flex: none; height: 30px; }
/* Mismo trazo, sin placas alrededor de cada icono. La agrupación da el contexto. */
.fila { min-height: 76px; padding: 16px; gap: var(--menu-separacion); border-radius: var(--menu-radio); }
.fila-ic, .menu-aj .fila-ic, .menu-ver-avisos .fila-ic {
  width: 32px; height: 36px; border: 0; border-radius: 0;
  background: none; box-shadow: none; color: var(--ink-2);
}
.fila-ic .ic { width: var(--menu-icono); height: var(--menu-icono); stroke-width: 1.8; }
.fila-txt { gap: 4px; }
.fila-txt b, .menu-aj .fila-txt b { font: 600 .9375rem/1.35 var(--font); }
.fila-txt span, .menu-aj .fila-txt span { font-size: .84375rem; line-height: 1.45; }
.fila > .ic:last-child { width: 16px; height: 16px; color: var(--ink-3); }
.lista:has(> .fila) {
  gap: 0; border: 1px solid var(--panel-borde); border-radius: var(--menu-radio);
  background: var(--surface); overflow: hidden;
}
.lista > .fila, .menu-aj .lista > .fila {
  min-height: 76px; padding: 16px; border: 0; border-radius: 0;
  background: none; box-shadow: none;
}
.lista > .fila + .fila, .menu-aj .lista > .fila + .fila { border-top: 1px solid var(--line); }
.menu-aj { gap: 24px; }
.menu-cabecera {
  gap: 12px; padding: 4px 0 16px; background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.menu-cabecera .logo { width: 36px; height: 36px; }
.menu-cabecera h2 { font-size: 1.375rem; font-weight: 600; }
.menu-cabecera p { margin-top: 4px; font-size: .8125rem; }
.menu-cabecera .icon-btn { width: 44px; height: 44px; background: none; border-color: transparent; box-shadow: none; }
.aj-grupo { gap: 12px; }
.menu-aj .dz-tit { padding-inline: 4px; font-weight: 550; font-size: .875rem; }
.menu-aj .menu-ver-avisos { background: var(--surface); border-color: var(--panel-borde); border-radius: var(--menu-radio); }
.menu-ver-avisos .fila-ic { color: var(--accent-2); }
.menu-total { min-width: 24px; height: 24px; margin-left: 0; padding-inline: 5px; background: none; color: var(--accent-2); font-weight: 600; }
.menu-detalle > summary { min-height: 52px; padding: 12px 4px; font-weight: 550; font-size: .9375rem; }
.menu-detalle > summary .ic { width: 18px; height: 18px; color: var(--ink-3); }
.menu-detalle[open] > summary { margin-bottom: 12px; }
/* Les damos el mismo dibujo a los accesos que representan el mismo destino. */
.fila[data-go="#/autos"], .fila[data-go="#/"] { --icono-opcion: url("../img/iconos/inicio-auto.svg"); }
.fila[data-go="#/docs"] { --icono-opcion: url("../img/iconos/papeles.svg"); }
.fila[data-go="#/mant"] { --icono-opcion: url("../img/iconos/mantenimiento.svg"); }
.fila[data-go="#/revisar"], .fila[data-go="#/historial"] { --icono-opcion: url("../img/iconos/revisar.svg"); }
.fila:is([data-go="#/autos"],[data-go="#/"],[data-go="#/docs"],[data-go="#/mant"],[data-go="#/revisar"],[data-go="#/historial"]) .fila-ic > .ic { display: none; }
.fila:is([data-go="#/autos"],[data-go="#/"],[data-go="#/docs"],[data-go="#/mant"],[data-go="#/revisar"],[data-go="#/historial"]) .fila-ic::before {
  content: ""; width: var(--menu-icono); height: var(--menu-icono); background: currentColor;
  -webkit-mask: var(--icono-opcion) center / contain no-repeat;
  mask: var(--icono-opcion) center / contain no-repeat;
}
/* Selectores: color y punto, con las mismas áreas de toque en cada opción. */
.chip-btn { position: relative; min-height: 48px; padding: 10px 14px; background: none; border: 1px solid transparent; border-radius: 14px; box-shadow: none; }
.chip-btn.on { color: var(--accent-2); background: none; border-color: transparent; }
.chip-btn.on::after { content: ""; position: absolute; bottom: 3px; left: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.menu-aj .aj-tema { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 6px; border: 1px solid var(--panel-borde); border-radius: var(--menu-radio); background: var(--surface); }
.menu-aj .aj-tema .chip-btn { min-height: 88px; padding: 8px 2px 12px; display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; font-size: .8125rem; line-height: 1.35; text-align: center; }
.aj-tema .chip-btn .ic { width: 26px; height: 26px; }
.aj-tema .chip-btn.on::after { top: 38px; bottom: auto; }
.segmento { gap: 4px; padding: 4px; border: 1px solid var(--panel-borde); background: var(--surface); border-radius: 18px; }
.segmento button { position: relative; min-height: 48px; padding: 10px 16px 14px; font-size: .9375rem; font-weight: 550; }
.segmento button[aria-checked="true"], :root[data-theme="dark"] .segmento button[aria-checked="true"] { background: none; color: var(--accent-2); border-color: transparent; box-shadow: none; }
.segmento button[aria-checked="true"]::after { content: ""; position: absolute; left: calc(50% - 2px); bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.cat-chips { gap: 8px; }
.cat-chip { padding: 12px 6px 16px; min-height: 80px; position: relative; gap: 10px; border: 1px solid var(--panel-borde); border-radius: 18px; }
.cat-chip > .ic { width: 26px; height: 26px; }
.cat-chip:has(input:checked) { background: none; border-color: var(--panel-borde); color: var(--accent-2); }
.cat-chip:has(input:checked)::after { content: ""; position: absolute; left: calc(50% - 2px); bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.cat-chip:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.ci-identidad, .ci-identidad .pastillas { justify-content: center; }
.cielo .pastilla { position: relative; background: none; box-shadow: none; border-color: transparent; color: #C7D2E2; padding: 6px 10px 10px; }
.cielo .pastilla.on { background: none; border-color: transparent; color: #F5B95C; }
.cielo .pastilla.on::after { content: ""; position: absolute; bottom: 3px; left: calc(50% - 2px); width: 4px; height: 4px; background: currentColor; border-radius: 50%; }
.resumen-inicio { margin: 4px 0 8px; padding-top: 12px; }
.resumen-trio { gap: 10px; }
.resumen-trio button { min-height: 96px; padding-block: 16px; }
.resumen-texto { gap: 4px; }
.resumen-inicio h2 { margin-bottom: 6px; }
.resumen-subtitulo { margin-bottom: 16px; }
@media (hover: hover) and (pointer: fine) {
  .fila:hover { transform: none; background: var(--surface-2); }
  .fila:hover .fila-ic { color: var(--accent-2); }
  .chip-btn:hover, .cat-chip:hover, .segmento button:hover { background: var(--surface-2); }
}
@media (prefers-reduced-motion: reduce) {
  .fila, .chip-btn, .cat-chip, .segmento button { transition: none !important; }
}@container (max-width: 330px) {
  .tab { font-size: max(11px, .6875rem); }
}
.tab > span { overflow-wrap: anywhere; }.menu-cabecera { box-shadow: 0 -24px 0 var(--surface); }
.lista > .fila:focus-visible { outline-offset: -3px; }/* Los menús de vehículos y de conexión comparten las mismas proporciones. */
.auto-fila { border: 1px solid var(--panel-borde); border-radius: var(--menu-radio); padding: 6px; box-shadow: none; }
.auto-fila.activo { border-color: var(--panel-borde); }
.auto-fila-main { min-height: 88px; flex-wrap: nowrap; gap: 12px; padding: 12px 8px; position: relative; }
.auto-fila-main > span:nth-child(2) { min-width: 0; }
.auto-fila-main b { font-size: .9375rem; font-weight: 600; }
.auto-fila-main .muted { font-size: .84375rem; line-height: 1.45; }
.auto-fila.activo .auto-fila-main::after { content: ""; flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-2); }
.auto-fila .mini-auto { width: 80px; height: 56px; background: none; }
.via-lector { grid-template-columns: 32px minmax(0, 1fr) 16px; gap: 12px; min-height: 80px; padding: 16px; border-radius: var(--menu-radio); border-color: var(--panel-borde); }
.via-lector .via-ic { width: 32px; height: 36px; background: none; color: var(--ink-2); }
.via-lector .via-ic .ic { width: 28px; height: 28px; stroke-width: 1.8; }
.via-lector .via-txt b { font: 600 .9375rem/1.35 var(--font); }
.via-lector .via-txt small { font-size: .84375rem; line-height: 1.45; }
.via-lector > .ic:last-child { width: 16px; height: 16px; color: var(--ink-3); }/* Acciones del vehículo en su propia fila: nombres completos y sin desborde. */
.auto-fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px; }
.auto-fila-main { grid-column: 1 / -1; display: grid; grid-template-columns: 80px minmax(0, 1fr); padding: 4px 0 12px; gap: 8px 12px; min-height: 96px; width: 100%; }
.auto-fila-main .mini-auto { grid-column: 1; grid-row: 1 / 3; align-self: center; }
.auto-fila-main > span:nth-child(2) { grid-column: 2; gap: 4px; }
.auto-fila-main > .chip { grid-column: 2; justify-self: start; }
.auto-fila.activo .auto-fila-main::after { position: absolute; top: 2px; right: 2px; }
.auto-fila > .icon-btn { width: 100%; min-height: 48px; height: auto; padding: 10px 8px; display: flex; align-items: center; justify-content: center; gap: 8px; font: 500 .84375rem/1.35 var(--font); border-radius: 14px; background: none; border-color: var(--line); box-shadow: none; }
.auto-fila > .icon-btn .ic { width: 22px; height: 22px; }.auto-fila-main .chip-ej { justify-self: start; margin-left: 0; }


/* ============================================================================================================
   S140 (P3074-P3075) · EL ACABADO FINO, con la Škoda Vision App como vara (docs/06-acabado-fino-vara-skoda.md).
   Jorge eligió los siete: trazo fino, barra rellena (con sus etiquetas, más finas), cifras ligeras, etiquetas
   regulares, tarjetas sin borde, el punto vivo y la luz de borde como progreso. El fondo sigue azul noche.
   ============================================================================================================ */

/* 1 · Trazo fino: los iconos de línea a 1,5 (Škoda: ~6 % del tamaño) */
.ic, .tab .ic, .btn .ic, .icon-btn .ic, .fila-ic .ic, .ci-accion .ic, .rapida .ic,
.resumen-icono .ic, .via-lector .via-ic .ic, .resumen-trio button > .ic { stroke-width: 1.5; }

/* 2 · La barra: glifos rellenos (img/iconos/*.svg) en gris; el activo en ámbar con su punto; etiquetas finas */
.tab { color: var(--ink-3); font-weight: 450; letter-spacing: .005em; }
.tab-ic::before { width: 26px; height: 26px; }
.tab[aria-current="true"] { color: var(--accent-2); font-weight: 560; }
.tab[aria-current="true"] .tab-ic::after { width: 5px; height: 5px; left: calc(50% - 2.5px); bottom: -7px; box-shadow: 0 0 8px 1px color-mix(in srgb, currentColor 55%, transparent); }

/* 3 · Las cifras grandes, ligeras y con aire (se leen como un instrumento) */
.resumen-trio b, .km-rapido.grande span, .cpk b {
  font-family: var(--font); font-weight: 300; letter-spacing: 0; font-stretch: 100%; font-variant-numeric: tabular-nums;
}
.resumen-trio b { font-size: 24px; line-height: 1.15; }
.km-rapido.grande span small { font-weight: 400; }
.cpk b span { font-weight: 400; }

/* 4 · Las etiquetas y los títulos, sin peso de más ni letras apretadas */
h1, h2, h3, .top-title { letter-spacing: -.005em; }
h1 { font-weight: 600; }
h2, h3, .top-title { font-weight: 560; }
.resumen-inicio h2 { font-weight: 560; }
.ci-nombre-superior h1 { font-weight: 600; letter-spacing: 0; }
.resumen-texto > span, .resumen-trio small, .resumen-subtitulo, .ci-hola span,
.ci-accion, .cielo .ci-accion, .resumen-trio button { font-weight: 400; }
.resumen-texto > span { color: var(--ink-2); }
.pastilla { font-weight: 560; }

/* 5 · Las tarjetas, por tono y sin borde, con un brillo superior de 1 px */
.card, .doc, .vital, .testigo-btn, .presu, .resumen-trio button {
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), 0 1px 2px rgb(15 23 32 / .05), 0 10px 24px -18px rgb(15 23 32 / .22);
}
:root[data-theme="dark"] :is(.card, .doc, .vital, .testigo-btn, .presu, .resumen-trio button) { box-shadow: inset 0 1px 0 rgb(255 255 255 / .055); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.card, .doc, .vital, .testigo-btn, .presu, .resumen-trio button) { box-shadow: inset 0 1px 0 rgb(255 255 255 / .055); }
}
.resumen-trio button { border-radius: 24px; }
@media (hover: hover) and (pointer: fine) {
  .resumen-trio button:hover { border-color: transparent; background: color-mix(in srgb, var(--ink) 4%, var(--surface-2)); }
}

/* 6 · El punto vivo: la luz de estado con su halo en dos capas y una cuenta metálica diminuta */
.resumen-luz {
  position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--senal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--senal) 14%, transparent),
              0 0 10px 2px color-mix(in srgb, var(--senal) 50%, transparent),
              0 0 22px 6px color-mix(in srgb, var(--senal) 18%, transparent);
}
.resumen-luz::after {
  content: ""; position: absolute; width: 4px; height: 4px; right: -3px; bottom: -3px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0 16%, #C9CED6 42%, #6D7581 100%);
  box-shadow: 0 1px 1.5px rgb(0 0 0 / .45);
}

/* 7 · La luz de borde como progreso: en Papeles, el borde se ilumina lo que va al día (3 de 4 = 75 %),
      desde arriba y en el sentido del reloj, con la punta que se desvanece. --progreso lo pone pantallas-inicio.js */
.resumen-trio button[data-progreso] { position: relative; isolation: isolate; }
.resumen-trio button[data-progreso]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from 0deg,
    color-mix(in srgb, var(--senal) 35%, transparent) 0,
    var(--senal) max(0%, calc(var(--progreso) * 1% - 5%)),
    transparent calc(var(--progreso) * 1%));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@media (prefers-reduced-motion: no-preference) {
  .resumen-trio button[data-progreso]::before { animation: borde-progreso 900ms var(--ease, ease-out) both; }
  @keyframes borde-progreso { from { opacity: 0; } to { opacity: 1; } }
}

/* 3-bis · Lo que aún pesaba (mirado en la app): las cifras de los papeles, el contador y el distrito */
.papel-cifra b, .en-inicio .papel-cifra b, .pap-contador b {
  font-family: var(--font); font-weight: 300; font-stretch: 100%; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.en-inicio .papel-cifra b { font-size: 1.75rem; }
.papel-cifra small { font-weight: 400; color: var(--ink-2); }
.papel-txt b, .en-inicio .papel-txt b { font-weight: 560; }
.cielo .ci-hola .distrito b { font-weight: 560; }
.link, .pap-cab .link { font-weight: 560; }

/* 5-bis · Sin borde también donde el tema oscuro lo volvía a poner (reglas más específicas: aquí, con el mismo peso y después).
   La franja de color de estado de cada papel (el borde izquierdo de .doc) se conserva. */
:root :is(.card, .vital, .testigo-btn, .presu, .resumen-trio button, .km-rapido, .mas-datos, .cpk, main .fila, .hechos li, .gasto-lista li) {
  border-color: transparent;
}
:root :is(.doc) { border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; }
:root[data-theme="dark"] :is(.card, .vital, .testigo-btn, .presu, .resumen-trio button, .km-rapido, .mas-datos, .cpk, main .fila, .hechos li, .gasto-lista li) { border-color: transparent; }
:root[data-theme="dark"] :is(.doc) { border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.card, .vital, .testigo-btn, .presu, .resumen-trio button, .km-rapido, .mas-datos, .cpk, main .fila, .hechos li, .gasto-lista li) { border-color: transparent; }
  :root:not([data-theme="light"]) :is(.doc) { border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; }
}
:root :is(.km-rapido, .mas-datos, main .fila) { box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), 0 1px 2px rgb(15 23 32 / .05); }
:root[data-theme="dark"] :is(.km-rapido, .mas-datos, main .fila, .cpk) { box-shadow: inset 0 1px 0 rgb(255 255 255 / .055); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.km-rapido, .mas-datos, main .fila, .cpk) { box-shadow: inset 0 1px 0 rgb(255 255 255 / .055); }
}

/* 5-ter · Inicio: los papeles al día, «Hoy» y el bento, también por tono (el contorno de color se queda solo en el papel que urge) */
:root :is(.papel:not(.u-pronto, .u-atento, .u-taller, .u-detente), .hoy-fila, .bt) { border-color: transparent; }
:root[data-theme="dark"] :is(.papel:not(.u-pronto, .u-atento, .u-taller, .u-detente), .hoy-fila, .bt) { border-color: transparent; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.papel:not(.u-pronto, .u-atento, .u-taller, .u-detente), .hoy-fila, .bt) { border-color: transparent; }
}

/* 4-bis · El bento y «Hoy», con la misma vara: la cifra ligera, los rótulos regulares, los nombres en medio */
.bt .bt-cab { font-weight: 450; }
.bt .bt-big { font-weight: 560; letter-spacing: 0; }
.bt.t-gasto .bt-big { font-family: var(--font); font-weight: 300; font-variant-numeric: tabular-nums; }
.bt .bt-ir { font-weight: 560; }
.hoy-txt b { font-weight: 560; }

/* 6-bis · El punto vivo en el tema claro: el halo grande ensuciaba la tarjeta blanca (gemelo, S140). En claro, halo corto;
   en oscuro, el halo completo en dos capas. */
:root .resumen-luz {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--senal) 16%, transparent), 0 0 6px color-mix(in srgb, var(--senal) 30%, transparent);
}
:root .resumen-luz::after { box-shadow: 0 .5px 1px rgb(0 0 0 / .22); }
:root[data-theme="dark"] .resumen-luz {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--senal) 14%, transparent),
              0 0 10px 2px color-mix(in srgb, var(--senal) 50%, transparent),
              0 0 22px 6px color-mix(in srgb, var(--senal) 18%, transparent);
}
:root[data-theme="dark"] .resumen-luz::after { box-shadow: 0 1px 1.5px rgb(0 0 0 / .45); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .resumen-luz {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--senal) 14%, transparent),
                0 0 10px 2px color-mix(in srgb, var(--senal) 50%, transparent),
                0 0 22px 6px color-mix(in srgb, var(--senal) 18%, transparent);
  }
  :root:not([data-theme="light"]) .resumen-luz::after { box-shadow: 0 1px 1.5px rgb(0 0 0 / .45); }
}

/* ============================================================================================================
   S140 (P3076-P3077) · DISEÑO FINO, segunda pasada (lo hace BLACK). Jorge: «más tosco, menos arte en iconos (el auto
   parece pixelado y antiguo), no tiene trazos finos, letras de diferentes tamaños». Vara: la Škoda Vision App.
   ============================================================================================================ */

/* A · Una sola familia (Figtree) y una escala corta: 26 · 20 · 17 · 15 · 13 · 11,5 */
:root { --display: "Figtree Auto", "Segoe UI", system-ui, sans-serif; }
h1, h2, h3, .top-title, .ci-nombre-superior h1 { font-family: var(--display); font-stretch: 100%; }
.ci-nombre-superior h1 { font-size: 26px; line-height: 1.15; font-weight: 600; letter-spacing: -.012em; }
.ci-nombre-superior p { font-size: 13px; font-weight: 400; letter-spacing: .02em; color: rgb(214 223 235 / .78); }
.resumen-inicio h2, .pap-cab h2, .en-inicio h2, main > section > h2, h2.sec { font-size: 20px; font-weight: 600; letter-spacing: -.008em; }
.resumen-subtitulo { font-size: 13px; }
.top-title { font-size: 18px; font-weight: 600; letter-spacing: -.005em; }
.card h2 { font-size: 17px; font-weight: 600; }

/* B · La barra: vidrio fino que flota, glifos de 24 px y las etiquetas en una línea (Mantenimiento con más ancho) */
.tabbar {
  border: 1px solid rgb(15 23 32 / .07); border-radius: 26px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 14px 32px -16px rgb(15 23 32 / .35);
}
:root[data-theme="dark"] .tabbar { border-color: rgb(255 255 255 / .07); box-shadow: 0 1px 0 rgb(255 255 255 / .06) inset, 0 16px 36px -14px rgb(0 0 0 / .7); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tabbar { border-color: rgb(255 255 255 / .07); box-shadow: 0 1px 0 rgb(255 255 255 / .06) inset, 0 16px 36px -14px rgb(0 0 0 / .7); }
}
.tabbar-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: 0; padding: 6px 4px; }
.tab { min-height: 58px; gap: 7px; padding-block: 4px; }
.tab > span { white-space: nowrap; overflow-wrap: normal; font-size: 11.5px; line-height: 1.2; }
.tab-ic::before { width: 24px; height: 24px; }
.tab .tab-ic, .tab[aria-current="true"] .tab-ic { height: 26px; }

/* C · Los tres botones del cielo: aristas finas, tono en vez de relleno opaco, iconos de 22 px */
.cielo .ci-accion { font-size: 13px; font-weight: 400; color: rgb(226 232 240 / .9); gap: 9px; }
.cielo .ci-accion span {
  width: 52px; height: 52px; border-radius: 17px;
  background: linear-gradient(180deg, rgb(255 255 255 / .085), rgb(255 255 255 / .035));
  border: 1px solid rgb(255 255 255 / .09);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 10px 22px -14px rgb(0 0 0 / .8);
}
.cielo .ci-accion:not(.principal) span { background: linear-gradient(180deg, rgb(255 255 255 / .085), rgb(255 255 255 / .035)); border-color: rgb(255 255 255 / .09); }
.cielo .ci-accion.principal span {
  background: linear-gradient(180deg, #F6C877, #E9A949); border: 1px solid rgb(255 236 200 / .55);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 10px 24px -12px rgb(233 169 73 / .55);
}
.cielo .ci-accion .ic { width: 22px; height: 22px; stroke-width: 1.5; }

/* D · El menú y el distrito, en vidrio fino */
.cielo .menu-avisos {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .11);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12);
}
.cielo .menu-avisos .ic { width: 20px; height: 20px; }
.menu-contador { min-width: 18px; height: 18px; font-size: 11px; line-height: 14px; }
.cielo .ci-hola .distrito {
  padding: 7px 12px 7px 10px; min-height: 36px; border-radius: 999px;
  background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .09);
}
.cielo .ci-hola .distrito b { font-weight: 500; font-size: 14px; }
.cielo .ci-hola span { font-size: 14px; font-weight: 400; color: rgb(214 223 235 / .78); }

/* E · La pestaña activa: el punto va debajo de la etiqueta (no entre el icono y el texto) */
.tab[aria-current="true"] .tab-ic::after { display: none; }
.tab { position: relative; }
.tab[aria-current="true"]::after {
  content: ""; position: absolute; left: calc(50% - 2.5px); bottom: 1px; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 8px 1px color-mix(in srgb, currentColor 55%, transparent);
}
/* F · El distrito, más discreto: una píldora fina que no compite con el nombre del auto */
.cielo .ci-hola .distrito { min-height: 32px; padding: 5px 11px 5px 9px; background: rgb(255 255 255 / .045); border-color: rgb(255 255 255 / .07); }
.cielo .ci-hola .distrito b { font-size: 13px; }
.cielo .ci-hola .distrito .ic { width: 14px; height: 14px; }
.tab { padding-bottom: 10px; }
.tab[aria-current="true"]::after { bottom: 2px; }
:root[data-theme="dark"] .tab[aria-current="true"] .tab-ic, :root .tab[aria-current="true"] .tab-ic { height: 26px; }

/* ============================================================================================================
   S140 (P3078) · LA PORTADA «ESTUDIO» — Jorge: «quiero un diseño superior a este (la Škoda Vision), hazlo tú, con
   cuidado, con arte, con gusto». La portada vive en la noche (también en el tema claro): vitrina con su estado en
   vidrio, la placa como placa, «Consultar» como control con perilla, y un mosaico de tres piezas con anillos finos.
   ============================================================================================================ */

/* Los colores de estado, en su versión nocturna (la portada siempre es de noche) */
.mosaico-auto .u-ok, .ci-estado.u-ok { --senal: #5CD65C; }
.mosaico-auto .u-atento, .ci-estado.u-atento { --senal: #FFC94D; }
.mosaico-auto .u-pronto, .ci-estado.u-pronto { --senal: #F5A27F; }
.mosaico-auto .u-detente, .ci-estado.u-detente { --senal: #FF7B70; }
.mosaico-auto .u-falta, .ci-estado.u-falta { --senal: rgb(214 223 235 / .5); }

/* La placa, como una placa: fina, con su letra de matrícula */
.ci-nombre-superior p { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.placa {
  display: inline-block; padding: 2px 7px 1px; border-radius: 6px;
  font: 500 12px/1.4 var(--mono, "IBM Plex Mono", monospace); letter-spacing: .1em; color: #EEF2F7;
  border: 1px solid rgb(255 255 255 / .22); background: linear-gradient(180deg, rgb(255 255 255 / .08), rgb(255 255 255 / .02));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12);
}

/* La vitrina: el estado del auto en una píldora de vidrio sobre la escena, con su punto vivo; abre los avisos */
.cielo .ci-auto { position: relative; }
.ci-estado {
  --senal: rgb(214 223 235 / .5);
  position: absolute; left: 18px; bottom: 10px; z-index: 3;
  display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 15px 6px 13px;
  border-radius: 999px; border: 1px solid rgb(255 255 255 / .12);
  background: linear-gradient(180deg, rgb(20 30 44 / .62), rgb(10 16 26 / .62));
  -webkit-backdrop-filter: blur(16px) saturate(1.35); backdrop-filter: blur(16px) saturate(1.35);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 12px 28px -16px rgb(0 0 0 / .9);
  color: #EEF2F7; font: 450 13px/1.2 var(--font); cursor: pointer;
}
.ci-estado .resumen-luz { position: relative; }

/* El tablero: el control de consulta y el mosaico */
.cielo .tablero { display: grid; gap: 12px; padding: 14px 18px 24px; }

.consulta-papeles {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 13px;
  min-height: 66px; padding: 6px 18px 6px 7px; border-radius: 999px; text-align: left; cursor: pointer;
  color: #EEF2F7; border: 1px solid rgb(255 255 255 / .09);
  background: linear-gradient(180deg, rgb(255 255 255 / .075), rgb(255 255 255 / .028));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .09), 0 22px 38px -28px rgb(0 0 0 / .95);
}
.consulta-perilla {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #2A1A06;
  background: radial-gradient(circle at 34% 26%, #FFE7B4 0, #F5BE5E 46%, #DB9433 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .65), inset 0 -3px 6px rgb(130 75 10 / .35), 0 8px 18px -8px rgb(245 190 94 / .65);
}
.consulta-perilla .ic { width: 22px; height: 22px; stroke-width: 1.7; }
.consulta-txt { display: grid; gap: 3px; min-width: 0; }
.consulta-txt b { font: 500 15px/1.25 var(--font); letter-spacing: .002em; }
.consulta-txt small { font: 400 12px/1.3 var(--font); color: rgb(214 223 235 / .7); }
.consulta-flechas { display: flex; align-items: center; gap: 2px; padding-right: 2px; }
.consulta-flechas i { width: 8px; height: 8px; border-top: 1.6px solid #F5BE5E; border-right: 1.6px solid #F5BE5E; border-radius: 1px; transform: rotate(45deg); opacity: .22; }
.consulta-flechas i:nth-child(2) { opacity: .5; }
.consulta-flechas i:nth-child(3) { opacity: .95; }
@media (prefers-reduced-motion: no-preference) {
  .consulta-flechas i { animation: flecha-viva 2.2s cubic-bezier(.23, 1, .32, 1) infinite; }
  .consulta-flechas i:nth-child(2) { animation-delay: .18s; }
  .consulta-flechas i:nth-child(3) { animation-delay: .36s; }
  @keyframes flecha-viva { 0%, 60%, 100% { opacity: .22; } 25% { opacity: 1; } }
  .consulta-papeles, .pieza, .ci-estado { transition: transform 160ms cubic-bezier(.23, 1, .32, 1); }
  .consulta-papeles:active, .pieza:active, .ci-estado:active { transform: scale(.97); }
}

/* El mosaico: tres piezas de vidrio oscuro, anillos de trazo fino, la cifra ligera */
.mosaico-auto { container-type: inline-size; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pieza {
  --senal: rgb(214 223 235 / .5);
  position: relative; isolation: isolate; display: grid; justify-items: start; align-content: start; gap: 5px;
  min-width: 0; min-height: 156px; padding: 14px 12px 13px; border-radius: 26px; text-align: left; cursor: pointer;
  color: #EEF2F7; border: 1px solid rgb(255 255 255 / .065);
  background: linear-gradient(180deg, rgb(255 255 255 / .08), rgb(255 255 255 / .028));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 20px 34px -26px rgb(0 0 0 / .95);
}
.pieza-cab { font: 450 12px/1.2 var(--font); color: rgb(214 223 235 / .74); letter-spacing: .01em; }
.pieza .resumen-luz { position: absolute; top: 17px; right: 14px; }
.anillo { position: relative; width: 44px; height: 44px; display: grid; place-items: center; margin: 4px 0 6px; color: #E9EEF5; }
.anillo svg:not(.ic) { overflow: visible; }
.an-pista { fill: none; stroke: rgb(255 255 255 / .1); stroke-width: 2.4; }
.an-valor { fill: none; stroke: var(--senal); stroke-width: 2.4; stroke-linecap: round; filter: drop-shadow(0 0 2.5px color-mix(in srgb, var(--senal) 70%, transparent)); }
.anillo .ic { width: 18px; height: 18px; stroke-width: 1.5; }
.pieza-segmentos { display: flex; align-items: center; gap: 4px; height: 44px; margin: 4px 0 6px; }
.pieza-segmentos i { width: 7px; height: 24px; border-radius: 4px; background: var(--senal); box-shadow: 0 0 8px -1px color-mix(in srgb, var(--senal) 60%, transparent); }
.pieza-segmentos i.u-falta { background: rgb(255 255 255 / .14); box-shadow: none; }
.pieza-cifra { display: flex; align-items: baseline; gap: 3px; white-space: nowrap; font: 300 clamp(19px, 7.4cqi, 27px)/1 var(--font); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pieza-cifra small { font: 400 12px/1 var(--font); color: rgb(214 223 235 / .7); }
.pieza-cifra.texto { white-space: normal; font-size: clamp(15px, 5.2cqi, 18px); font-weight: 400; line-height: 1.15; }
.pieza-pie { font: 400 12px/1.3 var(--font); color: rgb(214 223 235 / .72); }

/* La luz de borde como progreso, ahora en la pieza de Papeles */
.pieza[data-progreso]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from 0deg,
    color-mix(in srgb, var(--senal) 35%, transparent) 0,
    var(--senal) max(0%, calc(var(--progreso) * 1% - 5%)),
    transparent calc(var(--progreso) * 1%));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@media (hover: hover) and (pointer: fine) {
  .consulta-papeles:hover, .pieza:hover { background: linear-gradient(180deg, rgb(255 255 255 / .1), rgb(255 255 255 / .04)); }
}
.consulta-papeles:focus-visible, .pieza:focus-visible, .ci-estado:focus-visible { outline: 2px solid #F5BE5E; outline-offset: 3px; }

/* El anillo gira; su icono, no (los dos son SVG) */
.anillo > svg:not(.ic) { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.anillo > .ic { position: relative; inset: auto; width: 18px; height: 18px; transform: none; }
.pieza-cifra small { margin-left: -1px; }
.pieza-cifra { font-size: clamp(17px, 6.8cqi, 26px); gap: 2px; }
.pieza-cifra.texto { font-size: clamp(15px, 5.2cqi, 18px); }

/* S140 (P3078, tras el gemelo): la clase del control era «.consulta» y chocaba con las filas de la hoja «Consultar»
   (a.fila.consulta): en claro su letra salía blanca. Ahora es «.consulta-papeles». Y los toques, de 40 px o más. */
.ci-estado { min-height: 40px; }
.cielo .ci-hola .distrito { min-height: 40px; }
.pieza-cifra { font-size: clamp(15px, 5.9cqi, 25px); }

/* ============================================================================================================
   S140 (P3079) · INICIO EN UNA PANTALLA — Jorge: «Inicio en una pantalla, el resto plegado o en su pantalla,
   el ámbar como único acento y una sola familia de iconos finos». Lo de arriba es lo esencial; lo demás, en
   «Más de tu …». Los colores de estado quedan solo en puntos y anillos pequeños.
   ============================================================================================================ */
:root { --acento: #F0A93B; }

/* La vitrina, enmarcada (como la foto de la Škoda, pero con el auto vivo dentro) */
.cielo .ci-auto {
  margin: 8px 16px 0; padding-bottom: 54px; border-radius: 30px; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 18%, #1C3150 0, #0E1B2E 58%, #0A1320 100%);
  border: 1px solid rgb(255 255 255 / .065); box-shadow: inset 0 1px 0 rgb(255 255 255 / .07), 0 24px 40px -30px #000;
}
.cielo .ci-auto .ci-estado { left: 14px; bottom: 12px; }
/* el brillo bajo el auto ya no dice el estado con color (eso lo dice la píldora): luz de estudio, fría y tenue */
.auto34-brillo { background: radial-gradient(closest-side, rgb(176 204 238 / .16), transparent) !important; }

/* «Hoy», en una sola línea */
.hoy-linea {
  --senal: rgb(214 223 235 / .5);
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 18px; align-items: center; gap: 12px;
  width: 100%; min-height: 54px; margin: 0; padding: 8px 14px 8px 16px; border-radius: 18px; text-align: left;
  color: #EEF2F7; border: 1px solid rgb(255 255 255 / .065);
  background: linear-gradient(180deg, rgb(255 255 255 / .06), rgb(255 255 255 / .025));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .07); cursor: pointer;
}
.hoy-linea.nada { grid-template-columns: 10px minmax(0, 1fr); cursor: default; }
.hoy-linea .ic { width: 18px; height: 18px; color: rgb(214 223 235 / .6); }
.hoy-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--senal); box-shadow: 0 0 8px 1px color-mix(in srgb, var(--senal) 55%, transparent); }
.hoy-punto.u-ok { --senal: #5CD65C; } .hoy-punto.u-atento { --senal: #FFC94D; } .hoy-punto.u-pronto { --senal: #F5A27F; } .hoy-punto.u-detente { --senal: #FF7B70; }
.hoy-linea-txt { display: grid; gap: 1px; min-width: 0; }
.hoy-linea-txt small { font: 450 12px/1.2 var(--font); color: rgb(214 223 235 / .66); }
.hoy-linea-txt b { font: 450 14px/1.3 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hoy-mas { font: 500 12px/1 var(--font); padding: 4px 8px; border-radius: 999px; color: var(--acento); background: rgb(240 169 59 / .12); }

/* El pliegue «Más de tu …» */
.mas-inicio { margin-top: 18px; }
.mas-inicio > summary {
  list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 20px; align-items: center; gap: 12px;
  min-height: 60px; padding: 10px 16px; border-radius: 20px; cursor: pointer;
  background: var(--surface); box-shadow: inset 0 1px 0 rgb(255 255 255 / .055);
}
.mas-inicio > summary::-webkit-details-marker { display: none; }
.mas-txt { display: grid; gap: 2px; }
.mas-txt b { font: 560 16px/1.25 var(--font); color: var(--ink); }
.mas-txt small { font: 400 13px/1.3 var(--font); color: var(--ink-2); }
.mas-inicio > summary .ic { width: 20px; height: 20px; color: var(--ink-3); transition: transform 200ms cubic-bezier(.23, 1, .32, 1); }
.mas-inicio[open] > summary .ic { transform: rotate(180deg); }
.mas-inicio[open] > summary { margin-bottom: 18px; }
.mas-inicio > section, .mas-inicio > .bento { margin-bottom: 20px; }

/* El ámbar como único acento: lo de estado, solo en puntos */
.pieza-segmentos { gap: 7px; }
.pieza-segmentos i { width: 9px; height: 9px; border-radius: 50%; }
.pieza[data-progreso]::before {
  background: conic-gradient(from 0deg, rgb(240 169 59 / .3) 0, var(--acento) max(0%, calc(var(--progreso) * 1% - 5%)), transparent calc(var(--progreso) * 1%));
}
:root :is(.papel.u-atento, .papel.u-pronto, .papel.u-detente, .papel.u-taller) { border-color: transparent; border-left-color: transparent; }
:root[data-theme="dark"] :is(.papel.u-atento, .papel.u-pronto, .papel.u-detente, .papel.u-taller) { border-color: transparent; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.papel.u-atento, .papel.u-pronto, .papel.u-detente, .papel.u-taller) { border-color: transparent; } }
.papel .papel-cifra b, .papel .papel-cifra small { color: var(--ink); }
.papel .papel-cifra small { color: var(--ink-2); }
.bt .bt-cab .ic, .bt .bt-cab { color: var(--ink-2); }
.leyenda .ev-doc { background: var(--ink-2) !important; }
.leyenda .ev-gasto { background: var(--ink-3) !important; }

/* Una sola familia de iconos finos: los logros, de trazo fino; los conseguidos, con un aro ámbar de 1 px */
.logro-ic, .logro.ok .logro-ic {
  width: 48px; height: 48px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3);
}
.logro.ok .logro-ic { box-shadow: inset 0 0 0 1px var(--acento), 0 0 14px -6px var(--acento); color: var(--acento); }
.logro-ic .ic { width: 20px; height: 20px; stroke-width: 1.5; }
.logro, .logro.ok { font-weight: 450; }

/* Lo plegado, con los mismos pesos ligeros de arriba */
.mas-inicio h2, .mas-inicio .b-tit { font-weight: 560; }
.mas-inicio .bt-big { font-weight: 500; }
.mas-inicio .sem-info b, .mas-inicio .sem-info strong { font-weight: 500; }
.mas-inicio .fe-txt b { font-weight: 560; }

/* Lo que aún quedaba con color o negrita en el pliegue (reglas más específicas: aquí, con más peso) */
:root .mas-inicio .papel .papel-cifra b, :root .mas-inicio .papel .papel-ok { color: var(--ink); }
:root .mas-inicio .papel .papel-cifra small { color: var(--ink-2); font-weight: 400; }
:root .mas-inicio .bt .bt-big { font-weight: 450; }
:root .mas-inicio .sem-info .prox { font-weight: 450; color: var(--ink); }
:root .mas-inicio .logro, :root .mas-inicio .logro > span:last-child { font-weight: 450; }

/* ============================================================================================================
   S140 (P3081) · EL ACABADO DE ESTUDIO — Jorge: «solo quiero que lo dejes con los acabados finos y mejores que
   Škoda, haz lo que sea necesario». Vitrina de estudio, cabecera limpia, metal fino, luz ambiente y movimiento
   con mesura (solo el primer arranque del día y nunca con «reducir movimiento»).
   ============================================================================================================ */

/* La vitrina de estudio: foco cenital, viñeta, filo de luz arriba y una sombra de piso suave (fuera el óvalo de contorno) */
.cielo .ci-auto {
  background:
    radial-gradient(62% 42% at 50% -4%, rgb(170 198 236 / .20), transparent 72%),
    radial-gradient(120% 80% at 50% 18%, #1B2F4D 0, #0E1A2C 58%, #09121E 100%);
  border-color: rgb(255 255 255 / .06); border-top-color: rgb(255 255 255 / .13);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .07), inset 0 -60px 70px -40px rgb(0 0 0 / .65), 0 26px 44px -30px #000;
}
.cielo .ci-auto::before {
  border: 0 !important; opacity: 1;
  background: radial-gradient(closest-side, rgb(0 0 0 / .55), rgb(0 0 0 / .18) 55%, transparent) !important;
}
.cielo .ci-auto::after { opacity: .55; }

/* La cabecera: el distrito como texto con su icono, junto al saludo (sin píldora); el saludo, en voz baja */
.cielo .ci-hola .distrito { background: none; border-color: transparent; padding-inline: 4px 0; gap: 6px; box-shadow: none; }
.cielo .ci-hola .distrito b { font-weight: 450; color: #E9EEF5; }
.cielo .ci-hola .distrito .ic { color: rgb(214 223 235 / .7); }
.cielo .ci-hola span { color: rgb(214 223 235 / .66); }

/* La perilla: metal fino, con su aro */
.consulta-perilla {
  width: 48px; height: 48px;
  background: radial-gradient(circle at 34% 24%, #FFEBC2 0, #F4C066 40%, #D9952F 100%);
  box-shadow: inset 0 0 0 1px rgb(255 238 205 / .55), inset 0 -3px 6px rgb(130 75 10 / .28), 0 0 0 4px rgb(240 169 59 / .08), 0 8px 18px -8px rgb(245 190 94 / .6);
}
.consulta-papeles { grid-template-columns: 48px minmax(0, 1fr) auto; min-height: 62px; padding-left: 7px; }

/* El mosaico: Kilómetros un poco más ancho (su pie cabe en una línea) */
.mosaico-auto { grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr) minmax(0, 1fr); }

/* La barra: más vidrio y menos caja */
.tabbar { background: color-mix(in srgb, var(--surface) 76%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.25); backdrop-filter: blur(22px) saturate(1.25); }

/* La luz ambiente: un halo ámbar muy tenue al pie de Inicio (como el verde de Škoda) */
html.en-inicio body::before {
  content: ""; position: fixed; left: -25%; right: -25%; bottom: -150px; height: 320px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgb(240 169 59 / .11), transparent);
}

/* Los anillos se dibujan con stroke-dashoffset (el avance va en --p) */
.an-valor { stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0)); }

@media (prefers-reduced-motion: no-preference) {
  /* El punto de la píldora respira, despacio */
  .ci-estado .resumen-luz { animation: respira 3.2s ease-in-out infinite; }
  @keyframes respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
  /* El estreno del día: las piezas entran en cascada y los anillos se dibujan */
  .mosaico-auto.estreno .pieza { animation: pieza-entra 420ms cubic-bezier(.23, 1, .32, 1) both; }
  .mosaico-auto.estreno .pieza:nth-child(2) { animation-delay: 60ms; }
  .mosaico-auto.estreno .pieza:nth-child(3) { animation-delay: 120ms; }
  @keyframes pieza-entra { from { opacity: 0; transform: translateY(10px) scale(.98); } }
  .mosaico-auto.estreno .an-valor { animation: anillo-dibuja 1100ms cubic-bezier(.23, 1, .32, 1) 200ms both; }
  @keyframes anillo-dibuja { from { stroke-dashoffset: 100; } }
}
.mosaico-auto { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1fr); }

/* ============================================================================================================
   S140 (P3082) · ELEGANTE — Jorge: «colores (tonos) comunes y no tan serios para una app que cuida autos (máquinas
   aún caras en Perú) · elegante es la palabra». Como Škoda: casi monocromo (grafito y blanco suave), un único acento
   (champán, en vez del ámbar) usado poco, y el estado en tonos sobrios que solo aparecen cuando hay algo que atender.
   ============================================================================================================ */
:root {
  --acento: #D8B676;            /* champán */
  --acento-claro: #EBD3A2;
  --e-ok: #A9CDB8;              /* salvia: bien */
  --e-atento: #DCC08A;          /* arena: vigila */
  --e-pronto: #D9A08A;          /* terracota suave: pronto */
  --e-detente: #D98A90;         /* rosa viejo: urgente */
  --e-falta: rgb(214 223 235 / .42);
  --tinta-suave: rgb(232 236 242 / .92);
}
/* El estado, en tonos sobrios (los mismos significados) */
.mosaico-auto .u-ok, .ci-estado.u-ok, .hoy-punto.u-ok { --senal: var(--e-ok); }
.mosaico-auto .u-atento, .ci-estado.u-atento, .hoy-punto.u-atento { --senal: var(--e-atento); }
.mosaico-auto .u-pronto, .ci-estado.u-pronto, .hoy-punto.u-pronto { --senal: var(--e-pronto); }
.mosaico-auto .u-detente, .ci-estado.u-detente, .hoy-punto.u-detente { --senal: var(--e-detente); }
.mosaico-auto .u-falta, .ci-estado.u-falta { --senal: var(--e-falta); }

/* Las piezas, sin los puntos de las esquinas (el estado ya lo dicen el anillo y la píldora; y no tapan el título) */
.pieza .resumen-luz { display: none; }
.pieza-cab { padding-right: 0; }

/* Los anillos: en blanco suave cuando todo está bien; en su tono solo si hay algo que atender. El de kilómetros
   es avance hacia el servicio: en champán, y en terracota si ya se pasó */
.an-pista { stroke: rgb(255 255 255 / .08); stroke-width: 2; }
.an-valor { stroke-width: 2; filter: none; stroke: rgb(236 240 245 / .78); }
.pieza.u-atento .an-valor, .pieza.u-pronto .an-valor, .pieza.u-detente .an-valor { stroke: var(--senal); }
.pieza[data-action="actualizar-km"] .an-valor { stroke: var(--acento); }
.pieza[data-action="actualizar-km"].u-pronto .an-valor, .pieza[data-action="actualizar-km"].u-detente .an-valor { stroke: var(--senal); }
.anillo { color: var(--tinta-suave); }

/* Los papeles: al día, en blanco tenue; solo el que pide atención lleva su tono */
.pieza-segmentos i { width: 8px; height: 8px; box-shadow: none; }
.pieza-segmentos i.u-ok { background: rgb(236 240 245 / .55); }
.pieza-segmentos i.u-falta { background: rgb(255 255 255 / .14); }

/* La luz de borde, en champán y más fina */
.pieza[data-progreso]::before {
  padding: 1px;
  background: conic-gradient(from 0deg, rgb(216 182 118 / .25) 0, var(--acento) max(0%, calc(var(--progreso) * 1% - 5%)), transparent calc(var(--progreso) * 1%));
}

/* El punto de la píldora, sin halo de neón */
.ci-estado .resumen-luz, .hoy-punto {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--senal) 12%, transparent), 0 0 6px color-mix(in srgb, var(--senal) 30%, transparent);
}

/* La tinta: blanco suave, nunca blanco puro de pantalla */
.cielo, .pieza, .consulta-papeles, .hoy-linea, .ci-estado { color: var(--tinta-suave); }
.ci-nombre-superior h1 { color: #F1F3F6; }

/* El acento champán: la perilla de metal, las flechas, la pestaña activa, el contador y los enlaces */
.consulta-perilla {
  color: #2B2214;
  background: radial-gradient(circle at 34% 24%, #F8EBCB 0, #E2C68E 42%, #B8914F 100%);
  box-shadow: inset 0 0 0 1px rgb(255 246 222 / .6), inset 0 -3px 6px rgb(110 80 30 / .3), 0 0 0 4px rgb(216 182 118 / .07), 0 8px 18px -8px rgb(216 182 118 / .5);
}
.consulta-flechas i { border-color: var(--acento); }
.tab[aria-current="true"], .tab[aria-current="true"]:hover { color: var(--acento-claro); }
.menu-contador { background: var(--acento); color: #2B2214; border-color: #0C1622; }
.pastilla.on { color: var(--acento-claro); }
.cielo .link, .mas-inicio .link, .mas-inicio .bt-ir { color: var(--acento-claro); }
.hoy-mas { color: var(--acento-claro); background: rgb(216 182 118 / .12); }
.logro.ok .logro-ic { box-shadow: inset 0 0 0 1px var(--acento); color: var(--acento-claro); }
html.en-inicio body::before { background: radial-gradient(closest-side, rgb(216 182 118 / .08), transparent); }

/* La barra, discreta como la de Škoda: casi sin caja; iconos en gris, la activa en champán */
.tabbar {
  border-color: rgb(255 255 255 / .045);
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / .8);
}
.tab { color: rgb(196 205 216 / .62); }
:root:not([data-theme="dark"]) .tab { color: var(--ink-3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tab { color: rgb(196 205 216 / .62); } }
.tab[aria-current="true"]::after { box-shadow: 0 0 6px 0 color-mix(in srgb, currentColor 45%, transparent); }

/* La vitrina: un poco menos azul, más grafito (serio) */
.cielo .ci-auto {
  background:
    radial-gradient(62% 42% at 50% -4%, rgb(196 206 222 / .16), transparent 72%),
    radial-gradient(120% 80% at 50% 18%, #18222F 0, #0F151E 58%, #0A0E14 100%);
}
:root .tabbar .tab[aria-current="true"], :root .tabbar .tab[aria-current="true"]:hover { color: var(--acento-claro); }
:root .pastillas .pastilla.on { color: var(--acento-claro); }
:root .pastillas .pastilla.on::after, :root .pastillas .pastilla.on::before { background: var(--acento); }
/* El champán como texto: oscuro en el tema claro (contraste), claro en el oscuro. El cielo siempre es de noche. */
:root { --acento-texto: #7E5F27; }
:root[data-theme="dark"] { --acento-texto: #EBD3A2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --acento-texto: #EBD3A2; } }
:root .tabbar .tab[aria-current="true"], :root .tabbar .tab[aria-current="true"]:hover { color: var(--acento-texto); }
:root .mas-inicio .link, :root .mas-inicio .bt-ir { color: var(--acento-texto); }
:root .mas-inicio .logro.ok .logro-ic { color: var(--acento-texto); }

/* S140 (P3083) · Sin recuadro: el auto y su escena se funden con el fondo de la app, como lo dejó Jorge con Codex.
   (Se quita el marco de P3079/P3081; la píldora de estado sigue sobre la escena.) */
.cielo .ci-auto {
  margin: 8px 0 0; padding-bottom: 54px; border: 0; border-radius: 0; overflow: visible;
  background: none; box-shadow: none;
}
.cielo .ci-auto .ci-estado { left: 18px; bottom: 10px; }

/* ============================================================================================================
   S141 (P3085, P3088) · TALLERES CERCANOS — con la vara de Inicio: grafito, champán usado poco, trazo fino.
   La barra «Buscar cerca de» es pariente de «Consultar papeles» (la perilla de metal, más chica); las filas son las de
   siempre, y la del tipo que se pidió lleva un tinte champán. Sin colores de estado: aquí nada urge.
   ============================================================================================================ */
.cerca-barra {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 12px 16px;
  border: 1px solid var(--panel-borde, var(--line)); border-radius: 20px; background: var(--surface); color: var(--ink);
  box-shadow: inset 0 1px var(--panel-luz, transparent); font: inherit; text-align: left; cursor: pointer;
  transition: transform .15s var(--ease-out, ease);
}
.cerca-barra:active { transform: scale(.98); }
.cerca-barra-ic {
  flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #2B2214;
  background: radial-gradient(circle at 34% 24%, #F8EBCB 0, #E2C68E 42%, #B8914F 100%);
  box-shadow: inset 0 0 0 1px rgb(255 246 222 / .6), inset 0 -3px 6px rgb(110 80 30 / .3), 0 6px 14px -8px rgb(184 145 79 / .6);
}
.cerca-barra-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cerca-barra-txt small { font-size: .8125rem; color: var(--ink-2); }
.cerca-barra-txt b { font-size: 1.0625rem; font-weight: 500; overflow-wrap: anywhere; }
.cerca-barra-cambiar { flex: none; font-size: .9375rem; font-weight: 600; color: var(--acento-texto); }
.cerca-lista { margin-top: 14px; }
.cerca-fila { min-height: 76px; }
.cerca-fila .fila-txt b { font-weight: 500; }
.cerca-fila > .ic:last-child { color: var(--ink-3); }
/* La lista va agrupada en una sola tarjeta (`.lista:has(> .fila)`): la fila pedida se distingue con un tinte champán, no con un marco */
.lista > .cerca-fila.destacada { background: color-mix(in srgb, var(--acento) 9%, var(--surface)); }
.lista > .cerca-fila.destacada .fila-ic { color: var(--acento-texto); }   /* los iconos de la lista van sin caja: solo cambia su tinta */
.cerca-nota { margin-top: 14px; }
/* La hoja «Buscar cerca de»: la opción elegida, con el mismo tinte y su check en champán */
.cerca-hoja .lista > .fila[aria-pressed="true"] { background: color-mix(in srgb, var(--acento) 9%, var(--surface)); }
.cerca-hoja .fila[aria-pressed="true"] > .ic:last-child { color: var(--acento-texto); width: 22px; height: 22px; }
.cerca-km { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
/* Inicio, en lo plegado: «Talleres cerca» y «Que no te engañen», dos medias del mismo alto */
.en-inicio .t-cerca, .en-inicio .t-taller { min-height: 150px; }
.en-inicio .t-cerca .bt-big, .en-inicio .t-taller .bt-big { font-size: 1rem; line-height: 1.35; font-weight: 500; overflow-wrap: anywhere; }
/* A 360 px «Que no te engañen» parte su título en dos líneas: los enlaces de abajo («Buscar», «Ver las guías») quedan
   alineados al pie de las dos medias igual */
.en-inicio .t-cerca, .en-inicio .t-taller { display: flex; flex-direction: column; }
.en-inicio .t-cerca .bt-ir, .en-inicio .t-taller .bt-ir { margin-top: auto; }

/* ============================================================================================================
   S141 (P3094) · LAS DEMÁS PANTALLAS CON LA VARA DE INICIO — Papeles, Mantenimiento, Revisar, Gastos y lo que comparten.
   Lo de P3082 llevado a todas: el estado en tonos sobrios (salvia, arena, terracota suave, rosa viejo) y solo donde hay
   que atender; sin franjas de color ni botones verdes; el avance en tinta o champán; los botones que se repiten, ligeros.
   Contraste medido: los tonos de texto pasan 5:1 sobre su fondo suave, en claro y en oscuro.
   ============================================================================================================ */
:root {
  --ok: #3F6E55; --leve: #7A5A1E; --media: #8E4E36; --grave: #954049;
  --ok-soft: #ECF0EE; --leve-soft: #F2EEE8; --media-soft: #F4EDEB; --grave-soft: #F4ECED;
  --ok-fill: #7FA28E; --leve-fill: #C2A46A; --media-fill: #C08A73; --grave-fill: #B9737B;
  --avance: #8E7442;            /* el avance que no urge (barras del plan, gráfico): champán oscuro en claro */
}
:root[data-theme="dark"] {
  --ok: #A9CDB8; --leve: #DCC08A; --media: #D9A08A; --grave: #D98A90;
  --ok-soft: #2C373D; --leve-soft: #333637; --media-soft: #333137; --grave-soft: #332E37;
  --ok-fill: #A9CDB8; --leve-fill: #DCC08A; --media-fill: #D9A08A; --grave-fill: #D98A90;
  --avance: #D8B676;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --ok: #A9CDB8; --leve: #DCC08A; --media: #D9A08A; --grave: #D98A90;
  --ok-soft: #2C373D; --leve-soft: #333637; --media-soft: #333137; --grave-soft: #332E37;
  --ok-fill: #A9CDB8; --leve-fill: #DCC08A; --media-fill: #D9A08A; --grave-fill: #D98A90;
  --avance: #D8B676;
} }
/* Los puntos de estado (ptU), en los mismos tonos y sin neón */
.pt { background: var(--ok-fill); } .pt.u-atento { background: var(--leve-fill); } .pt.u-pronto { background: var(--media-fill); } .pt.u-detente { background: var(--grave-fill); }
.pt.u-falta { background: var(--ink-3); }

/* WhatsApp sin el verde de marca: un botón más, con su ícono */
:root .btn.wa { background: var(--surface-2); border-color: transparent; color: var(--ink); box-shadow: inset 0 1px var(--panel-luz, transparent); }

/* Papeles: sin la franja de color; el que pide atención, con un filo fino de su tono. Las dos acciones, en una fila ligera */
:root .doc { border-left: 0 !important; }
:root .doc.u-pronto { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--media-fill) 55%, transparent); }
:root .doc.u-detente { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--grave-fill) 65%, transparent); }
.doc .btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
:root .doc .btn-row .btn { flex-basis: auto; min-height: 44px; padding: 0 10px; font-size: .875rem; font-weight: 500; background: transparent; border: 1px solid var(--line); box-shadow: none; color: var(--ink); }
.doc .btn-row .btn .ic { width: 18px; height: 18px; color: var(--ink-2); }
.doc-ic { background: var(--surface-2); color: var(--ink-2); }
.doc-head b { font-weight: 560; }
.doc-head .icon-btn { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-3); }

/* Mantenimiento: nodos en grafito con el ícono en tinta; el tono solo cuando toca pronto o ya toca.
   La barra es avance (champán); en su tono solo si urge. «Sin registro» no se pinta llena */
.tl-nodo, .tl-item.u-ok .tl-nodo, .tl-item.u-falta .tl-nodo { background: var(--surface-2); color: var(--ink-2); }
.tl-item.u-atento .tl-nodo { background: var(--surface-2); color: var(--leve); }
.tl-item.u-pronto .tl-nodo { background: var(--media-soft); color: var(--media); }
.tl-item.u-detente .tl-nodo { background: var(--grave-soft); color: var(--grave); }
.tl-bar i, .tl-item.u-atento .tl-bar i { background: var(--avance); opacity: .8; }
.tl-item.u-pronto .tl-bar i { background: var(--media-fill); opacity: 1; } .tl-item.u-detente .tl-bar i { background: var(--grave-fill); opacity: 1; }
.tl-item.u-falta .tl-bar i { background: transparent; }

/* Revisar: las luces de muestra del tablero, apagadas a medias (son un ejemplo, no un aviso) */
.luz-card .mini-testigos { filter: saturate(.35) brightness(1.05); }

/* Gastos: el gráfico como instrumento — columnas finas en champán, el mes actual entero y los demás tenues */
.bv i { max-width: 22px; border-radius: 6px 6px 2px 2px; background: var(--avance); opacity: .45; }
.bv:last-child i { opacity: 1; }
.bv b { font-weight: 500; font-size: max(11px, .75rem); color: var(--ink-2); }
.bv:last-child b { color: var(--ink); }
/* Borrar un gasto: discreto (sigue pidiendo el segundo toque) */
.hechos li > .icon-btn:not(.confirmar) { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-3); }
.hechos li b { font-weight: 560; }
.doc-recordar { font-size: .8125rem; color: var(--ink-2); margin-bottom: -8px; }
/* «Sin registro»: no se sabe cuánto falta, así que la barra no se llena (antes salía llena, como si ya tocara) */
.tl-item.sin-registro .tl-bar i { background: transparent; }
.tl-item.sin-registro .tl-bar { background: repeating-linear-gradient(90deg, var(--surface-3) 0 6px, transparent 6px 10px); }