/* ==========================================================================
   PRIME CHAMPIONS · SISTEMA VISUAL "VIOLETA"
   --------------------------------------------------------------------------
   Capa de diseño que se carga DESPUÉS de style.css. Define el sistema de
   tokens, reescribe las superficies principales y aporta los estilos de los
   componentes portados de ReactBits (js/reactbits.js).

   Paleta base (coolors.co):
     #e7d8f7 #cfb1ee #b88ae6 #a062dd #883bd5
     #7014cc #631db0 #552594 #482e77 #3a365b

   La paleta cubre marca y acentos, pero su extremo oscuro (#3a365b) es
   demasiado claro para un fondo de modo oscuro accesible: la rampa se
   prolonga hacia #0a0813 manteniendo el mismo tono, de modo que fondo y
   marca siguen siendo la misma familia cromática.
   ========================================================================== */

:root {
    /* --- Rampa de marca --- */
    --pc-50:  #e7d8f7;
    --pc-100: #cfb1ee;
    --pc-200: #b88ae6;
    --pc-300: #a062dd;
    --pc-400: #883bd5;
    --pc-500: #7014cc;
    --pc-600: #631db0;
    --pc-700: #552594;
    --pc-800: #482e77;
    --pc-900: #3a365b;

    /* --- Prolongación oscura (mismo tono, menor luminosidad) --- */
    --pc-950: #2b2745;
    --pc-960: #211d38;
    --pc-970: #191531;
    --pc-980: #120f24;
    --pc-990: #0a0813;

    /* --- Superficies --- */
    --pc-fondo: var(--pc-990);
    --pc-fondo-elevado: var(--pc-980);
    --pc-superficie: var(--pc-970);
    --pc-superficie-2: var(--pc-960);
    --pc-superficie-3: var(--pc-950);
    --pc-velo: rgba(10, 8, 19, 0.72);

    /* Superficie de panel para los fondos que estaban escritos en atributos
       `style`: al ser un token, cambia con el tema. */
    --pc-panel: linear-gradient(150deg, var(--pc-superficie) 0%, var(--pc-fondo-elevado) 100%);

    /* --- Bordes --- */
    --pc-borde: rgba(184, 138, 230, 0.16);
    --pc-borde-fuerte: rgba(184, 138, 230, 0.34);
    --pc-borde-suave: rgba(184, 138, 230, 0.09);

    /* --- Texto --- */
    --pc-texto: #ede6fa;
    --pc-texto-suave: #a99cc4;
    --pc-texto-tenue: #8d81ab;

    /* --- Acentos --- */
    --pc-primario: #a062dd;
    --pc-primario-alt: #b88ae6;
    --pc-primario-hondo: #7014cc;
    --pc-oro: #f2c14e;
    --pc-oro-fondo: #f2c14e;
    --pc-exito: #2fd39a;
    --pc-peligro: #f2557a;
    /* `--pc-peligro` es el color del TEXTO de peligro sobre fondo oscuro; como
       relleno con texto blanco encima se queda en 3.3:1. Para eso existe
       `--pc-peligro-fondo`, que da 5.26:1 con #fff. */
    --pc-peligro-fondo: #c92d55;
    --pc-aviso: #f2a03d;
    --pc-info: #8b9ff5;

    /* --- Luz --- */
    --pc-glow: rgba(160, 98, 221, 0.45);
    --pc-glow-suave: rgba(160, 98, 221, 0.18);
    --pc-oro-glow: rgba(242, 193, 78, 0.35);

    /* --- Sombras --- */
    --pc-sombra-1: 0 1px 2px rgba(6, 4, 12, 0.4);
    --pc-sombra-2: 0 6px 18px rgba(6, 4, 12, 0.45);
    --pc-sombra-3: 0 16px 44px rgba(6, 4, 12, 0.55);
    --pc-sombra-4: 0 28px 80px rgba(6, 4, 12, 0.62);

    /* --- Geometría --- */
    --pc-radio-sm: 10px;
    --pc-radio: 16px;
    --pc-radio-lg: 22px;
    --pc-radio-xl: 28px;

    /* --- Movimiento --- */
    --pc-rapido: 140ms;
    --pc-normal: 220ms;
    --pc-lento: 380ms;
    --pc-salida: cubic-bezier(0.22, 1, 0.36, 1);
    --pc-entrada: cubic-bezier(0.4, 0, 0.2, 1);

    /* --- Puente con los tokens heredados de style.css --- */
    --fondo: var(--pc-fondo);
    --fondo-rgb: 10, 8, 19;
    --menu-fondo: var(--pc-fondo);
    --menu-fondo-rgb: 10, 8, 19;
    --menu-overlay-alpha: 0.4;
    --panel: var(--pc-superficie);
    --panel2: var(--pc-superficie-2);
    --borde: var(--pc-borde);
    --acento: var(--pc-primario);
    --oro: var(--pc-oro);
    --texto: var(--pc-texto);
    --suave: var(--pc-texto-suave);
}

/* ==========================================================================
   MODO CLARO
   No es el negativo del oscuro: es la misma familia violeta con la
   luminosidad invertida. El fondo es papel lavanda, no blanco puro, y los
   acentos bajan a los tonos hondos de la rampa para conservar el contraste.
   ========================================================================== */
html.modo-claro {
    --pc-fondo: #f3edfc;
    --pc-fondo-elevado: #faf7ff;
    --pc-superficie: #ffffff;
    --pc-superficie-2: #f5efFD;
    --pc-superficie-3: #ece2fa;
    --pc-velo: rgba(42, 33, 64, 0.42);
    --pc-panel: linear-gradient(150deg, #ffffff 0%, #f7f2ff 100%);

    --pc-borde: rgba(72, 46, 119, 0.16);
    --pc-borde-fuerte: rgba(72, 46, 119, 0.34);
    --pc-borde-suave: rgba(72, 46, 119, 0.08);

    --pc-texto: #241b3b;
    --pc-texto-suave: #4e4270;   /* 8.9:1 sobre blanco */
    --pc-texto-tenue: #655791;   /* 6.3:1 sobre blanco */

    /* Los acentos se oscurecen respecto al modo oscuro: sobre papel lavanda
       necesitan al menos 4.5:1 y las versiones vivas se quedaban en 3.5-4. */
    --pc-primario: #7014cc;
    --pc-primario-alt: #883bd5;
    --pc-primario-hondo: #552594;
    --pc-oro: #7a5400;
    --pc-oro-fondo: #e8a71a;
    --pc-exito: #0a6e50;
    --pc-peligro: #a01f45;
    --pc-peligro-fondo: #a01f45;
    --pc-aviso: #8a4a00;
    --pc-info: #2f3f9c;

    --pc-glow: rgba(112, 20, 204, 0.28);
    --pc-glow-suave: rgba(112, 20, 204, 0.1);
    --pc-oro-glow: rgba(168, 118, 10, 0.22);

    --pc-sombra-1: 0 1px 2px rgba(72, 46, 119, 0.09);
    --pc-sombra-2: 0 6px 18px rgba(72, 46, 119, 0.11);
    --pc-sombra-3: 0 16px 44px rgba(72, 46, 119, 0.14);
    --pc-sombra-4: 0 28px 70px rgba(72, 46, 119, 0.17);

    --fondo-rgb: 243, 237, 252;
    --menu-fondo-rgb: 243, 237, 252;
    --menu-overlay-alpha: 0.9;
}

/* ==========================================================================
   BASE
   ========================================================================== */
body {
    background-color: var(--pc-fondo) !important;
    color: var(--pc-texto);
}

html.modo-claro body,
html.modo-claro .pantalla,
html.modo-claro #auth,
html.modo-claro #crearClub,
html.modo-claro .eaAppLayout {
    background-color: var(--pc-fondo) !important;
    background-image:
        radial-gradient(circle at 12% -5%, rgba(160, 98, 221, 0.16) 0%, transparent 55%),
        radial-gradient(circle at 88% 8%, rgba(112, 20, 204, 0.11) 0%, transparent 50%),
        linear-gradient(180deg, #faf7ff 0%, #ece4f8 100%) !important;
    color: var(--pc-texto) !important;
}

::selection {
    background: var(--pc-primario);
    color: #fff;
}

:focus-visible {
    outline: 2px solid var(--pc-primario-alt);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Barras de scroll acordes al tema. */
* {
    scrollbar-color: var(--pc-primario-hondo) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--pc-primario), var(--pc-primario-hondo));
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--pc-primario-alt); }

/* ==========================================================================
   BACKGROUND · Aurora + Noise
   ========================================================================== */
.pc-aurora {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

.pc-aurora__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.5;
    will-change: transform;
}

.pc-aurora__blob--1 {
    width: 46vw; height: 46vw; min-width: 340px; min-height: 340px;
    top: -18%; left: -8%;
    background: radial-gradient(circle, var(--pc-500) 0%, transparent 68%);
    animation: pcDeriva1 26s ease-in-out infinite alternate;
}
.pc-aurora__blob--2 {
    width: 38vw; height: 38vw; min-width: 280px; min-height: 280px;
    top: 24%; right: -10%;
    background: radial-gradient(circle, var(--pc-300) 0%, transparent 68%);
    animation: pcDeriva2 32s ease-in-out infinite alternate;
}
.pc-aurora__blob--3 {
    width: 34vw; height: 34vw; min-width: 240px; min-height: 240px;
    bottom: -14%; left: 26%;
    background: radial-gradient(circle, var(--pc-700) 0%, transparent 70%);
    animation: pcDeriva3 38s ease-in-out infinite alternate;
}

html.modo-claro .pc-aurora__blob { opacity: 0.28; filter: blur(110px); }

/* Grano de película: SVG embebido, sin peticiones de red. */
.pc-aurora__grain {
    position: absolute;
    inset: -50%;
    opacity: 0.16;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    animation: pcGrano 700ms steps(3) infinite;
}

html.modo-claro .pc-aurora__grain { opacity: 0.07; }

@keyframes pcDeriva1 {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(9vw, 7vh, 0) scale(1.16); }
}
@keyframes pcDeriva2 {
    from { transform: translate3d(0, 0, 0) scale(1.08); }
    to   { transform: translate3d(-8vw, 10vh, 0) scale(0.94); }
}
@keyframes pcDeriva3 {
    from { transform: translate3d(0, 0, 0) scale(0.96); }
    to   { transform: translate3d(7vw, -8vh, 0) scale(1.2); }
}
@keyframes pcGrano {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-3%, 2%); }
    50%  { transform: translate(2%, -3%); }
    75%  { transform: translate(-2%, -2%); }
    100% { transform: translate(0, 0); }
}

/* ==========================================================================
   BACKGROUND · DotGrid  +  ClickSpark
   ========================================================================== */
.pc-dotgrid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.85;
}

/* Fondos WebGL de los estilos supremos de la Tienda Prime (js/reactbits-fondos.js).
   Van detrás de las capas decorativas de ::before/::after y muy por debajo del
   contenido, que ya vive en z-index 3. */
.pc-fondo-glsl {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    border-radius: inherit;
}

/* Quien pide menos movimiento igual ve el fondo, pero quieto (lo congela el JS).
   Con las animaciones del ranking apagadas no se monta ninguno. */
.sin-animaciones-ranking .pc-fondo-glsl {
    display: none;
}

.pc-clickspark {
    position: fixed;
    inset: 0;
    z-index: 999999;
    pointer-events: none;
}

/* ==========================================================================
   TEXTO · SplitText, ShinyText, GradientText
   ========================================================================== */
/* Envoltura de los caracteres: es el único hijo del título, así que dentro de
   un contenedor flex cuenta como un solo item y el texto no se desarma. */
.pc-split__t {
    display: inline;
    min-width: 0;
}

/* Antes cada letra entraba girando en 3D (rotateX -70°) con 6px de desenfoque:
   en un título de 13px se leía como un temblequeo y tardaba casi un segundo en
   asentarse. Ahora sube apenas y se enfoca: se nota que entra, no distrae.
   Tampoco lleva 'will-change' permanente — eran decenas de capas de GPU vivas
   para siempre por una animación que dura medio segundo. */
.pc-split__c {
    display: inline-block;
    animation: pcSplitIn 380ms var(--pc-salida) backwards;
}

@keyframes pcSplitIn {
    from { opacity: 0; transform: translateY(0.28em); filter: blur(3px); }
    to   { opacity: 1; transform: none; filter: none; }
}

.pc-shiny {
    position: relative;
    background: linear-gradient(
        100deg,
        var(--pc-texto) 0%, var(--pc-texto) 40%,
        #ffffff 48%, var(--pc-primario-alt) 54%,
        var(--pc-texto) 62%, var(--pc-texto) 100%
    );
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: pcShiny 4.5s linear infinite;
}

@keyframes pcShiny {
    from { background-position: 180% 0; }
    to   { background-position: -80% 0; }
}

.pc-gradient-text {
    background: linear-gradient(92deg, var(--pc-100), var(--pc-300), var(--pc-oro), var(--pc-200), var(--pc-100));
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: pcGradText 9s linear infinite;
}

@keyframes pcGradText {
    from { background-position: 0% 50%; }
    to   { background-position: 300% 50%; }
}

/* ==========================================================================
   COMPONENTES · SpotlightCard, GlareHover, TiltedCard, StarBorder, Magnet
   ========================================================================== */
.pc-spotlight {
    position: relative;
    isolation: isolate;
}

.pc-spotlight::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--pc-normal) var(--pc-entrada);
    background: radial-gradient(
        340px circle at var(--pc-mx, 50%) var(--pc-my, 50%),
        var(--pc-glow-suave) 0%,
        transparent 65%
    );
}

.pc-spotlight:hover::before { opacity: 1; }

.pc-glare {
    position: relative;
    overflow: hidden;
}

.pc-glare::after {
    content: "";
    position: absolute;
    inset: -30%;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--pc-normal) var(--pc-entrada);
    background: linear-gradient(
        105deg,
        transparent 38%,
        rgba(255, 255, 255, 0.14) 46%,
        rgba(231, 216, 247, 0.28) 50%,
        rgba(255, 255, 255, 0.14) 54%,
        transparent 62%
    );
    transform: translateX(calc(var(--pc-mx, 50%) - 50%));
}

.pc-glare:hover::after { opacity: 1; }

.pc-tilt {
    transform-style: preserve-3d;
    transition: transform var(--pc-lento) var(--pc-salida);
}

.pc-tilt--activo {
    transition: transform 90ms linear;
    transform: perspective(900px) rotateX(var(--pc-rx, 0deg)) rotateY(var(--pc-ry, 0deg));
}

.pc-star-border {
    position: relative;
    isolation: isolate;
}

.pc-star-border::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -1;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(
        from var(--pc-ang, 0deg),
        transparent 0deg,
        var(--pc-primario-alt) 55deg,
        var(--pc-oro) 90deg,
        transparent 150deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: pcGiroBorde 4s linear infinite;
}

@property --pc-ang {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes pcGiroBorde {
    to { --pc-ang: 360deg; }
}

.pc-magnet {
    transition: transform 260ms var(--pc-salida);
    will-change: transform;
}

/* ==========================================================================
   REVELADO AL SCROLL · AnimatedContent
   ========================================================================== */
.pc-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--pc-lento) var(--pc-salida), transform var(--pc-lento) var(--pc-salida);
}

.pc-reveal--visible {
    opacity: 1;
    transform: none;
}

/* ==========================================================================
   NAVEGACIÓN · PillNav
   ========================================================================== */
.eaNav {
    position: relative;
}

.pc-pill {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    border-radius: 14px;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(135deg, rgba(160, 98, 221, 0.28), rgba(112, 20, 204, 0.16));
    border: 1px solid var(--pc-borde-fuerte);
    box-shadow: 0 8px 26px var(--pc-glow-suave), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform 380ms var(--pc-salida), width 380ms var(--pc-salida), height 380ms var(--pc-salida), opacity 200ms;
}

.eaNavItem {
    position: relative;
    z-index: 1;
}

/* El estado activo lo dibuja la pastilla: se retira el fondo original. */
.eaNavItem.activo {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--pc-texto) !important;
}

.eaNavItem:hover {
    color: var(--pc-texto) !important;
    background: rgba(184, 138, 230, 0.07) !important;
}

/* ==========================================================================
   ESTRUCTURA · Sidebar, TopBar y Dashboard
   ========================================================================== */
.eaAppLayout {
    position: relative;
    background: var(--pc-fondo) !important;
    color: var(--pc-texto) !important;
}

.eaSidebar {
    background: linear-gradient(180deg, var(--pc-superficie) 0%, var(--pc-fondo-elevado) 100%) !important;
    border-right: 1px solid var(--pc-borde) !important;
    backdrop-filter: blur(14px);
}

.eaBrand {
    border-bottom: 1px solid var(--pc-borde) !important;
}

.eaBrandTitle {
    color: transparent !important;
    background: linear-gradient(92deg, var(--pc-100), var(--pc-oro), var(--pc-200));
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: pcGradText 8s linear infinite;
}

.eaBrandSub {
    color: var(--pc-texto-tenue) !important;
    letter-spacing: 0.22em !important;
}

.eaLogo {
    filter: drop-shadow(0 0 12px var(--pc-glow));
}

.eaMain {
    position: relative;
    z-index: 1;
}

.eaTopBar {
    background: linear-gradient(135deg, rgba(25, 21, 49, 0.86), rgba(18, 15, 36, 0.78)) !important;
    border: 1px solid var(--pc-borde) !important;
    box-shadow: var(--pc-sombra-2) !important;
    border-radius: var(--pc-radio-lg) !important;
    backdrop-filter: blur(16px);
}

html.modo-claro .eaTopBar {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(245, 239, 253, 0.9)) !important;
}

.eaSectionTitle {
    color: var(--pc-texto-suave) !important;
    letter-spacing: 0.2em;
}

.eaManagerName { color: var(--pc-texto) !important; }
.eaClubName { color: var(--pc-texto-suave) !important; }

.eaAvatarWrapper {
    border-color: var(--pc-borde-fuerte) !important;
    box-shadow: 0 0 0 1px var(--pc-borde), 0 6px 20px var(--pc-glow-suave);
}

/* ==========================================================================
   TARJETAS DEL MENÚ
   ========================================================================== */
.eaMiniCard {
    background: linear-gradient(150deg, var(--pc-superficie) 0%, var(--pc-fondo-elevado) 100%) !important;
    border: 1px solid var(--pc-borde) !important;
    border-radius: var(--pc-radio) !important;
    color: var(--pc-texto) !important;
    transition: transform var(--pc-normal) var(--pc-salida),
                border-color var(--pc-normal),
                box-shadow var(--pc-normal);
}

.eaMiniCard:hover {
    transform: translateY(-3px);
    border-color: var(--pc-borde-fuerte) !important;
    box-shadow: var(--pc-sombra-3), 0 0 0 1px var(--pc-borde-fuerte) !important;
    background: linear-gradient(150deg, var(--pc-superficie-2) 0%, var(--pc-superficie) 100%) !important;
}

.eaMiniText strong { color: var(--pc-texto) !important; }
.eaMiniArrow { color: var(--pc-texto-tenue) !important; }

.eaMiniCard:hover .eaMiniArrow {
    color: var(--pc-primario-alt) !important;
    transform: translateX(3px);
    transition: transform var(--pc-normal) var(--pc-salida);
}

.eaMiniBar { opacity: 0.85; }
.barBlue   { background: linear-gradient(90deg, var(--pc-300), var(--pc-500)) !important; }
.barTeal   { background: linear-gradient(90deg, var(--pc-200), var(--pc-400)) !important; }
.barPurple { background: linear-gradient(90deg, var(--pc-100), var(--pc-300)) !important; }
.barGold   { background: linear-gradient(90deg, var(--pc-oro), #d99b1f) !important; }
.barCyan   { background: linear-gradient(90deg, var(--pc-200), var(--pc-600)) !important; }

.cardPeligrosa:hover,
.eaMiniCard.cardPeligrosa:hover {
    border-color: var(--pc-peligro) !important;
    box-shadow: 0 10px 30px rgba(242, 85, 122, 0.18) !important;
}

/* ==========================================================================
   SELECTOR DE MODOS (OptionWheel + preview)
   ========================================================================== */
.selectorJuegosRueda {
    position: relative;
    background:
        radial-gradient(130% 90% at 0% 50%, rgba(160, 98, 221, 0.14), transparent 70%),
        linear-gradient(165deg, var(--pc-superficie) 0%, var(--pc-fondo-elevado) 100%) !important;
    border: 1px solid var(--pc-borde) !important;
    border-radius: var(--pc-radio-lg) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), var(--pc-sombra-2);
}

.option-wheel {
    --ow-text-color: var(--pc-texto-tenue);
    --ow-active-color: var(--pc-texto);
    position: relative;
    z-index: 1;
}

.option-wheel__item--selected {
    text-shadow: 0 0 32px var(--pc-glow);
}

.selectorIndicador {
    z-index: 1;
    background: linear-gradient(90deg, var(--pc-borde-fuerte), transparent 70%) !important;
}

.selectorIndicador::before {
    background: linear-gradient(180deg, var(--pc-primario-alt), var(--pc-primario-hondo)) !important;
    box-shadow: 0 0 20px var(--pc-glow) !important;
}

.selectorHint {
    z-index: 2;
    color: var(--pc-texto-tenue) !important;
}

.selectorJuegosPreview {
    border: 1px solid var(--pc-borde) !important;
    border-radius: var(--pc-radio-lg) !important;
    box-shadow: var(--pc-sombra-3) !important;
}

.previewVelo {
    background:
        linear-gradient(90deg, rgba(10, 8, 19, 0.94) 0%, rgba(10, 8, 19, 0.55) 55%, rgba(10, 8, 19, 0.05) 100%),
        linear-gradient(0deg, rgba(10, 8, 19, 0.72) 0%, transparent 62%) !important;
}

html.modo-claro .previewVelo {
    background:
        linear-gradient(90deg, rgba(250, 247, 255, 0.94) 0%, rgba(250, 247, 255, 0.6) 52%, rgba(250, 247, 255, 0.04) 100%),
        linear-gradient(0deg, rgba(250, 247, 255, 0.62) 0%, transparent 58%) !important;
}

html.modo-claro #previewTitulo { color: var(--pc-texto) !important; }
html.modo-claro #previewDescripcion { color: var(--pc-texto-suave) !important; }
html.modo-claro .previewMetas li {
    color: var(--pc-texto-suave);
    background: rgba(112, 20, 204, 0.07);
    border-color: var(--pc-borde);
}

.previewEtiqueta {
    color: var(--modo-acento, var(--pc-primario-alt)) !important;
}

.btnJugarModo {
    color: #14091f !important;
    letter-spacing: 0.14em;
}

html.modo-claro .btnJugarModo { color: #ffffff !important; }

/* ==========================================================================
   BOTONES
   ========================================================================== */
button,
.btnAccionPrime {
    font-family: inherit;
}

.btnAccionPrime {
    background: linear-gradient(135deg, var(--pc-500), var(--pc-700)) !important;
    color: #ffffff !important;
    border: 1px solid var(--pc-borde-fuerte) !important;
    border-radius: var(--pc-radio-sm) !important;
    box-shadow: 0 8px 22px var(--pc-glow-suave) !important;
    transition: transform var(--pc-rapido) var(--pc-salida), box-shadow var(--pc-normal), filter var(--pc-normal);
}

.btnAccionPrime:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 12px 30px var(--pc-glow) !important;
}

.btnAccionPrime:active { transform: translateY(0); }

.volverPanel,
.btnVolver,
.btnVolverPantalla {
    background: rgba(184, 138, 230, 0.08) !important;
    border: 1px solid var(--pc-borde) !important;
    color: var(--pc-texto) !important;
    border-radius: var(--pc-radio-sm) !important;
}

.volverPanel:hover,
.btnVolver:hover,
.btnVolverPantalla:hover {
    border-color: var(--pc-primario) !important;
    background: rgba(184, 138, 230, 0.16) !important;
}

/* ==========================================================================
   PANELES Y MODALES
   ========================================================================== */
.contenidoSocial,
.ceremoniaFinal,
.formConfiguracion,
.coperoCardBox,
.torneoPartidoCard,
.partidoGrandeCard {
    background: linear-gradient(155deg, var(--pc-superficie) 0%, var(--pc-fondo-elevado) 100%) !important;
    border: 1px solid var(--pc-borde) !important;
    border-radius: var(--pc-radio-lg) !important;
    box-shadow: var(--pc-sombra-3) !important;
}

.cabeceraPanel {
    color: var(--pc-texto-suave) !important;
    border-bottom: 1px solid var(--pc-borde-suave);
}

.modal,
.modalResultados,
.modalTiendaOverlay,
.modalOverlay,
.modalCelebracionCampeon {
    background: var(--pc-velo) !important;
    backdrop-filter: blur(10px);
}

.modalContenido,
.panelResultados,
.modalDisclaimerBox {
    background: linear-gradient(160deg, var(--pc-superficie-2) 0%, var(--pc-superficie) 60%, var(--pc-fondo-elevado) 100%) !important;
    border: 1px solid var(--pc-borde-fuerte) !important;
    border-radius: var(--pc-radio-xl) !important;
    box-shadow: var(--pc-sombra-4) !important;
}

.cerrar {
    color: var(--pc-texto-suave) !important;
    transition: color var(--pc-rapido), transform var(--pc-rapido);
}
.cerrar:hover { color: var(--pc-peligro) !important; transform: rotate(90deg); }

/* ==========================================================================
   TABLAS
   ========================================================================== */
table th {
    color: var(--pc-texto-tenue) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    border-bottom: 1px solid var(--pc-borde) !important;
}

table td { border-bottom: 1px solid var(--pc-borde-suave) !important; }
tr.clasificaDirecto { box-shadow: inset 3px 0 0 var(--pc-exito); }
tr.playoff { box-shadow: inset 3px 0 0 var(--pc-oro); }
tr.eliminado { box-shadow: inset 3px 0 0 rgba(242, 85, 122, 0.4); }

/* Cifras alineadas: evita el baile de columnas al cambiar de jornada. */
table td,
.marcadorGrande,
.torneoScoreBadge,
#menuCoinsVal,
#menuOvr {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   FORMULARIOS
   ========================================================================== */
input,
select,
textarea {
    background: rgba(10, 8, 19, 0.55) !important;
    border: 1px solid var(--pc-borde) !important;
    color: var(--pc-texto) !important;
    border-radius: var(--pc-radio-sm) !important;
    transition: border-color var(--pc-normal), box-shadow var(--pc-normal);
}

html.modo-claro input,
html.modo-claro select,
html.modo-claro textarea {
    background: #ffffff !important;
    border-color: var(--pc-borde) !important;
    color: var(--pc-texto) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--pc-primario) !important;
    box-shadow: 0 0 0 3px var(--pc-glow-suave) !important;
    outline: none;
}

input::placeholder,
textarea::placeholder { color: var(--pc-texto-tenue) !important; }

/* ==========================================================================
   PANTALLA DE ACCESO
   ========================================================================== */
#auth,
#crearClub {
    position: relative;
    background: var(--pc-fondo) !important;
}

.authBox,
.clubBox {
    position: relative;
    z-index: 1;
    background: linear-gradient(160deg, rgba(33, 29, 56, 0.9) 0%, rgba(18, 15, 36, 0.94) 100%) !important;
    border: 1px solid var(--pc-borde-fuerte) !important;
    border-radius: var(--pc-radio-xl) !important;
    box-shadow: var(--pc-sombra-4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(18px);
}

html.modo-claro .authBox,
html.modo-claro .clubBox {
    background: linear-gradient(160deg, #ffffff 0%, #f7f2ff 100%) !important;
}

.authBox h1,
.clubBox h1 {
    background: linear-gradient(92deg, var(--pc-100), var(--pc-oro), var(--pc-200));
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    animation: pcGradText 8s linear infinite;
}

html.modo-claro .authBox h1,
html.modo-claro .clubBox h1 {
    background: linear-gradient(92deg, var(--pc-500), var(--pc-700), var(--pc-400));
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

#btnAuth,
#btnInvitado,
#btnCrearClub,
#btnConfirmarInvitado {
    background: linear-gradient(135deg, var(--pc-500), var(--pc-700)) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--pc-radio-sm) !important;
    box-shadow: 0 10px 26px var(--pc-glow-suave) !important;
    transition: transform var(--pc-rapido) var(--pc-salida), box-shadow var(--pc-normal), filter var(--pc-normal);
}

#btnAuth:hover,
#btnInvitado:hover,
#btnCrearClub:hover,
#btnConfirmarInvitado:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow: 0 14px 34px var(--pc-glow) !important;
}

.estadoFormulario.error { color: var(--pc-peligro) !important; }
.estadoFormulario.exito { color: var(--pc-exito) !important; }
.estadoFormulario.cargando { color: var(--pc-primario-alt) !important; }

#auth a,
#crearClub a { color: var(--pc-primario-alt) !important; }
html.modo-claro #auth a,
html.modo-claro #crearClub a { color: var(--pc-primario) !important; }

/* ==========================================================================
   INSIGNIAS Y WIDGETS DEL HEADER
   ========================================================================== */
.eaOvrBadge {
    background: linear-gradient(135deg, var(--pc-400), var(--pc-600)) !important;
    color: #fff !important;
    border: 1px solid var(--pc-borde-fuerte) !important;
}

.eaCoinsBadge {
    background: linear-gradient(135deg, rgba(242, 193, 78, 0.18), rgba(242, 193, 78, 0.08)) !important;
    color: var(--pc-oro) !important;
    border: 1px solid rgba(242, 193, 78, 0.32) !important;
}

.eaBadgeVerified {
    background: rgba(160, 98, 221, 0.16) !important;
    color: var(--pc-primario-alt) !important;
    border: 1px solid var(--pc-borde-fuerte) !important;
}

.eaControlBtn {
    background: rgba(184, 138, 230, 0.08) !important;
    border: 1px solid var(--pc-borde) !important;
    color: var(--pc-texto-suave) !important;
    border-radius: var(--pc-radio-sm) !important;
    transition: border-color var(--pc-normal), color var(--pc-normal), background var(--pc-normal);
}

.eaControlBtn:hover {
    border-color: var(--pc-primario) !important;
    color: var(--pc-texto) !important;
    background: rgba(184, 138, 230, 0.16) !important;
}

.widgetMultiplicadorHeader {
    background: linear-gradient(135deg, rgba(242, 193, 78, 0.14), rgba(160, 98, 221, 0.12)) !important;
    border: 1px solid rgba(242, 193, 78, 0.28) !important;
    border-radius: var(--pc-radio-sm) !important;
}

/* ==========================================================================
   CARTAS DE JUGADOR Y DRAFT
   ========================================================================== */
.playerCard,
.carta,
.team-card {
    border-radius: var(--pc-radio) !important;
    border: 1px solid var(--pc-borde) !important;
    background: linear-gradient(160deg, var(--pc-superficie-2) 0%, var(--pc-fondo-elevado) 100%) !important;
    transition: transform var(--pc-normal) var(--pc-salida), border-color var(--pc-normal), box-shadow var(--pc-normal);
}

.playerCard:hover,
.carta:hover,
.team-card:hover {
    transform: translateY(-4px);
    border-color: var(--pc-borde-fuerte) !important;
    box-shadow: var(--pc-sombra-3) !important;
}

.card-totw   { border-color: var(--pc-oro) !important; box-shadow: 0 0 26px var(--pc-oro-glow) !important; }
.card-legend { border-color: var(--pc-primario-alt) !important; box-shadow: 0 0 22px var(--pc-glow-suave) !important; }
.card-gold   { border-color: rgba(242, 193, 78, 0.55) !important; }
.card-blue   { border-color: rgba(160, 98, 221, 0.45) !important; }

.posicion {
    background: linear-gradient(160deg, rgba(25, 21, 49, 0.92), rgba(10, 8, 19, 0.86)) !important;
    border: 1px solid var(--pc-borde) !important;
    border-radius: var(--pc-radio-sm) !important;
    transition: border-color var(--pc-normal), box-shadow var(--pc-normal), transform var(--pc-normal);
}

.posicion.activa {
    border-color: var(--pc-exito) !important;
    box-shadow: 0 0 0 1px var(--pc-exito), 0 0 24px rgba(47, 211, 154, 0.28) !important;
    transform: scale(1.04);
}

#campo {
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(160, 98, 221, 0.1), transparent 60%),
        linear-gradient(180deg, rgba(58, 54, 91, 0.5), rgba(18, 15, 36, 0.6)) !important;
    border: 1px solid var(--pc-borde) !important;
    border-radius: var(--pc-radio-lg) !important;
}

/* ==========================================================================
   MOVIMIENTO REDUCIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .pc-aurora__blob,
    .pc-aurora__grain,
    .eaBrandTitle,
    .pc-shiny,
    .pc-gradient-text,
    .pc-star-border::before,
    .authBox h1,
    .clubBox h1 {
        animation: none !important;
    }
    .pc-reveal { opacity: 1; transform: none; transition: none; }
    .pc-split__c { animation: none !important; }
    .pc-clickspark { display: none; }
}

/* ==========================================================================
   RESPONSIVE DEL TEMA
   ========================================================================== */
@media (max-width: 820px) {
    .pc-pill { border-radius: 12px; }
    .pc-aurora__blob { filter: blur(60px); }
}

@media (max-width: 480px) {
    .pc-aurora__blob--3 { display: none; }
    .pc-dotgrid { opacity: 0.5; }
}

/* ==========================================================================
   AJUSTES FINOS
   ========================================================================== */

/* Los espacios del SplitText necesitan ancho propio dentro de un flex. */
.pc-split__c--espacio {
    white-space: pre;
    min-width: 0.28em;
}

/* La rueda necesita alto suficiente para que se vean 5 de los 6 modos. */
.selectorJuegosRueda,
.selectorJuegosPreview {
    min-height: clamp(320px, 46vh, 470px);
}

@media (max-width: 900px) {
    .selectorJuegosRueda { min-height: 240px; }
    .selectorJuegosPreview { min-height: 320px; }
}

@media (max-width: 480px) {
    .selectorJuegosRueda { min-height: 200px; }
    .selectorJuegosPreview { min-height: 290px; }
}

/* ---------- Modo claro: superficies que faltaba reescribir ---------- */
html.modo-claro .eaSidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f6f1fe 100%) !important;
    border-right: 1px solid var(--pc-borde) !important;
}

html.modo-claro .eaBrand { border-bottom-color: var(--pc-borde) !important; }

html.modo-claro .eaBrandTitle {
    background: linear-gradient(92deg, var(--pc-500), var(--pc-700), var(--pc-400));
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

html.modo-claro .eaBrandSub { color: var(--pc-texto-tenue) !important; }
html.modo-claro .eaNavItem { color: var(--pc-texto-suave) !important; }
html.modo-claro .eaNavItem:hover { background: rgba(112, 20, 204, 0.06) !important; }

/* El estilo antiguo del item activo se retira en ambos temas: lo dibuja la pastilla. */
html.modo-claro .eaNavItem.activo {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--pc-texto) !important;
}

html.modo-claro .pc-pill {
    background: linear-gradient(135deg, rgba(112, 20, 204, 0.14), rgba(136, 59, 213, 0.08));
    border-color: var(--pc-borde-fuerte);
    box-shadow: 0 6px 20px rgba(112, 20, 204, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

html.modo-claro .eaMiniCard {
    background: linear-gradient(150deg, #ffffff 0%, #faf7ff 100%) !important;
    border-color: var(--pc-borde) !important;
    color: var(--pc-texto) !important;
    box-shadow: var(--pc-sombra-1) !important;
}

html.modo-claro .eaMiniCard:hover {
    background: linear-gradient(150deg, #ffffff 0%, #f3ecfd 100%) !important;
    box-shadow: var(--pc-sombra-2), 0 0 0 1px var(--pc-borde-fuerte) !important;
}

html.modo-claro .eaMiniText strong { color: var(--pc-texto) !important; }
html.modo-claro .eaSectionTitle { color: var(--pc-texto-suave) !important; }

html.modo-claro .selectorJuegosRueda {
    background:
        radial-gradient(130% 90% at 0% 50%, rgba(112, 20, 204, 0.09), transparent 70%),
        linear-gradient(165deg, #ffffff 0%, #f4eefc 100%) !important;
}

html.modo-claro .contenidoSocial,
html.modo-claro .ceremoniaFinal,
html.modo-claro .formConfiguracion,
html.modo-claro .coperoCardBox,
html.modo-claro .torneoPartidoCard,
html.modo-claro .partidoGrandeCard {
    background: linear-gradient(155deg, #ffffff 0%, #f8f4ff 100%) !important;
    border-color: var(--pc-borde) !important;
    box-shadow: var(--pc-sombra-2) !important;
    color: var(--pc-texto);
}

html.modo-claro .modalContenido,
html.modo-claro .panelResultados,
html.modo-claro .modalDisclaimerBox {
    background: linear-gradient(160deg, #ffffff 0%, #f6f1fe 100%) !important;
    border-color: var(--pc-borde-fuerte) !important;
    color: var(--pc-texto);
}

html.modo-claro .playerCard,
html.modo-claro .carta,
html.modo-claro .team-card,
html.modo-claro .posicion {
    background: linear-gradient(160deg, #ffffff 0%, #f7f2ff 100%) !important;
    border-color: var(--pc-borde) !important;
    color: var(--pc-texto) !important;
}

html.modo-claro #campo {
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(112, 20, 204, 0.07), transparent 60%),
        linear-gradient(180deg, #efe7fb, #f8f4ff) !important;
    border-color: var(--pc-borde) !important;
}

html.modo-claro table th { color: var(--pc-texto-tenue) !important; }

html.modo-claro .volverPanel,
html.modo-claro .btnVolver,
html.modo-claro .btnVolverPantalla {
    background: rgba(112, 20, 204, 0.06) !important;
    color: var(--pc-texto) !important;
}

/* Realce del panel de vista previa: un halo del color del modo entra por la
   esquina superior derecha para que el panel no lea como un rectangulo plano. */
.selectorJuegosPreview::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--modo-acento) 26%, transparent) 0%, transparent 62%);
}

.previewCuerpo { z-index: 2; }
.previewVelo { z-index: 1; }

/* En claro, el oro no tiene contraste suficiente contra texto blanco:
   el CTA pasa al violeta primario y el color del modo queda en el halo. */
html.modo-claro .btnJugarModo {
    background: linear-gradient(135deg, var(--pc-primario), var(--pc-primario-hondo)) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 26px var(--pc-glow-suave), 0 0 0 1px color-mix(in srgb, var(--modo-acento) 45%, transparent) !important;
}

/* Contador de posicion de la rueda. */
.selectorPosicion {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--pc-borde);
    background: rgba(10, 8, 19, 0.5);
    color: var(--pc-texto-suave);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.selectorPosicion b { color: var(--pc-texto); }

html.modo-claro .selectorPosicion {
    background: rgba(255, 255, 255, 0.75);
    color: var(--pc-texto-suave);
}

/* ==========================================================================
   PAUSA EN SEGUNDO PLANO
   --------------------------------------------------------------------------
   La interfaz tiene del orden de 78 animaciones infinitas (los blobs del
   fondo llevan un blur de 90px, que es de lo más caro que hay). Con la
   pestaña en segundo plano seguían corriendo y gastando batería sin que
   nadie las viera. Al volver retoman donde estaban, así que el usuario no
   nota nada salvo que el equipo dura más.
   ========================================================================== */
html.pc-sin-foco *,
html.pc-sin-foco *::before,
html.pc-sin-foco *::after {
    animation-play-state: paused !important;
}

/* ==========================================================================
   ENTRADA DE PANTALLA · escalonada por bloques
   --------------------------------------------------------------------------
   Portado de AnimatedContent / FadeContent de reactbits.dev: en vez de animar
   la pantalla entera, entran sus bloques de primer nivel uno detrás de otro.

   Es importante que sea así y no al revés. Mover el contenedor completo —que
   en el menú mide más de 3000px— se siente como un tirón de toda la página y
   obliga a repintar una superficie enorme. Los hijos, en cambio, se mueven con
   'transform', que no toca el layout: ocupan su lugar desde el primer
   fotograma, así que nada se corre y no hay sacudón.
   ========================================================================== */
.pantalla.entrada > * {
    animation: pcBloqueEntra 400ms var(--pc-salida) both;
}

@keyframes pcBloqueEntra {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* El escalonado corto hace que se lea como una cascada, no como una lista que
   tarda en aparecer. A partir del séptimo bloque ya no se suma retraso: si no,
   una pantalla larga terminaría de entrar casi un segundo después. */
.pantalla.entrada > *:nth-child(1) { animation-delay: 0ms; }
.pantalla.entrada > *:nth-child(2) { animation-delay: 45ms; }
.pantalla.entrada > *:nth-child(3) { animation-delay: 90ms; }
.pantalla.entrada > *:nth-child(4) { animation-delay: 130ms; }
.pantalla.entrada > *:nth-child(5) { animation-delay: 165ms; }
.pantalla.entrada > *:nth-child(6) { animation-delay: 195ms; }
.pantalla.entrada > *:nth-child(n+7) { animation-delay: 220ms; }

/* Los overlays a pantalla completa no entran en la cascada: son 'fixed' y
   animarlos desde acá los desplazaría fuera de su sitio. */
.pantalla.entrada > .modalDecisionContainer,
.pantalla.entrada > .modalTiendaOverlay,
.pantalla.entrada > .modalCelebracionCampeon {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .pantalla.entrada > * { animation: none; }
}