/* ════════════════════════════════════════════════════
   Temporada de Navidad
   Capa aparte: index.php sólo la carga en temporada, así
   que el resto del año la web no cambia ni un byte.
   Todo cuelga de html[data-xmas]; los colores semánticos
   (--success, --warning, --danger) no se tocan: en una
   herramienta de diagnóstico siguen significando lo mismo.
   ════════════════════════════════════════════════════ */

/* ─── Guirnalda: pino, arándano y oro ───────────── */
html[data-xmas='guirnalda'] {
    --bg:            #060d0b;
    --surface:       rgba(14, 26, 21, .6);
    --surface-soft:  rgba(240, 255, 245, .04);
    --line:          rgba(222, 240, 225, .1);
    --line-hover:    rgba(222, 240, 225, .2);
    --text:          #f1f4ec;
    --muted:         #97a899;
    --label:         #c6d2c4;
    --accent:        #f2c665;
    --accent-dark:   #c99a35;
    --accent-glow:   rgba(229, 72, 77, .26);
    --notice-bg:     rgba(242, 198, 101, .08);
    --notice-line:   rgba(242, 198, 101, .28);
    --xmas-fill:     #e5484d;
    --xmas-fill-dark: #b42a33;
    --aurora-1:      rgba(27, 122, 78, .34);
    --aurora-2:      rgba(196, 52, 52, .2);
    --aurora-3:      rgba(222, 164, 60, .16);
    --xmas-on-accent: #fff;
    --xmas-mark:     linear-gradient(110deg, #f7d98a 0%, #fff3d1 28%, #f08a7a 55%, #7fd6a0 82%, #f7d98a 100%);
    --xmas-logo:     linear-gradient(135deg, #1f8a5a 0%, #e5484d 55%, #f7d98a 100%);
    --xmas-banner:   linear-gradient(90deg, rgba(229, 72, 77, .12) 0%, rgba(31, 138, 90, .1) 100%);
    --xmas-pine-far:  #0f2c23;
    --xmas-pine-mid:  #0b221b;
    --xmas-pine-near: #071712;
    --xmas-ground:    #3a4d50;
    --xmas-pine-snow: #8fa5a8;
    --xmas-flake:     255, 255, 255;
    --xmas-stars:     1;
    --xmas-snow-shade: #c6d6e4;
}

html[data-xmas='guirnalda'][data-theme='light'] {
    --bg:            #eef3ef;
    --surface:       rgba(255, 255, 255, .66);
    --surface-soft:  rgba(255, 255, 255, .5);
    --line:          rgba(20, 50, 35, .12);
    --line-hover:    rgba(20, 50, 35, .24);
    --text:          #121c17;
    --muted:         #5a6a60;
    --label:         #2c3a32;
    --accent:        #8a6410;
    --accent-dark:   #6d4f0c;
    --accent-glow:   rgba(194, 38, 46, .18);
    --notice-bg:     rgba(138, 100, 16, .07);
    --notice-line:   rgba(138, 100, 16, .26);
    --xmas-fill:     #c2262e;
    --xmas-fill-dark: #96191f;
    --aurora-1:      rgba(46, 140, 96, .26);
    --aurora-2:      rgba(200, 60, 60, .16);
    --aurora-3:      rgba(222, 170, 70, .2);
    --xmas-mark:     linear-gradient(110deg, #0f6b45 0%, #c2262e 40%, #a8741a 70%, #0f6b45 100%);
    --xmas-logo:     linear-gradient(135deg, #0f6b45 0%, #c2262e 60%, #a8741a 100%);
    --xmas-banner:   linear-gradient(90deg, rgba(194, 38, 46, .09) 0%, rgba(15, 107, 69, .08) 100%);
    --xmas-pine-far:  #bccfc6;
    --xmas-pine-mid:  #94b1a4;
    --xmas-pine-near: #6b8d7e;
    --xmas-ground:    #fbfdff;
    --xmas-pine-snow: #ffffff;
    --xmas-flake:     132, 158, 186;
    --xmas-stars:     0;
    --xmas-snow-shade: #cddbe8;
}

/* ─── Boreal: noche polar y hielo ───────────────── */
html[data-xmas='boreal'] {
    --bg:            #040a14;
    --surface:       rgba(12, 22, 38, .58);
    --surface-soft:  rgba(225, 240, 255, .04);
    --line:          rgba(200, 225, 255, .1);
    --line-hover:    rgba(200, 225, 255, .2);
    --text:          #eaf3fb;
    --muted:         #8fa3b8;
    --label:         #bed0e0;
    --accent:        #35d6ae;
    --accent-dark:   #169c8f;
    --xmas-fill:     #35d6ae;
    --xmas-fill-dark: #169c8f;
    --accent-glow:   rgba(53, 214, 174, .24);
    --notice-bg:     rgba(53, 214, 174, .07);
    --notice-line:   rgba(53, 214, 174, .26);
    --aurora-1:      rgba(46, 230, 160, .36);
    --aurora-2:      rgba(40, 170, 220, .26);
    --aurora-3:      rgba(126, 92, 240, .2);
    --xmas-on-accent: #03211b;
    --xmas-mark:     linear-gradient(110deg, #bff5e4 0%, #ffffff 28%, #7fd8ff 55%, #7bf0c4 82%, #bff5e4 100%);
    --xmas-logo:     linear-gradient(135deg, #1e90d8 0%, #35d6ae 55%, #d8fff3 100%);
    --xmas-banner:   linear-gradient(90deg, rgba(53, 214, 174, .11) 0%, rgba(40, 170, 220, .08) 100%);
    --xmas-pine-far:  #0e223a;
    --xmas-pine-mid:  #0a192b;
    --xmas-pine-near: #06101d;
    --xmas-ground:    #36506a;
    --xmas-pine-snow: #8ba7c4;
    --xmas-flake:     235, 245, 255;
    --xmas-stars:     1;
    --xmas-snow-shade: #bdd4ea;
}

html[data-xmas='boreal'][data-theme='light'] {
    --bg:            #e8f0f7;
    --surface:       rgba(255, 255, 255, .66);
    --surface-soft:  rgba(255, 255, 255, .5);
    --line:          rgba(20, 50, 90, .12);
    --line-hover:    rgba(20, 50, 90, .24);
    --text:          #0f1b28;
    --muted:         #566a7e;
    --label:         #2a3c4e;
    --accent:        #0e8a78;
    --accent-dark:   #0a6e68;
    --xmas-fill:     #0e8a78;
    --xmas-fill-dark: #0a6e68;
    --accent-glow:   rgba(14, 138, 120, .18);
    --notice-bg:     rgba(14, 138, 120, .06);
    --notice-line:   rgba(14, 138, 120, .24);
    --aurora-1:      rgba(40, 200, 150, .24);
    --aurora-2:      rgba(50, 160, 225, .24);
    --aurora-3:      rgba(130, 110, 235, .16);
    --xmas-on-accent: #fff;
    --xmas-mark:     linear-gradient(110deg, #0a6e68 0%, #0b7fb3 40%, #5a4fd6 70%, #0a6e68 100%);
    --xmas-logo:     linear-gradient(135deg, #0b7fb3 0%, #0e8a78 60%, #3fc9a8 100%);
    --xmas-banner:   linear-gradient(90deg, rgba(14, 138, 120, .08) 0%, rgba(11, 127, 179, .08) 100%);
    --xmas-pine-far:  #bdd1e3;
    --xmas-pine-mid:  #98b4cc;
    --xmas-pine-near: #7093af;
    --xmas-ground:    #fbfdff;
    --xmas-pine-snow: #ffffff;
    --xmas-flake:     128, 160, 198;
    --xmas-stars:     0;
    --xmas-snow-shade: #c9dcee;
}

/* ─── Nochebuena: granate y oro viejo ───────────── */
html[data-xmas='nochebuena'] {
    --bg:            #10060a;
    --surface:       rgba(36, 12, 18, .58);
    --surface-soft:  rgba(255, 235, 220, .04);
    --line:          rgba(255, 225, 205, .1);
    --line-hover:    rgba(255, 225, 205, .2);
    --text:          #f8ede3;
    --muted:         #b39b97;
    --label:         #dcc7bc;
    --accent:        #e3b34a;
    --accent-dark:   #b8842a;
    --xmas-fill:     #e3b34a;
    --xmas-fill-dark: #b8842a;
    --accent-glow:   rgba(227, 179, 74, .24);
    --notice-bg:     rgba(227, 179, 74, .07);
    --notice-line:   rgba(227, 179, 74, .26);
    --aurora-1:      rgba(150, 24, 44, .42);
    --aurora-2:      rgba(214, 150, 52, .18);
    --aurora-3:      rgba(96, 16, 60, .32);
    --xmas-on-accent: #241503;
    --xmas-mark:     linear-gradient(110deg, #e3b34a 0%, #fff0c9 30%, #d99a3a 58%, #f6d88e 82%, #e3b34a 100%);
    --xmas-logo:     linear-gradient(135deg, #a31d33 0%, #d99a3a 58%, #fff0c9 100%);
    --xmas-banner:   linear-gradient(90deg, rgba(150, 24, 44, .2) 0%, rgba(227, 179, 74, .08) 100%);
    --xmas-pine-far:  #26111b;
    --xmas-pine-mid:  #1c0c14;
    --xmas-pine-near: #12070d;
    --xmas-ground:    #4d3f47;
    --xmas-pine-snow: #a5949c;
    --xmas-flake:     255, 248, 240;
    --xmas-stars:     1;
    --xmas-snow-shade: #e0d3d4;
}

html[data-xmas='nochebuena'][data-theme='light'] {
    --bg:            #f6f0ea;
    --surface:       rgba(255, 255, 255, .68);
    --surface-soft:  rgba(255, 255, 255, .5);
    --line:          rgba(70, 25, 30, .12);
    --line-hover:    rgba(70, 25, 30, .24);
    --text:          #22120f;
    --muted:         #75605a;
    --label:         #443029;
    --accent:        #a31d33;
    --accent-dark:   #7d1426;
    --xmas-fill:     #a31d33;
    --xmas-fill-dark: #7d1426;
    --accent-glow:   rgba(163, 29, 51, .18);
    --notice-bg:     rgba(163, 29, 51, .06);
    --notice-line:   rgba(163, 29, 51, .24);
    --aurora-1:      rgba(163, 29, 51, .18);
    --aurora-2:      rgba(214, 160, 60, .22);
    --aurora-3:      rgba(150, 60, 90, .14);
    --xmas-on-accent: #fff;
    --xmas-mark:     linear-gradient(110deg, #a31d33 0%, #a8741a 45%, #7d1426 75%, #a31d33 100%);
    --xmas-logo:     linear-gradient(135deg, #7d1426 0%, #a31d33 50%, #c8922e 100%);
    --xmas-banner:   linear-gradient(90deg, rgba(163, 29, 51, .08) 0%, rgba(200, 146, 46, .1) 100%);
    --xmas-pine-far:  #dccac5;
    --xmas-pine-mid:  #c4aca7;
    --xmas-pine-near: #a58b87;
    --xmas-ground:    #fffdfb;
    --xmas-pine-snow: #ffffff;
    --xmas-flake:     168, 148, 158;
    --xmas-stars:     0;
    --xmas-snow-shade: #e6dcdc;
}

/* La sombra de la nieve: sobre fondo claro, apenas un toque */
html[data-xmas] {
    --xmas-cap-shadow: rgba(8, 18, 34, .34);
}

html[data-xmas][data-theme='light'] {
    --xmas-cap-shadow: rgba(70, 100, 140, .14);
}

/* ─── Lo que style.css escribe con colores a mano ─ */
html[data-xmas] .brand-mark,
html[data-xmas][data-theme='light'] .brand-mark {
    background: var(--xmas-mark);
    background-size: 280% 100%;
    -webkit-background-clip: text;
    background-clip: text;
}

html[data-xmas] .app-logo,
html[data-xmas][data-theme='light'] .app-logo {
    background: var(--xmas-logo);
}

html[data-xmas] .disclaimer-banner {
    background: var(--xmas-banner);
}

html[data-xmas] .tab-button.active,
html[data-xmas] button[type='submit'],
html[data-xmas] .domain-method-switch input:checked + span,
html[data-xmas] .theme-toggle button[aria-pressed='true'] {
    background: linear-gradient(135deg, var(--xmas-fill) 0%, var(--xmas-fill-dark) 100%);
    color: var(--xmas-on-accent);
}

html[data-xmas] .check-row input[type='checkbox']:checked {
    background: linear-gradient(135deg, var(--xmas-fill) 0%, var(--xmas-fill-dark) 100%);
}

html[data-xmas] ::selection {
    background: var(--xmas-fill);
    color: var(--xmas-on-accent);
}

/* La retícula técnica deja paso a las estrellas del bosque */
html[data-xmas] body::after {
    display: none;
}

/* La aurora boreal cae en cortinas altas, no en manchas redondas */
html[data-xmas='boreal'] body::before {
    background:
        radial-gradient(16% 62% at 18% 18%, var(--aurora-1) 0%, transparent 100%),
        radial-gradient(11% 54% at 36% 12%, var(--aurora-2) 0%, transparent 100%),
        radial-gradient(20% 66% at 62% 20%, var(--aurora-1) 0%, transparent 100%),
        radial-gradient(12% 50% at 82% 10%, var(--aurora-3) 0%, transparent 100%);
    filter: blur(42px) saturate(1.35);
}

/* ─── Capas de fondo y de nieve ─────────────────── */
.xmas-forest,
.xmas-snow-back,
.xmas-snow-front {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.xmas-forest,
.xmas-snow-back {
    z-index: -1;
}

/* Por debajo de la cabecera (40) y de los modales (100) */
.xmas-snow-front {
    z-index: 30;
}

.app-shell {
    position: relative;
}

.xmas-caps {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.xmas-cap {
    position: absolute;
    display: block;
}

html.xmas-snow-off .xmas-snow-back,
html.xmas-snow-off .xmas-snow-front,
html.xmas-snow-off .xmas-caps {
    display: none;
}

/* ─── Guirnalda de la cabecera ──────────────────── */
html[data-xmas] .app-header {
    padding-top: 38px;
}

.xmas-garland {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 46px;
    overflow: visible;
    pointer-events: none;
}

.xmas-wire {
    fill: none;
    stroke: #16261e;
    stroke-width: 1.6;
    stroke-linecap: round;
}

[data-theme='light'] .xmas-wire {
    stroke: #2c4034;
}

.xmas-socket {
    fill: #16261e;
}

.xmas-glass,
.xmas-halo {
    animation: xmas-twinkle var(--xmas-speed, 5s) ease-in-out var(--xmas-delay, 0s) infinite;
}

/* Bombilla floja: la hay en todas las guirnaldas de verdad */
.xmas-bulb-loose .xmas-glass,
.xmas-bulb-loose .xmas-halo {
    animation: xmas-loose 7.3s linear var(--xmas-delay, 0s) infinite;
}

[data-theme='light'] .xmas-halo {
    opacity: .55;
}

@keyframes xmas-twinkle {
    0%, 100% { opacity: 1; }
    50%      { opacity: .5; }
}

@keyframes xmas-loose {
    0%, 62%, 66%, 70%, 100% { opacity: 1; }
    64%, 68%, 72%, 80%      { opacity: .16; }
}

/* En el modo caos la guirnalda también pierde los papeles */
.chaos-active .xmas-glass,
.chaos-active .xmas-halo {
    animation-duration: .28s;
}

/* ─── La cabecera tiene una cosa más: que no apriete al logo ─ */
html[data-xmas] .brand {
    flex: 0 0 auto;
}

html[data-xmas] .header-actions {
    flex: 0 1 auto;
    min-width: 0;
}

html[data-xmas] .header-actions-row {
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ─── Gorro sobre el logo ───────────────────────── */
.xmas-logo-wrap {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

/* Encima de la cúpula de la nube (que está casi en el centro del logo), con
   el ribete tapando su borde y un poco ladeado, como se lleva un gorro. */
.xmas-hat {
    position: absolute;
    left: 22%;
    top: -17%;
    width: 64%;
    height: auto;
    overflow: visible;
    pointer-events: none;
    transform: rotate(-9deg);
    transform-origin: 45% 85%;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}

/* ─── Cuenta atrás ──────────────────────────────── */
.xmas-ttl {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Sin sitio para las dos cosas, se queda la cuenta atrás */
@media (max-width: 1180px) {
    .xmas-sub-text {
        display: none;
    }

    .xmas-snow-toggle span:last-child {
        display: none;
    }
}

.xmas-ttl b {
    color: var(--text);
    font-weight: 600;
}

/* ─── Terminal ──────────────────────────────────── */
.term-xmas {
    color: #f7d98a;
}

/* ─── Selector de dirección (sólo con ?elegir) ──── */
.xmas-picker {
    position: fixed;
    left: 50%;
    bottom: 12px;
    z-index: 90;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 16px);
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--line-hover);
    border-radius: 14px;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
    box-shadow: var(--shadow);
}

.xmas-picker-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.xmas-picker button {
    display: block;
    min-height: 0;
    padding: 6px 12px;
    white-space: nowrap;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--button-soft);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.xmas-picker button[aria-pressed='true'] {
    border-color: transparent;
    background: linear-gradient(135deg, var(--xmas-fill) 0%, var(--xmas-fill-dark) 100%);
    color: var(--xmas-on-accent);
}

@media (max-width: 640px) {
    .xmas-picker-title {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .xmas-glass,
    .xmas-halo,
    .xmas-bulb-loose .xmas-glass,
    .xmas-bulb-loose .xmas-halo {
        animation: none;
    }
}

/* ─── Sorpresa: el trineo de Papá Noel ──────────── */
.xmas-surprise .xmas-surprise-icon {
    font-size: 13px;
    line-height: 1;
}

.xmas-surprise[aria-disabled='true'] {
    opacity: .6;
    cursor: default;
}

.xmas-sleigh {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 60;
    width: clamp(260px, 36vw, 480px);
    pointer-events: none;
    animation: xmas-sleigh-x 7.5s linear forwards;
}

.xmas-sleigh-arc {
    animation: xmas-sleigh-y 7.5s ease-in-out forwards;
}

.xmas-sleigh svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35));
}

/* De izquierda a derecha, entrando y saliendo de pantalla del todo */
@keyframes xmas-sleigh-x {
    from { transform: translateX(-110%); }
    to   { transform: translateX(110vw); }
}

/* Un arco: sube hacia el centro y baja un poco al salir */
@keyframes xmas-sleigh-y {
    0%   { transform: translateY(26vh) rotate(-7deg); }
    45%  { transform: translateY(9vh) rotate(-2deg); }
    100% { transform: translateY(17vh) rotate(4deg); }
}

/* Cada reno lleva su propio balanceo, desfasado */
.xmas-deer {
    animation: xmas-deer-bob .55s ease-in-out infinite alternate;
}

.xmas-sleigh g:nth-of-type(3) > .xmas-deer { animation-delay: -.14s; }
.xmas-sleigh g:nth-of-type(4) > .xmas-deer { animation-delay: -.28s; }
.xmas-sleigh g:nth-of-type(5) > .xmas-deer { animation-delay: -.42s; }

@keyframes xmas-deer-bob {
    from { transform: translateY(-2px); }
    to   { transform: translateY(3px); }
}

.xmas-deer-legs-front {
    transform-box: fill-box;
    transform-origin: 0% 0%;
    animation: xmas-deer-front .55s ease-in-out infinite alternate;
}

.xmas-deer-legs-back {
    transform-box: fill-box;
    transform-origin: 100% 0%;
    animation: xmas-deer-back .55s ease-in-out infinite alternate;
}

@keyframes xmas-deer-front {
    from { transform: rotate(-14deg); }
    to   { transform: rotate(10deg); }
}

@keyframes xmas-deer-back {
    from { transform: rotate(12deg); }
    to   { transform: rotate(-10deg); }
}

/* La nariz de Rudolph, que para eso está */
.xmas-rudolph-glow {
    animation: xmas-rudolph 1s ease-in-out infinite alternate;
}

@keyframes xmas-rudolph {
    from { opacity: .45; }
    to   { opacity: 1; }
}

/* Estela de polvo de estrellas */
.xmas-sleigh-dust circle {
    animation: xmas-dust 1.1s ease-in-out infinite alternate;
}

.xmas-sleigh-dust circle:nth-child(2n) { animation-delay: -.35s; }
.xmas-sleigh-dust circle:nth-child(3n) { animation-delay: -.7s; }

@keyframes xmas-dust {
    from { opacity: .15; }
    to   { opacity: 1; }
}

.xmas-sleigh-ho {
    opacity: 0;
    animation: xmas-ho 7.5s ease-in-out forwards;
}

@keyframes xmas-ho {
    0%, 30% { opacity: 0; }
    38%, 62% { opacity: 1; }
    70%, 100% { opacity: 0; }
}

/* Sin movimiento: el trineo aparece quieto un momento y se va */
@media (prefers-reduced-motion: reduce) {
    .xmas-sleigh {
        left: 50%;
        animation: xmas-sleigh-still 3.2s ease-in-out forwards;
    }

    .xmas-sleigh-arc,
    .xmas-deer,
    .xmas-deer-legs-front,
    .xmas-deer-legs-back,
    .xmas-rudolph-glow,
    .xmas-sleigh-dust circle {
        animation: none;
    }

    .xmas-sleigh-arc { transform: translateY(14vh); }
    .xmas-sleigh-ho { animation: none; opacity: 1; }

    @keyframes xmas-sleigh-still {
        0%   { opacity: 0; transform: translateX(-50%); }
        15%, 80% { opacity: 1; transform: translateX(-50%); }
        100% { opacity: 0; transform: translateX(-50%); }
    }
}