/* Tokens y primitivas que comparten todas las páginas, con el aspecto
 * de tactika.mx: fondo blanco, tinta casi negra, botones negros
 * rectangulares y el verde salvia de la marca para los acentos.
 *
 * Salió del `<style>` de `cotizador/index.html`, que era donde vivía
 * cuando solo había una página. Lo mismo el buscador de vehículo,
 * cuando la página de cotización empezó a pintarlo igual. Aquí está solo lo que de verdad usan
 * las dos: el color, la tipografía y la tarjeta. Lo propio de cada
 * página se queda en la página — un archivo común que crece con reglas
 * que solo usa una deja de ser común y se vuelve un cajón.
 *
 * Contraste: los pares de texto sobre superficie cumplen 4.5:1 salvo
 * `--texto-3`, que da ~3.4:1 sobre el fondo claro y por eso NO se usa
 * para texto de cuerpo: es para etiquetas grandes y adornos.
 */

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/sitio/comun/dm-sans.woff2") format("woff2");
}

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --superficie: #ffffff;
  --superficie-2: #f3f4f1;
  --crema: #f8f4ea;
  --texto: #0f110e;
  --texto-2: #565d57;
  --texto-3: #848b85;
  --borde: #dfe3de;
  --borde-sutil: #ecefeb;
  /* El acento es la tinta: botones negros. El color de la marca es la salvia. */
  --acento: #0f110e;
  --acento-hover: #2b2f2a;
  --sobre-acento: #ffffff;
  --salvia: #4b5e4a;
  --salvia-hover: #3d4e3c;
  --sobre-salvia: #ffffff;
  --salvia-tenue: #e8ede7;
  /* La salvia cuando es texto o enlace: en oscuro hay que aclararla. */
  --salvia-texto: #4b5e4a;
  --exito: #1d8a4e;
  --alerta: #b25000;
  --error: #a3341c;
  --radio: 10px;
  --radio-s: 6px;
  /* Solo para lo que flota (desplegables); las tarjetas van planas. */
  --sombra: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.06);

  /* --- gráficas -----------------------------------------------------
   * Paleta categórica validada con el verificador de la guía de
   * visualización, en los dos modos y en el orden en que se apilan:
   * el peor par adyacente da ΔE 9.1 en protanopia y 22.9 en visión
   * normal, por encima de los umbrales de 8 y 15.
   *
   * El orden NO es decorativo: es el que separa los tonos que van
   * pegados en una barra apilada. Reordenarlo sin volver a validar
   * puede juntar dos que un daltónico no distingue.
   *
   * En claro, `--serie-1` y `--serie-2` quedan por debajo de 3:1
   * contra la superficie. Es admisible sólo porque cada serie lleva
   * SIEMPRE etiqueta directa y tabla de datos; si alguna gráfica se
   * queda sin una de las dos, estos dos tonos hay que oscurecerlos.
   */
  --serie-1: #1baf7a;   /* ok            */
  --serie-2: #eda100;   /* agotada       */
  --serie-3: #4a3aa7;   /* definitivo    */
  --serie-4: #eb6834;   /* sesion        */
  --serie-5: #2a78d6;   /* transitorio   */
  --serie-6: #e34948;   /* sucia         */

  /* Lo administrativo —expirada, cancelada— no es un fallo del portal
   * y no debe competir por atención con los que sí lo son. */
  --serie-nula: #a1a1a6;

  /* Las aseguradoras. Trío validado con --pairs all: el peor par es
   * banorte↔gnp, ΔE 15.2 en deutan y 21.5 en visión normal.
   *
   * Banorte NO lleva el rojo de su marca: contra el naranja de Qualitas
   * da ΔE 11.7 en visión normal, por debajo del piso de 15, y en las
   * gráficas apiladas las dos series se vuelven la misma. El rosa es lo
   * más cercano a su rojo que sí se distingue. */
  --gnp: #2a78d6;
  --qualitas: #eb6834;
  --banorte: #bd1b7f;

  /* Rampa secuencial del mapa horario: un solo tono, claro a oscuro.
   * Nunca un arcoíris — el arcoíris inventa fronteras donde los datos
   * no las tienen. */
  --mapa-0: #e6eefa;
  --mapa-1: #cfe2f7;
  --mapa-2: #93c0ee;
  --mapa-3: #4f95dd;
  --mapa-4: #1f60ab;

  --rejilla: #ecefeb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121411;
    --superficie: #1a1d19;
    --superficie-2: #232722;
    --crema: #1d201b;
    --texto: #f1f3ee;
    --texto-2: #a9b0a8;
    --texto-3: #7b827a;
    --borde: #353a34;
    --borde-sutil: #2a2e29;
    --acento: #f1f3ee;
    --acento-hover: #ffffff;
    --sobre-acento: #121411;
    --salvia: #55705a;
    --salvia-hover: #64826a;
    --sobre-salvia: #ffffff;
    --salvia-tenue: #263028;
    --salvia-texto: #9dbaa2;
    --exito: #30d158;
    --alerta: #ff9f0a;
    --error: #ee9a82;
    --sombra: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.2);

    /* Los mismos seis tonos, re-escalonados para el fondo oscuro y
     * validados como conjunto: no es un volteo automático del claro.
     * Aquí los seis superan 3:1 contra la superficie. */
    --serie-1: #199e70;
    --serie-2: #c98500;
    --serie-3: #9085e9;
    --serie-4: #d95926;
    --serie-5: #3987e5;
    --serie-6: #e66767;
    --serie-nula: #6e6e73;

    --gnp: #3987e5;
    --qualitas: #d95926;
    /* Re-escalonado, no aclarado automáticamente: el paso oscuro del
     * rosa tiene que subir de luminosidad para superar 3:1 contra la
     * superficie sin acercarse al naranja. */
    --banorte: #e05aa0;

    --mapa-0: #16283c;
    --mapa-1: #1e3a57;
    --mapa-2: #245683;
    --mapa-3: #2e77b5;
    --mapa-4: #4f9ee0;

    --rejilla: #2a2e29;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

/* Cifras alineadas en columna. Sin esto, una tabla de números baila al
 * refrescarse y parece que cambió más de lo que cambió. */
.cifra, table td, table th { font-variant-numeric: tabular-nums; }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde-sutil);
  border-radius: var(--radio);
}
.tarjeta > .cuerpo { padding: 28px; }

/* --- barra ------------------------------------------------------------
 * La misma en todas las páginas: el logo y, en los portales, la
 * navegación entre ellos.
 */
.barra { position: sticky; top: 0; z-index: 30; background: var(--bg);
         border-bottom: 1px solid var(--borde-sutil); }
.barra-dentro { max-width: 1120px; margin: 0 auto; min-height: 60px;
                padding: 0 20px; padding-top: env(safe-area-inset-top);
                display: flex; align-items: center; justify-content: space-between;
                gap: 8px 20px; }
.barra .marca { display: flex; align-items: center; gap: 14px; }
.barra .marca img { display: block; height: 38px; width: auto; }
.barra nav { display: flex; gap: 0 20px; overflow-x: auto; scrollbar-width: none; }
.barra nav a { display: flex; align-items: center; min-height: 60px;
               font-size: 14px; font-weight: 500; white-space: nowrap;
               color: var(--texto-2); text-decoration: none;
               border-bottom: 2px solid transparent; margin-bottom: -1px; }
.barra nav a:hover { color: var(--texto); }
.barra nav a[aria-current="page"] { color: var(--texto);
                                    border-bottom-color: var(--texto); }
@media (max-width: 640px) {
  .barra.portal .barra-dentro { flex-wrap: wrap; }
  .barra.portal .marca { padding-top: 10px; }
  .barra nav { width: 100%; }
  .barra nav a { min-height: 44px; }
}

/* --- página de portal: ancho, título y bajada ------------------------- */
.envoltura { max-width: 980px; margin: 0 auto; padding: 0 22px 96px; }
.encabezado { padding: 48px 0 28px; }
.encabezado h1 { margin: 0 0 8px; font-size: clamp(30px, 5vw, 40px);
                 line-height: 1.08; font-weight: 700; letter-spacing: -.03em;
                 text-wrap: balance; }
.subtitulo { margin: 0; max-width: 62ch; font-size: 17px; color: var(--texto-2); }

/* --- botones ---------------------------------------------------------- */
.boton { appearance: none; min-height: 40px; padding: 0 18px; font: inherit;
         font-size: 14px; font-weight: 600; white-space: nowrap;
         color: var(--sobre-acento); background: var(--acento); border: 0;
         border-radius: var(--radio-s); cursor: pointer;
         transition: background .15s, opacity .15s; }
.boton:hover:not([disabled]) { background: var(--acento-hover); }
.boton[disabled] { opacity: .45; cursor: default; }
.boton.secundario { color: var(--texto); background: transparent;
                    border: 1px solid var(--borde); }
.boton.secundario:hover:not([disabled]) { background: var(--superficie-2);
                                          border-color: var(--texto); }

.visualmente-oculto { position: absolute; width: 1px; height: 1px; padding: 0;
                      margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
                      white-space: nowrap; border: 0; }

.segmentado {
  display: inline-flex;
  background: var(--superficie-2);
  border-radius: var(--radio-s);
  padding: 2px;
  gap: 2px;
}
.segmentado button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--texto);
  font: inherit;
  font-weight: 500;
  font-size: 14px;
  padding: 7px 18px;
  border-radius: 4px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
  white-space: nowrap;
}
.segmentado button[aria-pressed="true"] {
  background: var(--superficie);
  box-shadow: 0 1px 3px rgba(0,0,0,.10);
}
@media (prefers-color-scheme: dark) {
  .segmentado button[aria-pressed="true"] { background: var(--borde); }
}

/* Foco visible en todo lo enfocable. Va aquí y no por página: que se
 * pueda navegar con teclado no es una decisión de cada pantalla. */
:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--salvia);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* --- buscador de vehículo -------------------------------------------
 * Lo usan el comparador y la página de cotización, que pintan el mismo
 * marcado porque lo arma el mismo `Cotizar.buscador`.
 */
.buscador { position: relative; }

.sugerencias {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: 4px; list-style: none;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-s); box-shadow: var(--sombra);
  max-height: 320px; overflow-y: auto;
}
.sugerencias li {
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
}
.sugerencias li[aria-selected="true"], .sugerencias li:hover {
  background: var(--superficie-2);
}
.sugerencias .titulo { font-weight: 600; }
.sugerencias .detalle {
  font-size: 12px; color: var(--texto-2); line-height: 1.35;
}
.sugerencias .vacio { color: var(--texto-3); cursor: default; }
.sugerencias .vacio:hover { background: none; }

/* Sin esto la tarjeta no se oculta nunca: `display: flex` de abajo le
   gana por especificidad a la regla [hidden] del navegador. */
.elegido[hidden] { display: none; }

.elegido {
  margin-top: 10px; padding: 10px 12px;
  background: var(--superficie-2); border-radius: var(--radio-s);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
}
.elegido .quien { font-weight: 600; }
.elegido .version { font-size: 12px; color: var(--texto-2); width: 100%; }
.elegido .rasgos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.elegido .rasgo {
  font-size: 11px; padding: 2px 7px; border-radius: 99px;
  background: var(--superficie); border: 1px solid var(--borde-sutil);
  color: var(--texto-2);
}
.elegido button {
  margin-left: auto; background: none; border: 0; padding: 0;
  color: var(--salvia-texto); font: inherit; font-size: 13px; cursor: pointer;
}

/* --- elegir otra versión ---------------------------------------------
 * El marcado lo arma `Cotizar.versiones` y lo pintan las tres páginas.
 */
.versiones { margin-top: 14px; border: 1px solid var(--borde-sutil);
             border-radius: var(--radio-s); background: var(--superficie); }
.versiones .cotizado { padding: 10px 14px; font-size: 14px; display: flex;
                       flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.versiones summary.cotizado { cursor: pointer; list-style: none; }
.versiones summary.cotizado::-webkit-details-marker { display: none; }
/* Flex quita el triángulo nativo; este dice que se puede desplegar. */
.versiones summary.cotizado::before { content: "▸"; color: var(--texto-2); }
.versiones[open] summary.cotizado::before { content: "▾"; }
.versiones .cotizado .rotulo { font-size: 12px; color: var(--texto-2); }
.versiones .cotizado .coche { font-weight: 600; color: var(--texto); }
.versiones .cotizado .cambiar { font-size: 13px; font-weight: 500; color: var(--salvia-texto); }
.versiones .cotizado .cambiar.dudosa { color: var(--alerta); }
.versiones .cotizado .pista { font-size: 13px; color: var(--texto-2); }
.versiones[open] summary { border-bottom: 1px solid var(--borde-sutil); }
.cuerpo-versiones { padding: 12px 14px; display: grid; gap: 10px; }
.cuerpo-versiones .alerta { margin: 0; font-size: 13px; color: var(--alerta); }
.versiones fieldset.opciones { border: 0; margin: 0; padding: 0; display: grid; gap: 2px; }
.versiones .opciones legend { font-size: 12px; font-weight: 600; color: var(--texto-2);
                              margin-bottom: 4px; }
.versiones .opcion { display: grid; grid-template-columns: auto 1fr auto; gap: 10px;
                     align-items: center; padding: 6px 8px; border-radius: 6px;
                     cursor: pointer; font-size: 14px; }
.versiones .opcion:hover, .versiones .opcion.cotizada { background: var(--superficie-2); }
.versiones .opcion .marca { font-size: 11px; font-weight: 600; color: var(--texto-2);
                            margin-left: 6px; }
.versiones .opcion .puntaje { font-size: 12px; color: var(--texto-2); min-width: 3.5em;
                              text-align: right; }
.acciones-versiones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.versiones .resultado { font-size: 13px; color: var(--texto-2); }
.versiones .resultado.error { color: var(--error); }
.versiones .fila-clave[hidden] { display: none; }
.versiones .fila-clave { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.versiones .fila-clave input { flex: 1; min-width: 12em; padding: 7px 10px; font: inherit;
                               color: var(--texto); background: var(--superficie);
                               border: 1px solid var(--borde); border-radius: var(--radio-s); }