/*
 * Identidad de Piloto 28: la de la web aprobada (piloto28.mx, diseño v4.1 con base A5W).
 * Colores, tipografías y voces. Lo comparten la pantalla pública, la consola, el registro
 * en tablet y el formulario. Hasta el 12 nov 2026 aquí vivía la identidad v3.1 (ámbar y Saira).
 * Lo que se dibuja en SVG (licencia, rótulo del clip) toma lo mismo de packages/shared/src/identidad.ts.
 */

@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('/estatico/fuentes/barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url('/estatico/fuentes/barlow-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url('/estatico/fuentes/barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 500; font-display: swap; src: url('/estatico/fuentes/barlow-condensed-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url('/estatico/fuentes/barlow-condensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url('/estatico/fuentes/barlow-condensed-700.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-weight: 400; font-display: swap; src: url('/estatico/fuentes/space-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-weight: 700; font-display: swap; src: url('/estatico/fuentes/space-mono-700.woff2') format('woff2'); }
/* Archivo ancha: el nombre de marca de la web y, aquí, también nombres de piloto y números. */
@font-face {
  font-family: 'Archivo';
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/estatico/fuentes/archivo-variable.woff2') format('woff2');
}

:root {
  --noche: #121316;
  --tarjeta: #1D1F23;
  --borde: #2C2E33;
  --gris: #6E737B;
  --plata: #B4B8BF;
  --hueso: #F1EDE6;
  /* Único acento: un sector del símbolo, el botón principal y el tiempo que importa. */
  --carmin: #C0272D;
  --carmin-hover: #D93A3A;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--hueso); font-family: 'Barlow', system-ui, sans-serif; }

/* Nombres de piloto y números: Archivo ancha, como el nombre de marca. Nunca tiempos ni instrucciones. */
.carrera { font-family: 'Archivo', 'Barlow Condensed', sans-serif; font-weight: 800; font-stretch: 125%; text-transform: uppercase; line-height: 1; }
/* Frases del momento («Hoy eres el piloto.»): como los titulares de la web. */
.titular { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; }
/* El nombre de marca, como en la cabecera de la web. */
.marca-nombre { font-family: 'Archivo', 'Barlow', sans-serif; font-weight: 700; font-stretch: 125%; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hueso); }
/* Títulos, torre y etiquetas grandes. */
.titulo { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
/* Tiempos, etiquetas, fechas y diferencias. */
.dato { font-family: 'Space Mono', ui-monospace, monospace; }
.etiqueta { font-family: 'Space Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--plata); }

/* Cuadro de una vuelta. Los nombres vienen del cronometraje; con un solo acento se pintan así: «morado» (mejor del día) en carmín, «verde» (mejor personal) en hueso y «plata» (sin mejora) en gris. */
.cuadro { display: inline-block; width: 10px; height: 10px; flex: none; }
.cuadro.morado, .barra.morado { background: var(--carmin); }
.cuadro.verde, .barra.verde { background: var(--hueso); }
.cuadro.plata, .barra.plata { background: var(--gris); }