/* ===========================================================================
   LA MARCA — un solo archivo para las cinco páginas
   ===========================================================================

   Hasta hoy cada página traía su propia paleta. Eran tres, y las dos claras
   se habían desalineado en seis valores: el mismo crema con dos códigos, el
   mismo verde con dos, el mismo rojo con dos. Nadie lo nota de frente, pero
   es justo por qué las cinco páginas no se sentían del mismo producto.

   Esto es lo único que define colores, tipografía y escala. La publicación
   lo copia a cada carpeta igual que `config.js`, así que se cambia aquí y
   cambia en todas partes.

   ---------------------------------------------------------------------------
   DE DÓNDE SALE

   De la cancha, no de una paleta de moda. En este mundo hay dos cosas que
   todo el mundo mira: el TABLERO —el panel pintado de verde oscuro con los
   números colgados a mano— y la PLANILLA —la hoja rayada donde se anota el
   juego, con las entradas por columnas y el orden al bate por filas.

   De ahí salen dos materiales y nada más:

     el tablero   verde casi negro, para mirar el marcador
     la cal       el blanco de la raya, para trabajar

   Las cinco páginas son esos dos materiales turnándose. La pública y el
   anotador viven sobre el tablero, porque ahí lo que importa es el número.
   El panel, la nómina y la tesorería viven sobre la cal, porque ahí lo que
   importa es leer y escribir. No hay un tercer color de fondo en ningún
   lado.

   ---------------------------------------------------------------------------
   LA REGLA DE LOS ACENTOS

   Cada acento tiene DOS tonos, uno para cada material, y no se cruzan: el
   que se lee bien sobre el tablero no se lee sobre la cal. Están medidos,
   no escogidos a ojo — todos pasan 4.5:1, que es lo que hace falta para
   texto pequeño:

     arcilla viva sobre tablero   4.88      arcilla honda sobre cal   5.44
     pasto vivo   sobre tablero   7.05      pasto hondo   sobre cal   5.23
     ocre         sobre tablero   7.01      ocre hondo    sobre cal   5.09

   La arcilla es el único acento que significa algo por sí solo: ESTO ESTÁ
   PASANDO AHORA. Un juego en vivo, la entrada que se está jugando, el turno
   al bate. Si se usa para adornar deja de querer decir eso.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   La letra
   ---------------------------------------------------------------------------
   Una sola familia para todo el producto, y variable: en un archivo de 90 KB
   vienen todos los gruesos y todos los anchos.

   El ancho no es un lujo. Un tablero de verdad tiene los números
   estrechos y altos porque así caben nueve entradas en un panel; con la
   familia variable eso se pide con `font-stretch` en vez de cargar una
   segunda fuente.

   Viaja con la app: el service worker la guarda y el APK la lleva dentro,
   así que en la cancha sin señal la letra ya está. Mientras llega —la
   primerísima vez— se ve la del sistema, que para eso está el `swap`.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(./archivo.woff2) format('woff2-variations');
}


:root {
  /* --- los dos materiales --------------------------------------------- */
  --tablero:      #0E1F17;   /* el panel del marcador, y la sombra de las 2pm */
  --tablero-alto: #17301F;   /* un escalón arriba: cajas sobre el tablero */
  --tablero-hond: #081410;   /* un escalón abajo: pozos, cabeceras de tabla */
  --cal:          #F2F4EF;   /* la raya de cal */
  --cal-honda:    #E4E8E0;   /* cal en sombra: filas alternas, bordes suaves */

  /* --- tintas ---------------------------------------------------------- */
  --sobre-cal:     #0E1F17;  /* el mismo verde del tablero, de tinta */
  --sobre-cal-2:   #5A6B61;  /* secundario sobre cal                 5.11 */
  --sobre-tablero: #F2F4EF;
  --sobre-tablero-2: #93A79A; /* secundario sobre tablero            6.71 */

  /* --- acentos, dos tonos cada uno ------------------------------------- */
  --arcilla:       #D9683A;  /* sobre tablero */
  --arcilla-honda: #A8431F;  /* sobre cal */
  --pasto:         #5FB880;
  --pasto-hondo:   #2F7249;
  --ocre:          #D99A2B;
  --ocre-hondo:    #8A5F0C;

  /* --- rayas ------------------------------------------------------------ */
  /* La raya de la planilla. Existe donde el dato tiene columnas, no de
     adorno: separa entradas de entradas y turnos de turnos. */
  --raya-cal:     #D3D9CE;
  --raya-tablero: #273C31;

  /* --- la letra --------------------------------------------------------- */
  --letra: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Escala de tamaños, razón 1.25 desde 16. Los nombres dicen para qué es
     cada uno, no cuántos píxeles mide. */
  --t-pie:     12.8px;   /* notas al pie, unidades */
  --t-chico:   14px;     /* datos secundarios */
  --t-texto:   16px;
  --t-sub:     20px;
  --t-titulo:  25px;
  --t-grande:  31px;

  /* El número del marcador no está en la escala a propósito: es el héroe de
     la página y se mide contra el ancho de la pantalla, no contra el texto. */
  --t-marcador: clamp(44px, 13vw, 80px);

  --ancho-max: 1180px;
  --radio:     6px;     /* un tablero no tiene esquinas redondas; esto es lo
                           mínimo para que un botón no corte */
}


/* ---------------------------------------------------------------------------
   Cifras
   ---------------------------------------------------------------------------
   Todo número que vaya en una columna se escribe con cifras de ancho fijo.
   No es gusto: en una planilla los números se leen hacia abajo, y si el 1
   es más angosto que el 8 la columna deja de ser una columna.
   --------------------------------------------------------------------------- */
.cifra, table, .marcador, .linescore {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* El número grande del tablero: estrecho, pesado y apretado, como los que
   se cuelgan a mano. */
.cifra-tablero {
  font-stretch: 78%;
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}


/* ---------------------------------------------------------------------------
   Lo mínimo compartido
   ---------------------------------------------------------------------------
   Aquí no va layout: cada página arma el suyo. Solo lo que si cada página
   lo repitiera volvería a desalinearse.
   --------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--letra);
  font-size: var(--t-texto);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 650; line-height: 1.2; }

/* Que se vea por dónde va el teclado. Sin esto, la página es imposible de
   usar sin mouse y nadie se entera hasta que a alguien le toca. */
:focus-visible {
  outline: 2px solid var(--ocre);
  outline-offset: 2px;
}

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