/*
 * Base minima. Lo que habia antes eran overrides de Bootstrap (focus de .btn,
 * .form-floating, margen para un footer que no existe): se fue con Bootstrap.
 *
 * Queda solo la escala tipografica, de la que dependen todos los rem del sistema — incluida
 * la pantalla de carga, que dimensiona los botones para usarse de pie y con una mano.
 */

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

@media (min-width: 768px) {
    html { font-size: 16px; }
}

/*
 * Tercer escalon en monitor: 17px, la misma medida que el sitio publico. Sin el, el sistema
 * se ve una talla mas chico que la landing de la que viene el cliente.
 */
@media (min-width: 90rem) {
    html { font-size: 17px; }

    /*
     * ...salvo la pantalla de carga, que NO escala. live-entry.css dimensiona el panel
     * entero en rem para que un rally entre en tablet horizontal sin scroll: subir la raiz
     * un 6% le corre esa calibracion. La pantalla de carga se mide en dedos, no en pixeles
     * disponibles.
     */
    html:has(body.live-body) { font-size: 16px; }
}

*, *::before, *::after { box-sizing: border-box; }

/*
 * El atributo `hidden` le gana a cualquier `display` de autor.
 *
 * `hidden` solo vale un `display: none` de la hoja del navegador, asi que CUALQUIER regla
 * propia que declare display —`.btn-live-block { display: block }`, por ejemplo— lo pisa por
 * especificidad y el elemento se sigue viendo. El sintoma no es un error: es un boton que
 * deberia estar oculto y no lo esta. Paso con "siguiente rally", que seguia ofreciendose con
 * el set terminado, y con "deshacer", que nunca se ocultaba.
 *
 * `!important` es deliberado: `hidden` significa "esto no esta", y no hay layout que deba
 * poder discutirlo.
 */
[hidden] { display: none !important; }


/*
 * VIVE ACA Y NO EN brand.css, Y EL MOTIVO ES CONCRETO: `_LayoutFullScreen` —la pantalla de
 * carga— NO carga brand.css. Solo carga fonts.css, este archivo y live-entry.css, asi que con
 * la paleta clara en brand.css el modo claro no llegaba justo a la pantalla que el operador
 * mira todo el partido, que es la que motivo el pedido. `site.css` es la unica hoja que
 * cargan los dos layouts.
 *
 * El orden no importa: `html.live-light .live` tiene mas especificidad que el `.live` de
 * live-entry.css, asi que gana aunque esa hoja venga despues.
 */
/*
 * ──────────────────────────────────────────────────────────────────────────────────────────
 * MODO CLARO DE PANTALLA
 *
 * El cliente lo pidio explicito: ve mejor sobre blanco. Es el mismo criterio que la impresion
 * en claro (§28) pero NO el mismo modo, y la diferencia importa:
 *
 *   - `live-print-light` ADEMAS APAGA EL COLOR —semaforo a gris plano, lima a #2B3138— porque
 *     se penso para una impresora monocroma, donde el verde y el ambar salen del mismo gris.
 *   - En pantalla eso seria perder informacion: el color de la banda ES el dato (§48). Aca se
 *     da vuelta el fondo y se OSCURECEN los acentos para que se lean sobre blanco, conservando
 *     el tono. Verde sigue siendo verde.
 *
 * Se redefinen LAS VARIABLES y no cada regla: todo el sistema pinta con `var()`, canchas SVG
 * incluidas —van inline y heredan del documento—, asi que un solo lugar da vuelta la aplicacion
 * entera.
 *
 * SE DECLARA EN `:root` Y EN `.live`, Y HACEN FALTA LOS DOS. Las variables se heredan, y para
 * un elemento gana el ancestro MAS CERCANO que las declare, sin importar la especificidad del
 * selector: `.live` declara su propia paleta oscura (live-entry.css), asi que declarando solo
 * en `<html>` la pagina quedaba blanca con todo lo de adentro oscuro. Es la misma trampa que
 * ya habia costado una vuelta en la impresion (§28).
 *
 * La clase la pone el boton del nav y vive en <html>, que es donde se declara `:root`.
 */
html.live-light,
html.live-light .live {
    --night: #FFFFFF;

    /* Las tarjetas llevan un tinte apenas: blanco puro sobre blanco puro desaparece y la
       pantalla pierde la estructura que el borde solo no alcanza a dar. */
    --slate: #F5F7F9;
    --line:  #D4DAE1;
    --court: #E8EDF2;
    --grid:  #8A96A2;
    --bone:  #14181D;
    --muted: #5A646E;

    /* El lima brillante se queda: como RELLENO —boton principal, red, badge— funciona sobre
       blanco. Lo que se oscurece es el lima cuando es TEXTO. */
    --lime-ink: #4F7A00;

    /* Los acentos bajan de luminosidad y mantienen el tono, apuntando a 4.5:1 sobre blanco.
       El amarillo es el que mas baja: es el unico que sobre blanco no se lee a ningun tamano. */
    --q-dp: #15702B;
    --q-p:  #0A7D63;
    --q-ex: #0A6E8C;
    --q-sl: #9A5B00;
    --q-n:  #C0291C;
    --q-dn: #8E2F26;
    --q-null: #5A646E;

    --band-good: #15702B;
    --band-fair: #8A6B00;
    --band-low:  #9A5B00;
    --band-bad:  #C0291C;

    --green: #15702B;
    --amber: #8A6B00;
    --red:   #C0291C;
}

/*
 * El guion del marcador usa `--grid`, que es el color de las LINEAS DE LA CANCHA: ahi 2.8:1
 * esta bien —una linea no es texto— pero como glifo sobre blanco no se lee. Se le da el color
 * de texto secundario, y solo en claro: en nocturno `--muted` es mas claro que `--grid`, asi
 * que cambiarlo en los dos modos le subiria el protagonismo al separador en la pantalla que
 * ya esta calibrada.
 */
html.live-light .live-score-sep { color: var(--muted); }