/* ===========================================================================
   Novaris · Cronometraje — consola del relevo en línea.
   Hallmark · macrostructure: Marca + hoja de tiempos · theme: Novaris field

   De la misma casa que `tablero-web/tablero.html`: los mismos tokens, la misma
   escala de cinco pasos y la misma idea de fondo — el género de esto es la HOJA
   DE RESULTADOS de atletismo, no el panel de control. De ahí:

     · Cero cajas y cero sombras (`--sombra: none` en el tablero). La jerarquía
       la hacen el tamaño del texto y las reglas de 1 px, no la elevación.
     · Radios de 2-3 px. Es un instrumento, no una tarjeta.
     · Dos papeles tipográficos: condensada para etiquetas y encabezados,
       monoespaciada para toda cifra. Ninguna se descarga.
     · Toda cifra con `tabular-nums`: en una tabla de tiempos las columnas no
       bailan.

   Diferencia deliberada con el tablero, y la razón: aquí la barra de marca es
   #162B4E exacto, el azul de la app de PC, porque los dos PNG del logotipo
   traen ese fondo pegado (no tienen transparencia) y cualquier otro tono
   dejaría ver el rectángulo. El tablero usa un marino propio porque su
   logotipo va en SVG monocromo. Si se cambia este fondo hay que regenerar los
   PNG con `Imagenes_logo/fondo_solido.py`.

   Sin recursos externos: ni fuentes de Google, ni CDN, ni iconos remotos.
   =========================================================================== */

:root {
  /* Papel */
  --fondo: #f0f2f6;   --sup: #fbfcfe;     --sup2: #e4e8f0;   --borde: #ccd4e0;
  --regla: #b8c4d6;
  --texto: #101827;   --texto2: #414f66;  --tenue: #55627a;
  /* Marca. El azul de la barra NO cambia con el tema: los PNG lo llevan dentro. */
  --marca: #162B4E;   --marca-tx: #f5f7fb;
  --oro: #c8a44d;     --oro-tinta: #241b03; --oro-borde: #d8bd7d;
  --ok: #0a6b45;      --ok-suave: #dbf0e6;
  --aviso: #8a4b04;   --aviso-suave: #fbeed5;
  --error: #a81e16;
  /* Tipografía */
  --cond: "Bahnschrift", "Roboto Condensed", "Helvetica Neue Condensed",
          "Arial Narrow", system-ui, sans-serif;
  --cifra: ui-monospace, "SF Mono", "Roboto Mono", "Cascadia Mono", Consolas, monospace;
  /* Cinco pasos, ninguno por debajo de 12 px */
  --t-micro: 0.75rem; --t-chico: 0.8125rem; --t-base: 0.9375rem;
  --t-fuerte: 1.0625rem; --t-dato: 1.75rem;
  /* Espacio en múltiplos de 4 px */
  --e1: 0.25rem; --e2: 0.5rem; --e3: 0.75rem;
  --e4: 1rem;    --e5: 1.5rem; --e6: 1.75rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0c1220; --sup: #121a2a;   --sup2: #1c2739;  --borde: #2c3a52;
    --regla: #33425c;
    --texto: #e8edf5; --texto2: #a4b1c6; --tenue: #7c8aa2;
    --oro: #e0be6a;   --oro-tinta: #201700; --oro-borde: #6a5628;
    --ok: #4ade9e;    --ok-suave: #0c3a2c;
    --aviso: #fbbf24; --aviso-suave: #3a2d0b;
    --error: #ff9a90;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--texto); text-decoration-color: var(--regla); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--oro); }
a:focus-visible, .btn:focus-visible, input:focus-visible, button:focus-visible {
  outline: 3px solid var(--oro); outline-offset: 2px;
}

.num, .dato { font-family: var(--cifra); font-variant-numeric: tabular-nums;
              font-feature-settings: "tnum" 1; }

/* Texto solo para lectores de pantalla: los `caption` de las tablas, que en
   pantalla ya están dichos por el encabezado de sección. */
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --- La barra de marca -----------------------------------------------------
   Única superficie de marca de la página. Color plano y exactamente #162B4E:
   ver la nota de arriba. */
.barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e4); padding: 0.45rem 1.6rem;
  background: var(--marca); color: var(--marca-tx);
  border-bottom: 2px solid var(--oro);
}
.marca { display: flex; align-items: center; gap: 0.35rem; }
/* Alturas distintas a propósito: la estrella es casi cuadrada y el rótulo es
   una tira ancha; igualarlas dejaría la estrella enorme al lado del nombre.
   Mismas medidas que la barra de la app de PC, para que sean la misma casa. */
.marca-estrella { height: 50px; width: auto; display: block; }
.marca-logo { height: 34px; width: auto; display: block; }
.barra-nota {
  font-family: var(--cond); font-stretch: 87.5%;
  font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(245, 247, 251, 0.72);
  text-align: right;
}

/* --- La hoja --------------------------------------------------------------- */
.hoja { max-width: 1040px; margin: var(--e6) auto 4rem; padding: 0 1.2rem; }

h1.titulo-evento {
  margin: 0 0 var(--e4);
  font-family: var(--cond); font-stretch: 87.5%;
  font-size: 2rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em;
}

/* El encabezado con filete: el título ES el encabezado y la regla que lo sigue
   es el recurso de una hoja impresa. No es un «eyebrow» (no hay etiqueta en
   versalitas ENCIMA de otro título), y está declarado así en DISENO.md §1b. */
h2.seccion {
  display: flex; align-items: center; gap: var(--e3);
  margin: var(--e6) 0 var(--e3);
  font-family: var(--cond); font-stretch: 87.5%;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--texto2);
}
h2.seccion::after { content: ""; flex: 1; height: 1px; background: var(--regla); }

h3.sub {
  margin: var(--e5) 0 var(--e2);
  font-family: var(--cond); font-stretch: 87.5%;
  font-size: var(--t-chico); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--texto2);
}

.nota { color: var(--texto2); font-size: var(--t-chico); line-height: 1.5;
        margin: var(--e3) 0 0; max-width: 68ch; }
/* El aviso no depende solo del color: lleva además filete a la izquierda y
   peso. Al sol, y con daltonismo, el color solo no basta. */
.nota.aviso {
  color: var(--aviso); font-weight: 700;
  border-left: 4px solid var(--aviso); padding: var(--e2) 0 var(--e2) var(--e3);
}

.migas {
  font-family: var(--cond); font-stretch: 87.5%;
  font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tenue); margin-bottom: var(--e3);
}
.migas a { color: var(--texto2); }

/* --- Ficha de datos: pares etiqueta/valor, en filas con regla -------------- */
.ficha { margin: var(--e3) 0 0; }
.ficha > div {
  display: flex; flex-wrap: wrap; gap: var(--e3);
  padding: var(--e2) 0; border-bottom: 1px solid var(--regla);
}
.ficha dt {
  flex: none; width: 15rem;
  font-family: var(--cond); font-stretch: 87.5%;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--texto2);
  padding-top: 0.15rem;
}
.ficha dd { margin: 0; flex: 1; min-width: 12rem; font-size: var(--t-base); }

/* --- Tablas: filas, no tarjetas. Aquí no se elige nada, se escanea. -------- */
.tabla-ancha { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; margin-top: var(--e2); }
th, td { text-align: left; padding: var(--e2) var(--e3); border-bottom: 1px solid var(--regla); }
th {
  font-family: var(--cond); font-stretch: 87.5%;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--texto2);
  border-bottom: 1px solid var(--texto2);
  white-space: nowrap;
}
td { font-size: var(--t-base); }
td.num, th.num { white-space: nowrap; }
.tenue { color: var(--tenue); font-size: var(--t-chico); }
.fuerte { font-size: var(--t-fuerte); font-weight: 600; }

/* La columna del dorsal es de ancho fijo: si fuera flexible, un dorsal de tres
   cifras desalinearía la fila siguiente y dejaría de parecer una hoja de
   resultados. */
td.dorsal {
  width: 5.5rem;
  font-family: var(--cond); font-stretch: 87.5%;
  font-size: var(--t-dato); font-weight: 700; line-height: 1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
td.dorsal .sin-grabar {
  font-size: var(--t-micro); font-weight: 700; color: var(--aviso);
  letter-spacing: 0.04em; text-transform: uppercase;
}
/* La sesión vigente es la que se sirve a META, así que se marca. No la
   distingue solo el color: lleva además el marbete «vigente» y el filete de la
   izquierda. */
tr.vigente td { background: var(--ok-suave); }
tr.vigente td:first-child { box-shadow: inset 3px 0 0 var(--ok); }

/* --- Marbetes: estado con palabra, no solo con color ---------------------- */
.marbete {
  display: inline-block; padding: 0.1rem var(--e2); border-radius: 3px;
  font-family: var(--cond); font-stretch: 87.5%;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase;
  background: var(--sup2); color: var(--texto2);
}
.marbete.aviso { background: var(--aviso-suave); color: var(--aviso); }

/* --- Formulario ----------------------------------------------------------- */
.formulario { margin-top: var(--e4); max-width: 34rem; }
.campo { margin-bottom: var(--e4); }
.campo label {
  display: block; margin-bottom: var(--e1);
  font-family: var(--cond); font-stretch: 87.5%;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--texto2);
}
.campo input {
  width: 100%; min-height: 48px; padding: var(--e2) var(--e3);
  font-size: 16px;  /* por debajo de 16 px, iOS hace zoom al enfocar */
  background: var(--sup); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 3px;
  letter-spacing: 0.08em;
}
.campo .pista { color: var(--texto2); font-size: var(--t-chico); line-height: 1.5;
                margin: var(--e1) 0 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: var(--e3) var(--e5);
  border: 1px solid transparent; border-radius: 3px;
  font-family: var(--cond); font-stretch: 87.5%;
  font-size: 1rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; white-space: nowrap;
  background: var(--marca); color: #f5f7fb; cursor: pointer;
  transition: background-color 0.12s ease;
}
.btn.sec { background: transparent; color: var(--texto); border-color: var(--borde); }
.fila-acciones { margin-top: var(--e5); }

/* --- Lista de eventos abiertos -------------------------------------------- */
.lista-eventos { list-style: none; margin: var(--e2) 0 0; padding: 0; }
.lista-eventos li { border-bottom: 1px solid var(--regla); }
.lista-eventos a {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e4); padding: var(--e3) var(--e2); text-decoration: none;
}
.lista-eventos a:hover { background: var(--sup); }
.ev-nombre { font-size: var(--t-fuerte); font-weight: 600; }
.ev-id { color: var(--tenue); font-size: var(--t-chico); letter-spacing: 0.06em; }

@media (max-width: 640px) {
  .barra { flex-direction: column; align-items: flex-start; gap: var(--e2); padding: 0.6rem 1rem; }
  .barra-nota { text-align: left; }
  .ficha dt { width: 100%; }
  .hoja { margin-top: var(--e5); }
}