/* =====================================================================
   Tema estacional: Día Mundial contra el Cáncer de Mama (octubre).

   SOLO SOBRESCRITURAS. No modifica SCSS base. Se carga como <link id="seasonal-theme">
   al final de <head> (ver seasonal-theme.service.ts), así que gana en cascada sobre
   styles.scss compilado. Este archivo SOLO se descarga cuando el tema está activo.

   Dos reglas de diseño:
   - Los componentes de Angular tienen estilos encapsulados ([_ngcontent-xxx]), que suben la
     especificidad. Por eso sus overrides van con el prefijo :root[data-season="breast-cancer"]
     (especificidad 0,3,0 o más) en vez de confiar en el orden de carga.
   - Colores de texto: rosa de marca #c03d7e (claro) / #f090ba (oscuro) solo donde pasa AA.
     Texto sobre fondo primario: blanco en claro, #1a1a1a en oscuro.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tokens. Modo claro = :root (default, también SSR y sin JS), y los
   valores que ThemeService deja como data-bs-theme="light" o "auto".
   ThemeService resuelve "auto" a "dark" en el navegador cuando el SO
   está en oscuro, así que "auto" solo queda como literal con SO claro.
   No hay bloque @media prefers-color-scheme a propósito: el SCSS base
   no tiene uno, y un bloque así pintaría tokens oscuros sobre una
   página que sigue clara (SSR / antes de hidratar).
   --------------------------------------------------------------------- */
:root,
[data-bs-theme="light"],
[data-bs-theme="auto"] {
  /* Bootstrap calcula --bs-primary y su versión RGB en :root; ambas van para que
     rgba(var(--bs-primary-rgb), x) también cambie (bordes, sombras de foco, tints). */
  --bs-primary: #c03d7e;
  --bs-primary-rgb: 192, 61, 126;
  /* Enlaces sobre fondo blanco: #c03d7e da 4.99:1 (AA). */
  --bs-link-color: #c03d7e;
  --bs-link-color-rgb: 192, 61, 126;
  --bs-link-hover-color: #a82a62; /* 6.62:1 sobre blanco */
  --bs-link-hover-color-rgb: 168, 42, 98;
  --bs-nav-link-hover-color: #c03d7e;
  /* El valor base es el azul por defecto de Bootstrap (rgba(13,110,253,.25)). */
  --bs-focus-ring-color: rgba(192, 61, 126, 0.35);
  /* Color de texto sobre cualquier fondo primario: blanco 4.99:1 en claro. */
  --bc-on-primary: #ffffff;
  /* Texto pequeño sobre tintes de primario (pills, caption del loader). #c03d7e
     sobre tinte 12% da 4.22:1, bajo AA para texto pequeño; #a82a62 da 5.6:1. */
  --bc-pill-text: #a82a62;
  /* Identidad no textual: listón, barras de progreso, bordes decorativos. */
  --bc-identity: #d84a8f;
}

/* ---------------------------------------------------------------------
   2. Tokens en modo oscuro (data-bs-theme="dark"). Los acentos son
   #f090ba (7.78:1 sobre #191a1f). Bootstrap dark redefine --bs-link-color
   con literal azul, así que aquí se redefine también.
   --------------------------------------------------------------------- */
[data-bs-theme="dark"] {
  --bs-primary: #f090ba;
  --bs-primary-rgb: 240, 144, 186;
  --bs-link-color: #f090ba;
  --bs-link-color-rgb: 240, 144, 186;
  --bs-link-hover-color: #f7b3cf; /* 10.2:1 sobre #191a1f */
  --bs-link-hover-color-rgb: 247, 179, 207;
  --bs-nav-link-hover-color: #f090ba;
  --bs-focus-ring-color: rgba(240, 144, 186, 0.35);
  --bc-on-primary: #1a1a1a; /* #1a1a1a sobre #f090ba: 7.79:1 */
  --bc-pill-text: #f090ba;
  --bc-identity: #f090ba;
}

/* ---------------------------------------------------------------------
   3. Botones. Bootstrap compila --bs-btn-bg, --bs-btn-hover-bg, etc. como
   LITERALES (#2163e8, #1c54c5...), no como var(--bs-primary). Cambiar solo
   --bs-primary no cambia los botones: hay que redefinir cada variable
   del botón.
   --------------------------------------------------------------------- */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #c03d7e;
  --bs-btn-border-color: #c03d7e;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #a82a62; /* 6.62:1 con blanco */
  --bs-btn-hover-border-color: #a82a62;
  --bs-btn-focus-shadow-rgb: 192, 61, 126;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #922553; /* 8.04:1 con blanco */
  --bs-btn-active-border-color: #922553;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #c03d7e;
  --bs-btn-disabled-border-color: #c03d7e;
}

[data-bs-theme="dark"] .btn-primary {
  --bs-btn-color: #1a1a1a;
  --bs-btn-bg: #f090ba;
  --bs-btn-border-color: #f090ba;
  --bs-btn-hover-color: #1a1a1a;
  --bs-btn-hover-bg: #f7b3cf; /* 10.2:1 con #1a1a1a */
  --bs-btn-hover-border-color: #f7b3cf;
  --bs-btn-focus-shadow-rgb: 240, 144, 186;
  --bs-btn-active-color: #1a1a1a;
  --bs-btn-active-bg: #e27aa6; /* 6.27:1 con #1a1a1a */
  --bs-btn-active-border-color: #e27aa6;
  --bs-btn-disabled-color: #1a1a1a;
  --bs-btn-disabled-bg: #f090ba;
  --bs-btn-disabled-border-color: #f090ba;
}

/* Foco visible en botones primarios. El SCSS base deja el box-shadow de foco en 0px
   (sin anillo), así que sin esto el foco de teclado no se ve. */
.btn-primary:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* Outline: el texto es el color del acento (sobre blanco 4.99:1, sobre oscuro 7.78:1). */
.btn-outline-primary {
  --bs-btn-color: #c03d7e;
  --bs-btn-border-color: #c03d7e;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #c03d7e;
  --bs-btn-hover-border-color: #c03d7e;
  --bs-btn-focus-shadow-rgb: 192, 61, 126;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #c03d7e;
  --bs-btn-active-border-color: #c03d7e;
  --bs-btn-disabled-color: #c03d7e;
  --bs-btn-disabled-border-color: #c03d7e;
}

[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: #f090ba;
  --bs-btn-border-color: #f090ba;
  --bs-btn-hover-color: #1a1a1a;
  --bs-btn-hover-bg: #f090ba;
  --bs-btn-hover-border-color: #f090ba;
  --bs-btn-focus-shadow-rgb: 240, 144, 186;
  --bs-btn-active-color: #1a1a1a;
  --bs-btn-active-bg: #f090ba;
  --bs-btn-active-border-color: #f090ba;
  --bs-btn-disabled-color: #f090ba;
  --bs-btn-disabled-border-color: #f090ba;
}

/* Variante "soft" (literal #2163e8 en el SCSS base). Usa variables del tema para que
   el color cambie con el modo; el texto sobre hover/activo sale de --bc-on-primary. */
.btn-primary-soft {
  color: var(--bs-primary);
  background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.btn-primary-soft:active,
.btn-primary-soft:hover {
  color: var(--bc-on-primary);
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.btn-primary-soft:focus {
  color: var(--bs-primary);
  background-color: rgba(var(--bs-primary-rgb), 0.1);
}

/* ---------------------------------------------------------------------
   4. Paginación, navs, listas, dropdowns (también literales en el base).
   --------------------------------------------------------------------- */
.pagination {
  --bs-pagination-hover-color: #fff;
  --bs-pagination-hover-bg: #c03d7e;
  --bs-pagination-hover-border-color: #c03d7e;
  --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(192, 61, 126, 0.35);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: #c03d7e;
  --bs-pagination-active-border-color: #c03d7e;
}

[data-bs-theme="dark"] .pagination {
  --bs-pagination-hover-color: #1a1a1a;
  --bs-pagination-hover-bg: #f090ba;
  --bs-pagination-hover-border-color: #f090ba;
  --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(240, 144, 186, 0.35);
  --bs-pagination-active-color: #1a1a1a;
  --bs-pagination-active-bg: #f090ba;
  --bs-pagination-active-border-color: #f090ba;
}

/* Pills: las variables apuntan a --bs-primary, así que cambian solas con el modo. */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--bs-primary);
  --bs-nav-pills-link-active-color: var(--bc-on-primary);
}

.list-group {
  --bs-list-group-active-bg: var(--bs-primary);
  --bs-list-group-active-border-color: var(--bs-primary);
  --bs-list-group-active-color: var(--bc-on-primary);
}

/* Dropdowns: el color de enlace activo/hover sale de --bs-primary (claro: 4.99:1
   sobre blanco; oscuro: 8.58:1 sobre #0f0f10). */
.dropdown-menu {
  --bs-dropdown-link-hover-color: var(--bs-primary);
  --bs-dropdown-link-active-color: var(--bs-primary);
}

/* Menú oscuro: el fondo es oscuro en ambos modos, así que el acento es siempre #f090ba. */
.dropdown-menu-dark {
  --bs-dropdown-link-hover-color: #f090ba;
  --bs-dropdown-link-active-color: #f090ba;
}

/* Barra de navegación oscura (bg-dark): los enlaces activos y en hover son literales
   #2163e8 !important en el SCSS base. Sobre el fondo oscuro, el acento es #f090ba
   (7.78:1 sobre #191a1f, 8.58:1 sobre #0f0f10). Selectores por breakpoint porque el
   base los genera uno por cada .navbar-expand-*. */
:root[data-season="breast-cancer"] .navbar-dark.navbar-expand-xl .navbar-collapse .nav-link:is(.active, :hover, :focus),
:root[data-season="breast-cancer"] .navbar-dark.navbar-expand-lg .navbar-collapse .nav-link:is(.active, :hover, :focus),
:root[data-season="breast-cancer"] .navbar-dark.navbar-expand-md .navbar-collapse .nav-link:is(.active, :hover, :focus),
:root[data-season="breast-cancer"] .navbar-dark.navbar-expand-sm .navbar-collapse .nav-link:is(.active, :hover, :focus) {
  color: #f090ba !important;
}

/* ---------------------------------------------------------------------
   5. Formularios: foco, checkbox/radio, switch y slider.
   --------------------------------------------------------------------- */
/* El base usa border-color literal (#2163e8) y un anillo de foco de 0px. Se pone un
   anillo visible: un cambio de borde de 1px no basta como indicador de foco. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.35);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* En oscuro el check/punto blanco sobre rosa claro no tiene contraste (~1.9:1, mínimo
   3:1 para elementos gráficos). Se cambia el icono a #1a1a1a (7.79:1). */
[data-bs-theme="dark"] .form-check-input:checked[type="checkbox"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231a1a1a' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .form-check-input:checked[type="radio"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%231a1a1a'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .form-switch .form-check-input:checked {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231a1a1a'/%3e%3c/svg%3e");
}

.form-range::-webkit-slider-thumb,
.form-range::-moz-range-thumb {
  background-color: var(--bs-primary);
}

/* ---------------------------------------------------------------------
   6. Badges y utilidades de color.
   --------------------------------------------------------------------- */
/* .bg-primary usa rgba(var(--bs-primary-rgb)) y cambia solo. Solo el texto blanco
   (text-white, !important) necesita ajuste en oscuro: blanco sobre #f090ba es 2.23:1. */
[data-bs-theme="dark"] .badge.bg-primary {
  color: var(--bc-on-primary) !important;
}

/* El base tiene .fill-primary con literal #2163e8 !important. */
.fill-primary {
  fill: var(--bs-primary) !important;
}

/* Barras de progreso: identidad no textual (rosa de marca). */
:root[data-season="breast-cancer"] .progress-bar {
  background-color: var(--bc-identity);
}

/* ---------------------------------------------------------------------
   7. Afición Premier (estilos de componente, por eso el prefijo de especificidad).
   Ver los .scss de aficion-premier-topbar, aficion-premier-banner,
   aficion-premier-floating-cta, header, member-account y leaderboard.
   --------------------------------------------------------------------- */

/* Topbar: fondo primario (ya usa var). Texto y botón de cierre sobre el primario. */
:root[data-season="breast-cancer"] .aficion-topbar,
:root[data-season="breast-cancer"] .aficion-topbar-close {
  color: var(--bc-on-primary);
}

/* CTA de la topbar: píldora blanca con texto primario en claro. En oscuro, al revés
   (píldora #1a1a1a con texto #f090ba = 7.79:1), porque blanco sobre #f090ba no pasa. */
:root[data-season="breast-cancer"] .aficion-topbar-cta {
  background: #fff;
  color: #c03d7e;
}

:root[data-season="breast-cancer"] .aficion-topbar-cta:hover {
  color: #c03d7e;
}

:root[data-season="breast-cancer"][data-bs-theme="dark"] .aficion-topbar-cta {
  background: #1a1a1a;
  color: #f090ba;
}

:root[data-season="breast-cancer"][data-bs-theme="dark"] .aficion-topbar-cta:hover {
  color: #f090ba;
}

/* CTA flotante: fondo primario (ya usa var). Texto sobre el primario. */
:root[data-season="breast-cancer"] .aficion-floating-cta,
:root[data-season="breast-cancer"] .aficion-floating-cta-link,
:root[data-season="breast-cancer"] .aficion-floating-cta-close {
  color: var(--bc-on-primary);
}

/* Banner de Afición (home): borde superior decorativo en rosa de marca (no textual). */
:root[data-season="breast-cancer"] .aficion-banner-panel {
  border-top: 4px solid var(--bc-identity);
}

/* Avatar del header y del perfil: fondo primario, letra sobre el primario. */
:root[data-season="breast-cancer"] .aficion-avatar,
:root[data-season="breast-cancer"] .player-avatar {
  color: var(--bc-on-primary);
}

/* Píldora de Goles del header: el tono pasa de amarillo a primario (tinte 15%). */
:root[data-season="breast-cancer"] .aficion-gol-pill {
  background: rgba(var(--bs-primary-rgb), 0.15);
  color: var(--bc-pill-text);
}

/* Badge de categoría (perfil), botón de guardar club y progreso de nivel. */
:root[data-season="breast-cancer"] .tier-badge,
:root[data-season="breast-cancer"] .btn-save-club {
  color: var(--bc-on-primary);
}

:root[data-season="breast-cancer"] .tier-progress-fill {
  background: var(--bc-identity);
}

/* Píldora de categoría en la tabla de goleo: texto con el acento de pill. */
:root[data-season="breast-cancer"] .tier-pill {
  color: var(--bc-pill-text);
  background: rgba(var(--bs-primary-rgb), 0.12);
}

/* Intencionalmente SIN cambios (ya tienen su propio lenguaje de color):
   - .rank-badge.rank-1/2/3 (medallero oro/plata/bronce es semántico)
   - .btn-google / .btn-facebook (botones de marca, colores fijos)
   - .avatar (DiceBear), .btn-dark, .bg-dark, .bg-light
   Por eso ninguno de esos selectores aparece arriba. */

/* Loader del balón (solo con tema activo). El balón original trae su color como atributo fill
   (#162937); la regla CSS lo sobrescribe. Se acota a .loader para no tocar otros SVG del sitio.
   Todas las piezas pasan al rosa de identidad, incluida la sombra bb-9. */
:root[data-season="breast-cancer"] .loader svg [fill="#162937"] {
  fill: var(--bc-identity);
}

/* Badges de color "danger" (Últimas Noticias, categorías, duraciones). Bootstrap los fija en rojo
   con !important, así que la sobrescritura necesita !important también. Solo con el tema activo.
   Claro: blanco sobre #c03d7e (4.99:1). Oscuro: #1a1a1a sobre #f090ba (7.79:1). */
:root[data-season="breast-cancer"] .text-bg-danger,
:root[data-season="breast-cancer"] .badge.bg-danger {
  background-color: #c03d7e !important;
  color: #fff !important;
}

:root[data-season="breast-cancer"][data-bs-theme="dark"] .text-bg-danger,
:root[data-season="breast-cancer"][data-bs-theme="dark"] .badge.bg-danger {
  background-color: #f090ba !important;
  color: #1a1a1a !important;
}