/* Herramientas guiadas (cotizador, prescripción): controles a un lado y
   resultado al otro. Salió del <style> del cotizador el 29-sep-2026 para
   que la página de prescripción use los mismos componentes sin copiarlos. */
/* Cotizador: controles a la izquierda, liquidación a la derecha (pegada al
   hacer scroll en escritorio). En móvil la liquidación va debajo de los
   controles. Las alturas están reservadas: cambiar una opción cambia
   números, no la posición de nada. */
.cz-grid{display:grid;gap:1.5rem;margin:0 0 1rem}
/* 21-oct-2026: una opción larga del select ensanchaba la columna y corría la
   página de lado a 320 px. Los hijos de una rejilla no encogen sin min-width:0. */
.cz-grid>*{min-width:0}
.cz-controles select{min-width:0;max-width:100%}
@media(min-width:56rem){.cz-grid{grid-template-columns:1fr 1fr;gap:2rem;align-items:start}}
.cz-controles .campo{margin-bottom:1.15rem}
.cz-controles select,.cz-controles input[type=text]{width:100%;font:400 1rem/1.5 var(--sans);color:var(--texto);background:var(--noche);
  border:1px solid var(--borde-fuerte);border-radius:var(--r-campo);padding:.8rem .95rem;min-height:52px;appearance:none;-webkit-appearance:none}
.cz-controles select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239DABB6' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .95rem center;padding-right:2.4rem}
.cz-controles select:focus,.cz-controles input[type=text]:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(79,190,187,.16)}
.cz-controles .ayuda{font-size:.79rem;line-height:1.55;color:var(--texto-3);margin:0}
.cz-seg{display:grid;border:1px solid var(--borde-fuerte);border-radius:var(--r-boton);overflow:hidden;background:rgba(16,32,46,.55)}
.cz-seg.c4{grid-template-columns:repeat(4,1fr)}
.cz-seg.c2{grid-template-columns:repeat(2,1fr)}
.cz-seg input{position:absolute;opacity:0;width:1px;height:1px}
.cz-seg label{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:.4rem .3rem;cursor:pointer;
  border-left:1px solid var(--borde);color:var(--texto-2);font-size:.78rem;font-weight:500;line-height:1.2;transition:background .16s ease,color .16s ease}
.cz-seg label:first-of-type{border-left:0}
.cz-seg label:hover{color:var(--texto);background:var(--sup-alta)}
.cz-seg input:checked+label{color:var(--sobre-teal);background:var(--teal-claro);font-weight:600}
.cz-seg input:focus-visible+label{outline:2px solid var(--teal);outline-offset:-3px}
@media(min-width:40rem){.cz-seg label{font-size:.88rem;font-weight:400}}
.cz-valor{position:relative}
.cz-valor .cz-signo{position:absolute;left:.95rem;top:50%;transform:translateY(-50%);font-family:var(--mono);color:var(--texto-3);pointer-events:none}
.cz-valor input{padding-left:2rem!important;font-family:var(--mono)!important;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.cz-check{display:flex;gap:.7rem;align-items:flex-start;cursor:pointer;padding:.85rem .95rem;background:var(--sup);border:1px solid var(--borde);border-radius:var(--r-chip)}
.cz-check input{width:18px;height:18px;margin:.15rem 0 0;accent-color:var(--teal);flex:none}
.cz-check span{font-size:.88rem;line-height:1.5;color:var(--texto-2)}
.cz-check:has(input:checked){border-color:rgba(79,190,187,.5);background:var(--sup-alta)}
.cz-check:has(input:checked) span{color:var(--texto)}
.cz-oculto[hidden]{display:none}
.cz-panel{background:var(--sup);border:1px solid var(--borde-fuerte);border-radius:var(--r-card);padding:1.3rem 1.4rem 1.4rem;
  box-shadow:0 0 0 1px rgba(79,190,187,.08),0 24px 48px -30px rgba(79,190,187,.45)}
@media(min-width:56rem){.cz-panel{position:sticky;top:1rem}}
.cz-panel .rot{display:block;font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:var(--texto-3);margin:0 0 .9rem}
.cz-panel .cuenta-tabla{border:0;border-radius:0;background:transparent;font-size:.92rem}
.cz-panel .cuenta-tabla th,.cz-panel .cuenta-tabla td{padding:.7rem 0;vertical-align:top}
.cz-panel .cuenta-tabla th small{display:block;font-family:var(--mono);font-size:.75rem;line-height:1.5;letter-spacing:.03em;color:var(--texto-3);margin-top:.25rem;font-weight:400}
.cz-panel .cuenta-tabla th small.cz-est{display:inline;font-family:var(--sans);font-size:.8rem;letter-spacing:0;margin:0;color:var(--texto-3)}
.cz-panel .cuenta-tabla td.sin{color:var(--texto-3);font-size:.8rem;font-family:var(--sans);text-align:right}
.cz-panel .cuenta-tabla tr.tasa.cero td{color:var(--texto-3)}
.cz-panel .cuenta-tabla tr.tasa:not(.cero) td{color:var(--alerta)}
.cz-panel .cuenta-tabla tfoot td{font-size:1.5rem}
.cz-panel .cuenta-tabla tfoot th small{display:block;font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:var(--texto-3);margin-top:.2rem;font-weight:400}
.cz-partes{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:1rem 0 0}
.cz-partes>div{background:var(--noche);border:1px solid var(--borde);border-radius:var(--r-chip);padding:.9rem 1rem}
.cz-partes b{display:block;font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:var(--teal);margin:0 0 .35rem}
.cz-partes .n{display:block;font-family:var(--mono);font-weight:500;font-size:1.35rem;line-height:1.1;letter-spacing:-.03em;color:var(--texto);font-variant-numeric:tabular-nums}
.cz-partes small{display:block;font-size:.75rem;line-height:1.5;color:var(--texto-3);margin-top:.35rem}
.cz-partes.una{grid-template-columns:1fr}
.cz-partes[hidden]{display:none}
.cz-reparto-nota{font-size:.8rem;line-height:1.55;color:var(--texto-2);margin:.7rem 0 0}
.cz-cita{margin-top:1rem}
.cz-acciones{display:grid;gap:.6rem;margin:1.2rem 0 0}
.cz-acciones .btn{width:100%}
.cz-acciones .btn-sec{width:100%}
.cz-acciones .ok{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--exito);min-height:1.2em;margin:0;text-align:center}
.cz-acciones .terc{font-size:.85rem;text-align:center;margin:.3rem 0 0}
.cz-acciones .terc a{color:var(--texto-2)}
.cz-nojs{margin:.5rem 0 0}

/* /prescripcion, tabla de tarifas (29-sep-2026): el detalle («$120.000 cada una»)
   salía pegado a la etiqueta («2 multas$120.000») porque el small solo tenía
   estilo dentro del panel del cotizador. */
.atlas-sec .cuenta-tabla th small{display:block;font-size:.8rem;line-height:1.45;color:var(--texto-3);font-weight:400;margin-top:.2rem}

/* ── Total fijo al pie, en el celular (22-oct-2026) ──────────────────────
   Solo bajo 56 rem, donde el panel queda debajo de los campos. Deja libre
   la esquina del botón de WhatsApp (48 px a la derecha) y reserva su alto al
   pie de la página para no tapar el último campo. Se va cuando el total del
   panel está a la vista; con menos movimiento aparece y se va sin desplazarse. */
.cz-fijo{display:none}
@media(max-width:55.99rem){
  body.cz-con-fijo{padding-bottom:7.5rem}
  /* Un campo enfocado o llevado a la vista queda por encima de la barra. */
  html.cz-con-fijo{scroll-padding-bottom:8rem}
  .cz-fijo:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:.8rem;row-gap:.35rem;
    position:fixed;left:0;right:0;bottom:0;z-index:24;
    padding:.6rem 4.6rem calc(.6rem + env(safe-area-inset-bottom)) 1rem;
    background:rgba(16,32,46,.97);border-top:1px solid var(--borde-fuerte);
    box-shadow:0 -12px 28px -18px rgba(0,0,0,.9);
    visibility:visible;
    transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .2s ease,visibility 0s linear 0s}
  /* Fuera de la vista: visibility:hidden al terminar de salir, así el
     enlace escondido no recibe foco. */
  .cz-fijo.cz-fijo-fuera{transform:translateY(110%);opacity:0;pointer-events:none;visibility:hidden;
    transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .2s ease,visibility 0s linear .25s}
  .cz-fijo-total{grid-column:1;display:flex;align-items:baseline;gap:.55rem;margin:0}
  .cz-fijo-total span{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-2)}
  .cz-fijo-total b{font-family:var(--mono);font-weight:500;font-size:1.35rem;color:var(--teal-claro);font-variant-numeric:tabular-nums}
  .cz-fijo-ir{grid-column:2;grid-row:1;display:inline-flex;align-items:center;min-height:44px;font-size:.85rem;color:var(--teal-claro)}
  .cz-fijo-partes{grid-column:1/-1}
  .cz-fijo-partes[hidden]{display:none}
  .cz-fijo-barra{display:flex;gap:2px;height:8px;border-radius:2px;overflow:hidden}
  .cz-fijo-barra i{flex-basis:0;min-width:2px}
  .cz-f-c{background:var(--teal)}
  .cz-f-v{background:#7D8C98}
  .cz-fijo-ley{display:flex;justify-content:space-between;gap:.8rem;margin:.3rem 0 0;font-size:.75rem;color:var(--texto-2)}
  .cz-fijo-ley b{font-size:.82rem;color:var(--texto);font-variant-numeric:tabular-nums}
  .cz-fijo-ley span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:.35rem;vertical-align:0}
  .cz-fijo-ley span:first-child::before{background:var(--teal)}
  .cz-fijo-ley span:last-child::before{background:#7D8C98}
  .cz-con-fijo .wa{z-index:26}
}
/* Entre 30 y 56 rem el botón de WhatsApp lleva texto: más espacio a la derecha. */
@media(min-width:30rem) and (max-width:55.99rem){.cz-fijo:not([hidden]){padding-right:11rem}}
@media(prefers-reduced-motion:reduce){.cz-fijo{transition:opacity .01ms}}
/* Escritorio: el panel es más alto que la pantalla, así que «sticky» no lo
   puede fijar entero. Lo que se fija es la fila del total, al pie de la
   columna, mientras se llenan los campos (22-oct-2026). */
@media(min-width:56rem){
  .cz-panel .cuenta-tabla{overflow:visible}
  .cz-panel .cuenta-tabla tfoot th,.cz-panel .cuenta-tabla tfoot td{position:sticky;bottom:0;z-index:1;background:var(--sup);
    box-shadow:0 -1px 0 var(--borde-fuerte),0 -14px 18px -14px rgba(0,0,0,.7)}
}

/* camino de compra 22-oct ─────────────────────────────────────────────────
   Diagnóstico, contratar y pagar llevan <main class="camino">. Todo va
   acotado a esa clase: app.css no se toca desde aquí. */

/* Los select de contratar no tenían estilo: letra de 13 px (iOS hace zoom
   al tocarlos), 19 px de alto y el control blanco del sistema sobre el fondo
   noche. Mismo campo que los input de al lado. */
.camino .campo select{width:100%;font:400 1rem/1.5 var(--sans);color:var(--texto);background:var(--fondo);
  border:1px solid var(--borde-fuerte);border-radius:var(--r-campo);padding:.85rem 2.4rem .85rem 1rem;min-height:50px;
  appearance:none;-webkit-appearance:none;transition:border-color .16s ease,box-shadow .16s ease;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239DABB6' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center}
.camino .campo select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(79,190,187,.14)}
.camino .campo select:focus-visible{box-shadow:0 0 0 3px rgba(79,190,187,.3)}
.camino .campo select[aria-invalid=true]{border-color:var(--peligro)}
.camino .campo select option{background:var(--sup);color:var(--texto)}

/* El campo del asistente medía 15,2 px: iOS hacía zoom al escribir. */
.camino .ag-form input{font-size:1rem}

/* El aviso permanente va pegado arriba: lo que se lleva a la vista con
   scrollIntoView quedaba debajo de él (la placa fijada, el resultado, el
   folio, los errores). */
.camino #placa-fijada,.camino #diag-resultado,.camino #diag-error,.camino #listo,.camino #errores,
.camino .paso-p,.camino h2[tabindex]{scroll-margin-top:5.5rem}
@media(min-width:48rem){.camino #placa-fijada,.camino #diag-resultado,.camino #diag-error,.camino #listo,
  .camino #errores,.camino .paso-p,.camino h2[tabindex]{scroll-margin-top:3.5rem}}
.camino h2[tabindex]:focus{outline:none}
.camino h2[tabindex]:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
.camino .paso-p:focus{outline:none}

/* «Cambiar» la placa: objetivo táctil de 44 px. */
.camino .placa-fijada a{display:inline-flex;align-items:center;min-height:44px;margin:-.6rem 0}

/* «¿Su vehículo necesita algo más?» no tenía estilo: el título salía más
   chico que el párrafo. Igual que la captura y el asistente. */
.camino .conexos .cap-t{font-family:var(--display);font-weight:700;font-size:1.08rem;line-height:1.35;color:var(--texto);margin:0 0 .4rem}
.camino .conexos .cap-d{font-size:.89rem;line-height:1.6;color:var(--texto-2);margin:0 0 1rem}

/* Ningún texto del camino baja de 12 px (DESIGN §11). Rótulos, fuentes y
   letra menuda estaban entre 9,4 y 11,7 px. */
.camino .rotulo span,.camino .progreso span,.camino .paso-n,.camino .placa-fijada .pf-rot,
.camino .veredicto .sello,.camino .sello,.camino .sugerido .rot,.camino .rescate .rot,.camino .hallazgos h3,
.camino .serv-rot,.camino .resumen-cuenta h3,.camino .rc-ley b{font-size:.75rem}
.camino .hallazgos p.src,.camino .rescate p.src,.camino .conexos .src,.camino .veredicto .ref,
.camino .pie-fuente{font-size:.75rem}
.camino .veredicto .ref code,.camino .pie-fuente code{font-size:inherit}

/* En /pagar la cuenta es una columna única: no se pega al hacer scroll. */
.camino .resumen-cuenta.rc-estatico{position:static}

/* El folio no se parte en el guion («TR-» arriba, «99-6298» abajo). */
.camino .sin-corte{white-space:nowrap}