/* ==========================================================================
   PRIME CHAMPIONS · MODO CLARO — AJUSTES A MANO
   --------------------------------------------------------------------------
   Se carga DESPUÉS de prime-claro.css (que es generado). Aquí van los casos
   que el generador no puede resolver por sí solo:

     · colores que llegan desde una variable puesta por JavaScript,
     · elementos de marca que deben conservar su color en los dos temas,
     · decisiones de diseño que no son una simple inversión de luminosidad.
   ========================================================================== */

/* --------------------------------------------------------- MICRO-ETIQUETAS */
html.modo-claro .previewEtiqueta { color: var(--pc-primario-hondo) !important; }
html.modo-claro .metricaEtiqueta { color: var(--pc-texto-suave) !important; }
html.modo-claro .metricaValor { color: var(--pc-texto) !important; }
html.modo-claro .metricaValor--oro { color: var(--pc-oro) !important; }
html.modo-claro #previewDescripcion { color: var(--pc-texto-suave) !important; }

html.modo-claro .eyebrow,
html.modo-claro .eyebrowManager,
html.modo-claro .subtextHeader,
html.modo-claro .kpiLabel,
html.modo-claro .kpiSub,
html.modo-claro .puntosLabel,
html.modo-claro .puntosSub,
html.modo-claro .patchFecha,
html.modo-claro .scoreBoxLabel,
html.modo-claro .labelStatCel,
html.modo-claro .toggleText,
html.modo-claro .jugadorSub { color: var(--pc-texto-suave) !important; }

html.modo-claro .scoreBoxRank,
html.modo-claro .scoreBoxRank b,
html.modo-claro .trofeoNombre,
html.modo-claro .rankNumero,
html.modo-claro .rankDetalle b,
html.modo-claro .valorStatCel,
html.modo-claro .nombreManagerCelebracion,
html.modo-claro .nombreManagerCelebracion strong,
html.modo-claro .subtituloCampeonGlorioso,
html.modo-claro .totwPlayerName,
html.modo-claro .totwCardStats span,
html.modo-claro .totwCardStats b { color: var(--pc-texto) !important; }

html.modo-claro .rankDetalle small,
html.modo-claro .guanteInfo p { color: var(--pc-texto-suave) !important; }

/* ------------------------------------------------------- BOTONES DE MARCA
   El violeta del botón principal es identidad: no se invierte con el tema.
   -------------------------------------------------------------------- */
html.modo-claro #btnAuth,
html.modo-claro #btnInvitado,
html.modo-claro #btnCrearClub,
html.modo-claro #btnConfirmarInvitado,
html.modo-claro #btnVerify,
html.modo-claro #btnResetPassCode,
html.modo-claro #btnElegirEscudo,
html.modo-claro #btnAvanzar,
html.modo-claro .btnAccionPrime,
html.modo-claro .btnPrime--primario,
html.modo-claro .btnStartChampions,
html.modo-claro .btnSurvivalPlay,
html.modo-claro .c-action-btn,
html.modo-claro .btnTiendaHeaderLogros,
html.modo-claro .btnTiendaFlotanteLogros,
html.modo-claro .btnAbrirLogrosDesdePerfil,
html.modo-claro .btnAccionCelebracion {
    background: linear-gradient(135deg, var(--pc-500), var(--pc-700)) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

html.modo-claro .btnAccionTienda,
html.modo-claro .btnVerCeremonia,
html.modo-claro .btnAceptarDisclaimer,
html.modo-claro .btnPrime--oro,
html.modo-claro .donarBtn {
    background: linear-gradient(135deg, #8a5f00, #6d4a00) !important;
    color: #ffffff !important;
}

html.modo-claro #btnCancelarInvitado,
html.modo-claro .volverSuperBtn {
    background: transparent !important;
    color: var(--pc-texto-suave) !important;
}

html.modo-claro .btnAccionLogro:disabled,
html.modo-claro .btnAccionTienda:disabled,
html.modo-claro .claimedBtn {
    background: color-mix(in srgb, var(--pc-texto-tenue) 16%, #ffffff) !important;
    color: var(--pc-texto-suave) !important;
}

/* ------------------------------------------------------------ INSIGNIAS */
html.modo-claro .tagEstado,
html.modo-claro .logroItemPuntos,
html.modo-claro .badgeClubTag,
html.modo-claro .clubBadgeStat,
html.modo-claro .jugadorPosTag,
html.modo-claro .jugadorMediaTag,
html.modo-claro .badgeTiendaTag,
html.modo-claro .badgeGlobalRank,
html.modo-claro .badgeGlowText,
html.modo-claro .totwBadgePill,
html.modo-claro .coperoBadge,
html.modo-claro .mediaCarta {
    background: color-mix(in srgb, var(--pc-primario) 12%, #ffffff) !important;
    color: var(--pc-primario-hondo) !important;
    border-color: var(--pc-borde) !important;
}

/* ------------------------------------------------------ LOGROS Y TIENDA
   Un logro bloqueado se distingue por su marco, no desaturando la tarjeta
   entera: en claro eso la convertía en un rectángulo gris ilegible.
   -------------------------------------------------------------------- */
html.modo-claro .tarjetaLogroItem {
    background: linear-gradient(150deg, #ffffff 0%, #f8f4ff 100%) !important;
    border-color: var(--pc-borde) !important;
    filter: none !important;
    opacity: 1 !important;
}

html.modo-claro .tarjetaLogroItem.locked {
    border-style: dashed !important;
    border-color: color-mix(in srgb, var(--pc-texto-tenue) 45%, transparent) !important;
}

html.modo-claro .tarjetaLogroItem.unlocked,
html.modo-claro .tarjetaLogroItem.readyToClaim {
    border-color: var(--pc-oro) !important;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--pc-oro) 18%, transparent) !important;
}

/* --------------------------------------------------------- TEXTO DE MARCA
   Título recortado sobre degradado: se le da un degradado oscuro propio en
   lugar de intentar aclararle el fondo.
   -------------------------------------------------------------------- */
html.modo-claro .appBrandTitle,
html.modo-claro .eaBrandTitle,
html.modo-claro .authBox h1,
html.modo-claro .clubBox h1,
html.modo-claro #champions #listaEquipos h1 {
    background: linear-gradient(92deg, var(--pc-500), var(--pc-700), var(--pc-400)) !important;
    background-size: 220% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

/* ------------------------------------------------------------- ENLACES */
html.modo-claro .eaInstaLink,
html.modo-claro #auth a,
html.modo-claro #crearClub a,
html.modo-claro .textoTerminos a { color: var(--pc-primario-hondo) !important; }

html.modo-claro .btnEnlaceEquipo {
    color: var(--pc-exito) !important;
    background: color-mix(in srgb, var(--pc-exito) 10%, #ffffff) !important;
}

/* --------------------------------------------------------------- CASINO */
html.modo-claro .c-balance span,
html.modo-claro .c-subtitle,
html.modo-claro .c-msg,
html.modo-claro .c-bets-label,
html.modo-claro .c-paytable { color: var(--pc-texto-suave) !important; }

html.modo-claro .c-dado-opt { color: var(--pc-texto-suave) !important; }
html.modo-claro .c-dado-opt b { color: var(--pc-texto) !important; }

/* ------------------------------------------------- CEREMONIA Y PREMIOS
   Paneles que en oscuro son cajas negras; en claro deben ser papel.
   -------------------------------------------------------------------- */
html.modo-claro .cardCelebracionCampeon,
html.modo-claro .cardPremioEspecial,
html.modo-claro .heroBalonOro,
html.modo-claro .guanteOroBox,
html.modo-claro .listaPremiosFinal li,
html.modo-claro .onceIdealSeccion,
html.modo-claro .statBoxCelebracion,
html.modo-claro .equipoCampeonBox,
html.modo-claro .badgeCampeonUEFA {
    background: linear-gradient(150deg, #ffffff 0%, #f8f4ff 100%) !important;
    border-color: var(--pc-borde) !important;
    color: var(--pc-texto) !important;
}

html.modo-claro .cardCelebracionCampeon *,
html.modo-claro .cardPremioEspecial *,
html.modo-claro .heroBalonOro *,
html.modo-claro .guanteOroBox * {
    text-shadow: none !important;
}

html.modo-claro .tituloCampeonGlorioso,
html.modo-claro .heroBalonOro h2,
html.modo-claro .guanteInfo h4,
html.modo-claro .cardPremioEspecial h3,
html.modo-claro .badgeCampeonUEFA span,
html.modo-claro .equipoCampeonBox h2 { color: var(--pc-texto) !important; }

html.modo-claro .eyebrowBalon,
html.modo-claro .balonOroStats,
html.modo-claro .balonOroStats span { color: var(--pc-texto-suave) !important; }
html.modo-claro .balonOroStats b { color: var(--pc-oro) !important; }

/* ------------------------------------------------- MARCADORES Y NOTAS
   Últimos textos que se quedaban rozando el 4.5:1 en modo claro.
   -------------------------------------------------------------------- */
html.modo-claro .equipoGrande span,
html.modo-claro .colGolesL span,
html.modo-claro .colGolesV span,
html.modo-claro .golesColumna div,
html.modo-claro .resumenGoleadoresMini,
html.modo-claro .resumenGoleadoresMini b { color: var(--pc-texto) !important; }

html.modo-claro .modalNotasPatchContenido li,
html.modo-claro .modalNotasPatchContenido p,
html.modo-claro .modalNotasPatchContenido strong,
html.modo-claro .patchSeccion li,
html.modo-claro .patchSeccion strong { color: var(--pc-texto) !important; }

/* --------------------------------------------------- ÚLTIMOS DOS CASOS
   `.patchList` y el marcador de "mi partido" fijan colores claros en reglas
   que el generador no alcanza (una está dentro de un contenedor con fondo
   propio; la otra hereda de un ancestro).
   -------------------------------------------------------------------- */
html.modo-claro .patchList,
html.modo-claro .patchList li,
html.modo-claro .patchList li strong { color: var(--pc-texto) !important; }

html.modo-claro .partidoGrandeCard,
html.modo-claro .partidoGrandeCard span,
html.modo-claro .partidoGrandeCard b,
html.modo-claro .partidoGrandeCard div,
html.modo-claro .miPartidoCard,
html.modo-claro .miPartidoCard span,
html.modo-claro .miPartidoCard b { color: var(--pc-texto) !important; }

html.modo-claro .statsGoleadoresDetalle,
html.modo-claro .statsGoleadoresDetalle div,
html.modo-claro .statsGoleadoresDetalle b,
html.modo-claro .statsGoleadoresDetalle small { color: var(--pc-texto) !important; }

/* ------------------------------------------- CERRAR TIENDA (MODO CLARO)
   El par original (rosa claro sobre casi blanco) no llegaba a AA, así que el
   guardián de contraste le reescribía el color en línea... y ese color en
   línea seguía puesto al pasar el ratón, cuando el fondo ya era rojo oscuro.
   Con un par legible de partida el guardián no interviene y el hover funciona.
   -------------------------------------------------------------------- */
html.modo-claro .cerrarModalTiendaBtn {
    background: color-mix(in srgb, var(--pc-peligro) 10%, #ffffff) !important;
    color: var(--pc-peligro) !important;
    border-color: color-mix(in srgb, var(--pc-peligro) 40%, transparent) !important;
}

html.modo-claro .cerrarModalTiendaBtn:hover {
    background: var(--pc-peligro-fondo) !important;
    color: #ffffff !important;
    border-color: var(--pc-peligro-fondo) !important;
}

/* ------------------------------------------- HÉROES CON FOTO (MODO CLARO)
   Estos bloques mantienen su fotografía oscura en los dos temas, así que su
   texto debe seguir siendo claro: el generador se lo había oscurecido y
   quedaba texto violeta sobre una foto casi negra.
   -------------------------------------------------------------------- */
html.modo-claro .totwHeaderHero,
html.modo-claro .torneoHeaderHero,
html.modo-claro .championsHeaderHero {
    color: #ffffff !important;
}

html.modo-claro .totwHeaderHero h1,
html.modo-claro .torneoHeaderHero h1,
html.modo-claro .championsHeaderHero h1 {
    color: #ffffff !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

html.modo-claro .totwHeaderHero p,
html.modo-claro .torneoHeaderHero p,
html.modo-claro .championsHeaderHero p,
html.modo-claro .totwHeaderHero span {
    color: #efe7fb !important;
}

html.modo-claro .totwHeaderHero .badgeGlowText {
    color: #ffd76a !important;
    background: rgba(0, 0, 0, 0.42) !important;
    border-color: rgba(255, 215, 106, 0.45) !important;
}

html.modo-claro .totwMedia { color: #8a5f00 !important; }

/* La píldora "Mundialista" acompaña al marco dorado de la carta, no al
   violeta genérico de las insignias. */
html.modo-claro .totwBadgePill {
    color: #6d4a00 !important;
    background: color-mix(in srgb, var(--pc-oro-fondo) 22%, #ffffff) !important;
    border-color: color-mix(in srgb, #8a5f00 45%, transparent) !important;
}