/* ══════════════════════════════════════════════════════════════════════════
 * MOVIA — Design System (fuente única)
 *
 * Concepto: "dos recorridos que comparten tramo". El lenguaje visual sale de
 * la señalética vial argentina: azul vial de los carteles de servicios,
 * amarillo de la línea central de la ruta, gris asfalto.
 *
 * Reglas:
 *  - El AMARILLO RUTA es la firma: se usa SOLO para la traza compartida, el
 *    resaltado de match y detalles gráficos. NUNCA como texto sobre blanco
 *    (1,8:1). Sobre asfalto sí (7,9:1).
 *  - El ROJO queda reservado a seguridad/SOS. Prohibido en cualquier otro uso.
 *  - Tipografía: Barlow (cuerpo e interfaz) + Barlow Condensed (números
 *    grandes y datos). Barlow nace de la señalética vial de California:
 *    es la letra de los carteles de ruta.
 *  - Fondo claro siempre. Icono siempre con etiqueta. Área táctil ≥ 48 px.
 * ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Color */
  --asfalto: #232A33;        /* texto principal, superficies oscuras */
  --vial: #164A78;           /* primario: botones y links (blanco encima: 9,2:1) */
  --vial-hover: #0F3A61;
  --vial-suave: #E7EEF5;     /* fondo suave del primario */
  --ruta: #F6B40E;           /* FIRMA: la línea amarilla. Nunca texto sobre blanco */
  --gris: #5A646E;           /* texto secundario (6:1 sobre blanco) */
  --gris-claro: #8B959F;     /* solo decorativo, nunca texto chico */
  --fondo: #F2F4F6;
  --superficie: #FFFFFF;
  --borde: #D8DEE3;
  --borde-input: #75828D;    /* borde de campos: 3,9:1 sobre blanco (WCAG 1.4.11) */
  --confirmado: #146B46;     /* verde: viaje confirmado (blanco encima: 6,5:1) */
  --confirmado-suave: #E8F3EE;
  --atencion: #7A5410;       /* ámbar oscuro, apto texto (6,8:1) */
  --atencion-suave: #FBF3E0;
  --sos: #B3261E;            /* SOLO seguridad/SOS (blanco encima: 6,5:1) */
  --sos-suave: #FBEAE8;

  /* Tipografía */
  --font: 'Barlow', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-datos: 'Barlow Condensed', 'Barlow', sans-serif;

  /* Forma */
  --radio: 14px;
  --radio-control: 10px;
  --radio-pill: 999px;
  --sombra-1: 0 1px 2px rgba(35, 42, 51, 0.06);
  --sombra-2: 0 4px 14px rgba(35, 42, 51, 0.10);
  --transicion: 180ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Toque */
  --tap: 48px;
}

/* ── Pares de contraste declarados (los mide el Design QA, WCAG AA) ──
 * No borrar: son la prueba ejecutable de que la paleta es accesible. */
.qa-texto-sobre-blanco { color: #232A33; background: #FFFFFF; }
.qa-texto-sobre-fondo { color: #232A33; background: #F2F4F6; }
.qa-secundario-sobre-blanco { color: #5A646E; background: #FFFFFF; }
.qa-secundario-sobre-fondo { color: #5A646E; background: #F2F4F6; }
.qa-blanco-sobre-vial { color: #FFFFFF; background: #164A78; }
.qa-blanco-sobre-asfalto { color: #FFFFFF; background: #232A33; }
.qa-asfalto-sobre-ruta { color: #232A33; background: #F6B40E; }
.qa-blanco-sobre-confirmado { color: #FFFFFF; background: #146B46; }
.qa-confirmado-sobre-suave { color: #146B46; background: #E8F3EE; }
.qa-atencion-sobre-suave { color: #7A5410; background: #FBF3E0; }
.qa-blanco-sobre-sos { color: #FFFFFF; background: #B3261E; }
.qa-sos-sobre-suave { color: #B3261E; background: #FBEAE8; }
.qa-vial-sobre-suave { color: #164A78; background: #E7EEF5; }
.qa-vial-sobre-blanco { color: #164A78; background: #FFFFFF; }