/* ── medidas de toda la app ──
   Dos cortes, y solo dos, en todas las pantallas (CSS no deja usar variables en @media,
   así que se repiten tal cual: si se cambia uno, se cambia en todos lados):
     · celular   menos de 768 px   → como siempre, una columna angosta.
     · tablet    768 a 1023 px     → contenido centrado, menú angosto de íconos.
     · computadora 1024 px o más   → menú lateral con texto, columnas.
   Los anchos máximos están acá abajo y se usan en todas las pantallas. */
:root{
  --ancho-celular:440px;   /* la app en el teléfono, y el marco en tablet si algo no se adaptó */
  --ancho-form:720px;      /* formularios y textos para leer: el alta, la configuración, la charla */
  --ancho-contenido:1000px;/* pantallas con menú en computadora */
  --ancho-hoja:580px;      /* ventanas emergentes en tablet y computadora */
  --margen:16px;           /* margen a los costados en el celular */
  --margen-ancho:48px;     /* margen a los costados en tablet y computadora */
  --lado:0px;              /* ancho de la barra lateral (0 en el celular) */
}
:root{
  --suelo:#EEF2F0; --papel:#FFFFFF; --niebla:#E7EDEB; --niebla-2:#DCE5E2;
  --linea:#D3DDDA; --linea-suave:#E4EAE8;
  --roca:#1E2D33; --piedra:#56696F; --ceniza:#5E6D72;
  --naranja:#D6501F; --naranja-osc:#B0421A; --naranja-suave:#FCEBE2; --naranja-hover:#B0421A; --naranja-fuerte:#BF4519;
  --arena:#C9A27A; --arena-suave:#F5EDE2;
  --ok:#2F7446; --ok-bg:#E3F1E7; --warn:#8C5D12; --warn-bg:#FBF0DB;
  --bad:#A7361F; --bad-bg:#F9E2DC; --ref:#56696F; --ref-bg:#E7EDEB;
  --sombra:0 1px 2px rgba(30,45,51,.05),0 6px 20px rgba(30,45,51,.07);
  --sombra-chica:0 1px 2px rgba(30,45,51,.10);
  /* fondos fuertes con letra clara: el mensaje propio en la charla, el aviso, el botón chico */
  --fuerte:#1E2D33; --fuerte-hover:#34464D;
  --sobre-color:#FFFFFF;   /* letra sobre naranja, sobre fotos y sobre fondos fuertes */
  --sobre-estado:#FFFFFF;  /* letra sobre el verde, el rojo y el gris de los estados */
  --arena-osc:#7A5C3B;
  --trazo:#3D535B;         /* el trazo gris de los dibujos de piezas */
  --perfil-linea:#AFC2C9; --perfil-andado:rgba(214,80,31,.16);
  --ficha-cielo:#DCEAEE;
  --gr-verde:#2F7446; --gr-azul:#1F5E8C; --gr-negro:#1E2D33; --gr-rojo:#A7361F;
  --barra:rgba(255,255,255,.93); --barra-menu:rgba(255,255,255,.96);
  --scrim:rgba(20,32,36,.45);
  --foto-fondo:#1B2427;    /* lo que se ve mientras carga una foto */
  /* las muestras de Configuración > Apariencia: fijas, no cambian con el modo */
  --vista-claro-suelo:#EEF2F0; --vista-claro-papel:#FFFFFF; --vista-oscuro-suelo:#0F1517; --vista-oscuro-papel:#182125;
  /* colores en r,g,b para usarlos con transparencia: rgba(var(--noche),.3) */
  --noche:11,15,17; --negro:0,0,0; --blanco:255,255,255;
  --suelo-rgb:238,242,240; --papel-rgb:255,255,255;
  --d:"Barlow Condensed","Arial Narrow",sans-serif;
  --b:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --e:"Barlow Semi Condensed","Barlow",system-ui,sans-serif;
  --tread:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='30' viewBox='0 0 46 30'%3E%3Cg fill='%23C9A27A'%3E%3Cpath d='M1 1h10l-2.6 11H-1.6z'/%3E%3Cpath d='M16 1h10l-2.6 11h-10z'/%3E%3Cpath d='M31 1h10l-2.6 11h-10z'/%3E%3Cpath d='M-6 17h10l-2.6 11h-10z'/%3E%3Cpath d='M9 17h10l-2.6 11h-10z'/%3E%3Cpath d='M24 17h10l-2.6 11h-10z'/%3E%3Cpath d='M39 17h10l-2.6 11h-10z'/%3E%3C/g%3E%3C/svg%3E");
  --trail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='22' viewBox='0 0 13 22'%3E%3Cg fill='%23D2BC98'%3E%3Cpath d='M1 1h5l1.4 7H2.4z'/%3E%3Cpath d='M7.6 12h5l1.4 7H9z'/%3E%3C/g%3E%3C/svg%3E");
  --brujula:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23D6501F'/%3E%3Ccircle cx='16' cy='16' r='9' fill='none' stroke='white' stroke-width='1.7'/%3E%3Cpath d='M20 12l-2.3 5.7L12 20l2.3-5.7z' fill='white'/%3E%3C/svg%3E");
}
/* ── modo oscuro ──
   Los mismos tonos de la marca, llevados a la noche: el fondo es roca muy oscura (no negro),
   el naranja se mantiene en los botones y se aclara donde es letra, para que se lea.
   El atributo lo pone el script del <head> antes de pintar, así no parpadea. */
:root{color-scheme:light}
:root[data-tema="oscuro"]{
  color-scheme:dark;
  --suelo:#0F1517; --papel:#182125; --niebla:#212C31; --niebla-2:#2A373C;
  --linea:#33434A; --linea-suave:#243035;
  --roca:#E4EBE9; --piedra:#A7B6BA; --ceniza:#8A9BA0;
  --naranja-osc:#F0804F; --naranja-suave:#3A2219; --naranja-hover:#BD4617; --naranja-fuerte:#BD4617;
  --arena-suave:#2B241C; --arena-osc:#D9B88F;
  --ok:#6CC08A; --ok-bg:#16301F; --warn:#E3AE52; --warn-bg:#33270F;
  --bad:#F08A74; --bad-bg:#3B1D16; --ref:#A7B6BA; --ref-bg:#212C31;
  --sombra:0 1px 2px rgba(0,0,0,.35),0 6px 20px rgba(0,0,0,.30);
  --sombra-chica:0 1px 2px rgba(0,0,0,.45);
  --fuerte:#2C3B41; --fuerte-hover:#3A4C53;
  --sobre-estado:#0F1517;
  --trazo:#A9BEC5;
  --perfil-linea:#52666D; --perfil-andado:rgba(214,80,31,.30);
  --ficha-cielo:#1D2B30;
  --barra:rgba(24,33,37,.93); --barra-menu:rgba(24,33,37,.96);
  --scrim:rgba(0,0,0,.6);
  --suelo-rgb:15,21,23; --papel-rgb:24,33,37;
}
/* el grado "Negro" de las huellas se perdería sobre el fondo oscuro: un filo claro lo recorta */
:root[data-tema="oscuro"] .gr{box-shadow:inset 0 0 0 1px rgba(var(--blanco),.28)}

*{box-sizing:border-box}
body{
  margin:0; background:var(--suelo); color:var(--roca); font-family:var(--b);
  font-size:15.5px; line-height:1.5; -webkit-font-smoothing:antialiased;
  display:flex; justify-content:center; min-height:100vh;
}
button{font:inherit; color:inherit}
.marco{
  width:100%; max-width:var(--ancho-celular); min-height:100vh; background:var(--suelo);
  display:flex; flex-direction:column; position:relative;
  /* Recorta lo que se sale de costado (.strip y .hero usan margen negativo) sin cortar
     lo de abajo. Con `overflow:hidden` el alto quedaba clavado en 100vh y las pantallas
     largas no se podían scrollear fuera del artifact: en un archivo local o en un dominio
     propio se veía solo la primera pantalla. `clip` no crea contenedor de scroll, así que
     el scroll vertical sigue siendo el del documento. */
  overflow-x:clip;
  box-shadow:0 0 0 1px var(--linea-suave);
}
.marco[hidden]{display:none}
.pad{padding:0 16px}

/* ── paisaje ── */
.hero{position:relative; overflow:hidden; background:var(--foto-fondo)}
.hero svg, .hero img.paisaje{position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover}
.paisaje-velo{position:absolute; inset:0; display:block; background:linear-gradient(to bottom, rgba(var(--noche),.30) 0%, rgba(var(--noche),.06) 34%, rgba(var(--suelo-rgb),.55) 82%, var(--suelo) 100%)}
.strip .paisaje-velo{background:linear-gradient(to bottom, rgba(var(--noche),.22) 0%, rgba(var(--suelo-rgb),.60) 70%, var(--suelo) 100%)}
.hero-garaje{height:178px}
.hero-ruta{height:128px}
.hero-alta{height:214px; margin:-20px -16px 22px}
.strip{height:84px; margin:-20px -16px 20px; position:relative; overflow:hidden; background:var(--foto-fondo)}
.strip svg, .strip img.paisaje{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

/* ── la entrada: una sola pantalla (7/10/2026) ──
   En el celular, la foto arriba (38% del alto) y abajo la pregunta, las huellas y el botón, que queda pegado
   abajo. Antes la foto ocupaba toda la pantalla y había que deslizar a la segunda, y después venía la carátula. */
.intro{min-height:100vh; min-height:100svh; display:flex; flex-direction:column; background:var(--papel)}
.slide{position:relative; display:flex; flex-direction:column}
.slide-portada{background:var(--foto-fondo); color:var(--sobre-color); justify-content:center; align-items:center; overflow:hidden;
  flex:none; height:38vh; height:38svh; min-height:230px}
.slide-llega{flex:1}
.slide-portada img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:39% 50%}
.slide-portada::after{content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(var(--noche),.35) 0%, rgba(var(--noche),.10) 40%, rgba(var(--noche),.05) 60%, rgba(var(--noche),.45) 100%)}
.portada-centro{position:relative; z-index:1; text-align:center; padding:0 16px; animation:rise .6s ease both}
.portada-mark{font-family:var(--d); font-weight:700; font-size:clamp(58px, 19vw, 84px); letter-spacing:.06em; line-height:1; margin:0; text-shadow:0 2px 24px rgba(var(--negro),.35)}
.portada-mark span{color:var(--naranja)}
.portada-sub{font-family:var(--e); font-weight:500; font-size:17px; color:rgba(var(--blanco),.9); margin-top:6px; text-shadow:0 1px 10px rgba(var(--negro),.4)}
@media (prefers-reduced-motion:reduce){.portada-centro{animation:none}}
.slide-planes{background:var(--papel)}
.planes-in{flex:1; padding:max(28px, env(safe-area-inset-top)) 16px 20px}

.car-h{font-family:var(--d); font-weight:700; font-size:40px; line-height:1; margin:0 0 10px; text-wrap:balance}
.car-nota{text-align:center; font-family:var(--e); font-size:12.5px; color:var(--ceniza); margin-top:8px}

/* ── barra superior ── */
.topbar{
  position:sticky; top:0; z-index:30; background:var(--barra);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--linea-suave);
  padding:12px 16px 10px; display:flex; align-items:center; gap:10px;
}
.mark{font-family:var(--d); font-weight:700; font-size:24px; letter-spacing:.05em; line-height:1}
.mark span{color:var(--naranja)}
.mark-sub{font-family:var(--e); font-size:12px; font-weight:500; color:var(--ceniza); margin-top:2px}
.lugar{
  margin-left:auto; flex-shrink:0; white-space:nowrap; font-family:var(--e); font-weight:600; font-size:12px; color:var(--piedra);
  background:var(--niebla); border:0; padding:6px 11px; border-radius:99px; cursor:pointer;
}
.lugar:hover{background:var(--niebla-2)}
/* el botón rápido de modo claro / oscuro (luna en claro, sol en oscuro) y el engranaje de Configuración */
.tema, .engranaje{
  flex-shrink:0; width:32px; height:32px; border:0; border-radius:50%; cursor:pointer;
  background:var(--niebla); color:var(--piedra); display:grid; place-items:center; padding:0;
}
.tema:hover, .engranaje:hover{background:var(--niebla-2); color:var(--roca)}
.tema svg, .engranaje svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.tema .sol{display:none}
:root[data-tema="oscuro"] .tema .sol{display:block}
:root[data-tema="oscuro"] .tema .luna{display:none}

main{flex:1; padding:0 0 96px}
.screen{display:none; animation:rise .22s ease both}
.screen.on{display:block}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.screen,.msg{animation:none!important}}

.eyebrow{
  font-family:var(--e); font-weight:600; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--piedra); display:flex; align-items:center; gap:10px; margin:28px 0 11px;
}
.eyebrow::after{content:""; flex:1; height:1px; background:var(--linea)}
.eyebrow-acc{
  order:2; background:none; border:0; cursor:pointer; color:var(--naranja-osc);
  font-family:var(--e); font-weight:600; font-size:13px; text-transform:none; letter-spacing:0; padding:2px 0;
}
.eyebrow-acc:hover{text-decoration:underline}
h2.big{font-family:var(--d); font-weight:700; font-size:34px; line-height:1.02; margin:0; text-wrap:balance}
.sub{font-family:var(--e); font-weight:500; font-size:13px; color:var(--ceniza); margin-top:5px}

.huella{
  height:30px; margin:28px 0 0; background-image:var(--tread); background-repeat:repeat-x;
  background-position:center; opacity:.2; transform:rotate(-1deg); pointer-events:none;
}

/* ── alta ── */
.alta-top{padding:12px 16px 10px; display:flex; align-items:center; gap:10px; background:var(--papel); border-bottom:1px solid var(--linea-suave); position:sticky; top:0; z-index:20}
.link{background:none; border:0; cursor:pointer; color:var(--piedra); font-family:var(--e); font-weight:600; font-size:14.5px; padding:6px 2px}
.link:hover{color:var(--naranja-osc)}
.link[hidden]{visibility:hidden; display:block}
#cerrarAlta{margin-left:auto}
.avance{flex:1; min-width:0}
.avance[hidden]{visibility:hidden}
.avance-t{display:flex; justify-content:space-between; font-family:var(--e); font-weight:600; font-size:12px; letter-spacing:.05em; text-transform:uppercase}
.avance-t b{color:var(--naranja-osc); font-weight:600}
.avance-t span{color:var(--ceniza)}
.avance-bar{height:6px; background:var(--niebla); border-radius:3px; margin-top:5px; overflow:hidden}
.avance-bar i{display:block; height:100%; background:var(--naranja); border-radius:3px; transition:width .3s ease}

.alta-body{flex:1; padding:20px 16px 26px}
.alta-k{font-family:var(--e); font-weight:600; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--naranja-osc); margin-bottom:6px}
.alta-h{font-family:var(--d); font-weight:700; font-size:35px; line-height:1.02; margin:0 0 8px; text-wrap:balance}
.alta-p{color:var(--piedra); font-size:16px; margin:0 0 20px; max-width:36ch}
.alta-foot{padding:12px 16px max(14px,env(safe-area-inset-bottom)); background:var(--papel); border-top:1px solid var(--linea-suave); position:sticky; bottom:0; z-index:20}

.btn{
  width:100%; height:54px; cursor:pointer; border:0; border-radius:14px;
  background:var(--naranja); color:var(--sobre-color); font-family:var(--d); font-weight:700;
  font-size:20px; letter-spacing:.05em; text-transform:uppercase;
}
.btn:hover{background:var(--naranja-hover)}
.btn:disabled{background:var(--niebla-2); color:var(--ceniza); cursor:not-allowed}

.lab{font-family:var(--e); font-weight:600; font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--piedra); margin:22px 0 9px}

/* buscador de modelos: escribir "hilux" en vez de bajar por 16 marcas */
.buscar{position:relative; margin-bottom:4px}
.buscar svg{
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:19px; height:19px; color:var(--ceniza); pointer-events:none;
}
.buscar input{
  width:100%; background:var(--papel); border:1.5px solid var(--linea); border-radius:12px;
  padding:13px 42px; font-family:var(--b); font-size:16px; color:var(--roca); outline:none;
  -webkit-appearance:none; appearance:none;
}
.buscar input::-webkit-search-cancel-button{display:none}
.buscar input::placeholder{color:var(--ceniza)}
.buscar input:focus{border-color:var(--naranja); box-shadow:0 0 0 3px var(--naranja-suave)}
.buscar button{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border:0; border-radius:50%; background:var(--niebla);
  color:var(--piedra); font-size:14px; line-height:1; cursor:pointer;
}
.buscar button:hover{background:var(--niebla-2)}
.buscar button[hidden]{display:none}

.t2{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.tiles{display:flex; flex-direction:column; gap:8px}
.tile{
  background:var(--papel); border:1.5px solid var(--linea); border-radius:14px;
  padding:12px 14px; text-align:left; cursor:pointer; display:block; width:100%;
}
.tile:hover{border-color:var(--ceniza)}
.tile b{display:block; font-family:var(--d); font-weight:600; font-size:21px; line-height:1.1}
.tile span{display:block; font-size:13px; color:var(--ceniza); margin-top:1px}
.tile.fila{display:flex; align-items:center; justify-content:space-between; gap:10px}
.tile.fila span{margin:0; font-family:var(--e); font-weight:500; flex-shrink:0; font-variant-numeric:tabular-nums}
.tile.otra{border-style:dashed; margin-top:9px}
.tile[aria-pressed="true"]{border-color:var(--naranja); background:var(--naranja-suave)}
.tile[aria-pressed="true"] b{color:var(--naranja-osc)}

.dec{font-family:var(--e); font-weight:600; font-size:13px; color:var(--ceniza); margin:16px 0 7px}
.g5{display:grid; grid-template-columns:repeat(5,1fr); gap:7px}
.anio{
  background:var(--papel); border:1.5px solid var(--linea); border-radius:11px; padding:11px 0;
  cursor:pointer; font-weight:600; font-size:15px; font-variant-numeric:tabular-nums;
}
.anio:hover{border-color:var(--ceniza)}
.anio[aria-pressed="true"]{background:var(--naranja-fuerte); border-color:var(--naranja-fuerte); color:var(--sobre-color)}

.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  background:var(--papel); border:1.5px solid var(--linea); border-radius:99px;
  padding:9px 16px; cursor:pointer; font-weight:500; font-size:15px;
}
.chip:hover{border-color:var(--ceniza)}
.chip[aria-pressed="true"]{background:var(--naranja-fuerte); border-color:var(--naranja-fuerte); color:var(--sobre-color)}
.chip.suave{border-style:dashed; color:var(--piedra)}

.ops{display:flex; flex-direction:column; gap:10px}
.op{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer;
  background:var(--papel); border:1.5px solid var(--linea); border-radius:16px; padding:12px 14px;
}
.op:hover{border-color:var(--ceniza)}
.op-art{width:60px; height:60px; border-radius:12px; background:var(--niebla); display:grid; place-items:center; flex-shrink:0}
.op-art svg{width:46px; height:46px}
.op b{display:block; font-family:var(--d); font-weight:600; font-size:22px; line-height:1.1}
.op span{display:block; font-size:14px; color:var(--piedra); margin-top:2px; line-height:1.35}
.op[aria-pressed="true"]{border-color:var(--naranja); background:var(--naranja-suave)}
.op[aria-pressed="true"] b{color:var(--naranja-osc)}
.op[aria-pressed="true"] .op-art{background:var(--papel)}

.grupo{font-family:var(--e); font-weight:600; font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--piedra); margin:20px 0 8px}
.g3{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.pieza{
  background:var(--papel); border:1.5px solid var(--linea); border-radius:14px; cursor:pointer;
  padding:10px 4px 9px; display:flex; flex-direction:column; align-items:center; gap:5px;
}
.pieza:hover{border-color:var(--ceniza)}
.pieza svg{width:44px; height:44px}
.pieza span{font-size:12.5px; font-weight:500; line-height:1.2; text-align:center}
.pieza[aria-pressed="true"]{border-color:var(--naranja); background:var(--naranja-suave)}

.campo{
  width:100%; background:var(--papel); border:1.5px solid var(--linea); border-radius:12px;
  padding:13px 14px; font-family:var(--b); font-size:16px; color:var(--roca); outline:none; margin-top:10px;
}
textarea.campo{min-height:88px; resize:vertical; line-height:1.45}
.campo:focus{border-color:var(--naranja); box-shadow:0 0 0 3px var(--naranja-suave)}
.agregar{display:flex; gap:8px; align-items:flex-start}
.agregar .campo{flex:1}
.btn-min{
  margin-top:10px; height:51px; padding:0 18px; border:0; border-radius:12px; cursor:pointer;
  background:var(--fuerte); color:var(--sobre-color); font-family:var(--d); font-weight:600; font-size:17px; letter-spacing:.04em; text-transform:uppercase;
}
.btn-min:hover{background:var(--fuerte-hover)}
.propias{display:flex; flex-wrap:wrap; gap:7px; margin-top:12px}
.propia{
  display:inline-flex; align-items:center; gap:6px; background:var(--naranja-suave); color:var(--naranja-osc);
  border:1.5px solid var(--naranja); border-radius:99px; padding:6px 8px 6px 13px; font-weight:500; font-size:14px;
}
.propia button{background:none; border:0; cursor:pointer; color:inherit; font-size:14px; padding:0 4px; line-height:1}

.fotos{display:grid; gap:10px}
.foto{position:relative; background:var(--papel); border:1.5px dashed var(--linea); border-radius:16px}
.foto:hover{border-color:var(--naranja)}
.foto.lleno{border-style:solid}
.foto label{display:flex; align-items:center; gap:13px; padding:12px 14px; cursor:pointer}
.foto-ico{width:70px; height:52px; border-radius:10px; background:var(--niebla); display:grid; place-items:center; overflow:hidden; flex-shrink:0}
.foto-ico svg{width:30px; height:24px; stroke:var(--ceniza); fill:none; stroke-width:1.7}
.foto-ico img{width:100%; height:100%; object-fit:cover}
.foto-t{display:block; font-family:var(--d); font-weight:600; font-size:21px; line-height:1.1}
.foto-s{display:block; font-size:13px; color:var(--ceniza)}
.foto.lleno .foto-s{color:var(--ok); font-weight:500}
.foto-x{position:absolute; right:10px; top:50%; transform:translateY(-50%); background:var(--niebla); border:0; width:32px; height:32px; border-radius:50%; cursor:pointer; color:var(--piedra)}
.foto-x:hover{background:var(--bad-bg); color:var(--bad)}
input[type=file]{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}

/* ── vehículo ── */
.veh{
  margin:-62px 16px 0; position:relative; z-index:2; width:calc(100% - 32px); display:block; text-align:left;
  background:var(--papel); border:0; border-radius:18px; box-shadow:var(--sombra); overflow:hidden; cursor:pointer; padding:0;
}
.veh-fotos{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--linea-suave)}
.veh-foto{aspect-ratio:4/3; background:var(--niebla); position:relative; overflow:hidden; display:grid; place-items:center}
.veh-foto img{width:100%; height:100%; object-fit:cover}
.veh-foto span{font-family:var(--e); font-size:12px; color:var(--ceniza)}
.veh-foto b{position:absolute; left:6px; bottom:4px; font-family:var(--e); font-size:12px; font-weight:600; color:var(--sobre-color); text-shadow:0 1px 3px rgba(var(--negro),.7)}
.veh-body{padding:14px 16px 15px}
.veh-top{display:flex; align-items:baseline; gap:10px}
.veh-name{font-family:var(--d); font-weight:700; font-size:29px; line-height:1.02}
.veh-name span{color:var(--naranja)}
.veh-edit{margin-left:auto; font-family:var(--e); font-weight:600; font-size:13px; color:var(--naranja-osc); flex-shrink:0}
.veh-where{font-family:var(--e); font-weight:500; font-size:13.5px; color:var(--piedra); margin-top:2px}
.veh-specs{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:12px}
.spec{background:var(--niebla); border-radius:10px; padding:8px 4px; text-align:center; min-width:0}
/* cada dato se toca y se edita solo */
.spec.tap{cursor:pointer}
.spec.tap:hover{background:var(--niebla-2)}
.spec.tap:focus-visible, .veh-fotos.tap:focus-visible, .veh-top.tap:focus-visible{outline:2px solid var(--naranja); outline-offset:2px}
.veh-fotos.tap, .veh-top.tap{cursor:pointer}
.veh-top.tap:hover .veh-edit{color:var(--naranja)}
.row-p.chev{color:var(--ceniza); font-size:19px; font-weight:400}
.spec b{display:block; font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums}
.spec i{display:block; font-style:normal; font-family:var(--e); font-size:12px; color:var(--ceniza)}

/* ── ruta ── */
.ruta{
  margin:0 16px; width:calc(100% - 32px); display:block; text-align:left; cursor:pointer;
  background:var(--papel); border:0; border-radius:18px; box-shadow:var(--sombra); padding:15px 16px 13px;
}
.ruta-top{display:flex; align-items:flex-start; gap:10px}
.ruta-n{font-family:var(--d); font-weight:700; font-size:24px; line-height:1.08}
.ruta-dest{font-size:13.5px; color:var(--piedra); margin-top:2px}
.pct{margin-left:auto; text-align:right; flex-shrink:0}
.pct b{display:block; font-family:var(--d); font-weight:700; font-size:30px; line-height:1; color:var(--naranja); font-variant-numeric:tabular-nums}
.pct > span{font-family:var(--e); font-size:12px; color:var(--ceniza)}
.perfil{width:100%; height:60px; display:block; margin-top:10px}
.ruta-foot{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px}
.ruta-foot i{display:block; font-style:normal; font-family:var(--e); font-size:12px; color:var(--ceniza)}
.ruta-foot b{display:block; font-weight:600; font-size:14px; font-variant-numeric:tabular-nums; line-height:1.2}

.parada{margin:0 16px; background:var(--naranja-suave); border-radius:18px; padding:14px; display:flex; gap:13px; align-items:flex-start}
.parada-art{width:64px; height:64px; background:var(--papel); border-radius:13px; display:grid; place-items:center; flex-shrink:0}
.parada-art svg{width:50px; height:50px}
.parada-m{flex:1; min-width:0}
.parada-lab{font-family:var(--e); font-weight:600; font-size:12.5px; color:var(--naranja-osc); letter-spacing:.04em; text-transform:uppercase}
.parada-n{font-family:var(--d); font-weight:600; font-size:21px; line-height:1.12; margin-top:3px}
.parada-s{font-size:13px; color:var(--piedra); margin-top:1px}
.parada-row{display:flex; align-items:center; gap:10px; margin-top:9px}
.parada-p{font-weight:600; font-size:16px; font-variant-numeric:tabular-nums}
.parada-b{margin-left:auto; background:var(--naranja-fuerte); color:var(--sobre-color); border:0; border-radius:99px; cursor:pointer; font-family:var(--d); font-weight:600; font-size:16px; letter-spacing:.04em; text-transform:uppercase; padding:7px 15px}
.parada-b:hover{background:var(--naranja-hover)}

.ghost{margin:10px 16px 0; width:calc(100% - 32px); border:1.5px dashed var(--linea); background:none; color:var(--piedra); border-radius:14px; padding:13px; font-family:var(--d); font-weight:600; font-size:18px; letter-spacing:.04em; text-transform:uppercase; cursor:pointer}
.ghost:hover{border-color:var(--naranja); color:var(--naranja-osc)}

.yatiene{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:0 16px}
.yt{background:var(--papel); border-radius:12px; padding:9px 4px 8px; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0}
.yt svg{width:34px; height:34px}
.yt span{font-size:12px; line-height:1.15; text-align:center; color:var(--piedra); word-break:break-word}

/* ── sendero ── */
.sendero{margin:4px 16px 0; position:relative}
.sendero::before{content:""; position:absolute; left:9px; top:20px; bottom:26px; width:13px; background-image:var(--trail); background-repeat:repeat-y}
.tramo{position:relative; padding-left:42px; margin-bottom:10px}
.hito{position:absolute; left:1px; top:13px; width:29px; height:29px; border-radius:50%; background:var(--papel); border:2px solid var(--linea); display:grid; place-items:center; z-index:2; font-weight:700; font-size:13px; color:var(--piedra)}
.tramo.done .hito{background:var(--naranja-fuerte); border-color:var(--naranja-fuerte); color:var(--sobre-color)}
.tramo-head{width:100%; text-align:left; cursor:pointer; background:var(--papel); border:0; border-radius:16px; padding:12px 14px; display:flex; align-items:center; gap:10px; box-shadow:var(--sombra)}
.tramo.open .tramo-head{border-radius:16px 16px 0 0; box-shadow:none}
.tramo-t{font-family:var(--d); font-weight:600; font-size:20px; line-height:1.15}
.tramo-n{font-family:var(--e); font-size:12.5px; color:var(--ceniza); margin-top:1px}
.tramo-c{margin-left:auto; font-weight:600; font-size:14.5px; font-variant-numeric:tabular-nums; flex-shrink:0}
.caret{color:var(--ceniza); font-size:12px; transition:transform .2s; flex-shrink:0}
.tramo.open .caret{transform:rotate(90deg)}
.tramo-body{display:none; background:var(--papel); border-radius:0 0 16px 16px; box-shadow:var(--sombra)}
.tramo.open .tramo-body{display:block}

.destino{position:relative; padding-left:42px}
.destino .hito{border-style:dashed; border-color:var(--arena); color:var(--arena-osc); top:8px}
.destino-box{background:var(--arena-suave); border:1.5px dashed var(--arena); border-radius:16px; padding:12px 14px}
.destino-l{font-family:var(--e); font-weight:600; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--arena-osc)}
.destino-t{font-family:var(--d); font-weight:600; font-size:21px; line-height:1.15; margin-top:2px}
.destino-s{font-size:14px; color:var(--piedra); margin-top:2px}

.item{display:flex; gap:10px; padding:11px 14px; border-top:1px solid var(--linea-suave); align-items:flex-start}
.tick{flex-shrink:0; margin-top:14px; width:22px; height:22px; border-radius:7px; border:1.5px solid var(--linea); background:var(--papel); cursor:pointer; display:grid; place-items:center; color:transparent; font-size:12px; padding:0}
.tick[aria-pressed="true"]{background:var(--ok); border-color:var(--ok); color:var(--sobre-estado)}
.item-art{width:50px; height:50px; background:var(--niebla); border-radius:11px; display:grid; place-items:center; flex-shrink:0}
.item-art svg{width:40px; height:40px}
.item.done .item-art{opacity:.45}
.item.done .item-n{color:var(--ceniza); text-decoration:line-through}
.item-main{flex:1; min-width:0}
.item-n{font-weight:600; font-size:14.5px; line-height:1.3}
.item-s{font-size:13px; color:var(--piedra); margin-top:1px}
.item-p{font-weight:600; font-size:14px; font-variant-numeric:tabular-nums; flex-shrink:0; padding-top:14px}
.item-i{background:var(--niebla); border:0; color:var(--piedra); cursor:pointer; width:28px; height:28px; border-radius:50%; font-size:14px; margin-top:11px; flex-shrink:0; font-weight:700; font-family:var(--d)}
.item-i:hover{background:var(--naranja-suave); color:var(--naranja-osc)}
.item-sp{width:28px; flex-shrink:0}
.fit{display:inline-block; font-family:var(--e); font-weight:600; font-size:12px; padding:2px 9px; border-radius:99px; margin-top:5px}
.fit.ok{background:var(--ok-bg); color:var(--ok)}
.fit.warn{background:var(--warn-bg); color:var(--warn)}
.fit.bad{background:var(--bad-bg); color:var(--bad)}
.fit.ref{background:var(--ref-bg); color:var(--ref)}

.med{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--linea-suave); border-radius:18px; overflow:hidden; margin:0 16px; box-shadow:var(--sombra)}
.med-i{background:var(--papel); padding:12px 14px}
.med-l{font-family:var(--e); font-weight:500; font-size:13px; color:var(--ceniza)}
.med-v{font-family:var(--d); font-weight:600; font-size:27px; line-height:1.1; margin-top:2px; font-variant-numeric:tabular-nums}
.med-v u{text-decoration:none; font-size:15px; color:var(--piedra)}
.med-d{font-size:12.5px; margin-top:1px}
/* ── precios y planes ── */
.item-pr{font-weight:600; font-size:14px; color:var(--roca); margin-top:3px; font-variant-numeric:tabular-nums}
.sendero .item-art{width:42px; height:42px}
.sendero .item-art svg{width:34px; height:34px}
.ficha-precio{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:8px}
.ficha-precio b{font-family:var(--d); font-weight:700; font-size:28px; color:var(--naranja-osc); font-variant-numeric:tabular-nums}
.ficha-precio span{font-family:var(--e); font-size:13px; color:var(--ceniza)}
.row-p small{font-weight:500; font-size:12px; color:var(--ceniza)}
.lugar.es-pro{background:var(--naranja-fuerte); color:var(--sobre-color)}
.lugar.es-pro:hover{background:var(--naranja-hover)}
.lugar.es-admin{background:var(--roca); color:var(--papel)}
.lugar.es-admin:hover{background:var(--piedra)}
.candado{background:var(--papel); border-radius:18px; box-shadow:var(--sombra); padding:16px; text-align:center; border:1.5px dashed var(--naranja)}
.candado-t{font-family:var(--d); font-weight:700; font-size:22px; line-height:1.1}
.candado p{font-size:14px; color:var(--piedra); margin:6px 0 14px}
.link-pro{background:none; border:0; padding:0; cursor:pointer; color:var(--naranja-osc); font:inherit; font-weight:600; text-align:left}
.link-pro:hover{text-decoration:underline}
.planes-hoja h3{margin-top:2px}
.pro-lista{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:6px}
.pro-lista li{position:relative; padding-left:24px; font-size:14.5px; line-height:1.4}
.pro-lista li::before{content:"✓"; position:absolute; left:2px; color:var(--naranja-osc); font-weight:700}
/* lo que todavía no existe: se dice "Próximamente" y se marca distinto (un círculo, no un tilde) */
.pro-pronto{margin-top:14px; font-family:var(--e); font-weight:600; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--piedra)}
.pro-lista.pronto{margin-top:6px}
.pro-lista.pronto li{color:var(--piedra)}
.pro-lista.pronto li::before{content:"○"; color:var(--piedra); font-weight:400}
.precios{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px}
.precio-c{position:relative; border:1.5px solid var(--linea); border-radius:16px; padding:14px 12px 12px}
.precio-c.dest{border-color:var(--naranja); background:var(--naranja-suave)}
.precio-t{font-family:var(--e); font-weight:600; font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--piedra)}
.precio-v{font-family:var(--d); font-weight:700; font-size:26px; line-height:1.1; margin-top:2px; font-variant-numeric:tabular-nums}
.precio-v small{font-size:14px; color:var(--piedra); font-weight:600}
.precio-s{font-size:12.5px; color:var(--piedra); margin-top:3px; line-height:1.3}
.precio-tag{position:absolute; top:-10px; right:10px; background:var(--naranja-fuerte); color:var(--sobre-color); font-family:var(--e); font-weight:600; font-size:12px; padding:2px 9px; border-radius:99px}
.plan-gratis{margin-top:14px; font-size:13.5px; color:var(--piedra); line-height:1.45}
.plan-gratis b{color:var(--roca)}
/* ── lo que trae de fábrica ── */
.fab{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--linea-suave); border-radius:18px; overflow:hidden; box-shadow:var(--sombra)}
.fab-i{background:var(--papel); padding:10px 12px}
.fab-n{font-family:var(--e); font-weight:500; font-size:12.5px; color:var(--ceniza)}
.fab-v{font-family:var(--d); font-weight:600; font-size:19px; line-height:1.15; margin-top:1px}
.fab-v.si{color:var(--ok)} .fab-v.no{color:var(--piedra)} .fab-v.seg{color:var(--warn)} .fab-v.nd{color:var(--ceniza)}
.fab-tuyo{font-family:var(--e); font-size:12px; color:var(--piedra); margin-top:2px}   /* "lo que cargaste": el dato sale del alta, no de la base */
.expl{margin-top:10px; background:var(--papel); border-radius:18px; box-shadow:var(--sombra); padding:4px 15px 12px}
.expl-i{padding:11px 0; border-bottom:1px solid var(--linea-suave)}
.expl-t{font-family:var(--d); font-weight:600; font-size:19px; line-height:1.15}
.expl p{margin:2px 0 0; font-size:14px; line-height:1.45; color:var(--piedra)}
.expl .expl-p{color:var(--roca)}
.expl .expl-p b{font-weight:600}
.expl-nota{font-family:var(--e); font-size:12.5px; color:var(--ceniza); padding-top:10px}
.up{color:var(--ok)} .down{color:var(--bad)} .flat{color:var(--ceniza)}

.money{background:var(--papel); border-radius:18px; box-shadow:var(--sombra); padding:17px 16px}
.money-v{font-family:var(--d); font-weight:700; font-size:48px; line-height:1; font-variant-numeric:tabular-nums}
.money-v small{font-size:20px; color:var(--piedra); font-weight:600; margin-right:5px; vertical-align:14px}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:6px; background:var(--niebla-2); border-radius:3px; margin:20px 0 0; outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:var(--naranja); border:4px solid var(--papel); cursor:grab; box-shadow:0 1px 4px rgba(var(--negro),.25)}
input[type=range]::-moz-range-thumb{width:20px; height:20px; border-radius:50%; background:var(--naranja); border:4px solid var(--papel); cursor:grab}
input[type=range]:focus-visible{outline:2px solid var(--naranja); outline-offset:6px}
.scale{display:flex; justify-content:space-between; font-family:var(--e); font-size:12px; color:var(--ceniza); margin-top:9px}

/* plan de ahorro (Pro), debajo de "¿Con cuánto salís?" */
.ahorro{background:var(--papel); border-radius:18px; box-shadow:var(--sombra); padding:16px; margin-top:12px}
.ahorro-t{display:block; font-family:var(--d); font-weight:700; font-size:19px; line-height:1.2}
.ahorro-in{display:flex; align-items:center; gap:8px}
.ahorro-in span{font-family:var(--d); font-weight:700; font-size:20px; color:var(--piedra); margin-top:10px}
.ahorro-in .campo{flex:1; font-variant-numeric:tabular-nums}
.ahorro-cal{font-size:14.5px; line-height:1.5; margin-top:12px}
.ahorro-cal:empty{display:none}
.ahorro-cal b{color:var(--naranja-osc); font-weight:600}
.ahorro-cal ol{margin:8px 0 0; padding-left:20px}
.ahorro-cal li{margin:3px 0}
.ahorro-cal small{display:block; font-size:12.5px; color:var(--ceniza); margin-top:8px; line-height:1.4}

.voz{position:relative; background:var(--papel); border-radius:16px; padding:13px 15px 13px 56px; font-size:14.5px; line-height:1.5; box-shadow:var(--sombra)}
.voz::before{content:""; position:absolute; left:14px; top:14px; width:30px; height:30px; background:var(--brujula) center/contain no-repeat}
.voz b{color:var(--naranja-osc); font-weight:600}
.voz-l{display:block; font-family:var(--e); font-weight:600; font-size:12.5px; color:var(--ceniza); margin-bottom:2px}
.mx{margin-left:16px; margin-right:16px}

.list{background:var(--papel); border-radius:18px; box-shadow:var(--sombra); overflow:hidden}
.row{display:flex; align-items:center; gap:11px; padding:11px 14px; border-bottom:1px solid var(--linea-suave)}
.row:last-child{border-bottom:0}
.row-k{font-family:var(--e); font-weight:700; font-size:13px; color:var(--naranja-osc); width:20px; flex-shrink:0; font-variant-numeric:tabular-nums}
.row-art{width:40px; height:40px; background:var(--niebla); border-radius:10px; display:grid; place-items:center; flex-shrink:0}
.row-art svg{width:32px; height:32px}
.row-m{flex:1; min-width:0}
.row-n{font-weight:600; font-size:14.5px}
.row-s{font-size:13px; color:var(--piedra)}
.row-p{font-weight:600; font-size:14.5px; font-variant-numeric:tabular-nums; flex-shrink:0}
.row.off{opacity:.45}
.row.tap{cursor:pointer}
.row.tap:hover{background:var(--suelo)}

.charla{padding:18px 16px 0; display:flex; flex-direction:column; gap:10px}
.msg{max-width:88%; padding:11px 14px; border-radius:18px; font-size:14.5px; line-height:1.5; animation:rise .2s ease both}
.msg.yo{align-self:flex-end; background:var(--fuerte); color:var(--sobre-color); border-bottom-right-radius:5px}
.msg.baq{align-self:flex-start; background:var(--papel); border-bottom-left-radius:5px; box-shadow:var(--sombra)}
.msg.baq b{color:var(--naranja-osc)}
.msg .src{display:block; margin-top:8px; padding-top:7px; border-top:1px solid var(--linea-suave); font-family:var(--e); font-size:12px; color:var(--ceniza)}
.pensando{color:var(--ceniza); font-style:italic; animation:latir 1.4s ease-in-out infinite}
@keyframes latir{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.pensando{animation:none}}
.msg code{font-family:var(--e); font-weight:600; background:var(--niebla); padding:1px 6px; border-radius:6px}
.asks{display:flex; flex-wrap:wrap; gap:7px; padding:14px 16px 0}
.ask{background:var(--papel); border:1.5px solid var(--linea); padding:7px 13px; border-radius:99px; cursor:pointer; font-size:13.5px; font-weight:500}
.ask:hover{border-color:var(--naranja); color:var(--naranja-osc)}
.decir{display:flex; gap:8px; padding:14px 16px 0}
.decir input{flex:1; background:var(--papel); border:1.5px solid var(--linea); border-radius:99px; padding:12px 16px; font-family:var(--b); font-size:16px; color:var(--roca); outline:none}
.decir input:focus{border-color:var(--naranja)}
.decir button{background:var(--naranja); border:0; color:var(--sobre-color); width:48px; height:48px; border-radius:50%; cursor:pointer; flex-shrink:0; font-size:19px}
.decir button:hover{background:var(--naranja-hover)}

.tabbar{position:fixed; bottom:0; width:100%; max-width:var(--ancho-celular); z-index:40; background:var(--barra-menu); backdrop-filter:blur(12px); border-top:1px solid var(--linea-suave); display:grid; grid-auto-flow:column; grid-auto-columns:1fr; padding:6px 0 max(8px,env(safe-area-inset-bottom))}
.tab{font-size:12px; min-width:0; padding-left:1px; padding-right:1px}
.tab span, .tab{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ── "lo que no le agregamos", que ahora se abre con un botón al final de la ruta ── */
.abrir-afuera{
  display:flex; align-items:center; gap:10px; width:100%; margin-top:26px; cursor:pointer; text-align:left;
  background:var(--papel); border:1.5px solid var(--linea); border-radius:16px; padding:14px 16px;
}
.abrir-afuera:hover{border-color:var(--ceniza)}
.abrir-t{font-family:var(--d); font-weight:700; font-size:22px; line-height:1.05}
.abrir-s{font-family:var(--e); font-size:13px; color:var(--ceniza); margin-left:auto; text-align:right}
.abrir-afuera .caret{color:var(--ceniza); transition:transform .18s ease; flex-shrink:0}
.abrir-afuera.open{border-color:var(--naranja); background:var(--naranja-suave)}
.abrir-afuera.open .abrir-t{color:var(--naranja-osc)}
.abrir-afuera.open .caret{transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){.abrir-afuera .caret{transition:none}}

/* ── huellas ── */
.segm{display:grid; grid-template-columns:1fr 1fr; gap:4px; background:var(--niebla); border-radius:12px; padding:4px; margin-top:14px}
.segm button{
  border:0; border-radius:9px; padding:9px 0; cursor:pointer; background:none; color:var(--piedra);
  font-family:var(--e); font-weight:600; font-size:14px;
}
.segm button[aria-selected="true"], .segm button[aria-checked="true"]{background:var(--papel); color:var(--roca); box-shadow:var(--sombra-chica)}

.gr{
  display:inline-block; color:var(--sobre-color); font-family:var(--e); font-weight:700; font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; border-radius:5px; padding:2px 7px; vertical-align:2px; white-space:nowrap;
}
/* Ojo: NO usar un contenedor flex acá. Un <button> con hijos apilados no calcula bien
   su altura intrínseca como ítem flex y Chrome lo encoge a una línea: el contenido se
   sigue dibujando, pero afuera de la caja, y el botón deja de ser clickeable.
   Con contenedor de bloque y margen entre botones no pasa. */
.huellas{display:block; margin-top:12px}
.huella-i + .huella-i{margin-top:9px}
.huella-i{
  background:var(--papel); border:1.5px solid var(--linea); border-radius:16px;
  padding:13px 15px 14px; text-align:left; cursor:pointer; display:block; width:100%;
}
.huella-i:hover{border-color:var(--ceniza)}
.huella-top{display:flex; align-items:baseline; gap:9px; justify-content:space-between}
.huella-n{font-family:var(--d); font-weight:700; font-size:23px; line-height:1.05}
.huella-d{display:block; font-family:var(--e); font-weight:600; font-size:12.5px; color:var(--naranja-osc); margin-top:2px}
.huella-s{display:block; font-size:14px; color:var(--piedra); line-height:1.4; margin-top:5px}
.huella-m{display:block; font-family:var(--e); font-size:12.5px; color:var(--ceniza); margin-top:6px; font-variant-numeric:tabular-nums}

.volver{background:none; border:0; padding:0; margin:14px 16px 0; cursor:pointer; font-family:var(--e); font-weight:600; font-size:14px; color:var(--naranja-osc)}
.volver:hover{text-decoration:underline}
.huella-cab{background:var(--papel); border-radius:18px; box-shadow:var(--sombra); padding:15px 16px 16px; margin-top:10px}
.huella-cab-t{font-family:var(--d); font-weight:700; font-size:30px; line-height:1.03}
.huella-cab-d{font-family:var(--e); font-weight:600; font-size:13.5px; color:var(--naranja-osc); margin-top:2px}
.huella-cab-g{display:flex; align-items:baseline; gap:9px; margin-top:9px}
.huella-cab-g span:last-child{font-size:13.5px; color:var(--piedra); line-height:1.35}

/* el veredicto */
.vered{border-radius:16px; padding:14px 16px; margin-top:4px; border:1.5px solid}
.vered-t{font-family:var(--d); font-weight:700; font-size:25px; line-height:1.05}
.vered-s{font-size:14px; line-height:1.45; margin-top:3px}
.vered.ok{background:var(--ok-bg); border-color:var(--ok)}
.vered.ok .vered-t{color:var(--ok)}
.vered.warn{background:var(--warn-bg); border-color:var(--warn)}
.vered.warn .vered-t{color:var(--warn)}
.vered.bad{background:var(--bad-bg); border-color:var(--bad)}
.vered.bad .vered-t{color:var(--bad)}
.vered-s{color:var(--piedra)}
.vp{
  display:inline-grid; place-items:center; width:19px; height:19px; border-radius:50%;
  font-size:12px; font-weight:700; color:var(--sobre-estado); vertical-align:-2px; margin-right:4px;
}
.vp.si{background:var(--ok)} .vp.no{background:var(--bad)} .vp.nd{background:var(--ceniza)}

/* ── cuánto pagaste ── */
.pago{position:relative}
.pago span{position:absolute; left:14px; top:50%; transform:translateY(-50%); margin-top:5px; color:var(--ceniza); font-weight:600; pointer-events:none}
.pago .campo{padding-left:30px; font-variant-numeric:tabular-nums}
.pago .campo::-webkit-outer-spin-button, .pago .campo::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}

/* ── respaldo ── */
.respaldo{background:var(--papel); border-radius:18px; box-shadow:var(--sombra); padding:15px 16px 16px; margin-top:4px}
.respaldo p{margin:0; font-size:14px; line-height:1.5; color:var(--piedra)}
.respaldo .cta{margin-top:12px}
.respaldo label.cta{display:grid; place-items:center; box-sizing:border-box}

/* ── antes de salir: los terrenos ── */
.terr-grid{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12px}
.terr{
  position:relative; background:var(--papel); border:1.5px solid var(--linea); border-radius:16px;
  padding:13px 12px 12px; text-align:left; cursor:pointer; display:block; width:100%;
}
.terr:hover{border-color:var(--ceniza)}
.terr-art{display:block; width:40px; height:40px}
.terr-art svg{width:40px; height:40px}
.terr-n{display:block; font-family:var(--d); font-weight:600; font-size:20px; line-height:1.08; margin-top:7px}
.terr-s{display:block; font-family:var(--e); font-size:12.5px; color:var(--ceniza); line-height:1.3; margin-top:2px}
.terr-sug{
  position:absolute; top:9px; right:9px; font-family:var(--e); font-weight:600; font-size:12px;
  letter-spacing:.03em; text-transform:uppercase; background:var(--naranja-suave); color:var(--naranja-osc);
  border-radius:5px; padding:2px 5px;
}
.terr.on{border-color:var(--naranja); background:var(--naranja-suave)}
.terr.on .terr-n{color:var(--naranja-osc)}
.terr.on .terr-art svg{stroke:var(--naranja-osc)}

.terr-mix{
  display:flex; align-items:baseline; gap:9px; width:100%; margin-top:9px; cursor:pointer; text-align:left;
  background:var(--papel); border:1.5px dashed var(--linea); border-radius:16px; padding:13px 14px;
}
.terr-mix b{font-family:var(--d); font-weight:600; font-size:20px; line-height:1}
.terr-mix span{font-family:var(--e); font-size:12.5px; color:var(--ceniza); line-height:1.3}
.terr-mix.mx{width:calc(100% - 32px)}
.terr-mix.on{border-style:solid; border-color:var(--arena); background:var(--arena-suave)}

.terr-lista{background:var(--papel); border-radius:18px; box-shadow:var(--sombra); padding:2px 15px; margin-top:4px}
.terr-p{padding:12px 0; border-bottom:1px solid var(--linea-suave)}
.terr-p:last-child{border-bottom:0}
.terr-pt{font-weight:600; font-size:15px; line-height:1.25}
.terr-pd{font-size:14px; color:var(--piedra); line-height:1.5; margin-top:3px}
.terr-de{
  display:inline-block; font-family:var(--e); font-weight:600; font-size:12px; letter-spacing:.03em;
  text-transform:uppercase; background:var(--niebla); color:var(--piedra); border-radius:5px;
  padding:1px 5px; margin-left:6px; vertical-align:1px;
}
.terr-f{display:inline-block; font-family:var(--e); font-size:12px; font-weight:600; color:var(--naranja-osc); margin-top:5px; text-decoration:none}
.terr-f:hover{text-decoration:underline}

.terr-mal{background:var(--papel); border-radius:18px; box-shadow:var(--sombra); padding:4px 15px; margin-top:4px}
.terr-mal-i{display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--linea-suave); font-size:14px; line-height:1.45; color:var(--piedra)}
.terr-mal-i:last-child{border-bottom:0}
.terr-mal-i span{color:var(--bad); font-weight:700; flex-shrink:0; margin-top:1px}

/* ── proyectos ── */
.proy{display:flex; gap:12px; background:var(--papel); border-radius:18px; box-shadow:var(--sombra); padding:12px; margin-bottom:10px}
.proy.activo{outline:2px solid var(--naranja)}
.proy-foto{width:74px; height:74px; border-radius:13px; object-fit:cover; flex-shrink:0; background:var(--niebla)}
.proy-foto.vacia{display:grid; place-items:center}
.proy-foto.vacia svg{width:46px; height:46px}
.proy-m{flex:1; min-width:0}
.proy-n{font-family:var(--d); font-weight:700; font-size:21px; line-height:1.1}
.proy-n span{font-family:var(--e); font-size:12px; font-weight:600; color:var(--sobre-color); background:var(--naranja-fuerte); border-radius:99px; padding:2px 8px; vertical-align:3px}
.proy-s{font-family:var(--e); font-size:13px; color:var(--piedra); margin-top:2px}
.proy-a{font-size:12.5px; color:var(--ceniza); margin-top:2px}
.proy-bar{height:5px; background:var(--niebla); border-radius:3px; margin-top:7px; overflow:hidden}
.proy-bar i{display:block; height:100%; background:var(--naranja); border-radius:3px}
.proy-btn{display:flex; flex-wrap:wrap; gap:6px; margin-top:9px}
.proy-btn button{background:var(--niebla); border:0; border-radius:99px; padding:6px 13px; cursor:pointer; font-family:var(--e); font-weight:600; font-size:12.5px; color:var(--roca)}
.proy-btn button:hover{background:var(--niebla-2)}
.proy-btn button.rojo{color:var(--bad)}
.proy-btn button.rojo:hover{background:var(--bad-bg)}
.legal-links{display:flex; gap:8px; justify-content:center; align-items:center; margin-top:22px; font-family:var(--e); font-size:13px; color:var(--ceniza)}
.legal-links button{background:none; border:0; cursor:pointer; color:var(--piedra); font:inherit; text-decoration:underline; padding:4px}
.legal-links button:hover{color:var(--naranja-osc)}

/* ── lo que no le agregamos ── */
.fuera-tramo{font-family:var(--e); font-weight:600; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ceniza); margin:16px 0 7px}
.fuera{background:var(--papel); border-radius:18px; box-shadow:var(--sombra); padding:2px 15px}
.fuera-i{display:flex; gap:8px; align-items:center; border-bottom:1px solid var(--linea-suave)}
.fuera-i:last-child{border-bottom:0}
/* toda la fila se toca y abre la ficha completa, igual que en la ruta */
.fuera-tap{flex:1; min-width:0; display:flex; gap:12px; align-items:flex-start; text-align:left;
  background:none; border:0; padding:11px 0; margin:0; font:inherit; color:inherit; cursor:pointer}
.fuera-tap:hover .fuera-n{color:var(--naranja-osc)}
.fuera-m{flex:1; min-width:0}
.fuera-art{width:38px; height:38px; background:var(--niebla); border-radius:10px; display:grid; place-items:center; flex-shrink:0; opacity:.6}
.fuera-art svg{width:30px; height:30px}
.fuera-n{display:block; font-weight:600; font-size:14.5px}
.fuera-p{display:block; font-size:13.5px; color:var(--piedra); line-height:1.4; margin-top:1px}
.fuera-i.puesta .fuera-n{color:var(--ceniza)}
/* el + que suma la pieza a la ruta */
.fuera-add{
  width:36px; height:36px; flex-shrink:0; border:1.5px solid var(--linea); border-radius:50%;
  background:var(--papel); color:var(--naranja-osc); font-size:22px; line-height:1; cursor:pointer;
  display:grid; place-items:center; padding:0 0 2px;
}
.fuera-add:hover{border-color:var(--naranja); background:var(--naranja-suave)}

/* de dónde salió cada pieza */
.tag-vos, .tag-ya, .tag-saq{
  display:inline-block; font-family:var(--e); font-style:normal; font-weight:600; font-size:12px;
  letter-spacing:.03em; text-transform:uppercase; padding:1px 6px; border-radius:5px; vertical-align:1px; white-space:nowrap;
}
.tag-vos{background:var(--naranja-suave); color:var(--naranja-osc)}
.tag-ya{background:var(--ok-bg); color:var(--ok)}
.tag-saq{background:var(--niebla); color:var(--piedra)}

/* aviso de que la ruta ya no es la que yo armé */
.tocada{background:var(--arena-suave); border:1.5px solid var(--arena); border-radius:14px; padding:12px 14px; margin-top:14px}
.tocada-t{font-family:var(--d); font-weight:700; font-size:19px; line-height:1.1}
.tocada-s{font-size:13.5px; color:var(--piedra); line-height:1.45; margin:3px 0 7px}

.cta.alt.rojo-txt{color:var(--bad)}
.cta.alt.rojo-txt:hover{border-color:var(--bad)}

/* ── legales ── */
.legal h4{font-family:var(--e); font-weight:600; font-size:14px; letter-spacing:.04em; text-transform:uppercase; color:var(--naranja-osc); margin:18px 0 4px}
.legal p{font-size:14.5px; line-height:1.55; color:var(--piedra); margin:0 0 8px}
.legal b{color:var(--roca)}
.legal-f{font-family:var(--e); font-size:12.5px; color:var(--ceniza); margin-top:16px}
.legal-alta{margin-top:16px; font-size:13px; line-height:1.5; color:var(--ceniza)}
.legal-alta button{background:none; border:0; padding:0; cursor:pointer; color:var(--piedra); font:inherit; text-decoration:underline}
.legal-alta button:hover{color:var(--naranja-osc)}
.riesgo{margin-top:10px; padding:11px 14px; border:1.5px dashed var(--linea); border-radius:12px; font-size:13.5px; line-height:1.45; color:var(--piedra)}
.tab{background:none; border:0; cursor:pointer; padding:5px 2px; display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--ceniza); font-family:var(--e); font-weight:600; font-size:12px}
.tab svg{width:23px; height:23px; stroke:currentColor; fill:none; stroke-width:1.8}
.tab[aria-current="page"]{color:var(--naranja-osc)}

.scrim{position:fixed; inset:0; background:var(--scrim); z-index:50; opacity:0; pointer-events:none; transition:opacity .22s}
.scrim.on{opacity:1; pointer-events:auto}
.ficha{position:fixed; left:50%; bottom:0; transform:translate(-50%,100%); width:100%; max-width:var(--ancho-celular); max-height:88vh; overflow-y:auto; z-index:51; background:var(--papel); border-radius:22px 22px 0 0; transition:transform .27s cubic-bezier(.3,.8,.35,1)}
.ficha.on{transform:translate(-50%,0)}
.ficha:focus{outline:none}   /* la hoja recibe el foco al abrirse si no tiene botón principal: no es un control */
@media (prefers-reduced-motion:reduce){.ficha,.scrim{transition:none}}
.grab{width:40px; height:4px; background:var(--niebla-2); border-radius:2px; margin:9px auto 0}
.ficha-in{padding:12px 16px 30px}
.ficha-art{height:140px; border-radius:16px; background:linear-gradient(180deg,var(--ficha-cielo) 0%,var(--arena-suave) 100%); display:grid; place-items:center; margin-bottom:14px}
.ficha-art svg{width:112px; height:112px}
.ficha h3{font-family:var(--d); font-weight:700; font-size:27px; line-height:1.08; margin:0; text-wrap:balance}
.ficha-sub{font-size:14px; color:var(--piedra); margin-top:2px}
.ficha p{font-size:15px; color:var(--piedra); margin:0}
.kv{display:grid; grid-template-columns:auto 1fr; gap:7px 16px; font-size:14.5px}
.kv dt{font-family:var(--e); font-weight:500; color:var(--ceniza)}
.kv dd{margin:0; font-weight:600; font-variant-numeric:tabular-nums}
.aviso{margin-top:14px; padding:11px 14px; border-radius:12px; font-size:14px; line-height:1.45}
.aviso.ok{background:var(--ok-bg)} .aviso.ok b{color:var(--ok)}
.aviso.warn{background:var(--warn-bg)} .aviso.warn b{color:var(--warn)}
.aviso.bad{background:var(--bad-bg)} .aviso.bad b{color:var(--bad)}
.aviso.ref{background:var(--ref-bg)} .aviso.ref b{color:var(--roca)}
.pasos{margin:0; padding:0; list-style:none; counter-reset:s}
.pasos li{counter-increment:s; position:relative; padding:8px 0 8px 32px; font-size:14.5px; border-bottom:1px solid var(--linea-suave); line-height:1.4}
.pasos li:last-child{border-bottom:0}
.pasos li::before{content:counter(s,decimal-leading-zero); position:absolute; left:0; top:8px; font-family:var(--e); font-weight:700; font-size:13px; color:var(--naranja-osc)}
.cta{width:100%; margin-top:18px; height:52px; cursor:pointer; background:var(--naranja); color:var(--sobre-color); border:0; border-radius:14px; font-family:var(--d); font-weight:700; font-size:19px; letter-spacing:.04em; text-transform:uppercase}
.cta:hover{background:var(--naranja-hover)}
a.cta{display:grid; place-items:center; text-decoration:none}   /* un enlace con forma de botón ("Avisame cuando esté") */
.cta.alt{background:var(--papel); border:1.5px solid var(--linea); color:var(--roca); margin-top:8px}
.cta.alt:hover{border-color:var(--ceniza)}
.cta:disabled{opacity:.55; cursor:default}
.cta:disabled:hover{background:var(--naranja)}
/* la vista previa de la imagen de la lista (Mandar por WhatsApp): se ve el principio, la imagen entera va al compartir */
.lista-prev{margin-top:14px; max-height:46vh; overflow:hidden; align-content:start; border:1.5px solid var(--linea); border-radius:14px; background:var(--suelo); font-size:14px; color:var(--piedra); padding:0; min-height:64px; display:grid; place-items:center}
.lista-prev[aria-busy="true"]{padding:16px}
.lista-prev img{display:block; width:100%; height:auto}

.nota{margin:24px 16px 0; padding:12px 14px; border:1.5px dashed var(--linea); border-radius:14px; font-size:13.5px; line-height:1.5; color:var(--piedra)}
.nota b{color:var(--roca)}

.toast{position:fixed; left:50%; bottom:100px; transform:translate(-50%,14px); background:var(--fuerte); color:var(--sobre-color); padding:11px 18px; border-radius:99px; font-size:14px; font-weight:500; z-index:60; opacity:0; pointer-events:none; transition:all .24s; white-space:nowrap; max-width:90vw; overflow:hidden; text-overflow:ellipsis}
.toast.on{opacity:1; transform:translate(-50%,0)}

:focus-visible{outline:2.5px solid var(--naranja); outline-offset:2px}

/* ── el logo ──
   Se usa tal cual está en marca/svg: el de trazo roca sobre fondo claro y el de trazo hueso
   sobre fondo oscuro. Sin estirarlo, sin sombras, sin tocarle los colores (ver marca/LEEME.md). */
:root:not([data-tema="oscuro"]) .solo-oscuro, :root[data-tema="oscuro"] .solo-claro{display:none}
.logo{background:none; border:0; padding:0; cursor:pointer; display:block; line-height:0; max-width:100%}
.logo img{display:block; height:auto}
.logo-top{min-width:0}
.logo-top .logo img{width:200px; max-width:100%}
.logo-top .mark-sub{margin-top:5px}
.logo-lado{display:none}
/* en la bienvenida y en la carátula van sobre la foto: siempre la versión para fondo oscuro */
/* el logo vertical de la portada, grande: la montaña se reconoce de lejos. Detrás, un velo oscuro
   muy suave para que se lea sobre la foto (la marca pide no ponerle sombra al logo mismo). */
.slide-portada .portada-mark img{position:static; display:block; width:min(52vw, 260px); height:auto; margin:0 auto; object-fit:contain}
.portada-centro{width:100%; isolation:isolate}
.portada-centro::before{
  content:""; position:absolute; z-index:-1; left:50%; top:50%; width:150%; height:260%; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(var(--noche),.42), rgba(var(--noche),0)); pointer-events:none;
}
.slide-portada .portada-sub{font-size:clamp(19px, 2.2vw, 24px); margin-top:14px}

/* ══════════ PANTALLAS GRANDES ══════════
   Los cortes y los anchos están explicados arriba de todo, en "medidas de toda la app".
   Un solo menú que cambia de forma con el ancho:
   · celular (menos de 768 px): la barra de abajo, como siempre.
   · tablet (768 a 1023 px): una barra angosta a la izquierda, solo íconos (el nombre sale al pasar el mouse).
   · computadora (1024 px o más): la barra a la izquierda con ícono y texto, y el contenido en columnas.
   Los agrupadores .cols / .col no hacen nada en el celular: ahí todo sigue una debajo de otra.
   Cada pantalla define su propio ancho: ningún marco general limita la app. */
@media (min-width:768px){
  :root{--lado:84px}
  .marco{max-width:none; box-shadow:none}
  #app.marco{padding-left:var(--lado)}
  main{width:100%; max-width:var(--ancho-form); margin:0 auto; padding-bottom:48px}

  .tabbar{
    top:0; bottom:0; left:0; width:var(--lado); max-width:none;
    display:flex; flex-direction:column; gap:4px; padding:92px 12px 20px;
    background:var(--papel); backdrop-filter:none; border-top:0; border-right:1px solid var(--linea-suave);
  }
  .tab{font-size:0; gap:0; padding:12px 0; border-radius:14px}
  .tab svg{width:24px; height:24px}
  .tab:hover{background:var(--niebla); color:var(--piedra)}
  .tab[aria-current="page"], .tab[aria-current="page"]:hover{background:var(--naranja-suave); color:var(--naranja-osc)}

  /* el logo sube a la barra lateral: en tablet el símbolo solo, en computadora el logo entero */
  .logo-top{display:none}
  .logo-lado{
    display:grid; place-items:center; position:fixed; z-index:41; top:0; left:0;
    width:var(--lado); height:84px;
  }
  .logo-lado .solo-ancho{display:none}
  .logo-lado .solo-angosto{width:44px}

  /* el aviso chico queda centrado en el contenido: corrido por la barra lateral solo dentro de la app */
  .toast{bottom:32px}
  body:has(#app:not([hidden])) .toast{left:calc(50% + var(--lado) / 2)}
  .hero-garaje{height:240px}
  .hero-ruta{height:190px}
  .terr-grid{grid-template-columns:repeat(3,1fr)}

  /* las ventanas emergentes (ficha, planes, avisos): centradas, no una hoja que sube */
  .ficha{
    top:50%; bottom:auto; max-width:var(--ancho-hoja); width:calc(100% - 2 * var(--margen-ancho));
    max-height:86vh; border-radius:22px;
    transform:translate(-50%,-47%); opacity:0; pointer-events:none;
    transition:transform .22s ease, opacity .22s ease;
    box-shadow:0 20px 60px rgba(var(--negro),.3);
  }
  .ficha.on{transform:translate(-50%,-50%); opacity:1; pointer-events:auto}
  .grab{display:none}
  .ficha-in{padding:22px 24px 28px}
}

@media (min-width:1024px){
  :root{--lado:236px}
  main{max-width:var(--ancho-contenido); padding:0 12px 56px}
  .tabbar{padding:100px 16px 24px}
  .tab{
    flex-direction:row; justify-content:flex-start; gap:13px; padding:11px 14px;
    font-size:16px; font-weight:600; text-align:left;
  }
  .tab svg{width:22px; height:22px; flex-shrink:0}
  .logo-lado{place-items:center start; padding-left:30px; height:92px}
  .logo-lado .solo-angosto{display:none}
  .logo-lado .solo-ancho{display:block; width:176px}

  /* el contenido en dos columnas donde hay dos cosas que se leen por separado */
  .cols{display:grid; grid-template-columns:1fr 1fr; align-items:start}
  .col{min-width:0}
  .cols-hoy .expl{margin-top:0}
  .cols-prov .col > .eyebrow:first-child{margin-top:16px}
  .col-fija{position:sticky; top:84px}
  .hero-garaje{height:300px}
  .hero-ruta{height:240px}
  .perfil{height:84px}
  #proyLista{display:grid; grid-template-columns:1fr 1fr; column-gap:10px; align-items:start}
  [data-screen="baqueano"]{max-width:var(--ancho-form); margin:0 auto}
}

/* ══════════ EL COMIENZO EN PANTALLAS GRANDES ══════════
   Bienvenida, planes, carátula y el pie con el botón de avanzar (que comparten con el alta).
   Tablet: todo una debajo de otra como en el celular, pero centrado a --ancho-form y con los
   planes lado a lado. Computadora: pantalla partida, la foto a la izquierda y el texto a la derecha. */
@media (min-width:768px){
  :root{--relleno-form:max(var(--margen-ancho), calc((100% - var(--ancho-form)) / 2))}
  .planes-in{padding-left:var(--relleno-form); padding-right:var(--relleno-form)}
  .planes-in{padding-top:40px}

  /* el botón de avanzar con su ancho, no de punta a punta */
  .alta-foot{
    display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px;
    padding-left:var(--relleno-form); padding-right:var(--relleno-form);
  }
  .alta-foot .btn{width:auto; min-width:260px; padding:0 36px}
  .alta-foot .car-nota{flex:1; min-width:200px; margin:0; text-align:left}
}

@media (min-width:1024px){
  /* bienvenida y planes: la portada queda fija a la izquierda y los planes a la derecha, sin deslizar */
  .intro{
    height:auto; min-height:100vh; overflow:visible; scroll-snap-type:none;
    display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  }
  .slide{scroll-snap-align:none}
  .slide-portada{position:sticky; top:0; height:100vh; min-height:0}
  .intro .planes-in{padding-top:72px}

  .car-h{font-size:46px}
}

/* ══════════ EL ALTA (carga de la camioneta) EN PANTALLAS GRANDES ══════════
   Tablet: una columna centrada al ancho de formulario, y las opciones aprovechan ese ancho.
   Computadora: además, a la izquierda las cinco partes del alta y lo que ya se cargó.
   Es la misma pregunta por paso que en el celular: cambia solo cómo se acomoda. */
.alta-lado{display:none}
@media (min-width:768px){
  .alta-top, .alta-body{padding-left:var(--relleno-form); padding-right:var(--relleno-form)}
  #alta .alta-foot{justify-content:flex-end}
  .alta-body .strip, .alta-body .hero-alta{margin-left:0; margin-right:0; border-radius:0 0 18px 18px}
  .alta-body .t2{grid-template-columns:repeat(3,1fr)}
  .alta-body .tiles{display:grid; grid-template-columns:1fr 1fr}
  .alta-body .ops{display:grid; grid-template-columns:1fr 1fr}
  .alta-body .g5{grid-template-columns:repeat(8,1fr)}
}
@media (min-width:1024px){
  #alta.marco{padding-left:var(--lado)}
  .alta-lado{
    display:block; position:fixed; z-index:25; top:0; bottom:0; left:0; width:var(--lado); overflow-y:auto;
    background:var(--papel); border-right:1px solid var(--linea-suave); padding:32px 24px 24px 30px;
  }
  .lado-logo{display:block; width:176px; height:auto}
  .lado-t{font-family:var(--e); font-weight:600; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--piedra); margin:34px 0 10px}
  .lado-pasos{list-style:none; margin:0; padding:0; display:grid; gap:4px}
  .lado-pasos li{display:flex; align-items:center; gap:11px; padding:8px 10px 8px 6px; border-radius:12px; font-family:var(--e); font-weight:600; font-size:15px; color:var(--ceniza)}
  .lado-pasos li span{
    width:26px; height:26px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
    border:1.5px solid var(--linea); font-size:13px; font-weight:700; font-variant-numeric:tabular-nums;
  }
  .lado-pasos li.hecho{color:var(--roca)}
  .lado-pasos li.hecho span{background:var(--naranja-suave); border-color:var(--naranja-suave); color:var(--naranja-osc)}
  .lado-pasos li.actual{background:var(--naranja-suave); color:var(--naranja-osc)}
  .lado-pasos li.actual span{background:var(--naranja-fuerte); border-color:var(--naranja-fuerte); color:var(--sobre-color)}
  .lado-resumen{background:var(--suelo); border-radius:14px; padding:12px 14px; display:grid; gap:3px; font-size:14px; line-height:1.4; color:var(--piedra)}
  .lado-resumen b{display:block; font-family:var(--d); font-weight:700; font-size:20px; line-height:1.1; color:var(--roca)}
  .lado-vacio{color:var(--ceniza)}
}

/* ══════════ CONFIGURACIÓN ══════════
   Se llega desde el engranaje de la barra de arriba (celular) o desde el último ítem de la barra
   lateral (tablet y computadora). Apariencia: tres tarjetas con una muestra chica de cada modo. */
.engranaje{margin-left:0}
.tab-config{display:none}
.apariencia{display:grid; grid-template-columns:repeat(3,1fr); gap:9px}
.tema-op{
  display:block; width:100%; text-align:left; cursor:pointer; padding:10px 10px 12px;
  background:var(--papel); border:1.5px solid var(--linea); border-radius:16px;
}
.tema-op:hover{border-color:var(--ceniza)}
.tema-op b{display:block; font-family:var(--d); font-weight:600; font-size:19px; line-height:1.1; margin-top:9px}
.tema-op > span:last-child{display:block; font-size:12.5px; color:var(--ceniza); line-height:1.3; margin-top:2px}
.tema-op[aria-pressed="true"]{border-color:var(--naranja); background:var(--naranja-suave)}
.tema-op[aria-pressed="true"] b{color:var(--naranja-osc)}
/* la muestra: una barra arriba, una tarjeta y un botón naranja */
.tema-vista{display:block; position:relative; height:62px; border-radius:10px; overflow:hidden; border:1px solid var(--linea)}
.tema-vista i{position:absolute; display:block}
.tema-vista i:nth-child(1){left:0; right:0; top:0; height:12px}
.tema-vista i:nth-child(2){left:8px; right:8px; top:19px; height:20px; border-radius:5px}
.tema-vista i:nth-child(3){left:8px; top:45px; width:34%; height:9px; border-radius:5px; background:var(--naranja)}
.vista-claro{background:var(--vista-claro-suelo)}
.vista-claro i:nth-child(-n+2){background:var(--vista-claro-papel)}
.vista-oscuro{background:var(--vista-oscuro-suelo)}
.vista-oscuro i:nth-child(-n+2){background:var(--vista-oscuro-papel)}
.vista-auto{background:linear-gradient(90deg, var(--vista-claro-suelo) 50%, var(--vista-oscuro-suelo) 50%)}
.vista-auto i:nth-child(-n+2){background:linear-gradient(90deg, var(--vista-claro-papel) 50%, var(--vista-oscuro-papel) 50%)}
.vista-auto i:nth-child(2){left:0; right:0; border-radius:0}

@media (min-width:768px){
  .engranaje{display:none}
  .tab-config{display:flex; margin-top:auto}
  .tema-vista{height:84px}
  .tema-vista i:nth-child(1){height:15px}
  .tema-vista i:nth-child(2){top:25px; height:28px}
  .tema-vista i:nth-child(3){top:61px; height:11px}
  .tema-op{padding:12px 12px 14px}
}
/* Configuración por apartados. Las filas que se tocan enteras (Tu plan, Seguinos, Legal):
   una tarjeta con filas separadas por una línea, cada una de 64 px de alto (cómodas para el dedo). */
.filas{background:var(--papel); border-radius:18px; box-shadow:var(--sombra); overflow:hidden}
.fila-ir{
  display:flex; align-items:center; gap:14px; width:100%; min-height:64px; box-sizing:border-box;
  padding:10px 14px 10px 16px; background:none; border:0; cursor:pointer; text-align:left;
  color:var(--roca); text-decoration:none; font:inherit;
}
.fila-ir + .fila-ir{border-top:1px solid var(--linea-suave)}
.fila-ir:hover{background:var(--niebla)}
.fila-ir:focus-visible{outline:2px solid var(--naranja); outline-offset:-2px; border-radius:18px}
.fila-chica{min-height:52px}
.fila-ico{flex:none; width:36px; height:36px; display:grid; place-items:center}
.fila-ico svg{width:30px; height:30px; display:block}
.fila-ico img{width:36px; height:auto}
.fila-txt{flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:3px}
.fila-txt b{font-size:16px; font-weight:600; line-height:1.2}
.fila-txt small{font-size:13.5px; color:var(--piedra); line-height:1.3}
.fila-txt .lugar{margin-left:0; pointer-events:none}
.fila-mas{font-family:var(--e); font-weight:600; font-size:14px; color:var(--naranja-osc); white-space:nowrap}
.fila-flecha{flex:none; width:18px; height:18px; fill:none; stroke:var(--ceniza); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.resp-ir{margin-top:22px; font-size:14px; color:var(--piedra); text-align:center}
/* solo para lectores de pantalla */
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

@media (min-width:1024px){
  /* dos columnas: a la izquierda lo tuyo, a la derecha lo de la app */
  .config-cols{display:grid; grid-template-columns:1fr 1fr; gap:0 8px; align-items:start}
  .config-col{min-width:0}
}

/* ══════════ LA ENTRADA: "¿TU CAMIONETA LLEGA?" ══════════
   Las cuatro huellas de huellas.js como tarjetas: tocar una la elige y lleva a cargar la camioneta. */
.meta-lista{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:4px}
.meta{
  display:block; width:100%; text-align:left; cursor:pointer; padding:12px 13px 13px;
  background:var(--papel); border:1.5px solid var(--linea); border-radius:16px;
}
.meta:hover{border-color:var(--ceniza)}
.meta-top{display:flex; flex-direction:column; align-items:flex-start; gap:6px}
.meta-top b{font-family:var(--d); font-weight:700; font-size:20px; line-height:1.05}
.meta-d{display:block; font-family:var(--e); font-weight:600; font-size:12.5px; color:var(--naranja-osc); margin-top:6px}
.meta[aria-pressed="true"]{border-color:var(--naranja); background:var(--naranja-suave)}
.slide-llega .car-h{margin-top:2px}
.slide-llega .planes-in{display:flex; flex-direction:column; justify-content:center}
/* el botón de compartir el veredicto, debajo del resultado */
.compartir{margin-top:10px}

@media (min-width:1024px){
  .slide-portada .portada-mark img{width:60%; max-width:none}
  .intro .slide-llega .planes-in{padding-top:48px}
  .slide-llega .car-h{font-size:52px}
  .meta-lista{gap:12px; margin-top:10px}
  .meta{padding:16px 18px 17px}
  .meta-top{flex-direction:row; align-items:center; justify-content:space-between}
  .meta-top b{font-size:23px}
  .compartir{width:auto; padding:0 32px}
}

/* ══════════ LA CUENTA ══════════
   Entrar, crear la cuenta, recuperar la contraseña: son hojas como las fichas (suben desde abajo en el
   celular, aparecen al medio en la computadora) y usan los mismos colores, así el modo oscuro sale solo.
   El cuadro de "Tu cuenta" va en Configuración, con el mismo aspecto que el del respaldo. */
.cuenta-form h3{margin-top:2px}
.cuenta-lbl{display:block; margin-top:16px; font-family:var(--e); font-weight:600; font-size:14px; color:var(--roca)}
.cuenta-lbl + div > .campo, .cuenta-lbl + .campo{margin-top:6px}
.cuenta-clave{position:relative}
.cuenta-clave .campo{padding-right:84px}
.cuenta-ojo{
  position:absolute; right:6px; top:50%; transform:translateY(-50%); margin-top:3px;
  background:var(--niebla); border:0; border-radius:99px; padding:7px 13px; cursor:pointer;
  font-family:var(--e); font-weight:600; font-size:13px; color:var(--roca);
}
.cuenta-ojo:hover{background:var(--niebla-2)}
.cuenta-ayuda{font-family:var(--e); font-size:13px; color:var(--ceniza); margin-top:5px}
.cuenta-ayuda:empty{display:none}
.cuenta-ayuda.bien{color:var(--ok)}
.cuenta-ayuda.mal{color:var(--bad)}
.cuenta-err[hidden]{display:none}
.cuenta-err .cta{margin-top:10px}
.cuenta-links{display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; margin-top:8px}
.cuenta-txt-link{background:none; border:0; padding:0; cursor:pointer; color:var(--naranja-osc); font:inherit; font-weight:600; text-decoration:underline}
.cuenta-txt-link:hover{color:var(--roca)}
/* el captcha (Turnstile): solo ocupa lugar si hace falta tocar la casilla */
.captcha{display:flex; justify-content:center; margin-top:12px}
.captcha:empty{display:none}
.cuenta-caja{background:var(--papel); border-radius:18px; box-shadow:var(--sombra); padding:15px 16px 16px}
.cuenta-caja > p{margin:0; font-size:14px; line-height:1.5; color:var(--piedra)}
.cuenta-caja .cta{margin-top:12px}
.cuenta-caja .cta.alt{margin-top:8px}
.cuenta-caja .cta:disabled{opacity:.6; cursor:default}
.cuenta-quien b{display:block; font-family:var(--d); font-weight:700; font-size:24px; line-height:1.1}
.cuenta-quien span{display:block; font-size:14px; color:var(--piedra); overflow-wrap:anywhere}
.cuenta-form .cta:disabled{opacity:.7; cursor:progress}
.car-nota:empty{display:none}
.alta-foot .car-nota{margin-top:10px}
.cuenta-eliminar{display:block; margin:16px auto 2px; color:var(--bad)}
.cuenta-eliminar:hover{color:var(--roca)}

/* ───── seguridad: el código del celular (seguridad.js) ───── */
.seg-pasos{margin:10px 0 0; padding-left:20px; font-size:14.5px; line-height:1.5; color:var(--piedra)}
.seg-qr{display:block; width:200px; height:200px; margin:14px auto 0; padding:10px; background:#fff; border-radius:14px}
.seg-clave{margin-top:6px; padding:10px 12px; border-radius:12px; background:var(--niebla); font-family:ui-monospace,Consolas,monospace;
  font-size:15px; letter-spacing:.04em; overflow-wrap:anywhere; user-select:all}
.seg-check{display:flex; gap:10px; align-items:flex-start; margin-top:16px; font-size:14px; line-height:1.4; color:var(--piedra); cursor:pointer}
.seg-check input{width:20px; height:20px; margin:1px 0 0; flex:none; accent-color:var(--naranja)}
.seg-check b{color:var(--roca)}
.seg-codigos{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:14px 0 4px; padding:0; list-style:none}
.seg-codigos li{padding:9px 6px; border-radius:10px; background:var(--niebla); text-align:center;
  font-family:ui-monospace,Consolas,monospace; font-size:14.5px; letter-spacing:.03em}
.seg-disp{margin:8px 0 0; padding:0; list-style:none}
.seg-disp li{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--linea)}
.seg-disp li span{display:block; font-size:13px; color:var(--ceniza)}
.seg-disp li .seg-este{display:inline; margin-left:4px; font-size:12px; font-weight:600; color:var(--ok)}
.seg-admin{margin-top:14px; padding:12px; border-radius:14px; background:var(--niebla)}
.seg-admin-t{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:14.5px}
.seg-admin-tag{padding:3px 9px; border-radius:999px; background:var(--roca); color:var(--papel); font-family:var(--e); font-weight:700; font-size:12px; letter-spacing:.04em}
.seg-admin .segm{margin-top:10px; background:var(--niebla-2)}

/* ───── elegir el plan: radios de verdad que se ven como tarjetas (app.js, elegirPlan) ───── */
.planes-elegir{border:0; margin:16px 0 0; padding:0; min-width:0}
.planes-leyenda{padding:0; margin-bottom:12px; font-family:var(--e); font-weight:600; font-size:14px; color:var(--roca)}
.planes-ops{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.plan-op{position:relative; display:block; border:1.5px solid var(--linea); border-radius:16px; padding:14px 12px 12px; cursor:pointer; background:var(--papel)}
.plan-op span{display:block}
.plan-op .precio-tag{position:absolute}
/* el radio ocupa toda la tarjeta, invisible pero real: se toca, se enfoca y lo anuncia el lector de pantalla */
.plan-op input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:1}
.plan-op:has(input:checked){border-color:var(--naranja); background:var(--naranja-suave); box-shadow:inset 0 0 0 1px var(--naranja)}
.plan-op:has(input:focus-visible){outline:3px solid var(--naranja); outline-offset:3px}
.plan-marca{position:absolute; right:10px; bottom:10px; width:20px; height:20px; border-radius:50%; border:1.5px solid var(--linea); background:var(--papel)}
.plan-op:has(input:checked) .plan-marca{border-color:var(--naranja); background:var(--naranja)}
.plan-op:has(input:checked) .plan-marca::after{content:"✓"; display:block; text-align:center; line-height:17px; font-size:12px; font-weight:700; color:var(--sobre-color)}
.plan-resumen{margin:12px 0 0; font-size:14px; line-height:1.45; color:var(--piedra)}
.plan-resumen b{color:var(--roca)}
.planes-hoja #planesErr{margin-top:12px}
.planes-hoja #planesErr[hidden]{display:none}
.planes-hoja [data-suscribirme]:disabled{opacity:.75; cursor:progress}

/* ══════════ QUE TODO SE PUEDA TOCAR CON EL DEDO (7/10/2026) ══════════
   Apple y Google piden al menos 44 px para tocar sin errarle. Estos botones se ven chicos a propósito
   (el tilde, la "i", el sol), así que no se agrandan: se les agranda la ZONA que responde al toque con un
   ::after invisible alrededor. Se ven igual y se tocan como uno de 44. */
.tick, .item-i, .tema, .engranaje, .lugar, .logo-top .logo, .eyebrow-acc, .veh-top, .parada-b,
.alta-top .link, .volver, .proy-btn button, .legal-links button{position:relative}
.tick::after, .item-i::after, .tema::after, .engranaje::after, .lugar::after, .logo-top .logo::after,
.eyebrow-acc::after, .veh-top::after, .parada-b::after, .alta-top .link::after, .volver::after,
.proy-btn button::after, .legal-links button::after{content:""; position:absolute}
.tick::after{inset:-11px}                            /* 22 → 44 */
.item-i::after{inset:-8px}                           /* 28 → 44 */
.tema::after, .engranaje::after{inset:-6px}          /* 32 → 44 */
.lugar::after{inset:-7px 0}
.logo-top .logo::after{inset:-13px 0}
.eyebrow-acc::after{inset:-10px -7px}
.veh-top::after{inset:-6px 0}
.parada-b::after{inset:-3px 0}
.alta-top .link::after{inset:-5px -1px}
.volver::after{inset:-12px -4px}
.proy-btn button::after{inset:-7px 0}
.legal-links button::after{inset:-8px 0}
.segm button, .chip{min-height:44px}
/* los enlaces dentro de un texto no necesitan 44, pero sí 24 de alto para no errarle */
.cuenta-txt-link{padding:3px 0}
.terr-f{padding:3px 0}

/* el deslizador de la plata: la barra se ve de 6 px, pero se puede agarrar en 44 de alto */
input[type=range]{height:44px; background:transparent; margin:1px 0 -19px}
input[type=range]::-webkit-slider-runnable-track{height:6px; background:var(--niebla-2); border-radius:3px}
input[type=range]::-webkit-slider-thumb{margin-top:-10px}
input[type=range]::-moz-range-track{height:6px; background:var(--niebla-2); border-radius:3px}

/* "Afiná tu ruta" en el Garaje: lo que no se preguntó al cargar (7/10/2026) */
.afinar{margin-top:12px; background:var(--papel); border-radius:18px; box-shadow:var(--sombra); padding:14px 16px 16px}
.afinar-t{font-family:var(--d); font-weight:700; font-size:21px; line-height:1.15}
.afinar p{font-size:14.5px; line-height:1.45; color:var(--piedra); margin:4px 0 12px}

/* ───────── salidas (Pro) ───────── */
.salida-prox{display:grid; grid-template-columns:1fr auto; column-gap:10px; align-items:center; width:calc(100% - 32px); box-sizing:border-box;
  margin-top:12px; text-align:left; background:var(--papel); border:1.5px solid var(--naranja); border-radius:18px; box-shadow:var(--sombra);
  padding:13px 16px; cursor:pointer; color:var(--roca); font:inherit}
.salida-prox-k{grid-column:1; font-family:var(--e); font-weight:600; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--naranja-fuerte)}
.salida-prox-t{grid-column:1; font-family:var(--d); font-weight:700; font-size:21px; line-height:1.15; margin-top:2px}
.salida-prox-s{grid-column:1; font-size:13.5px; color:var(--piedra); margin-top:2px}
.salida-prox .caret{grid-column:2; grid-row:1 / span 3; color:var(--ceniza)}
.salida-fecha{display:block; margin-top:14px; font-family:var(--e); font-weight:600; font-size:13px; color:var(--piedra)}
.salida-fecha .campo{margin-top:6px; min-height:48px}
.salida-cuando{margin:8px 0 0; font-size:14.5px}
.salida-cuenta{margin:4px 0 0; font-size:14px; font-weight:600; color:var(--ok)}
.salida-chk{display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--linea); cursor:pointer; min-height:44px; box-sizing:border-box}
.salida-chk input{width:24px; height:24px; margin:1px 0 0; flex:none; accent-color:var(--ok)}
.salida-chk b{display:block; font-weight:600; font-size:15px; line-height:1.3}
.salida-chk small{display:block; font-size:13px; line-height:1.4; color:var(--piedra); margin-top:2px}
.salida-chk input:checked + span b{text-decoration:line-through; text-decoration-color:var(--ceniza)}

/* ───────── mantenimiento y vencimientos (Pro) ───────── */
.vence-aviso{display:grid; grid-template-columns:1fr auto; column-gap:10px; width:calc(100% - 32px); box-sizing:border-box; margin-top:12px;
  text-align:left; background:var(--warn-bg); border:1.5px solid var(--warn); border-radius:18px; padding:12px 16px; cursor:pointer; color:var(--roca); font:inherit}
.vence-aviso-k{grid-column:1; font-family:var(--e); font-weight:600; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--warn)}
.vence-aviso-i{grid-column:1; font-size:14.5px; margin-top:3px}
.vence-aviso .caret{grid-column:2; grid-row:1 / span 9; align-self:center}
.mant-garaje{display:block; width:calc(100% - 32px); box-sizing:border-box; text-align:left; background:var(--papel); border:0; border-radius:18px;
  box-shadow:var(--sombra); padding:4px 16px; cursor:pointer; color:var(--roca); font:inherit}
.mant-g-i{display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--linea); font-size:14.5px}
.mant-g-i:last-child{border-bottom:0}
.mant-g-n{font-weight:600}
.mant-est{font-size:13.5px; font-weight:600; text-align:right}
.mant-est.ok{color:var(--ok)} .mant-est.warn{color:var(--warn)} .mant-est.bad{color:var(--bad)} .mant-est.nd{color:var(--ceniza); font-weight:500}
.mant-i{padding:14px 0; border-bottom:1px solid var(--linea)}
.mant-i label b{display:block; font-weight:600; font-size:15.5px}
.mant-i label small{display:block; font-size:13px; line-height:1.4; color:var(--piedra); margin-top:2px}
.mant-i .campo{min-height:48px; margin-top:8px}
.mant-pie{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px}
.mant-pie .mant-est{flex:1; text-align:left}
.btn-chico{min-height:44px; padding:0 14px; background:var(--papel); border:1.5px solid var(--linea); border-radius:12px; cursor:pointer;
  font-family:var(--e); font-weight:600; font-size:14px; color:var(--roca)}
.btn-chico:hover{border-color:var(--ceniza)}
.btn-chico.rojo-txt{color:var(--bad)}

/* ───────── calculadora de cubiertas ───────── */
.calc-l{display:block; margin-top:14px; font-family:var(--e); font-weight:600; font-size:13.5px; color:var(--piedra)}
.calc-l small{font-weight:500; font-size:12.5px; color:var(--ceniza)}
.calc-l + .campo{margin-top:6px; text-transform:uppercase}
.calc-res{margin-top:14px}
.calc-res:empty{display:none}
.calc-res p{font-size:14px; line-height:1.5; color:var(--piedra); margin:10px 0 0}
.calc-fila{display:grid; grid-template-columns:96px 1fr; column-gap:12px; padding:10px 0; border-bottom:1px solid var(--linea)}
.calc-fila span{grid-row:1 / span 2; font-family:var(--e); font-weight:600; font-size:13px; color:var(--piedra); padding-top:2px}
.calc-fila b{font-weight:600; font-size:16px; font-variant-numeric:tabular-nums}
.calc-fila small{font-size:13px; color:var(--piedra); line-height:1.4}

/* ───────── medición (solo admin) ───────── */
.med-admin-tot{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:14px}
.med-admin-tot span{background:var(--suelo); border-radius:12px; padding:10px; font-size:12.5px; color:var(--piedra); line-height:1.3}
.med-admin-tot b{display:block; font-family:var(--d); font-size:26px; color:var(--roca)}
.med-admin{width:100%; border-collapse:collapse; margin-top:16px; font-size:14px}
.med-admin caption{text-align:left; font-family:var(--e); font-weight:600; font-size:13px; color:var(--piedra); padding-bottom:6px}
.med-admin th, .med-admin td{padding:9px 4px; border-bottom:1px solid var(--linea); text-align:right; font-variant-numeric:tabular-nums}
.med-admin th[scope="row"], .med-admin thead th:first-child{text-align:left; font-weight:500}
.med-admin thead th{font-family:var(--e); font-weight:600; font-size:12.5px; color:var(--piedra)}