/* ══════════════════════════════════════════════════════════════════
   COP · EL FONDO FIJO DE LA APP  (16/09/2026)
   ──────────────────────────────────────────────────────────────────
   Franco: *«agregá esta imagen como fondo fijo de todas las páginas de
   menú de competencia, la de inicio, y todas las páginas de la app (…)
   que se aplique en todos lados donde sólo se veía el fondo gris oscuro
   chato de la página, aplicalo fijo en la pantalla en la máxima
   definición tal cual está, que es apenas perceptible y le da un diseño
   top»*.

   ══ QUÉ REEMPLAZA ═════════════════════════════════════════════════
   El `var(--s0, #0b0e14)` plano del `body`. Medido antes de tocar: de las 62
   páginas publicadas, **58 declaran su propio `background` en el body**
   y 55 de esas son el color plano con cuatro escrituras distintas
   —`var(--bg)`, `var(--bg, #0b0e14)`, `var(--s0, #0b0e14)`, `#000`— más las tres
   pantallas de juego, donde `--noche` ES el fondo de la app (está
   escrito así en los tres archivos).

   ══⚠⚠ POR QUÉ `background-color` Y NO EL ATAJO `background` ════════
   ES LA DECISIÓN QUE HACE QUE ESTO NO ROMPA NADA. Tres pantallas tienen
   un fondo que SIGNIFICA algo y no es plano:
     · `carta.html`    → un degradado radial del color de la promo,
     · `buscando.html` → un radial celeste (en su propio `body::before`),
     · `abrir-sobre.html` → su capa `.os-fondo` con arte propio.
   Un `background: transparent !important` se los llevaría puestos, y
   NO daría ningún error: esas tres pantallas quedarían iguales a todas
   las demás y nadie se enteraría hasta abrirlas.
   Un gradiente vive en `background-image`; el color plano vive en
   `background-color`. Apagando SÓLO el color, el plano se va y el
   degradado se queda — y encima queda apoyado sobre el arte, que es
   exactamente lo que hace falta porque esos radiales terminan en
   `transparent`.

   ══⚠⚠ POR QUÉ VA EN `html::before` Y NO EN `body::before` ══════════
   `buscando.html` YA USA `body::before` para su radial. Poniendo el
   arte ahí se lo piso y esa pantalla pierde su fondo —otra vez, sin un
   solo error—. `html::before` no lo usa nadie en el proyecto (barrido
   hecho, cero apariciones).
   ⚠ Y `z-index:-1` sobre un pseudo-elemento de `html` queda DETRÁS del
   contenido y DELANTE del fondo del canvas, que es justo la capa que
   hace falta. Con el mismo pseudo en `body`, el fondo del body —que se
   propaga al canvas cuando `html` no tiene el suyo— lo taparía.

   ══⚠ POR QUÉ UNA CAPA FIJA Y NO `background-attachment: fixed` ═════
   `fixed` sobre el `html` se rompe en iOS Safari: o no se fija, o
   obliga al navegador a repintar la imagen entera en cada cuadro de
   scroll y la pantalla se traba. Una capa `position:fixed` la compone
   la GPU una sola vez. Es el mismo recetario que ya usan `.os-fondo`
   (abrir-sobre) y el fondo de `carta.html`.

   ══⚠ EL `!important` ══════════════════════════════════════════════
   Es deliberado y es lo único que funciona acá: el `<style>` de cada
   página se carga DESPUÉS de esta hoja, así que con la misma
   especificidad gana el de la página —la trampa que este proyecto ya
   pagó tres veces—. La alternativa era editar el `body{}` de 55
   páginas, o sea 55 oportunidades de romper una.

   ══⚠ EL PESO, MEDIDO ══════════════════════════════════════════════
   La imagen tiene un rango de luminancia de 0 a 37 sobre 255 («apenas
   perceptible», como la pidió Franco). En un rango tan angosto la
   compresión CON PÉRDIDA destroza el dibujo: medido contra el original,
   WebP q88 se aparta hasta **19 niveles de 37** (la mitad del rango) y
   q95 hasta 9. Por eso va **SIN PÉRDIDA: 622 KB, error 0**, que es la
   «máxima definición tal cual está» que pidió.
   ⚠ Es UN archivo para las 62 páginas: se baja una vez y queda en
   caché para todo el sitio. Si algún día molesta en la primera carga,
   bajar el ancho es lo único que mueve la aguja y no se ve, porque el
   patrón ya se estira: 768 px → 466 KB · 640 px → 334 KB.

   ══ CÓMO SE USA ═══════════════════════════════════════════════════
   Se enlaza y listo. Ninguna pantalla escribe una línea:
     <link rel="stylesheet" href="cop-ui-fondo.css?v=1">
   ══════════════════════════════════════════════════════════════════ */

/* el color de base: lo que se ve mientras la imagen viaja, y lo que
   queda si no llega. ⚠ NO ES DECORACIÓN — sin esto, entre que la página
   pinta y que baja el arte, el body transparente deja ver el blanco del
   navegador. */
html{
  background-color:var(--bg, #0b0e14);
}

/* ⚠⚠⚠ LA IMAGEN SE FUE EL 17/09/2026, Y EL ARCHIVO SE QUEDA.
   Franco, con la app ya instalada en el teléfono: *«volver al color gris
   mate de fondo para todas las páginas como estaba antes, ya que ahora
   todas las páginas tienen la topbar y la barra de tabs de abajo en gris
   mate y no se usa la imagen de fondo, que tampoco me convenció tanto»*.
   Tenía razón en el diagnóstico: la topbar y la bottombar son `var(--s0, #0b0e14)`
   PLANO —las dos lo declaran a mano— así que el arte quedaba en la
   franja del medio y las dos barras no participaban. No era un fondo de
   la app: era un fondo del contenido, con dos barras encima que decían
   otra cosa.

   ⚠⚠ SE BORRA LA REGLA, NO EL ARCHIVO, Y NO ES PEREZA. Esta hoja la
   enlazan **63 páginas**. Borrarla significaría editar 63 archivos —63
   oportunidades de romper uno— y además el `body{background-color:
   transparent}` de abajo SÍ tiene que quedarse: sin él vuelven los
   cuatro colores planos escritos a mano en 55 `<style>` distintos
   (`var(--bg)`, `var(--bg, #0b0e14)`, `var(--s0, #0b0e14)`, `#000`), que es
   exactamente el desorden que esta hoja vino a centralizar.
   Ahora el fondo de TODA la app sale de UNA línea: el `html{}` de acá
   arriba. Cambiarlo de color mañana es cambiar un número.

   ⚠ `fondo-app.webp` (622 KB) queda en el repo pero YA NO SE BAJA: no lo
   pide nadie. No se borra todavía por si Franco quiere volver a verlo
   antes de decidir. Si a fin de mes sigue sin usarse, se borra — y con
   él se van 622 KB de la primera carga.

   ⚠ Las tres pantallas que tienen arte propio —`carta.html`,
   `buscando.html`, `abrir-sobre.html`— siguen intactas: su fondo vive en
   `background-image`, y acá sólo se apaga `background-color`. Ese era el
   motivo original de la línea de abajo y sigue vigente. */

/* ⚠ SÓLO EL COLOR (ver la nota de arriba): los degradados de
   `carta.html` y `buscando.html` viven en `background-image` y
   sobreviven a esta línea, apoyados sobre el arte. */
body{
  background-color:transparent !important;
}

/* ══════════════════════════════════════════════════════════════════
   ACÁ VIVIÓ UN DEGRADADO DE FONDO, DURANTE UNA HORA  (22/09/2026)
   ──────────────────────────────────────────────────────────────────
   Franco trajo un componente de una librería de React cuyo diseño, bajo
   el envoltorio, era una línea de CSS:

       background: radial-gradient(125% 125% at 50% 10%, #000 40%, #63e 100%);

   Se probó con el acento de la competencia (celeste en Champions y Mega
   Spin, violeta en División y Carrera) y se midió con
   `arnes/_fondo-barras.mjs`. Franco lo miró y lo sacó: *«no quiero ese
   fondo aplicado a la página, era sólo un ejemplo para ver, volvé al
   anterior que estaba bien»*.

   ⚠⚠ SE BORRA LA REGLA, NO EL APRENDIZAJE. Lo que queda escrito, porque
   vale para cuando lleguen las imágenes de Franco:
     · la capa va en `body::after` y NO en `html::before`, porque
       `--cop-acento-rgb` se declara en `body[data-comp]` y un pseudo de
       `html` —que es el PADRE— no ve una variable de su hijo;
     · `body::before` está tomado por `buscando.html`; `body::after` no
       lo usa nadie (barrido hecho);
     · y el arnés que mide todo esto sigue en pie: `_fondo-barras.mjs`
       exige que las barras dejen pasar lo que haya detrás, tengan o no
       un fondo hoy.

   ⚠ LAS BARRAS TRANSLÚCIDAS SE QUEDAN, y no es un olvido: Franco las
   pidió por separado —*«las barras también quiero que vayan incluidas,
   ya que eso le da profundidad y uniformidad al diseño»*— y no las
   retiró. Sin nada detrás se ven igual que antes; lo único que cambia
   es que el contenido que pasa por debajo se desenfoca en vez de
   desaparecer. El día que entre una imagen de fondo, ya están listas.
   ══════════════════════════════════════════════════════════════════ */

/* ⚠⚠ LAS PANTALLAS QUE TIENEN SU PROPIO ARTE DE FONDO NO SE APAGAN, SE
   TAPAN: `abrir-sobre.html` (`.os-fondo`), `duelo.html` (`.picks-zona`)
   y las tres de juego dibujan su imagen ENCIMA de esta capa, que queda
   debajo y no se ve. No hay nada que excluir — y por eso tampoco hay
   una lista de excepciones que alguien tenga que mantener al día. */