/* ════════════════════════════════════════════════════════════════════
   CLASH OF PICKS · TOKENS DE INTERFAZ — LA ÚNICA FUENTE DE VERDAD
   ────────────────────────────────────────────────────────────────────
   Colores, medidas y superficies de toda la app en UN solo lugar.

   ⚠ POR QUÉ EXISTE ESTE ARCHIVO (03/08/2026)
   Medido antes de escribirlo: de 1,88 MB de app había **741 KB de CSS
   pegado adentro de los HTML** y solo 35 KB en archivos compartidos.
   `--primary` estaba declarada en 42 archivos, `--bg` en 45. O sea que
   cambiar el azul de la marca era editar 42 archivos a mano.

   Y ahí estaba la razón de fondo por la que la app se sentía "básica":
   no era el diseño, eran **48 versiones ligeramente distintas del mismo
   diseño**. Variaciones mínimas que de a una no se notan y juntas se
   leen como algo sin terminar.

   ⚠ ESTE ARCHIVO NO CAMBIA NADA VISUALMENTE, Y ES A PROPÓSITO.
   Los valores son los CANÓNICOS: el que ya usaba la mayoría de las
   páginas. De las 46 páginas se borraron 571 declaraciones que repetían
   exactamente estos mismos valores — borrar algo idéntico no puede
   cambiar cómo se ve nada. Las que tenían un valor DISTINTO se dejaron
   donde estaban: son decisiones a tomar, no basura a limpiar, y están
   listadas al final.

   ⚠ VA ANTES QUE EL <style> DE CADA PÁGINA. Así, si una página declara
   su propio valor, sigue ganando el suyo. El día que se unifique, se
   borra la línea de esa página y hereda de acá.
   ════════════════════════════════════════════════════════════════════ */
:root{
  /* ⚠⚠ EL DESTELLO BLANCO AL ABRIR UNA PÁGINA (Franco, 05/09/2026:
     *«cuando abro la página de amistosos se pone toda la pantalla blanca
     y después carga, no sé por qué»*).
     La causa: el lienzo del navegador es BLANCO hasta que llega el CSS
     que pinta el `body`. En una página que carga rápido no se nota; en
     una que redirige o que baja varias hojas, se ve un flash.
     `color-scheme:dark` le dice al navegador —ANTES de cualquier regla—
     que esta página es oscura, así que pinta el lienzo, las barras de
     scroll y los controles del sistema en oscuro desde el primer frame.
     ⚠ EN LOS REDIRECTORES NO ALCANZA CON ESTO: esa página se va antes de
     que su CSS llegue, así que además llevan `<meta name="color-scheme">`,
     que el navegador lee sin esperar ninguna hoja. */
  color-scheme: dark;

  /* ── Fondos y superficies ── */
  /* ⚠⚠ EL FONDO PASÓ A NEGRO CON TINTE — 19/09/2026, `MANUAL-DE-MARCA.md`
     §3. Franco: *«quiero que hagamos un manual de marca (…) para que se
     aplique a cada una de las páginas de forma coherente y lineal»*.

     ⚠ EL CAMBIO NO CUESTA CONTRASTE Y ESTÁ MEDIDO: #0f0f0f y #0b0e14
     tienen exactamente la misma luz (L6 en HSL). Lo único que cambia es
     el matiz — de 0 % de saturación a 29 %. Ninguna pantalla se oscurece
     ni se aclara: deja de ser gris neutro y pasa a pertenecer a la misma
     rampa que `--card` (#11141d) y `--bg-soft` (#0a0d14), que ya eran
     azulados. O sea que el tinte YA ESTABA DECLARADO en este archivo y la
     app lo venía pintando plano encima.
     ⚠ SE CAMBIA ACÁ Y NO EN CADA PÁGINA porque 167 de los 206 usos ya
     leen `var(--bg)`: tocando este número se mueven todos juntos. Los 39
     que estaban escritos a mano se migraron aparte, en la misma tanda. */
  --bg: #0b0e14;
  /* ⚠ EL MISMO #0b0e14, EN TRES NÚMEROS. Las barras se dibujan con
     `rgba(var(--barra-rgb), .72)` para dejar pasar el fondo de la app
     (22/09/2026), y `rgba()` no acepta un hexadecimal. Va como token y
     no escrito a mano en cada barra: el día que cambie `--bg`, cambia
     también acá y las dos barras lo siguen. */
  --barra-rgb: 11, 14, 20;
  --bg-soft: #0a0d14;
  --card: #11141d;
  --panel: #11161f;
  --card-border: #1e2330;
  --border: rgba(255,255,255,.07);
  --sidebar-w: 76px;

  /* ══════════════════════════════════════════════════════════════════
     ⚠⚠ LOS LÍMITES DEL CONTENIDO, UNA SOLA VEZ      (31/08/2026)
     ------------------------------------------------------------------
     Franco: *«los límites de la topbar en ubicación tienen que tener los
     mismos márgenes o bordes que tiene el contenido en la página de
     inicio, no puede pasarse de esos límites»*.
     Estos dos números eran de `app.html` y de nadie más: la barra iba de
     punta a punta con 1,4rem de aire propio mientras el contenido se
     frenaba en 1500 px con 1,8rem. En una pantalla ancha la barra se
     pasaba de los bordes del contenido, que es exactamente lo que se
     ve.
     ⚠ AHORA LOS LEEN LOS DOS. Si mañana el contenido se ensancha, la
     barra lo sigue sola: es un valor, no dos copias que hay que
     acordarse de mover juntas. */
  --cop-ancho: 1500px;
  --cop-aire: 1.8rem;
  /* en el teléfono el contenido respira 1rem: el mismo que usa `.main`
     de la portada en su media query */
  --cop-aire-movil: 1rem;
  /* ── Texto ── */
  --text: #f4f6fb;
  --text-dim: #9aa3b5;
  --text-faint: #5a6275;
  --dim: #9aa3b5;
  /* ── Marca y competencias ── */
  --primary: #0c95eb;
  --secondary: #2068ff;
  --purple: #9d2bff;
  --gold: #ffc233;
  /* ⚠ TORNEOS PASÓ A CELESTE (Franco, 03/09/2026): antes era el azul
     #0c95eb; ahora es el celeste de la marca, como el resto de las
     competencias (todas menos División League y Carrera). El token se
     queda con nombre propio por si algún día vuelve a tener color. */
  --torneo: #0c95eb;
  --comp: var(--primary);
  --comp-rgb: 12,149,235;
  /* ── Estados ── */
  --ok: #22c55e;
  --red: #ff3b5c;
  --accent-green: #7CFC00;
  --warn: #ffc233;
  /* ── Resto ── */
  --away: #9d2bff;
  --azul-1: #1526b8;
  --azul-2: #2a41e8;
  --azul-3: #3350ff;
  --bd: #232936;
  --bn-inset: 28px;
  --borde: rgba(255,255,255,.14);
  --bronce: #cd7f32;
  --card-2: #0d1019;
  --celeste: #0c95eb;
  --diamante: #9d2bff;   /* Especial: violeta (07/10/2026) */
  --err: #ff3b5c;
  --faint: #5a6275;
  --filters-w: 280px;
  --formation-w: 380px;
  --fuego: #ff7a1a;
  --green: #22c55e;
  --home: #0c95eb;
  --leyenda: #0c95eb;   /* Legendaria: celeste (07/10/2026) */
  --linea: #232a35;
  --naranja: #f97316;
  --no: #ff3b5c;
  --oro: #ffc233;
  --plata: #b8c0cc;
  --promo-c: #e11d48;
  --radius: 18px;
  --rojo: #ff3b5c;
  --sec: #8b949e;
  --t-bronce: #e09a52;
  --t-oro: #ffc233;
  --t-plata: #d8dee9;
  --t-resto: #7c8597;
  --tinta: #0b1024;
  /* ⚠⚠ EL ALTO DE LA BARRA DE ARRIBA CAMBIA CON EL ANCHO, Y EL TOKEN NO
     LO SABÍA (04/09/2026). `cop-ui-topbar.css` la dibuja en 64 y la baja
     a 58 en el teléfono; este token declaraba 64 y punto. Doce páginas
     —batalla-sobres, clash-draft, doble-nada, draft, draft-doble,
     draft-doble-juego, equipo-competitivo, equipos, grupo, grupos, spin,
     survival— habían escrito `:root{--topbar-h:58px}` en su `<style>`
     para tapar el agujero: quedaban BIEN en el teléfono y MAL en
     escritorio, con el contenido 6px debajo de la barra.
     No estaban equivocadas: estaban parchando un token incompleto.
     ⚠ Ahora el token es el que cambia, y la barra lo lee. Cualquier
     pantalla que calcule `calc(var(--topbar-h) + …)` queda bien en los
     dos tamaños sin tocar una línea. La media query va junto al valor
     —y no al final del archivo— para que quien lea el token vea de una
     que tiene dos valores. */
  --topbar-h: 64px;

  /* ⚠⚠ EL ALTO DE TODOS LOS BANNERS DE CABECERA, EN UN SOLO NÚMERO
     (Franco, 26/08/2026): *«quiero unificar criterio en el tamaño de los
     banners, ya que estoy empezando a diseñarlos, y que todos tengan el
     mismo tamaño en las páginas que ocupan toda la pantalla»*.

     Antes cada página escribía la misma cuenta a mano —
     `calc((100vw - 2 * var(--bn-inset)) * 7 / 16)`— once veces. Y esa
     cuenta MENTÍA: restaba el recorte del carrusel del inicio (28 px)
     aunque el banner ocupara todo el ancho, así que el alto era el de un
     banner más angosto y la proporción real no era 16:7 en ninguna
     pantalla.

     Ahora el banner ocupa TODO el ancho —*«no deben tener espacio ni
     márgenes a los costados»*— y su alto es exactamente 7/16 de ese
     ancho. Una imagen 16:7 entra completa, sin recorte.

     ⚠ Vive en los TOKENS y no en `cop-ui-banner.css` porque hay páginas
     con banner propio (arena, hitos) que no cargan ese componente, y el
     número tiene que ser el mismo para todas o "unificado" es una forma
     de decir "casi". */
  --cop-bn-alto: calc(100vw * 7 / 16);
  --tx: #f4f6fb;
  --txt: #e6edf3;
  --verde: #22c55e;
}

/* ⚠ EL SEGUNDO VALOR DE `--topbar-h` (ver su nota arriba): en el
   teléfono la barra mide 58, no 64. Es el mismo corte de 760px que usan
   la topbar y la bottombar. */
@media(max-width:760px){
  :root{ --topbar-h: 58px }
}

/* ── PENDIENTE DE UNIFICAR ─────────────────────────────────────────
   Estas variables NO valen lo mismo en todas las páginas. Cada una es
   una decisión de diseño; hasta que se tome, la página que difiere
   conserva su valor propio.
     --bg             #0f0f0f (×41) · #0a0d14 (×2) · #05070c (×1) · #0d1117 (×1)
     --card           #11141d (×35) · #161616 (×5) · #14171e (×1)
     --card-border    #1e2330 (×35) · #232a38 (×1)
     --gold           #ffc233 (×31) · #fbbf24 (×2)
     --text-faint     #5a6275 (×27) · #6b7390 (×2)
     --accent-green   #7CFC00 (×24) · #22c55e (×3) · #0c95eb (×1)
     --red            #ff3b5c (×19) · #ff5c7a (×1)
     --sidebar-w      76px (×16) · 0px (×3)
     --border         rgba(255,255,255,.07) (×2) · #1e2330 (×2) · #232a38 (×2)
     --dim            #9aa3b5 (×4) · #8b93a5 (×2)
     --ok             #22c55e (×4) · #4ade80 (×2)
     --panel          #11161f (×2) · #161b22 (×1) · rgba(11,16,36,.82) (×1)
     --err            #ff3b5c (×2) · #f87171 (×2)
     --filters-w      280px (×1) · 300px (×1)
   ──────────────────────────────────────────────────────────────── */