/* ============================================================
   FAFIFA — Design tokens (guía de estilo viva: /style-guide · /es/guia-de-estilo)
   Una sola regla para toda la web: 7 tamaños de texto, 7 espacios, 3 radios y
   3 alturas de control. Si un valor no está aquí, no se usa.
   Dark theme is the default; light theme overrides below.
   Client-fixed values are marked "fijado por cliente".
   ============================================================ */
:root{
  color-scheme:dark;
  /* ---- Layout / surfaces ---- */
  --bg:#181925;          /* fijado por cliente — canvas of the whole site (un pelín más oscuro) */
  --surface:#2C2D3E;     /* cards, table rows, panels */
  --surface-2:#333449;   /* hover, active row, form fields */
  --surface-3:#3E4058;   /* empty channel of bars and charts */
  --empty:#3A3C43;       /* fijado por cliente — container with no data (deliberately neutral) */
  --border:#3A3B4D;      /* table & card separators */
  --border-strong:#4A4C63; /* table header, section division */
  /* Texto: los tres niveles cumplen AA (≥ 4,5:1) sobre --surface.
     text-3 NUNCA en párrafos ni en etiquetas de filtro: solo extremos de rango, migas y pies. */
  --text:#EEF0F4;        /* names & figures — 11.9:1 */
  --text-2:#B8BDCB;      /* secondary — 7.3:1 */
  --text-3:#9AA0B4;      /* short labels — 5.2:1 (antes #767C8F, 3.3:1) */

  /* ---- Cyan = interaction (never encodes data) ---- */
  --accent:#22B8CF;
  --accent-hi:#3BC9DB;      /* accent AS TEXT / link base — 6.8:1 */
  --accent-ink:#22B8CF;     /* accent AS TEXT on :hover — dark: same cyan */
  --accent-dim:rgba(34,184,207,.14);

  /* ---- Structural accent (brand/structure) — derived from #252634. NEVER encodes data. ---- */
  --chrome:#9799BA;
  --chrome-hi:#B3B5CE;
  --chrome-dim:rgba(151,153,186,.16);

  /* ---- Rating scale — BADGE BACKGROUND (Open Color) ---- */
  --r1:#e03131;  /* <50   red-8    */
  --r2:#fd7e14;  /* 50-59 orange-6 */
  --r3:#fcc419;  /* 60-69 yellow-5 */
  --r4:#66a80f;  /* 70-79 lime-8   */
  --r5:#2b8a3e;  /* 80+   green-9  */
  --r-ink:#202124;      /* text on badge, 50-79 bands */
  --r-ink-alt:#FFFFFF;  /* text on badge, <50 and 80+ bands */

  /* ---- Rating scale — AS TEXT over the background. Same family, lighter. ---- */
  --r1t:#ff6b6b;  /* <50   red-5    5.38 */
  --r2t:#ff922b;  /* 50-59 orange-5 6.69 */
  --r3t:#fcc419;  /* 60-69 yellow-5 9.28 */
  --r4t:#82c91e;  /* 70-79 lime-6   7.34 */
  --r5t:#40c057;  /* 80+   green-6  6.33 */

  /* ---- Attribute ramp (single-hue lime, alpha-resolved over #252634) ---- */
  --attr-1:#4E6A1C;  /* low        — lime-9 @ 80% */
  --attr-2:#5F8724;  /* low-mid    — lime-7 @ 80% */
  --attr-3:#7BB035;  /* mid        — lime-5 @ 80% */
  --attr-4:#9DC167;  /* high       — lime-3 @ 80% */
  --attr-5:#C6CEBE;  /* max        — lime-0 @ 80% */

  /* ---- Position lines — regla de negocio: cada demarcación se colorea por línea ---- */
  --pos-gk:#ff6b6b;  --pos-gk-dim:rgba(255,107,107,.16);   /* porteros  — rojo */
  --pos-def:#ff922b; --pos-def-dim:rgba(255,146,43,.16);   /* defensas  — naranja */
  --pos-mid:#51cf66; --pos-mid-dim:rgba(81,207,102,.16);   /* medios    — verde */
  --pos-att:#4dabf7; --pos-att-dim:rgba(77,171,247,.16);   /* atacantes — azul */
  --pos-ink:#1B1C26;                                       /* texto sobre badge lleno */

  /* ---- Deltas — same extremes of the scale ---- */
  --up:#40c057; --down:#ff6b6b; --flat:#868E96;

  /* ---- Editorial gold (guides) ---- */
  --gold:#c9962b; --gold-hi:#f3c552; --gold-dim:rgba(243,197,82,.14);

  /* ---- Escala tipográfica (7 pasos). 14 px es el SUELO en escritorio; en móvil solo la nav
         inferior y las etiquetas bajo chips bajan a 12 px. ---- */
  --fs-1:14px;  /* suelo · cabeceras de tabla, extremos de rango, chips de tabla */
  --fs-2:15px;  /* metadatos, nav, migas, botones */
  --fs-3:16px;  /* cuerpo, etiquetas de filtro, celdas numéricas */
  --fs-4:18px;  /* nombres, medias, entradillas, cifras de tabla */
  --fs-5:22px;  /* H3 · título de tarjeta / sección */
  --fs-6:28px;  /* H2 de sección, cifras grandes */
  --fs-7:36px;  /* H1 de página */

  /* ---- Espaciado (escala de 4). 4 icono↔texto · 8 chips/título↔subtítulo · 12 controles en fila
         y columnas de tabla · 16 tarjetas en rejilla e interior de control · 24 padding de tarjeta y
         carril · 32 margen lateral de página · 48 entre secciones. ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;

  /* ---- Radios (3) + píldora. Los alias --r-* antiguos apuntan aquí para no tocar cada regla. ---- */
  --rad-1:8px;   /* chips de dato (media, posición), miniaturas */
  --rad-2:12px;  /* controles: botones, campos, selects, segmentados, menús */
  --rad-3:20px;  /* tarjetas, paneles, carril, hojas */
  --r-xs:var(--rad-1); --r-sm:var(--rad-2); --r-md:var(--rad-3); --r-lg:var(--rad-3);
  --sp:8px;

  /* ---- Alturas de control (3) ---- */
  --ctl-sm:36px;  /* dentro de tablas y filas densas */
  --ctl:44px;     /* estándar: botones, campos, selects, pills, segmentados */
  --ctl-lg:52px;  /* buscador principal / CTA de hero */

  /* ---- Type families — ONE family for the whole interface ---- */
  --font-ui:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --font-display:var(--font-ui);  /* alias histórico: titulares, logo y cifras grandes van en la misma familia */
  --font-mono:var(--font-ui);     /* historical alias — labels are NO LONGER monospaced */
  --font-code:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace; /* real mono — code & wireframes only */

  /* ---- Elevation ---- */
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 8px 24px rgba(0,0,0,.45);
  --shadow-bar:0 6px 12px -8px rgba(0,0,0,.5);      /* barra pegajosa de pestañas */
  --shadow-photo:0 8px 16px rgba(0,0,0,.5);         /* drop-shadow de recortes (foto, escudo) */
  --flag-ring:rgba(255,255,255,.18);                /* contorno de banderas */

  /* ---- Pizarra de posiciones (<pitch-board>): césped, líneas y fichas ---- */
  --pitch-bg:oklch(.33 .062 158);
  --pitch-bg-2:oklch(.36 .066 158);
  --pitch-line:rgba(233,245,238,.34);
  --pitch-chip:var(--surface);
  --pitch-chip-border:var(--border-strong);
}

/* ============================================================
   Light theme — "papel frío" (violet-tinted paper).
   Applied when <html data-theme="light">. The anti-FOUC script in
   the layout resolves device preference vs. saved choice and stamps
   data-theme BEFORE first paint. Only tokens that assume a dark canvas
   are overridden; radii/spacing/fonts and the rating BADGE
   backgrounds (r1..r5, position hues) are shared — those are colored
   chips whose ink rules already hold on any canvas.
   ============================================================ */
:root[data-theme="light"]{
  color-scheme:light;

  /* ---- Layout / surfaces — OFF-WHITE canvas (~96%), not a grey slab: the page is a
         soft eggshell that cuts screen glare, and cards sit only a hair brighter (pure
         white) so they lift GENTLY. Separation leans on the crisp hairline border +
         soft shadow, not on a jarring white-vs-grey value jump. ---- */
  --bg:#F4F5F9;          /* off-white, faint cool cast (brand) */
  --surface:#FFFFFF;     /* cards: a touch brighter, gentle lift */
  --surface-2:#EEEFF4;   /* row hover / form fields (sits just under white) */
  --surface-3:#DFE1EA;   /* empty channel of bars & charts — visible track */
  --empty:#E7E8F0;
  --border:#DEE0EA;      /* hairline that still draws every card edge at low contrast */
  --border-strong:#C8CBDA;
  --text:#1B1C29;        /* 14:1 */
  --text-2:#4B4F60;      /* 8:1 */
  --text-3:#5E6272;      /* 6:1 en blanco, 5:1 sobre surface-2 — labels, never paragraphs */

  /* ---- Cyan interaction — bright fills stay bright (dark ink on top);
         only the AS-TEXT variants deepen to hold contrast on white ---- */
  --accent:#12A5BD;
  --accent-hi:#096B7B;   /* 6.1:1 en blanco, 5.1:1 sobre accent-dim — link / label / tab activa */
  --accent-ink:#075E6B;  /* link :hover — deepens */
  --accent-dim:rgba(18,165,189,.12);

  /* ---- Structural accent (labels / brand chrome) ---- */
  --chrome:#5B5D7A;      /* 6.5:1 — .mo small-caps labels */
  --chrome-hi:#474963;
  --chrome-dim:rgba(91,93,122,.12);

  /* ---- Rating scale AS TEXT — same hues, darkened for a light canvas ---- */
  --r1t:#c92a2a;  /* <50   red    5.4:1 */
  --r2t:#c2410c;  /* 50-59 orange 5.2:1 */
  --r3t:#7a6305;  /* 60-69 yellow 5.6:1 en blanco, 4.9:1 sobre surface-2 */
  --r4t:#4f7c0a;  /* 70-79 lime   5.6:1 */
  --r5t:#237a36;  /* 80+   green  5.4:1 */
  /* Badge 80+: un punto más oscuro para que la tinta blanca llegue a 4.5:1 */
  --r5:#27803a;

  /* ---- Líneas de posición — los tonos del canvas oscuro (verde/azul/naranja claros) no se leen
         sobre blanco: mismas familias, oscurecidas; tinta blanca sobre los rellenos. ---- */
  --pos-gk:#c22626;  --pos-gk-dim:rgba(194,38,38,.1);
  --pos-def:#b83c0a; --pos-def-dim:rgba(184,60,10,.1);
  --pos-mid:#1f6f31; --pos-mid-dim:rgba(31,111,49,.1);
  --pos-att:#175fa3; --pos-att-dim:rgba(23,95,163,.1);
  --pos-ink:#FFFFFF;

  /* ---- Attribute ramp — lightness inverts: low = pale, high = deep lime ---- */
  --attr-1:#dfe8cb;
  --attr-2:#bcd489;
  --attr-3:#8fb94a;
  --attr-4:#5f8f24;
  --attr-5:#3f6b12;

  /* ---- Deltas — text-legible on white ---- */
  --up:#237a36; --down:#c92a2a; --flat:#6a7178;

  /* ---- Editorial gold (guides) — legible amber on white ---- */
  --gold:#9a6b00; --gold-hi:#7d5c0a; --gold-dim:rgba(154,107,0,.12);

  /* ---- Elevation — soft indigo-grey shadows, not heavy black ---- */
  --shadow-1:0 1px 2px rgba(30,32,60,.07);
  --shadow-2:0 10px 28px rgba(30,32,60,.12);
  --shadow-bar:0 6px 12px -8px rgba(30,32,60,.22);
  --shadow-photo:0 8px 16px rgba(30,32,60,.2);
  --flag-ring:rgba(30,32,60,.16);

  /* Pizarra: césped claro (no un bloque oscuro sobre la página clara) y fichas
     ligeramente translúcidas para que no salten como recortes blancos puros. */
  --pitch-bg:#5f9b6e;
  --pitch-bg-2:#65a274;
  --pitch-line:rgba(255,255,255,.6);
  --pitch-chip:rgba(255,255,255,.92);
  --pitch-chip-border:rgba(30,32,60,.14);
}

/* Light theme only: a whisper of elevation so white cards lift off the tinted
   canvas. Borders already separate every surface; the shadow adds polish on the
   large repeated card/chrome containers without touching the dark theme. */
:root[data-theme="light"] .card{box-shadow:0 1px 2px rgba(30,32,60,.05),0 3px 8px rgba(30,32,60,.05)}
:root[data-theme="light"] .top{box-shadow:0 1px 3px rgba(30,32,60,.05)}