/* ============================================================================
   CHAMPIONS — THEME OVERRIDE (re-skin del Mundial) · PALETA OFICIAL
   Misma maqueta y CSS estructural que la porra del Mundial (fwc26-*.css),
   recoloreado a la paleta OFICIAL del brandbook UEFA Champions League 24/27
   (capturas en brandbook/champions-*.png). Ver [[project_champions_paleta_marca]].

   Se carga DESPUÉS de fwc26-*.css y redefine SOLO los valores de :root; la
   estructura (radios, bordes, sombras duras, layout) no se toca.

   Inversión claro→oscuro (--negro hace de tinta Y de panel):
     · --negro  → BLANCO   (tinta/bordes; paneles antes negros → blancos, salvo
       los re-escopados abajo)
     · --blanco → DARK BLUE (superficies de tarjeta)
     · --hueso  → DARK BLUE oficial #010056 (fondo)
     · sombras neutras → negro puro aparte.
   ============================================================================ */

:root {
  /* --- Neutros invertidos (dark blue #010056 + silver #B2BEBE oficiales) --- */
  --hueso: #010056;        /* fondo de página — Dark Blue oficial */
  --negro: #ffffff;        /* tinta / bordes / paneles-invertidos → blanco */
  --negro-2: #eef0f0;      /* eran oscuros sutiles → claros (tinte silver) */
  --negro-3: #dee3e3;
  --negro-4: #cdd4d4;
  --blanco: #12127a;       /* superficie de tarjeta — azul elevado sobre el fondo */

  /* Rampa neutra invertida y sesgada a silver (05 = más oscuro → 80 = más claro) */
  --gris-05: #0a0968;
  --gris-10: #12127a;
  --gris-20: #1e1e8a;
  --gris-30: #33339c;
  --gris-40: #5a5aae;
  --gris-50: #8a93b8;
  --gris-60: #a6aec8;
  --gris-70: #b2bebe;      /* Silver oficial — texto mutado */
  --gris-80: #d8dede;

  /* --- Azules ------------------------------------------------------------- */
  --azul: #00eeff;         /* Cyan oficial (acento azul brillante) */
  --azul-2: #010056;       /* Dark Blue */
  --azul-marino: #010056;
  --azul-prof: #010056;
  --azul-noche: #010040;

  /* --- Acento signature: el lima del Mundial (215 usos) → ELECTRIC BLUE ---- */
  --lima: #0232ff;         /* Electric Blue oficial — acento principal */
  --lima-2: #011fcc;

  /* --- Resto de saturados → acentos OFICIALES ----------------------------- */
  --cian: #00eeff;         /* Cyan */
  --turquesa: #00f084;     /* Green oficial (era #00e6c8, teal fuera de paleta) */
  --verde: #00f084;        /* Green */
  --verde-bosque: #00f084; /* Green oficial (era #013a5c, petróleo fuera de paleta) */
  --verde-hondo: #00f084;  /* Green oficial (era #013a5c): sombra/positivo → verde */
  --verde-osc: #00f084;    /* Green oficial (era #013a5c) */
  --morado: #9a00ff;       /* Purple */
  --lavanda: #c89aff;
  --magenta: #ff51a2;      /* Magenta */
  --rosa: #ff85c0;
  --coral: #ff6d4f;        /* Orange */
  --naranja: #ff6d4f;      /* Orange */
  --oro: #ffd300;          /* Yellow (sustituye el oro del Mundial) */
  --amarillo: #ffd300;     /* Yellow */

  /* --- Chips de posición recoloreados (petición) -------------------------- */
  /* POR naranja · DEF amarillo · MED verde · DEL azul. Hexes literales (acentos
     oficiales del brandbook) para que salgan idénticos en todos los scopes
     (.app-original, #dialogo-jugador), que NO redeclaran estos tokens. */
  --pos-por: #ff6d4f;      /* Orange   — Portero */
  --pos-def: #ffd300;      /* Yellow   — Defensa */
  --pos-med: #00f084;      /* Green    — Medio */
  --pos-del: #0232ff;      /* Electric Blue — Delantero */

  /* Rojos = semántica "en directo"/urgente → Red oficial */
  --rojo: #ff0045;
  --rojo-2: #d1003a;
  --rojo-osc: #8a0025;
  --rojo-oscuro: #8a0025;
  --live: #ff0045;

  /* --- Sombras duras neutras en Silver oficial (#B2BEBE) ------------------- */
  --sombra-2: 4px 4px 0 #b2bebe;
  --sombra-3: 6px 6px 0 #b2bebe;
  --sombra-4: 10px 10px 0 #b2bebe;
  --sombra-flat-2: 4px 4px 0 #b2bebe;
  --sombra-flat-3: 6px 6px 0 #b2bebe;
  --sombra-flat-6: 10px 10px 0 #b2bebe;
  /* --sombra-lima/azul/morado/rojo heredan su nuevo color automáticamente. */

  /* --- Gradientes oficiales (disponibles en la página) -------------------- */
  /* Core (pág. 30): radial óvalo, electric → dark blue. Para fondos. */
  --grad-core: radial-gradient(145% 145% at 100% 0%, #0232ff 0%, #010056 60%);
  /* Accent (pág. 31): línea fina, electric + 2 acentos + electric. */
  --grad-accent-1: linear-gradient(90deg,#0232ff,#ffd300,#9a00ff,#0232ff);
  --grad-accent-2: linear-gradient(90deg,#0232ff,#00f084,#ff0045,#0232ff);
  --grad-accent-3: linear-gradient(90deg,#0232ff,#00eeff,#ff6d4f,#0232ff);
}

/* Fondo de página con el CORE GRADIENT oficial (electric → dark blue), fijo. */
body {
  background: var(--grad-core) no-repeat fixed;
  background-color: #010056;
}

/* ----------------------------------------------------------------------------
   CHROME OSCURO — paneles que en el Mundial ya eran negros (topbar) y que aquí
   queremos NAVY (no invertidos a blanco). Truco: las custom properties se
   heredan, así que RE-ESCOPAMOS --negro/--blanco solo dentro de .topbar,
   devolviéndoles su semántica de panel (fondo dark blue / texto blanco). No se
   toca ninguna regla de fwc26. --lima (→ electric) NO se re-escopa.
   ---------------------------------------------------------------------------- */
.topbar {
  --negro: #010056;   /* fondo del panel → Dark Blue */
  --blanco: #ffffff;  /* tinta del panel → blanco */
}
/* "MADRID METROPOLITANO": del electric blue (var(--lima) en fwc26) a Silver oficial. */
.topbar-host { color: #b2bebe; }
/* Emblema: estrellas negras sobre transparente; el filter:invert(1) de fwc26
   las pone blancas sobre el dark blue de la topbar. */

/* Fuera el campo de fútbol de fondo del hero (rejilla SVG del Mundial): el
   fondo lo lleva ahora el vídeo Champions + el core gradient. */
.hero-scoreboard .hero-rejilla { display: none; }

/* Medalla del hero: solo el emblema con el lockup UEFA Champions League (sin
   hexágono). La máscara del logo se rellena en blanco; glow eléctrico (no lima). */
.hero-medalla-hex { display: none; }
.hero-medalla {
  filter: drop-shadow(0 18px 32px rgba(0,0,0,0.5))
          drop-shadow(0 0 18px rgba(2,50,255,0.45));
}
.hero-medalla-emblema {
  inset: 0;
  background: #ffffff;
  -webkit-mask: url("../media/champions/CHAMPIONS_LEAGUE_LOGO_TEXT.svg") center / contain no-repeat;
          mask: url("../media/champions/CHAMPIONS_LEAGUE_LOGO_TEXT.svg") center / contain no-repeat;
}

/* Emblemas de los heroes de apuestas/fantasy: en fwc26 usan el logo FIFA World
   Cup como máscara/fondo. Se sustituye por el lockup UEFA Champions League
   (CHAMPIONS_LEAGUE_LOGO_TEXT.svg) vía override de solo la imagen — el resto del
   shorthand (tamaño/posición/repeat) de fwc26 se conserva. No se toca fwc26. */
.hero-emblema-silueta,            /* apuestas.html — emblema grande del hero */
.hero-emblema-mark {              /* fantasy.html  — marca del hero */
  -webkit-mask-image: url("../media/champions/CHAMPIONS_LEAGUE_LOGO_TEXT.svg");
          mask-image: url("../media/champions/CHAMPIONS_LEAGUE_LOGO_TEXT.svg");
}
/* Login gate: apuestas y fantasy comparten markup (.login-panel / #form-sesion),
   pero cada fwc26 lo estiliza distinto. Unificamos al diseño de apuestas —
   panel centrado, icono lockup sobre el título, blobs grandes (rojo + cyan) y
   botones en grid 2-col. Vive en la capa Champions (carga última) para ganar por
   orden a las reglas .panel/.login-panel de ambos fwc26 sin editarlos. apuestas
   no cambia (mismos valores); fantasy pasa a igualarla. */
.login-panel {
  max-width: 540px;
  margin: 3rem auto;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.login-panel::before {
  content: "";
  position: absolute;
  top: -120px; right: -120px;
  width: 280px; height: 280px;
  background: var(--rojo);
  border-radius: var(--r-sq);
  z-index: 0;
}
.login-panel::after {
  content: "";
  position: absolute;
  bottom: -80px; left: -80px;
  width: 200px; height: 200px;
  background: var(--azul);
  border-radius: var(--r-sq);
  z-index: 0;
}
.login-panel > * { position: relative; z-index: 1; }
.login-panel h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.2rem, 5vw, 3rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
  text-align: center;
  justify-content: center;
}
.login-panel h2::before {         /* icono del gate → lockup UEFA Champions League */
  content: "";
  display: block;
  width: 64px; height: 64px;
  margin: 0 auto 1rem;
  background: var(--negro) url("../media/champions/CHAMPIONS_LEAGUE_LOGO_TEXT.svg") center / 55% no-repeat;
  border-radius: var(--r-sq);
  box-shadow: var(--sombra-2);
  filter: invert(1);
}
#form-sesion {
  display: grid;
  gap: 0.7rem;
  text-align: left;
  animation: login-in 0.5s var(--t-sharp);
}
@keyframes login-in {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
#form-sesion input {
  width: 100%;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.85rem 1rem;
  background: var(--hueso);
  border: var(--borde);
  border-radius: var(--r-mid);
  color: var(--negro);
  transition: all 0.16s var(--t-fast);
}
#form-sesion input::placeholder { color: var(--gris-60); font-weight: 500; }
#form-sesion input:focus {
  outline: none;
  background: var(--blanco);
  box-shadow: 4px 4px 0 var(--rojo);
  border-color: var(--rojo);
}
.login-panel .botones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin-top: 0.4rem;
}
.login-panel .ayuda {
  margin-top: 1.2rem;
  font-size: 0.82rem;
  color: var(--gris-60);
  font-family: "Inter", sans-serif;
}
.login-panel .error {
  color: var(--rojo);
  font-weight: 700;
  font-size: 0.88rem;
  min-height: 1.2em;
  margin: 0;
}
/* fantasy.html — emblema del hero: capa frontal (el logo) en BLANCO con sombra
   electric blue (en fwc26 era var(--blanco)→navy y drop-shadow negro). La capa
   .hero-emblema-back ya es la silueta electric de var(--lima), no se toca. */
.hero-emblema-front {
  background: #ffffff;
  filter: drop-shadow(0 14px 28px rgba(2, 50, 255, 0.55));
}
/* fantasy.html — números de stats del hero: en fwc26 son color:var(--blanco),
   que la inversión llevó a navy (ilegibles sobre el hero oscuro) → blanco.
   Scopeado a .hero-fantasy: el hero de apuestas aún es claro y sus números
   deben seguir oscuros. */
.hero-fantasy .hero-stat-num { color: #ffffff; }

/* apuestas.html — fondo del hero adaptado a paleta CLARA conservando el diseño
   del original (rejilla técnica + halo + profundidad). En fwc26 el hero era
   oscuro: la rejilla usa líneas BLANCAS (invisibles sobre el blanco actual) y el
   intro es texto blanco. Scopeado a .hero:has(.hero-titulo-grande) para no tocar
   los heroes de home/fantasy (que también tienen .hero::before). */
.hero:has(.hero-titulo-grande) {
  background: radial-gradient(130% 130% at 12% 18%, #ffffff 0%, #eef1f6 100%);
}
.hero:has(.hero-titulo-grande)::before {   /* rejilla: líneas blancas → navy tenue */
  background-image:
    repeating-linear-gradient(90deg, rgba(1,0,86,0.06)  0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg,  rgba(1,0,86,0.035) 0 1px, transparent 1px 96px);
}
.hero:has(.hero-titulo-grande) .hero-sub { color: rgba(1,0,86,0.72); }  /* intro legible */
/* Bloque de stats del hero: líneas y texto pequeño eran blancos (invisibles
   sobre claro) → mismo navy que el intro. Scopeado a apuestas: .hero-scoreboard
   es también el modificador del hero de home, y .hero-stat-label existe en fantasy. */
.hero:has(.hero-titulo-grande) .hero-scoreboard {
  border-top-color: rgba(1,0,86,0.72);
  border-bottom-color: rgba(1,0,86,0.72);
}
.hero:has(.hero-titulo-grande) .hero-stat { border-right-color: rgba(1,0,86,0.72); }
.hero:has(.hero-titulo-grande) .hero-stat-unidad { color: rgba(1,0,86,0.72); }
.hero:has(.hero-titulo-grande) .hero-stat-label { color: rgba(1,0,86,0.72); }

/* Footer (fondo blanco tras la inversión de --negro). El emblema pasa al lockup
   navy CHAMPIONS_LEAGUE_TEXT.svg (#00004B): quitamos el filter:invert(1) de fwc26
   (pensado para footer oscuro) para que se vea navy sobre blanco. La meta era
   texto blanco (invisible) → navy. */
.footer-emblema img { filter: none; }
.footer-meta { color: rgba(1,0,86,0.72); }

/* Tira de "selecciones" (apuestas/fantasy) → escudos de club (16 top Champions),
   reutiliza .m-crest. El texto era blanco (invisible sobre el strip blanco) → navy. */
.selecciones .seleccion { color: rgba(1,0,86,0.72); }
.selecciones-track { gap: 3rem; }   /* más respiro entre equipos (era 1.8rem) */

/* Escudos de club en la marquesina (sustituyen las banderas de país del ticker
   del Mundial). Mismo tamaño visual que las .m-flag, con sombra suave. */
.m-crest {
  height: 1.7rem;
  width: 1.7rem;
  object-fit: contain;
  vertical-align: middle;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}
/* El punto separador se pegaba al nombre: los escudos PNG traen padding
   transparente (hueco óptico en el lado del escudo) mientras que el nombre
   queda a ras del glifo. Damos aire explícito, con más en el lado del nombre. */
.m-dot {
  margin-left: 0.9rem;
  margin-right: 0.3rem;
}

/* Sección de vídeo del footer (sustituye el mosaico "Together" del Mundial).
   Reusa el contenedor neo-brutalista (borde/radio/sombra duros) que tenía
   .seccion-together; el vídeo llena el ancho manteniendo su relación de aspecto. */
.seccion-footer-video {
  border-radius: var(--r-card);
  border: var(--borde);
  box-shadow: var(--sombra-flat-6);
  overflow: hidden;
  padding: 0;
  line-height: 0;
}
.seccion-footer-video .footer-video {
  display: block;
  width: 100%;
  height: auto;
}

/* apuestas.html — fondo de VÍDEO Champions (media/champions/bg_match.mp4) rellenando
   el tablero de apuestas. El vídeo (azul eléctrico oscuro con líneas de acento) cubre
   el board por detrás del contenido; un scrim navy asegura contraste y el contenido se
   voltea a texto claro. Scopeado a main.app-original → solo la porra diaria. */
main.app-original .apuesta-board {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
main.app-original .apuesta-board > .ab-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
main.app-original .apuesta-board::after {   /* scrim de legibilidad sobre el vídeo */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(1, 0, 86, 0.4) 0%, rgba(1, 0, 64, 0.68) 100%);
  pointer-events: none;
}
main.app-original .apuesta-board > *:not(.ab-video) { position: relative; z-index: 2; }
/* Contenido claro sobre el vídeo (el board era claro con tinta oscura en Mundial). */
main.app-original .apuesta-board .ab-nombre {
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
main.app-original .apuesta-board .ab-pie { color: rgba(255, 255, 255, 0.85); }
main.app-original .apuesta-board .ab-pie-wrap { border-top-color: rgba(255, 255, 255, 0.22); }
/* El board cerrado pintaba fondo --hueso opaco: transparente para no tapar el vídeo. */
main.app-original .apuesta-board--cerrado { background: transparent; }

/* apuestas.html — escudo de club en las tarjetas de la porra diaria (sustituye la
   bandera de país cuando el partido trae escudoLocal/escudoVisitante). Mismo hueco
   visual que .ab-bandera.fi (5.8×4.2rem), pero `contain` para respetar la forma del
   escudo, con drop-shadow en vez de la sombra dura de la bandera. */
.ab-escudo {
  display: block;
  width: 4.6rem;
  height: 4.2rem;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.28));
  transition: transform 0.25s var(--t-pop);
}
.ab-equipo:hover .ab-escudo { transform: translateY(-2px) scale(1.03); }
@media (max-width: 600px) {
  .ab-escudo { width: 3rem; height: 2.8rem; }
}

/* Escudo de club en el marcador (logo de api-football): sustituye la bandera de
   país cuando el partido trae escudoLocal/escudoVisitante. */
.sb-bandera .sb-escudo {
  width: 1.5em;
  height: 1.5em;
  object-fit: contain;
  vertical-align: middle;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.55));
  transition: transform 0.25s var(--t-pop);
}
.sb-equipo:hover .sb-bandera .sb-escudo { transform: translateY(-2px) scale(1.04); }

/* Scoreboard: borde, nombres de equipo y marcador en BLANCO. El fwc26 los tenía
   en lima hardcodeado (borde) y en var(--blanco) — que el re-skin invirtió a azul
   oscuro. Legibilidad sobre el panel oscuro del marcador. */
.scoreboard { border-color: rgba(255, 255, 255, 0.6); }
.sb-nombre { color: #ffffff; }
.sb-score { color: #ffffff; }
.sb-score .sb-guion { color: #ffffff; opacity: 0.85; }

/* ----------------------------------------------------------------------------
   Diálogo de detalle de jugador (#dialogo-jugador). Es hermano de <main>, así que
   queda FUERA de #vista-app/.app-original y el :root Champions lo invierte a azul
   oscuro (superficies var(--blanco)→#12127a, tinta blanca). Lo devolvemos a la
   paleta clara del Mundial (mismo set que .app-original) para que sea BLANCO con
   delimitadores claros y no transparentes. Re-declaramos también los tokens de
   borde COMPUESTOS (--borde/--borde-fino), que se computan a blanco en :root y se
   heredan ya resueltos: sin esto el borde saldría blanco pese al --negro local.
   ---------------------------------------------------------------------------- */
#dialogo-jugador {
  /* Relleno blanco del propio <dialog>: .dialogo lo deja transparent, y los
     márgenes entre secciones dejaban ver el core gradient del body (barras
     azules). Con fondo blanco cualquier hueco entre secciones es blanco. */
  background: var(--blanco);
  color: #0a0a0a;
  --negro: #0a0a0a;
  --negro-2: #16161a;
  --negro-3: #1f1f24;
  --blanco: #ffffff;
  --hueso: #f7f5f0;
  --gris-05: #f8f8fb;
  --gris-10: #ececf2;
  --gris-20: #d4d4de;
  --gris-40: #9a9aa6;
  --gris-60: #5a5a64;
  --gris-70: #4a4842;
  --rojo: #ff2b1f;
  --verde: #1ad96c;
  --azul: #4a7cff;
  --borde: 2.5px solid var(--negro);
  --borde-fino: 1.5px solid var(--negro);
  --sombra-2: 4px 4px 0 var(--negro);
  --sombra-3: 6px 6px 0 var(--negro);
  --sombra-4: 10px 10px 0 var(--negro);
  /* La sombra dura la fija .dialogo como `8px 8px 0 var(--negro)`; al re-declarar
     --negro=#0a0a0a arriba, se resuelve a negro sola (no hace falta override). */
}

/* ----------------------------------------------------------------------------
   `.app-original` — el subárbol marcado vuelve a la paleta MUNDIAL original: se
   re-declaran los tokens de fwc26 sobre el contenedor, de modo que su subárbol
   IGNORA la inversión Champions del :root. Solo el fondo de página (body) conserva
   el core gradient, que se ve a través del contenedor (sin background propio).
   Usado en:
     · fantasy.html — sobre #vista-app (el LOGIN #vista-login, hermano, sigue Champions).
     · apuestas.html — sobre <main> entero (login + app): todo el <main> vuelve al
       Mundial sobre el fondo degradado. Fuera de <main> siguen Champions: topbar,
       hero, selecciones y footer.
   ---------------------------------------------------------------------------- */
.app-original {
  /* color de texto base: body lo fijó a var(--negro)=blanco (computado fuera del
     scope), y se hereda blanco. Lo re-fijamos aquí donde --negro ya es #0a0a0a,
     para que títulos de panel y nombres de jugador (que heredan color) se vean. */
  color: #0a0a0a;
  --negro: #0a0a0a;
  --negro-2: #16161a;
  --negro-3: #1f1f24;
  --blanco: #ffffff;
  --hueso: #f7f5f0;
  --gris-05: #f8f8fb;
  --gris-10: #ececf2;
  --gris-20: #d4d4de;
  --gris-40: #9a9aa6;
  --gris-60: #5a5a64;
  --gris-70: #4a4842;
  --rojo: #ff2b1f;
  --rojo-oscuro: #8a1410;
  --azul: #4a7cff;
  --azul-prof: #1a3b9c;
  --morado: #7b3fff;
  --magenta: #ff2bd6;
  --verde: #1ad96c;
  --verde-hondo: #034d2d;
  --turquesa: #28e6d6;
  --lima: #d0ff3a;
  --oro: #ffc233;
  --naranja: #ff5722;
  --coral: #ff8a7a;
  --rosa: #ffb5d6;
  --lavanda: #c4b5ff;
  /* sombras duras originales (Champions las puso en silver) */
  --sombra-2: 4px 4px 0 var(--negro);
  --sombra-3: 6px 6px 0 var(--negro);
  --sombra-4: 10px 10px 0 var(--negro);
}

/* Home (index.html, main.lienzo): la sombra dura va en BLANCO, no en el silver
   global de Champions. Mismo patrón de re-scope que .app-original, pero apuntando
   a blanco (var(--negro) resuelve a #fff en el :root Champions). Scope exclusivo
   de la portada: apuestas usa main.app-original y fantasy #vista-app. */
main.lienzo {
  --sombra-2: 4px 4px 0 var(--negro);
  --sombra-3: 6px 6px 0 var(--negro);
  --sombra-4: 10px 10px 0 var(--negro);
  --sombra-flat-2: 4px 4px 0 var(--negro);
  --sombra-flat-3: 6px 6px 0 var(--negro);
  --sombra-flat-6: 10px 10px 0 var(--negro);
}

/* Billboard del bote (portada): sin sombra dura. fwc26 le pone
   box-shadow: var(--sombra-flat-6); aquí la anulamos sin tocar la base. */
.bote-billboard .bote { box-shadow: none; }

/* Tokens de borde COMPUESTOS (`--borde`, `--borde-grueso`): fwc26 los declara en
   :root como `Npx solid var(--negro)`, así que se COMPUTAN a blanco en el :root
   Champions (--negro=#fff) y se heredan hacia abajo YA RESUELTOS a blanco — la
   re-declaración de --negro en .app-original no los alcanza, porque el token
   compuesto en sí no se re-declara. Resultado: elementos que usan `border:
   var(--borde)` (p. ej. .barra-usuario) salían con borde BLANCO pese a estar dentro
   de app-original. Los re-declaramos sobre el propio contenedor para que su
   var(--negro) resuelva al #0a0a0a local y todo el subárbol tenga borde NEGRO.
   Scope `main.app-original` = SOLO apuestas (px 2/3 de fwc26-apuestas); fantasy usa
   #vista-app —un div, no un main— con sus propios px y parches por-elemento. */
main.app-original {
  --borde: 2px solid var(--negro);
  --borde-grueso: 3px solid var(--negro);
}

/* Cards de actividad de fantasy: borde y sombra dura SIEMPRE en negro (no el
   silver de Champions). Ya salían negras por --negro=#0a0a0a en .app-original;
   esto lo fija explícito como candado de diseño. */
.app-original .actividad-card {
  border-color: #0a0a0a;
  box-shadow: 3px 3px 0 #0a0a0a;
}

/* Fichas de mercado/plantilla (.jugador-card): borde negro. El indicador de
   titular es un ::before (glow lima), no el borde; la sombra ya es
   var(--sombra-3)=negra en .app-original, así que no se toca (conserva su offset). */
.app-original .jugador-card { border-color: #0a0a0a; }

/* Clausulazos (borde/sombra eran var(--rojo)) y pujas enviadas (eran var(--azul)):
   borde y sombra dura a negro. */
.app-original .actividad-clausulazo,
.app-original .actividad-oferta-enviada {
  border-color: #0a0a0a;
  box-shadow: 3px 3px 0 #0a0a0a;
}

/* "pts" del pill de puntos → lima. El barrido de leaks Champions había pasado el
   color del <small>pts</small> y el glow a electric blue; aquí (app Mundial) vuelven a lima. */
.app-original .puntos-jugador small { color: var(--lima); }
.app-original .puntos-jugador { text-shadow: 0 0 8px rgba(208, 255, 58, 0.55); }

/* Saldo del presidente: "rodeado en lima" como el fantasy del Mundial. El texto ya
   sale lima (var(--lima)=#d0ff3a en app-original), pero fwc26 tenía el fondo, el
   borde y el glow HARDCODEADOS en electric blue (rgba(2,50,255,α), del barrido de
   leaks). Los devolvemos a lima para que el marco acompañe al número. La animación
   led-pulse también parpadeaba en electric blue → keyframe lima propio. */
.app-original #saldo {
  color: var(--lima);
  background: rgba(208, 255, 58, 0.10);
  border-color: rgba(208, 255, 58, 0.5);
  text-shadow: 0 0 12px rgba(208, 255, 58, 0.55);
  animation-name: led-pulse-lima;
}
@keyframes led-pulse-lima {
  0%, 100% { text-shadow: 0 0 12px rgba(208, 255, 58, 0.5); }
  50%      { text-shadow: 0 0 20px rgba(208, 255, 58, 0.85); }
}

/* Líneas verticales de la barra del presidente: fwc26 las tenía en electric blue
   hardcodeado (rgba(2,50,255,α), barrido de leaks). Vuelven a lima como en el
   fantasy del Mundial, para que acompañen al saldo/nombre en lima. */
.app-original .barra-usuario::before {
  background: repeating-linear-gradient(90deg,
    transparent 0 14px,
    rgba(208, 255, 58, 0.06) 14px 16px);
}

/* Ofertas recibidas (.actividad-oferta, eran var(--morado)) — borde y sombra a negro. */
.app-original .actividad-oferta {
  border-color: #0a0a0a;
  box-shadow: 3px 3px 0 #0a0a0a;
}

/* Botones de acción dentro de cards de la app (aceptar/rechazar/cancelar/pujar/
   clausulazo): MANTIENEN borde negro + sombra dura negra. Ya lo hacen por defecto
   en fwc26 (var(--negro)=#0a0a0a en .app-original), así que solo lo reforzamos por
   si algún variante trajera color; hover/active conservan su animación de offset. */
.app-original .actividad-card .btn,
.app-original .jugador-card .btn,
.app-original .acciones-oferta .btn {
  border-color: #0a0a0a;
}

/* ============================================================
   FOTOS DE JUGADOR (headshots api-sports) — feature nueva.
   Avatar circular; si no hay foto (o falla la carga) queda la
   inicial del nombre como respaldo vía data-ini + ::after. Los
   colores salen de los tokens del contenedor, así casan con la
   card donde van (app-original = blanco/negro clásico).
   ============================================================ */
.jugador-foto {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--negro);
  background: var(--gris-10);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 0 var(--negro);
  vertical-align: middle;
}
.jugador-foto::after {
  content: attr(data-ini);
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--negro);
}
.jugador-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--blanco);
}

/* Escudo del club, pequeño, junto a la foto (izquierda del header). */
.jugador-escudo {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  object-fit: contain;
  vertical-align: middle;
}

/* Nueva maqueta de la card:
   · Header = foto + escudo + nombre del club, agrupados a la IZQUIERDA.
   · La posición (jugador-pos) baja a la línea del NOMBRE, justo a su derecha;
     los puntos se empujan al extremo derecho de esa línea. */
.jugador-card .jugador-cab {
  justify-content: flex-start;
}
.jugador-card .jugador-cab .jugador-equipo {
  flex: 0 1 auto;
  min-width: 0;
  text-align: left;
  padding-right: 0;   /* anula el hueco que fwc26 reservaba para el badge viejo */
}
.jugador-nombre .jugador-nombre-txt { flex: 0 1 auto; }
.jugador-nombre .jugador-pos { flex: 0 0 auto; }
.jugador-nombre .puntos-jugador { margin-left: auto; }

/* Chips recoloreados: amarillo (DEF) y verde (MED) son fondos claros → tinta
   oscura para legibilidad (fwc26 les ponía var(--blanco), que en el scope de la
   app resuelve a blanco y quedaba ilegible). POR (naranja) y DEL (azul eléctrico)
   conservan la tinta del base (oscura / blanca, respectivamente). */
.jugador-pos.pos-DEF, .pill.pos-DEF.activo,
.jugador-pos.pos-MED, .pill.pos-MED.activo { color: #010056; }

/* Responsive (fwc26 flotaba el nombre del club ABSOLUTO centrado sobre el header):
   lo devolvemos al flujo para conservar la misma maqueta que en escritorio. */
@media (min-width: 420px) and (max-width: 720px) {
  .jugador-card .jugador-cab { position: static; justify-content: flex-start; }
  .jugador-card .jugador-cab .jugador-equipo {
    position: static;
    transform: none;
    left: auto;
    top: auto;
    flex: 0 1 auto;
    min-width: 0;
    padding: 0;
    text-align: left;
    pointer-events: auto;
  }
}

/* Card: el badge titular/suplente estaba ABSOLUTO arriba-derecha y chocaba con
   los nombres de club (más largos que las selecciones del Mundial). Lo pasamos a
   FLUJO: pastilla compacta bajo el nombre, sin solaparse con nada. */
.jugador-card .badge-titular,
.jugador-card .badge-suplente {
  position: static;
  top: auto;
  right: auto;
  margin-top: -0.15rem;
}

/* Tabla de rendimiento: avatar + nombre/equipo en línea. */
.rend-jugador {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.rend-jugador > span {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.15;
}
.rend-jugador .jugador-foto {
  width: 34px;
  height: 34px;
}
.rend-jugador .jugador-foto::after { font-size: 0.9rem; }

/* Modal de detalle: avatar grande junto al título. */
.dialogo-cab {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.dialogo-cab .dialogo-x { margin-left: auto; }
.jugador-foto-lg {
  width: 56px;
  height: 56px;
}
.jugador-foto-lg::after { font-size: 1.5rem; }

/* ============================================================
   ALINEACIÓN — campo de fútbol con drag&drop (pestaña "Mi equipo").
   Reutiliza el avatar .jugador-foto y los tokens de posición.
   ============================================================ */
.fantasy-tabs.subtabs { margin-top: 0; }

/* En PC el campo se estiraba a todo el ancho del panel (enorme). Lo limitamos a
   una columna centrada; en móvil el contenedor ya es más estrecho, así que no le
   afecta (se sigue viendo como en responsive). */
#subvista-alineacion { max-width: 460px; margin-left: auto; margin-right: auto; }

.aln-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.aln-sel-box { position: relative; }
.aln-sel {
  appearance: none; -webkit-appearance: none;
  background: var(--blanco); color: var(--negro);
  border: 2px solid var(--negro); border-radius: var(--r-mid); box-shadow: 3px 3px 0 var(--negro);
  font-family: "Big Shoulders Display", sans-serif; font-weight: 900; font-size: 1.5rem; letter-spacing: .08em;
  padding: 8px 42px 8px 16px; cursor: pointer;
}
.aln-sel-box::after { content: "\25BE"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--negro); }
.aln-meta { text-align: right; font-family: "Big Shoulders Display", sans-serif; }
.aln-meta .j { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.aln-meta .d { font-size: 1.25rem; font-weight: 900; }
.aln-meta .d span { opacity: .6; font-weight: 700; font-size: .85rem; }

.aln-campo {
  position: relative; width: 100%; aspect-ratio: 3/3.5;
  background: radial-gradient(140% 140% at 50% 0%, #0232ff 0%, #010056 55%, #01003a 100%);
  border: 3px solid var(--negro); border-radius: var(--r-card); box-shadow: var(--sombra-3);
  overflow: hidden; display: flex; flex-direction: column; justify-content: space-around; padding: 16px 6px;
}
/* Campo COMPLETO dibujado en SVG (perímetro, áreas, áreas pequeñas, círculo, puntos
   y arcos). El trazo va en un degradado con TODA la paleta de acentos del brandbook
   y el filtro de glow (feGaussianBlur del propio trazo) hereda esos colores → halo
   neón multicolor. Latido lento del brillo encima. z-index 1: bajo los jugadores (2). */
.aln-pitch {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
  opacity: 0.6;   /* líneas menos brillantes (atenúa trazo + glow a la vez) */
}
.aln-line { display: flex; justify-content: space-around; align-items: flex-start; position: relative; z-index: 2; gap: 2px; }

/* touch-action:none = imprescindible para arrastrar en táctil: impide que el
   navegador interprete el gesto como scroll y se quede el pointermove. */
.aln-pp { display: flex; flex-direction: column; align-items: center; width: 78px; cursor: grab; user-select: none; touch-action: none; }
.aln-pp:active { cursor: grabbing; }
.aln-pp.dragging { opacity: .4; }
.aln-pp img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }

/* Clon flotante que sigue al dedo/cursor durante el arrastre. pointer-events:none
   para que elementFromPoint vea el hueco/banquillo que hay debajo, no el clon. */
.aln-drag-clone {
  position: fixed; left: 0; top: 0; z-index: 9999;
  pointer-events: none; opacity: .92;
  transform: scale(1.08); transform-origin: center;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.5));
}
body.aln-dragging { user-select: none; -webkit-user-select: none; }
.aln-pp .aln-ava { position: relative; }
.aln-pp .jugador-foto { width: 56px; height: 56px; border-width: 2.5px; }
.aln-pp.pos-POR .jugador-foto { border-color: var(--pos-por); }
.aln-pp.pos-DEF .jugador-foto { border-color: var(--pos-def); }
.aln-pp.pos-MED .jugador-foto { border-color: var(--pos-med); }
.aln-pp.pos-DEL .jugador-foto { border-color: var(--pos-del); }
.aln-pp .aln-crest { position: absolute; right: -6px; bottom: -4px; width: 24px; height: 24px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.aln-pp .aln-nm {
  margin-top: 8px; font-family: "Big Shoulders Display", sans-serif; font-weight: 900; font-size: .72rem;
  letter-spacing: .02em; text-transform: uppercase; text-align: center;
  background: var(--blanco); color: var(--negro); border: 2px solid var(--negro); border-radius: var(--r-mid);
  box-shadow: 2px 2px 0 var(--negro); padding: 2px 8px; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.aln-slot { display: flex; justify-content: center; }
.aln-slot-empty { width: 56px; height: 56px; border-radius: 50%; border: 2.5px dashed rgba(255,255,255,.4); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.6); font-size: 1.5rem; }
.aln-slot.drop-ok .aln-slot-empty, .aln-slot.drop-ok .jugador-foto { border-color: var(--pos-med); box-shadow: 0 0 0 3px rgba(0,240,132,.45); }
.aln-slot.drop-no { outline: 2px solid var(--rojo); outline-offset: 3px; border-radius: 12px; }

.aln-bench { margin-top: 18px; }
.aln-bench-list { display: flex; flex-wrap: wrap; gap: 12px 10px; min-height: 96px; padding: 12px; border: 2px dashed var(--negro); border-radius: var(--r-card); background: var(--gris-10); }
.aln-bench-list.drop-ok { border-style: solid; border-color: var(--lima); background: rgba(2,50,255,.12); }
.aln-bench .aln-pp { width: 70px; }
.aln-bench .aln-pp .jugador-foto { width: 48px; height: 48px; }
.aln-hint { margin-top: 12px; }

/* Badge de capitán (parecido a badge-titular-mini): "C" dorada junto al jugador. */
.aln-pp .aln-cap-badge {
  position: absolute; left: -7px; top: -5px; z-index: 4;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--oro); color: var(--negro);
  border: 2px solid var(--negro); box-shadow: 2px 2px 0 var(--negro);
  font-family: "Big Shoulders Display", sans-serif; font-weight: 900; font-size: .82rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.aln-pp.es-capitan .jugador-foto { box-shadow: 0 0 0 3px var(--oro); }

/* Barra de acción: botón Guardar alineación. */
.aln-acciones { margin-top: 16px; display: flex; justify-content: center; }
.aln-acciones .btn { width: 100%; max-width: 320px; }

/* En móvil fwc26 pone .fantasy-tabs sticky (top: --topbar-h). Como el sub-tab
   también es .fantasy-tabs, había DOS barras sticky al mismo offset que se pisaban
   y quedaban flotando sobre el campo. El sub-tab no debe pegarse nunca; y estando
   en Alineación tampoco el tab principal, para no tapar el campo al hacer scroll. */
@media (max-width: 720px) {
  /* fwc26 pone ambas barras sticky al MISMO top (--topbar-h) y se pisaban sobre el
     campo. Apilamos el sub-tab justo debajo del tab principal (--subtabs-top lo calcula
     initTopbarHeight en JS = topbar + alto del tab principal). Mantiene position:sticky
     (contexto válido para el .tab-indicador; con static/relative se rompía). z-index por
     debajo del tab principal (40) para que quede detrás al solaparse en la transición. */
  .fantasy-tabs.subtabs { top: var(--subtabs-top, 130px); z-index: 39; }
}