/* =============================================================================
   DRS MOTORS · DEMO — APP DEL USUARIO (celular 390 × 844)
   Modo noche. Radio 0. Un solo Azul Acero por pantalla: el botón «Lavar» en las
   pestañas raíz; el botón principal en las pantallas de detalle. Dentro de un
   panel (sup-2 / sup-3) todo lo azul es Azul Luz (bloqueo 2).
============================================================================= */

.tel{
  position:relative;width:var(--tel-w);height:var(--tel-h);overflow:hidden;
  background:var(--sup-1);color:var(--txt-2);
  font-size:var(--fs-13);line-height:1.5;
  isolation:isolate;
  --teclado:0px;          /* lo que tapa el teclado del celular; lo mide js/app/arranque.js */
}

/* ------------------------------------------------------------ barra de estado */
.tel-estado{
  position:absolute;left:0;right:0;top:0;height:44px;z-index:30;
  display:flex;align-items:center;justify-content:space-between;padding:0 26px 0 30px;
  font:600 var(--fs-13)/1 var(--f-label);letter-spacing:.04em;color:var(--txt-1);
  background:var(--sup-1);
}
.tel-estado .num{font-variant-numeric:tabular-nums}
.tel-senal{display:flex;align-items:center;gap:6px}
.tel-senal svg{display:block;fill:currentColor}
.tel-home{position:absolute;left:50%;bottom:8px;width:134px;height:5px;margin-left:-67px;background:var(--txt-1);opacity:.55;z-index:40;pointer-events:none}

/* ------------------------------------------------------------ pila de pantallas */
.tel-vista{position:absolute;left:0;right:0;top:44px;bottom:0;overflow:hidden;contain:paint}
.pantalla{
  position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
  background:var(--sup-1);
  scrollbar-width:none;overscroll-behavior:contain;
  transition:transform .26s var(--ease), opacity .26s var(--ease);
}
/* Con el teclado abierto, un espacio del alto del teclado al final: todo se puede subir por encima
   de él. Va como ::after y no como padding, porque el padding también correría el .pie-cta pegajoso */
.pantalla::after{content:"";display:block;height:var(--teclado, 0px)}
.pantalla::-webkit-scrollbar{display:none}
.pantalla.entra{transform:translateX(100%)}
.pantalla.debajo{transform:translateX(-24%);opacity:.35;pointer-events:none}
.pantalla.sale{transform:translateX(100%)}
.pantalla.funde{opacity:0}
.cuerpo{padding:0 15px 132px}
.cuerpo.con-cta{padding-bottom:28px}

/* ------------------------------------------------------------ encabezados */
.cab{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;gap:10px;
  height:56px;padding:0 15px;background:var(--sup-1);
  border-bottom:1px solid transparent;transition:border-color .2s;
  box-shadow:0 -8px 0 0 var(--sup-1);            /* tapa la costura de subpíxel al escalar el celular */
}
.pantalla.con-scroll .cab{border-bottom-color:var(--linea)}
.cab-logo{display:block;width:104px;height:24px;margin-right:auto;color:var(--txt-1)}
.cab-logo svg{display:block;width:100%;height:100%}
.placa{
  display:flex;align-items:center;gap:6px;height:32px;padding:0 8px 0 7px;
  border:1px solid var(--txt-2);color:var(--txt-1);
}
.placa-txt{font:400 var(--fs-20)/1 var(--f-display);letter-spacing:.08em;padding-top:2px}
.placa .ico{width:16px;height:16px;color:var(--txt-2)}
.placa .ico.s-flecha{width:12px;height:12px}
.cab-btn{position:relative;display:grid;place-items:center;width:40px;height:40px;color:var(--txt-1)}
.cab-btn .ico{width:22px;height:22px}
.badge{
  position:absolute;top:4px;right:3px;min-width:16px;height:16px;padding:0 3px;
  display:grid;place-items:center;background:var(--sel-fondo);color:var(--sup-1);
  font:700 var(--fs-9)/1 var(--f-label);font-variant-numeric:tabular-nums;
}
.badge.late{animation:late .5s var(--ease)}
@keyframes late{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.avatar{
  display:grid;place-items:center;width:32px;height:32px;
  background:var(--ctl-fondo);border:1px solid var(--ctl-borde);color:var(--txt-1);
  font:400 var(--fs-16)/1 var(--f-display);letter-spacing:.06em;padding-top:2px;
}
.cab-det{gap:6px}
.cab-atras{display:grid;place-items:center;width:40px;height:40px;margin-left:-10px;color:var(--txt-1)}
.cab-titulo{
  flex:1;text-align:center;margin-right:30px;opacity:0;transition:opacity .2s;
  font:600 var(--fs-11)/1 var(--f-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--txt-1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pantalla.con-scroll .cab-titulo{opacity:1}

/* ------------------------------------------------------------ tipografía */
.d{font-family:var(--f-display);font-weight:400;letter-spacing:var(--track-display);line-height:.92;color:var(--txt-1);text-transform:uppercase}
.d-76{font-size:var(--fs-76)} .d-56{font-size:var(--fs-56)} .d-44{font-size:var(--fs-44)}
.d-34{font-size:var(--fs-34)} .d-26{font-size:var(--fs-26);letter-spacing:.03em} .d-20{font-size:var(--fs-20);letter-spacing:.03em}
.ceja{font:600 var(--fs-11)/1.2 var(--f-label);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--txt-3)}
.etq{font:700 var(--fs-11)/1.2 var(--f-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--txt-1)}
.cap{font:600 var(--fs-9)/1.3 var(--f-label);letter-spacing:var(--track-caption);text-transform:uppercase;color:var(--txt-3)}
.t16{font-size:var(--fs-16);line-height:1.6;color:var(--txt-2)}
.t13{font-size:var(--fs-13);line-height:1.5;color:var(--txt-2)}
.t11{font-size:var(--fs-11);line-height:1.5;color:var(--txt-3)}
.t-1{color:var(--txt-1)} .t-3{color:var(--txt-3)} .t-luz{color:var(--acc-txt)}
.num{font-variant-numeric:tabular-nums}
.tachado{text-decoration:line-through;text-decoration-thickness:1px;color:var(--txt-3)}

/* Título de pantalla y bloque */
.titulo{padding:8px 0 22px}
.titulo .ceja{margin-bottom:8px}
.titulo .t13{margin-top:10px;max-width:32ch}
.linea-neutra{display:block;width:32px;height:1px;background:var(--txt-2);margin-top:14px}
.bloque{margin-top:34px}
.bloque-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.bloque-cab .t13{margin-top:6px;color:var(--txt-3)}
.enlace{
  display:inline-flex;align-items:center;gap:4px;text-align:left;
  font:700 var(--fs-11)/1.1 var(--f-label);letter-spacing:.16em;text-transform:uppercase;color:var(--acc-txt);
}                                               /* un enlace largo baja de línea en vez de salirse (360 px) */
.enlace .ico{width:14px;height:14px}
.bloque-cab>.enlace::after{top:calc(50% - 25px);bottom:calc(50% - 19px)}   /* el área de toque no pisa la tarjeta de abajo */

/* ------------------------------------------------------------ superficies */
.tarjeta{background:var(--panel);border:1px solid var(--panel-borde)}
.tarjeta-pad{padding:15px}
.sep{height:1px;background:var(--linea);margin:14px 0}
.tarjeta .sep{background:var(--panel-linea)}

/* ------------------------------------------------------------ botones */
.btn{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  min-height:52px;padding:0 18px;
  font:700 var(--fs-11)/1 var(--f-label);letter-spacing:var(--track-label);text-transform:uppercase;
  transition:filter .15s, background .15s, color .15s, border-color .15s, transform .1s;
}
.btn:active{transform:translateY(1px)}
.btn .ico{width:18px;height:18px}
.btn-acero{background:var(--acc-1);color:var(--txt-acc)}               /* SOLO sobre sup-1 */
.btn-acero:hover{filter:brightness(1.12)}
.btn-luz{background:var(--sel-fondo);color:var(--sup-1)}                   /* dentro de panel */
.btn-luz:hover{filter:brightness(1.08)}
.btn-borde{border:1px solid var(--acc-graf);color:var(--acc-txt)}
.btn-borde:hover{background:color-mix(in srgb, var(--acc-graf) 12%, transparent)}
.btn-fantasma{background:var(--ctl-fondo);border:1px solid var(--ctl-borde);color:var(--txt-1)}
.btn-fantasma:hover{border-color:var(--txt-1)}
.btn-lleno{background:var(--btn2-fondo);color:var(--btn2-txt)}                /* sin Azul Acero en la pantalla */
.btn-lleno:hover{filter:brightness(1.08)}
.btn-chico{min-height:40px;width:auto;padding:0 14px}
.btn[disabled]{background:var(--sup-3);color:var(--txt-3);border-color:var(--sup-3);cursor:not-allowed;filter:none}

/* ------------------------------------------------------------ chips */
.chip{
  display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 7px;white-space:nowrap;
  font:700 var(--fs-9)/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--n-4);color:var(--txt-2);
}
.chip .ico{width:12px;height:12px;stroke-width:3px}
.chip-pos{border-color:var(--pos);color:var(--pos)}
.chip-warn{border-color:var(--warn);color:var(--warn)}
.chip-neg{border-color:var(--neg);color:var(--neg)}
.chip-luz{border-color:var(--acc-graf);color:var(--acc-txt)}
.chip-lleno{background:var(--pos);border-color:var(--pos);color:var(--sup-1)}
.chip-app{background:var(--sel-fondo);border-color:var(--sel-fondo);color:var(--sup-1)}

/* ------------------------------------------------------------ saludo */
.saludo{padding:10px 0 4px}
.saludo .ceja{margin-bottom:8px}
.saludo-fila{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pts{
  display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:1px solid var(--ctl-borde);background:var(--ctl-fondo);
  font:700 var(--fs-11)/1 var(--f-label);letter-spacing:.14em;color:var(--txt-1);white-space:nowrap;
}
.pts b{font:400 var(--fs-20)/1 var(--f-display);letter-spacing:.04em;padding-top:2px}
.pts .ico{width:16px;height:16px;color:var(--acc-txt)}

/* Reserva en curso (tira) */
.en-curso{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;width:100%;
  margin-top:18px;padding:12px 12px 12px 14px;
  background:var(--panel);border:1px solid var(--panel-borde);border-left:3px solid var(--acc-graf);
}
.en-curso.listo{border-left-color:var(--pos)}
.en-curso .ceja{color:var(--acc-txt);letter-spacing:.22em}
.en-curso.listo .ceja{color:var(--pos)}
.en-curso .t13{color:var(--txt-1);margin-top:3px}
.hora-apilada{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.pulso{width:10px;height:10px;background:var(--acc-graf);position:relative}
.pulso::after{content:"";position:absolute;inset:-4px;border:1px solid var(--acc-graf);animation:pulso 1.6s var(--ease) infinite}
.en-curso.listo .pulso{background:var(--pos)}
.en-curso.listo .pulso::after{border-color:var(--pos)}
@keyframes pulso{0%{opacity:1;transform:scale(.6)}100%{opacity:0;transform:scale(1.5)}}

/* ------------------------------------------------------------ vehículo */
.veh{margin-top:18px;overflow:hidden}
.veh-top{display:flex;align-items:center;justify-content:space-between;padding:12px 15px 0}
.veh-plano{position:relative;padding:4px 10px 0;
  background:
    linear-gradient(color-mix(in srgb, var(--linea) 70%, transparent) 1px, transparent 1px) 0 0/20px 20px,
    linear-gradient(90deg, color-mix(in srgb, var(--linea) 70%, transparent) 1px, transparent 1px) 0 0/20px 20px;
}
.veh-plano svg{display:block;width:100%;height:auto}
.veh-pie{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:12px 15px 15px;border-top:1px solid var(--panel-linea)}
.veh-pie .t13{color:var(--txt-3);margin-top:6px}
.veh-km{text-align:right;flex:none}
.veh-km .enlace{margin-top:8px}

/* Los dibujos blueprint (.bp) y su animación viven en css/vehiculos.css */

/* ------------------------------------------------------------ al día: tacómetros */
.rejilla-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:12px 12px 13px;text-align:left;min-height:168px;min-width:0;container-type:inline-size}
@media (hover:hover){ .tile:hover{border-color:var(--ctl-borde)} }
.tile-top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:6px 0;width:100%;margin-bottom:8px}
/* Si el chip más largo («Por vencer», 108 px) no cabe junto al tacómetro (56 px), va debajo en las cuatro tarjetas y no solo en la que no cabe: hasta 390 px de ancho */
@container (max-width: 163px){ .tile-top{flex-direction:column} }
.tile .etq{color:var(--txt-3);letter-spacing:.2em;font-size:var(--fs-9);margin-top:auto}
.tile .d-34{margin-top:6px}
.tile .t11{margin-top:4px}
.gauge{position:relative;width:56px;height:56px;flex:none}
.gauge svg{display:block;width:100%;height:100%;overflow:visible}
.gauge .g-pista{stroke:var(--linea)}
.gauge .g-marca{stroke:var(--n-4)}
.gauge .g-valor{stroke-dasharray:var(--p) 1;stroke-dashoffset:0}
.gauge.anima .g-valor{animation:g-llena 1.1s cubic-bezier(.3,.7,.2,1) both;animation-delay:.25s}
@keyframes g-llena{from{stroke-dashoffset:var(--p)}}
.gauge .ico{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-12px 0 0 -10px;color:var(--txt-1)}
.est-pos{color:var(--pos);stroke:var(--pos)} .est-warn{color:var(--warn);stroke:var(--warn)} .est-neg{color:var(--neg);stroke:var(--neg)}

/* ------------------------------------------------------------ pico y placa */
.pyp{padding:15px}
.pyp-top{display:flex;align-items:center;justify-content:space-between}
.pyp-estado{display:flex;align-items:center;gap:10px;margin:12px 0 8px}
.pyp-glifo{display:grid;place-items:center;width:34px;height:34px;flex:none;border:1px solid currentColor}
.pyp-glifo .ico{width:18px;height:18px;stroke-width:2.5px}
.semana{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;margin:14px 0}
.dia{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0 7px;
  border:1px solid var(--panel-linea);color:var(--txt-2);
}
.dia .cap{font-size:var(--fs-9);letter-spacing:.1em}
.dia .d-20{color:inherit}
/* Día sin carro: el color nunca va solo (09 §8.5). Barra roja arriba y el mismo ✕ del calendario del mes */
.dia.restringido{color:var(--neg);border-color:color-mix(in srgb, var(--neg) 55%, var(--linea));border-top:3px solid var(--neg);padding-top:4px}
.dia.restringido::after{
  content:"";position:absolute;top:3px;right:3px;width:9px;height:9px;
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
}
.dia.libre{color:var(--txt-3)}
.dia.hoy{outline:1px solid var(--txt-1);outline-offset:-1px}
.fuente{margin-top:12px;font-size:var(--fs-9);letter-spacing:.06em;color:var(--txt-3)}

/* ------------------------------------------------------------ rieles */
.riel{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:15px;margin:0 -15px;padding:0 15px 4px;scrollbar-width:none}
.riel::-webkit-scrollbar{display:none}
.riel>*{scroll-snap-align:start;flex:none}
.rec{width:262px;display:flex;flex-direction:column;gap:12px;padding:15px;text-align:left}
.rec-top{display:flex;align-items:center;gap:10px}
.rec-ico{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--panel-linea);color:var(--txt-1)}
.rec-ico .ico{width:20px;height:20px}
.rec .t13{color:var(--txt-1);min-height:3em}
.serv{position:relative;width:112px;height:104px;display:flex;flex-direction:column;justify-content:space-between;padding:12px 10px;text-align:left}
.serv .ico{width:26px;height:26px;color:var(--txt-1)}
.serv .cap{color:var(--txt-2);letter-spacing:.08em;line-height:1.25}
.serv .chip{position:absolute;top:-1px;right:-1px;height:18px;padding:0 5px;font-size:var(--fs-9)}
.serv:hover{border-color:var(--ctl-borde)}
.promo{width:250px;text-align:left}
.promo-plano{position:relative;height:132px;border-bottom:1px solid var(--linea);background:
    linear-gradient(color-mix(in srgb, var(--linea) 60%, transparent) 1px, transparent 1px) 0 0/16px 16px,
    linear-gradient(90deg, color-mix(in srgb, var(--linea) 60%, transparent) 1px, transparent 1px) 0 0/16px 16px;}
.promo-plano svg{position:absolute;left:10px;right:10px;top:34px;bottom:4px;width:calc(100% - 20px);height:calc(100% - 38px)}
.promo-plano .chip{position:absolute;left:10px;top:9px}
.promo-info{padding:12px 12px 13px}
.promo-info .t11{margin-top:4px}
.precio{display:flex;align-items:baseline;gap:8px;margin-top:10px}
.cond{margin-top:8px;font-size:var(--fs-9);line-height:1.45;color:var(--txt-3);letter-spacing:.02em}
.calif{display:inline-flex;align-items:baseline;gap:3px;color:var(--txt-1)}
.calif b{font:400 var(--fs-16)/1 var(--f-display);letter-spacing:.04em}
.calif i{font-style:normal;font-size:var(--fs-9);color:var(--txt-3)}

/* ------------------------------------------------------------ beneficios */
.benef{padding:15px}
.benef-num{display:flex;align-items:baseline;gap:8px;margin:10px 0 14px}
.meta-seg{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:10px 0 8px}
.meta-seg i{height:8px;border:1px solid var(--n-4)}
.meta-seg i.ok{background:var(--acc-graf);border-color:var(--acc-graf)}
.meta-seg i.ultimo{border-color:var(--acc-graf);border-style:dashed}

/* ------------------------------------------------------------ navegación flotante */
.nav{
  position:absolute;left:12px;right:12px;bottom:24px;z-index:20;
  display:flex;gap:6px;height:60px;
  transition:transform .28s var(--ease), opacity .2s;
}
.nav.oculta{transform:translateY(120px);opacity:0;pointer-events:none}
.nav-barra{flex:1;display:grid;grid-template-columns:repeat(4,1fr);background:color-mix(in srgb, var(--panel) 96%, transparent);border:1px solid var(--panel-borde);backdrop-filter:blur(8px)}
.nav-tab{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  color:var(--txt-3);font:600 var(--fs-9)/1 var(--f-label);letter-spacing:.1em;text-transform:uppercase;
}
.nav-tab .ico{width:22px;height:22px}
.nav-tab[aria-current="page"]{color:var(--txt-1)}
.nav-tab[aria-current="page"]::before{content:"";position:absolute;left:22%;right:22%;top:-1px;height:2px;background:var(--acc-graf)}
.fab{
  width:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:var(--acc-1);color:var(--txt-acc);
  font:700 var(--fs-9)/1 var(--f-label);letter-spacing:.12em;text-transform:uppercase;
}
.fab .ico{width:24px;height:24px}
.fab:hover{filter:brightness(1.12)}

/* ------------------------------------------------------------ capas: hoja, velo, aviso */
.tel-capa{position:absolute;inset:0;z-index:35;pointer-events:none}
.velo{position:absolute;inset:0;background:var(--velo);opacity:0;transition:opacity .22s;pointer-events:auto}
.velo.ver{opacity:1}
.hoja{
  position:absolute;left:0;right:0;bottom:var(--teclado, 0px);max-height:calc((100% - var(--teclado, 0px)) * .88);overflow:auto;
  padding:10px 15px max(16px, calc(40px - var(--teclado, 0px)));background:var(--sup-2);border-top:1px solid var(--panel-borde);
  transform:translateY(100%);transition:transform .3s var(--ease);pointer-events:auto;
}                                   /* con el teclado abierto la hoja sube y se acorta: su botón queda a la vista */
.hoja.ver{transform:none}
.hoja-asa{width:36px;height:4px;background:var(--n-4);margin:0 auto 14px}
.hoja-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:16px}
.hoja-cerrar{display:grid;place-items:center;width:36px;height:36px;margin:-6px -8px 0 0;color:var(--txt-1)}
.hoja-cerrar .ico{width:18px;height:18px}
.opcion{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;width:100%;
  padding:14px 12px;border:1px solid var(--panel-borde);background:var(--sup-3);margin-bottom:6px;text-align:left;
}
.opcion[aria-checked="true"]{border-color:var(--acc-graf)}
.opcion .ico{color:var(--txt-1)}
.radio{width:18px;height:18px;border:1px solid var(--txt-3);display:grid;place-items:center}
.opcion[aria-checked="true"] .radio{border-color:var(--acc-graf)}
.opcion[aria-checked="true"] .radio::after{content:"";width:10px;height:10px;background:var(--acc-graf)}
.campo{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.campo input,.campo textarea{
  width:100%;height:52px;padding:0 14px;background:var(--sup-3);border:1px solid var(--campo-borde);
  font-size:var(--fs-16);color:var(--txt-1);
}
.campo textarea{height:84px;padding:12px 14px;resize:none;font-size:var(--fs-16)}
.campo input:focus,.campo textarea:focus{outline:2px solid var(--acc-txt);outline-offset:-1px;border-color:var(--acc-graf)}
.campo .d-34{background:transparent}

.aviso{
  position:absolute;left:8px;right:8px;top:6px;z-index:36;
  display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:start;
  padding:11px 12px;background:var(--sup-3);border:1px solid var(--panel-borde);
  box-shadow:0 18px 40px -18px var(--sombra);
  transform:translateY(-140%);transition:transform .38s var(--ease);pointer-events:auto;text-align:left;width:auto;
}
.aviso.ver{transform:none}
.aviso-ico{display:grid;place-items:center;width:38px;height:38px;background:var(--sup-1);border:1px solid var(--linea)}
.aviso-ico svg{width:24px;height:24px}
.aviso b{display:block;font:700 var(--fs-13)/1.3 var(--f-body);color:var(--txt-1)}
.aviso .t13{margin-top:2px;line-height:1.4}
.aviso time{font-size:var(--fs-9);color:var(--txt-3);letter-spacing:.06em;white-space:nowrap}

.tostada{
  position:absolute;left:15px;right:15px;bottom:100px;z-index:36;
  display:flex;align-items:center;gap:10px;padding:12px 14px;
  background:var(--sup-3);border:1px solid var(--panel-borde);color:var(--txt-1);font-size:var(--fs-13);
  transform:translateY(20px);opacity:0;transition:all .25s var(--ease);
}
.tostada.ver{transform:none;opacity:1}
.tostada .ico{width:18px;height:18px;color:var(--pos);stroke-width:2.5px}

/* ------------------------------------------------------------ filas y listas */
.lista{border-top:1px solid var(--linea)}
.fila{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;width:100%;
  padding:14px 0;border-bottom:1px solid var(--linea);text-align:left;
}
.fila-ico{display:grid;place-items:center;width:38px;height:38px;background:var(--panel);border:1px solid var(--panel-borde);color:var(--txt-1)}
.fila-ico .ico{width:20px;height:20px}
.fila .t13{color:var(--txt-1)}
.fila .t11{margin-top:2px}
.fila>.ico{width:16px;height:16px;color:var(--txt-3)}
.datos{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;align-items:baseline}
.datos dt{font:600 var(--fs-9)/1.4 var(--f-label);letter-spacing:.18em;text-transform:uppercase;color:var(--txt-3)}
.datos dd{margin:0;text-align:right;color:var(--txt-1);font-size:var(--fs-13)}

/* Segmentado */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--ctl-borde);background:var(--ctl-fondo);margin-bottom:18px}
.seg button{
  height:40px;text-align:center;font:700 var(--fs-9)/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--txt-2);
  border-right:1px solid var(--ctl-borde);
}
.seg button:last-child{border-right:0}
.seg button[aria-selected="true"]{background:var(--btn2-fondo);color:var(--btn2-txt)}

/* Barra de vigencia */
.prog{height:6px;background:var(--linea);position:relative;overflow:hidden}
.prog i{position:absolute;left:0;top:0;bottom:0;width:var(--p);background:currentColor;transition:width .9s var(--ease)}

/* Interruptor cuadrado */
.inter{position:relative;width:44px;height:24px;border:1px solid var(--ctl-borde);background:var(--ctl-fondo);flex:none;transition:background .15s,border-color .15s}
.inter::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;background:var(--txt-3);transition:transform .18s var(--ease),background .15s}
.inter[aria-checked="true"]{background:color-mix(in srgb, var(--acc-graf) 22%, var(--sup-3));border-color:var(--acc-graf)}
.inter[aria-checked="true"]::after{transform:translateX(20px);background:var(--acc-graf)}

/* Cajetín: la ficha técnica como rótulo de plano */
.cajetin{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--n-4);background:var(--sup-1)}
.cajetin div{padding:9px 10px;border-right:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.cajetin div:nth-child(2n){border-right:0}
.cajetin div:nth-last-child(-n+2){border-bottom:0}
.cajetin .cap{display:block;margin-bottom:4px;font-size:var(--fs-9)}
.cajetin b{font:600 var(--fs-13)/1.2 var(--f-body);color:var(--txt-1)}
.cajetin .ancho{grid-column:1 / -1;border-right:0}

/* Línea de tiempo de mantenimientos */
.tiempo{position:relative;padding-left:26px}
.tiempo::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--n-4)}
.hito{position:relative;padding:0 0 22px}
.hito::before{content:"";position:absolute;left:-26px;top:5px;width:11px;height:11px;background:var(--sup-1);border:1px solid var(--txt-2)}
.hito.cert::before{background:var(--acc-graf);border-color:var(--acc-graf)}
.hito-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.hito .t13{color:var(--txt-1)}
.hito .chip{margin-top:8px}
@keyframes aparece{from{opacity:0;transform:translateY(-8px)}}

/* Estados de la reserva */
.estados{display:flex;flex-direction:column;gap:0}
.est{position:relative;display:grid;grid-template-columns:20px 1fr auto;gap:12px;align-items:center;padding:9px 0}
.est::before{content:"";position:absolute;left:9px;top:-9px;height:18px;width:1px;background:var(--n-4)}
.est:first-child::before{display:none}
.est i{width:20px;height:20px;border:1px solid var(--n-4);display:grid;place-items:center;background:var(--sup-2)}
.est i .ico{width:12px;height:12px;stroke-width:3px}
.est.hecho i{border-color:var(--pos);color:var(--pos)}
.est.actual i{border-color:var(--acc-graf);background:var(--acc-graf)}
.est.actual .etq{color:var(--acc-txt)}
.est .etq{font-size:var(--fs-9);color:var(--txt-3)}
.est.hecho .etq{color:var(--txt-1)}
.est time{font-size:var(--fs-11);color:var(--txt-3)}

.qr-caja{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:15px}
/* Un QR se lee oscuro sobre claro en los dos modos: Negro Carbón sobre Platino, con su margen */
.qr{width:112px;height:112px;background:var(--txt-1);padding:7px}
.qr svg{display:block;width:100%;height:100%}
.qr svg path{fill:var(--sup-1)}
[data-modo="documento"] .qr{background:var(--sup-1)}
[data-modo="documento"] .qr svg path{fill:var(--txt-1)}
[data-modo="documento"] [data-modo="noche"] .qr{background:var(--txt-1)}
[data-modo="documento"] [data-modo="noche"] .qr svg path{fill:var(--sup-1)}

/* Pie con el botón principal (pantallas de detalle) */
.pie-cta{
  position:sticky;bottom:var(--teclado, 0px);z-index:12;padding:14px 15px max(18px, calc(34px - var(--teclado, 0px)));margin-top:-8px;
  background:linear-gradient(to top, var(--sup-1) 72%, color-mix(in srgb, var(--sup-1) 0%, transparent));
}                                   /* con el teclado abierto, el botón principal queda justo encima */
.pie-cta .t11{text-align:center;margin-top:8px}

/* Calificación 1–5 */
.escala{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:6px 0 18px}
.escala button{height:58px;border:1px solid var(--ctl-borde);font:400 var(--fs-26)/1 var(--f-display);color:var(--txt-2);padding-top:3px}
.escala button[aria-checked="true"]{border-color:var(--sel-fondo);color:var(--sup-1);background:var(--sel-fondo)}
.fichas{display:flex;flex-wrap:wrap;gap:10px 6px;margin-bottom:18px}   /* 10 px entre filas: el área de toque de cada ficha llega a 44 sin pisar la de arriba */
.ficha{height:34px;padding:0 12px;border:1px solid var(--ctl-borde);font:600 var(--fs-9)/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--txt-2)}
.ficha[aria-pressed="true"]{border-color:var(--acc-graf);color:var(--acc-txt)}

/* Plano grande de Mi garaje */
.plano{position:relative;margin:2px -15px 10px;padding:4px 8px 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  background:
    linear-gradient(color-mix(in srgb, var(--linea) 55%, transparent) 1px, transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg, color-mix(in srgb, var(--linea) 55%, transparent) 1px, transparent 1px) 0 0/24px 24px;}
.plano svg{display:block;width:100%;height:auto}

/* Consulta al RUNT y medidor grande */
.consulta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0 16px;margin-bottom:14px;border-bottom:1px solid var(--linea)}
.consulta .t13{margin-top:4px}
.medidor{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;margin:0 0 18px}
.medidor .gauge{width:128px;height:128px}
.medidor .gauge .ico{width:34px;height:34px;margin:-19px 0 0 -17px}

/* Banda de estado grande */
.banda{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:15px;border:1px solid currentColor;margin-bottom:18px}
.banda .pyp-glifo{width:44px;height:44px}
.banda .pyp-glifo .ico{width:22px;height:22px}

/* Vacío */
.vacio{padding:40px 10px;text-align:center}
.vacio .t13{margin:10px auto 18px;max-width:28ch}

/* Presentación de marca al abrir (el flap se abre) */
.intro{
  position:absolute;inset:0;z-index:50;display:grid;place-items:center;background:var(--sup-1);
  transition:opacity .35s var(--ease);
}
.intro.fuera{opacity:0;pointer-events:none}
/* «DRS MOTORS» a 56 px mide 247 px: cabe en una línea y las líneas del flap tienen su ancho (a 64 px se partía en dos) */
.intro-logo{position:relative;width:250px;height:84px}
.intro-logo .palabra{position:absolute;left:0;right:0;top:0;text-align:center;white-space:nowrap;font:400 var(--fs-56)/1 var(--f-display);letter-spacing:.06em;color:var(--txt-1);clip-path:inset(100% 0 0 0);animation:intro-sube .5s .45s var(--ease) forwards}
.intro-logo .l1,.intro-logo .l2{position:absolute;left:0;right:0;transform-origin:center}
.intro-logo .l1{top:62px;height:1.5px;background:var(--txt-2);animation:intro-l1 .9s var(--ease) both}
.intro-logo .l2{top:68px;height:2.5px;background:var(--acc-1);animation:intro-l2 .9s var(--ease) both}
.intro-sub{position:absolute;left:0;right:0;top:92px;text-align:center;opacity:0;animation:bp-aparece .4s .9s forwards}
/* Con «reducir movimiento» la presentación de marca no se muestra */
@media (prefers-reduced-motion: reduce){ .intro{display:none} }
@keyframes intro-l1{0%{transform:scaleX(0) translateY(4px)}45%{transform:scaleX(1) translateY(4px)}100%{transform:scaleX(1) translateY(0)}}
@keyframes intro-l2{0%{transform:scaleX(0) translateY(-2px)}45%{transform:scaleX(1) translateY(-2px)}100%{transform:scaleX(1) translateY(0)}}
@keyframes intro-sube{to{clip-path:inset(0 0 0 0)}}

/* Números que suben */
.sube{display:inline-block;animation:aparece .5s var(--ease)}

/* Misma condición que css/movil.css: celular vertical, app instalada o celular de lado */
@media (max-width: 759px), (display-mode: standalone), (pointer: coarse) and (max-height: 500px){
  .tel{width:100%;height:100%}
  .tel-estado,.tel-home{display:none}
  .tel-vista{top:0}
  .nav{bottom:max(12px, env(safe-area-inset-bottom))}
  .pie-cta{padding-bottom:max(18px, calc(env(safe-area-inset-bottom) - var(--teclado, 0px)))}
}