/* Vista previa Host: azul noche premium. Grafito/cobre permanece como tema por defecto. */
html:root[data-gl-theme="experiencia-host"][data-host-palette="azul-noche"],
html:root[data-gl-theme="experiencia-host"][data-host-palette="azul-noche"] [data-gl="fc"] {
    --gl-host-night-accent: #86B6F6;
    --gl-host-night-light: #B1D2FF;
    --gl-host-night-dark: #3864B7;
    --theme-tertiary-rgb: 177, 210, 255;
    /* Alias de compatibilidad: los componentes Host existentes conservan su estructura. */
    --gl-host-copper: var(--gl-host-night-accent);
    --gl-host-copper-rgb: 134, 182, 246;
    --gl-host-copper-light: var(--gl-host-night-light);
    --gl-host-copper-dark: var(--gl-host-night-dark);
    --gl-host-copper-line: rgba(134, 182, 246, .36);
    --gl-host-hover: #213A55;
    --theme-background: #091321;
    --theme-background-rgb: 9, 19, 33;
    --theme-surface: #14273D;
    --theme-surface-rgb: 20, 39, 61;
    --theme-surface-2: #1B3350;
    --theme-surface-2-rgb: 27, 51, 80;
    --theme-accent: var(--gl-host-night-accent);
    --theme-accent-rgb: 134, 182, 246;
    --theme-secondary: #4773AE;
    --theme-secondary-rgb: 71, 115, 174;
    --theme-text: #F1F5FB;
    --theme-text-rgb: 241, 245, 251;
    --gl-violet: #93B7E8;
    --gl-text: #F1F5FB;
    --gl-text-secondary: #C5D2E3;
    --gl-text-muted: #AFBED0;
    --gl-text-dim: #9FB1C7;
    --gl-text-on-accent: #111D2C;
    --gl-button-on-primary: #111D2C;
    --gl-border: rgba(155, 188, 226, .25);
    --gl-border-strong: rgba(134, 182, 246, .43);
    --gl-border-accent: rgba(134, 182, 246, .68);
    --gl-nav-hover: rgba(134, 182, 246, .13);
    --gl-bg-primary: #091321;
    --gl-bg-secondary: rgba(12, 27, 45, .92);
    --gl-bg-elevated: #14273D;
    --gl-bg-inset: rgba(134, 182, 246, .08);
    --gl-cyan: var(--gl-host-night-accent);
    --gl-cyan-rgb: 134, 182, 246;
    --fc-cyan: var(--gl-host-night-accent);
    --fc-cyan-rgb: 134, 182, 246;
    --gx-cyan: var(--gl-host-night-accent);
    --gx-gold: var(--gl-host-night-accent);
    --gx-line: rgba(134, 182, 246, .28);
    --gl-magenta: #A4BDE6;
    --gl-magenta-rgb: 164, 189, 230;
    --gl-yellow: #B1D2FF;
    --gl-yellow-rgb: 177, 210, 255;
    --gl-gold: #B1D2FF;
    --gl-gold-rgb: 177, 210, 255;
    --gl-success: #A7DDBF;
    --gl-success-rgb: 167, 221, 191;
    --gl-warning: #F2CB94;
    --gl-warning-rgb: 242, 203, 148;
    --gl-danger: #F6B6BE;
    --gl-danger-rgb: 246, 182, 190;
    --gx-glass-background: linear-gradient(160deg, rgba(26,48,73,.82), rgba(9,19,33,.76));
    --gx-glass-border-color: rgba(134, 182, 246, .26);
    --gx-surface-background: linear-gradient(170deg, rgba(20,39,61,.97), rgba(10,22,38,.98));
    --gx-surface-border-color: rgba(134, 182, 246, .28);
    --gx-surface-overlay-background: linear-gradient(170deg, #1B3350, #091321 70%);
    --glass-background: rgba(20, 39, 61, .78);
    --glass-background-strong: rgba(15, 30, 49, .96);
    --glass-background-solid: #14273D;
    --glass-border: rgba(134, 182, 246, .26);
    --glass-border-glow: rgba(134, 182, 246, .38);
    --glass-shadow: 0 22px 58px rgba(0, 6, 18, .52), 0 0 24px rgba(134, 182, 246, .08);
    --gl-theme-card-glow: rgba(134, 182, 246, .15);
    --astro-nebula-1: rgba(134, 182, 246, .23);
    --gl-card-background: rgba(20, 39, 61, .9);
    --gl-shell-background: rgba(9, 19, 33, .96);
    --gl-ticker-background: rgba(11, 25, 43, .96);
    --gl-glow-cyan: 0 0 22px rgba(134, 182, 246, .2);
    --gl-glow-magenta: 0 0 22px rgba(164, 189, 230, .13);
    --gl-experience-art: linear-gradient(145deg, #1B3350 0%, #10253D 48%, #091321 100%);
    --host-league-card-start: #1B3350;
    --host-league-card-end: #0D2035;
    --host-league-card-text: #F1F5FB;
    --host-league-card-muted: #C5D2E3;
    --host-league-card-border: rgba(134, 182, 246, .36);
    --host-league-card-divider: rgba(134, 182, 246, .22);
    --host-league-card-shadow: 0 16px 32px rgba(0, 6, 18, .42), 0 0 0 1px rgba(134, 182, 246, .12);
    --host-league-card-shadow-hover: 0 20px 38px rgba(0, 6, 18, .5), 0 0 20px rgba(134, 182, 246, .15);
    --host-league-status-finished-bg: #E3EAF2;
    --host-league-status-finished-border: #BACADB;
    --host-league-status-finished-text: #263B54;
    --host-league-status-flash-bg: #E5F0FF;
    --host-league-status-flash-border: #A9C8F1;
    --host-league-status-flash-text: #25446B;
}

/* Los pocos detalles con color fijo en el tema base se afinan solo en esta vista previa. */
html:root[data-gl-theme="experiencia-host"][data-host-palette="azul-noche"] .tb-experiencia {
    background-image:
        radial-gradient(ellipse 48% 36% at 88% 16%, rgba(134, 182, 246, .18), transparent 72%),
        radial-gradient(ellipse 40% 34% at 8% 80%, rgba(52, 107, 180, .13), transparent 72%),
        var(--gl-experience-art);
}
html:root[data-gl-theme="experiencia-host"][data-host-palette="azul-noche"] :is(.host-home__hero, .gl-lpv2 .lp-overview-hero) {
    box-shadow: var(--gl-shadow-md), inset 0 1px 0 rgba(177, 210, 255, .17);
}
html:root[data-gl-theme="experiencia-host"][data-host-palette="azul-noche"] .host-home__league { border-color: rgba(134, 182, 246, .28); }
html:root[data-gl-theme="experiencia-host"][data-host-palette="azul-noche"] .host-home__league:hover { box-shadow: 0 0 18px rgba(134, 182, 246, .16); }
html:root[data-gl-theme="experiencia-host"][data-host-palette="azul-noche"] .gl-notification__trigger { background: rgba(9, 19, 33, .87); }
html:root[data-gl-theme="experiencia-host"][data-host-palette="azul-noche"] .gl-notification__panel { background: rgba(20, 39, 61, .98); box-shadow: 0 24px 70px rgba(0, 6, 18, .72), 0 0 0 1px rgba(134, 182, 246, .2); }
html:root[data-gl-theme="experiencia-host"][data-host-palette="azul-noche"] .gl-lpv2 .lp-guest-team-card::after { background: linear-gradient(180deg, rgba(9, 19, 33, .25), rgba(9, 19, 33, .88)); }
html:root[data-gl-theme="experiencia-host"][data-host-palette="azul-noche"] .host-stars { --astro-star-color-rgb: 134, 182, 246; }
html:root[data-gl-theme="experiencia-host"][data-host-palette="azul-noche"] .host-stars :is(.gx-stars-3, .gx-twinkles) { --astro-star-color-rgb: 177, 210, 255; }
html:root[data-gl-theme="experiencia-host"][data-host-palette="azul-noche"] .host-stars--page { background: radial-gradient(60% 45% at 50% -8%, rgba(134, 182, 246, .13), transparent 70%); }

@media (prefers-reduced-motion: reduce) {
    html:root[data-gl-theme="experiencia-host"][data-host-palette="azul-noche"] .host-stars * { animation: none !important; }
}