/* =====================================================================
   SKINS DE TEMPORADA (2026-10-09) — header (barra superior) y footer
   ---------------------------------------------------------------------
   Se carga SOLO cuando hay una skin activa (core/helpers/season_skin.php → core/inc/header.php) y todo cuelga de
   body[data-skin="<clave>"], así que sin skin la plataforma queda exactamente igual.
   Cada skin solo define variables; las reglas de abajo son comunes:
     --sk-bar / --sk-foot        fondo de la barra superior / del pie (capas de gradientes)
     --sk-line                    línea de borde      --sk-fg   color de iconos y texto   --sk-accent  color al pasar el cursor / etiqueta
     --sk-foot-fg                 texto del pie
     Los adornos de las orillas (elementos de la skin en posición al azar) los pone chzr_skin_fx.js; Halloween conserva sus adornos fijos (calabaza + murciélago en el header, telarañas chicas en el footer) y no usa adornos al azar.
   Claves: reyes sanvalentin mujer ninos madres patrio halloween muertos hombre navidad nuevo
   ===================================================================== */

/* ── Reglas comunes ─────────────────────────────────────────────────── */
body[data-skin] .sticky-top-bar {
	background: var(--sk-bar);
	border-bottom: 2px solid var(--sk-line);
	box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
body[data-skin] .sticky-top-bar .top-bar-icon i,
body[data-skin] .sticky-top-bar .tb-username,
body[data-skin] .sticky-top-bar .top-bar-center a:not(.top-bar-icon) { color: var(--sk-fg); }
body[data-skin] .sticky-top-bar .top-bar-icon:hover i { color: var(--sk-accent); }
body[data-skin] .sticky-top-bar .top-bar-center::-webkit-scrollbar-thumb { background: var(--sk-accent); }
body[data-skin] .sticky-top-bar .top-bar-center { scrollbar-color: var(--sk-accent) transparent; }

body[data-skin] .fixed-footer {
	background: var(--sk-foot);
	color: var(--sk-foot-fg);
	border-top: 2px solid var(--sk-line);
	box-shadow: 0 -2px 8px rgba(0,0,0,.14);
}
body[data-skin] .fixed-footer .visitor-counter,
body[data-skin] .fixed-footer .visitor-counter i,
body[data-skin] .fixed-footer a { color: inherit; }

/* Adornos de las barras: los pone chzr_skin_fx.js con elementos de la skin en posiciones al azar (cambian en cada carga) */
.sk-deco { position: absolute; left: 0; right: 0; height: 0; pointer-events: none; z-index: 2; }
.sk-deco.sk-deco-top { bottom: 0; }
.sk-deco.sk-deco-bottom { top: 0; }
.sk-deco > span { position: absolute; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.sk-deco-top > span { top: -3px; }
.sk-deco-bottom > span { top: -17px; }
@media (max-width: 700px) { .sk-deco { display: none; } }

/* Onda: el elemento cae derecho y el glifo de adentro se mece de lado a lado */
#chzr-skin-fx .skw { display: inline-block; font-style: normal; }
#chzr-skin-fx .skfx.wave .skw { animation: skwave var(--wd, 5s) ease-in-out infinite alternate; }
@keyframes skwave { from { transform: translateX(calc(var(--amp, 30px) * -1)) rotate(-12deg); } to { transform: translateX(var(--amp, 30px)) rotate(12deg); } }
@keyframes skltr { 0% { transform: translate3d(-8vw, var(--y0), 0) rotate(-6deg); opacity: 0; } 8% { opacity: var(--op, .55); } 50% { transform: translate3d(50vw, calc(var(--y0) + var(--dy)), 0) rotate(6deg); } 92% { opacity: var(--op, .55); } 100% { transform: translate3d(108vw, var(--y0), 0) rotate(-6deg); opacity: 0; } }
@keyframes skrtl { 0% { transform: translate3d(108vw, var(--y0), 0) rotate(6deg); opacity: 0; } 8% { opacity: var(--op, .55); } 50% { transform: translate3d(50vw, calc(var(--y0) + var(--dy)), 0) rotate(-6deg); } 92% { opacity: var(--op, .55); } 100% { transform: translate3d(-8vw, var(--y0), 0) rotate(6deg); opacity: 0; } }


/* Avatar (dibujo negro con fondo transparente): sobre una barra oscura se invierte a blanco */
body[data-skin="halloween"] .sticky-top-bar .user-avatar, body[data-skin="muertos"] .sticky-top-bar .user-avatar,
body[data-skin="navidad"] .sticky-top-bar .user-avatar, body[data-skin="nuevo"] .sticky-top-bar .user-avatar,
body[data-skin="reyes"] .sticky-top-bar .user-avatar, body[data-skin="mujer"] .sticky-top-bar .user-avatar,
body[data-skin="hombre"] .sticky-top-bar .user-avatar { filter: invert(1); }

/* Etiqueta junto al logo (la agrega chzr_skin_fx.js) */
.sk-tag { margin-left: 10px; font: 700 12px/1 system-ui, sans-serif; letter-spacing: .04em; white-space: nowrap; color: var(--sk-accent, #666); }

/* Elementos flotantes (los crea chzr_skin_fx.js): discretos, nunca reciben clics y pasan POR DEBAJO de la barra y el pie */
#chzr-skin-fx { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 900; }
#chzr-skin-fx .skfx { position: absolute; top: 0; left: 0; opacity: 0; will-change: transform, opacity; user-select: none; line-height: 1; font-size: var(--sz, 18px); }
#chzr-skin-fx .skfx.confetti { width: var(--sz, 8px); height: calc(var(--sz, 8px) * 1.6); border-radius: 1px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
@keyframes skfall  { 0% { transform: translate3d(var(--x0), -8vh, 0) rotate(0deg); opacity: 0; } 8% { opacity: var(--op, .55); } 92% { opacity: var(--op, .55); } 100% { transform: translate3d(var(--x1), 108vh, 0) rotate(var(--rot, 180deg)); opacity: 0; } }
@keyframes skrise  { 0% { transform: translate3d(var(--x0), 108vh, 0) rotate(0deg); opacity: 0; } 10% { opacity: var(--op, .55); } 90% { opacity: var(--op, .55); } 100% { transform: translate3d(var(--x1), -10vh, 0) rotate(var(--rot, 25deg)); opacity: 0; } }
@keyframes skdrift { 0% { transform: translate3d(-8vw, var(--y0), 0) rotate(-8deg); opacity: 0; } 8% { opacity: var(--op, .55); } 50% { transform: translate3d(50vw, calc(var(--y0) + var(--dy)), 0) rotate(8deg); } 92% { opacity: var(--op, .55); } 100% { transform: translate3d(108vw, var(--y1), 0) rotate(-8deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce), print { #chzr-skin-fx { display: none !important; } }

@media (max-width: 900px) { .sk-tag { display: none; } }
@media (max-width: 700px) {
	body[data-skin] .sticky-top-bar::before, body[data-skin] .sticky-top-bar::after,
	body[data-skin] .fixed-footer::before, body[data-skin] .fixed-footer::after { display: none; }
}

/* ── Halloween (octubre) — adornos fijos: calabaza y murciélago en el header, telarañas chicas en el footer ───────── */
body[data-skin="halloween"] .sticky-top-bar::before, body[data-skin="halloween"] .sticky-top-bar::after,
body[data-skin="halloween"] .fixed-footer::before, body[data-skin="halloween"] .fixed-footer::after { position: absolute; pointer-events: none; line-height: 1; font-size: 18px; letter-spacing: 10px; word-spacing: 6px; white-space: nowrap; }
body[data-skin="halloween"] .sticky-top-bar::before { content: "🎃 🦇"; left: 110px; bottom: -13px; }
body[data-skin="halloween"] .sticky-top-bar::after  { content: "🦇 🎃"; right: 150px; bottom: -13px; }
body[data-skin="halloween"] .fixed-footer::before   { content: "🕸️"; left: 90px; top: -13px; }
body[data-skin="halloween"] .fixed-footer::after    { content: "🕸️"; right: 90px; top: -13px; }
@media (max-width: 700px) { body[data-skin="halloween"] .sticky-top-bar::before, body[data-skin="halloween"] .sticky-top-bar::after,
	body[data-skin="halloween"] .fixed-footer::before, body[data-skin="halloween"] .fixed-footer::after { display: none; } }
/* ── Halloween (octubre) ─────────────────────────────────────────────── */
body[data-skin="halloween"] {
	--sk-bar: linear-gradient(90deg, #24103f, #3d1a6e 50%, #24103f);
	--sk-foot: linear-gradient(90deg, #24103f, #3d1a6e 50%, #24103f);
	--sk-line: #ff7a00; --sk-fg: #ffb454; --sk-accent: #ff9a2e; --sk-foot-fg: #ffb454;
}

/* ── Día de Muertos (1-2 de noviembre) — papel picado y cempasúchil ──── */
body[data-skin="muertos"] {
	--sk-bar: repeating-linear-gradient(90deg, rgba(255,200,61,.10) 0 2px, transparent 2px 26px), linear-gradient(90deg, #1b1033, #3a0f4a 50%, #1b1033);
	--sk-foot: repeating-linear-gradient(90deg, rgba(255,200,61,.10) 0 2px, transparent 2px 26px), linear-gradient(90deg, #1b1033, #3a0f4a 50%, #1b1033);
	--sk-line: #ff6a00; --sk-fg: #ffd25a; --sk-accent: #ff8fd0; --sk-foot-fg: #ffd25a;
}
/* tira de papel picado en la orilla de abajo del header y la de arriba del footer */
body[data-skin="muertos"] .sticky-top-bar, body[data-skin="muertos"] .fixed-footer { --papel: repeating-linear-gradient(90deg, #e6007e 0 16px, #ff9f1c 16px 32px, #7a2fd0 32px 48px, #2ec4b6 48px 64px, #ffd23f 64px 80px); }
body[data-skin="muertos"] .sticky-top-bar { background: var(--papel) bottom / 100% 5px no-repeat, var(--sk-bar); border-bottom: 0; }
body[data-skin="muertos"] .fixed-footer   { background: var(--papel) top / 100% 5px no-repeat, var(--sk-foot); border-top: 0; }

/* ── Día del Hombre (19 de noviembre) ───────────────────────────────── */
body[data-skin="hombre"] {
	--sk-bar: linear-gradient(90deg, #14304f, #1d4a78 50%, #14304f);
	--sk-foot: linear-gradient(90deg, #fce4ec, #f8d7e6 50%, #fce4ec);
	--sk-line: #5aa9e6; --sk-fg: #cfe3f7; --sk-accent: #8fd0ff; --sk-foot-fg: #6a2c4a;
}
body[data-skin="hombre"] .fixed-footer { border-top-color: #e9a8c4; }

/* ── Navidad (diciembre) ─────────────────────────────────────────────── */
body[data-skin="navidad"] {
	--sk-bar: radial-gradient(circle at 20% 35%, rgba(255,255,255,.28) 0 2px, transparent 3px) 0 0 / 90px 40px, radial-gradient(circle at 70% 70%, rgba(255,255,255,.22) 0 2px, transparent 3px) 0 0 / 70px 36px, linear-gradient(90deg, #8c1010, #c0282d 50%, #8c1010);
	--sk-foot: radial-gradient(circle at 30% 30%, rgba(255,255,255,.25) 0 2px, transparent 3px) 0 0 / 80px 36px, linear-gradient(90deg, #8c1010, #c0282d 50%, #8c1010);
	--sk-line: #ffd54a; --sk-fg: #ffffff; --sk-accent: #ffe27a; --sk-foot-fg: #fff;
}
body[data-skin="navidad"] .sticky-top-bar { background: repeating-linear-gradient(90deg, #1b7a3a 0 14px, #2fa152 14px 28px) top / 100% 4px no-repeat, var(--sk-bar); }

/* ── Año Nuevo (31 dic – 1 ene) ─────────────────────────────────────── */
body[data-skin="nuevo"] {
	--sk-bar: radial-gradient(circle at 15% 40%, rgba(245,197,66,.40) 0 1.5px, transparent 2px) 0 0 / 60px 30px, radial-gradient(circle at 75% 60%, rgba(245,197,66,.32) 0 1px, transparent 2px) 0 0 / 45px 24px, linear-gradient(90deg, #0b0b0f, #1c1606 50%, #0b0b0f);
	--sk-foot: radial-gradient(circle at 25% 50%, rgba(245,197,66,.35) 0 1.5px, transparent 2px) 0 0 / 50px 26px, linear-gradient(90deg, #0b0b0f, #1c1606 50%, #0b0b0f);
	--sk-line: #f5c542; --sk-fg: #f5d77a; --sk-accent: #fff0b3; --sk-foot-fg: #f5d77a;
}

/* ── Día de Reyes (6 de enero) — púrpura real y oro ─────────────────── */
body[data-skin="reyes"] {
	--sk-bar: radial-gradient(circle at 12% 50%, rgba(255,200,61,.35) 0 2px, transparent 3px) 0 0 / 70px 34px, linear-gradient(90deg, #3a1a78, #5b2bb5 50%, #3a1a78);
	--sk-foot: radial-gradient(circle at 20% 50%, rgba(255,200,61,.30) 0 2px, transparent 3px) 0 0 / 60px 30px, linear-gradient(90deg, #3a1a78, #5b2bb5 50%, #3a1a78);
	--sk-line: #ffc83d; --sk-fg: #ffe08a; --sk-accent: #ffffff; --sk-foot-fg: #ffe08a;
}

/* ── San Valentín (febrero) ─────────────────────────────────────────── */
body[data-skin="sanvalentin"] {
	--sk-bar: radial-gradient(circle, rgba(255,255,255,.6) 0 3px, transparent 4px) 0 0 / 28px 28px, linear-gradient(90deg, #ffc2d1, #ffd9e3 50%, #ffc2d1);
	--sk-foot: linear-gradient(90deg, #ffd9e3, #ffc2d1 50%, #ffd9e3);
	--sk-line: #e63972; --sk-fg: #b0124f; --sk-accent: #e63972; --sk-foot-fg: #8e1040;
}
body[data-skin="sanvalentin"] .fixed-footer { border-top: 3px dotted #e63972; }

/* ── Día de la Mujer, 8M (marzo) ────────────────────────────────────── */
body[data-skin="mujer"] {
	--sk-bar: linear-gradient(90deg, #4a148c, #6a1b9a 50%, #4a148c);
	--sk-foot: linear-gradient(90deg, #4a148c, #6a1b9a 50%, #4a148c);
	--sk-line: #ba68c8; --sk-fg: #f3e5f5; --sk-accent: #ffd6ff; --sk-foot-fg: #f3e5f5;
}

/* ── Día del Niño (abril) ───────────────────────────────────────────── */
body[data-skin="ninos"] {
	--sk-bar: linear-gradient(90deg, #4dd0e1, #fff176 35%, #ffb74d 65%, #f06292);
	--sk-foot: #ffffff;
	--sk-line: #7e57c2; --sk-fg: #1b2a5e; --sk-accent: #d81b60; --sk-foot-fg: #1b2a5e;
}
body[data-skin="ninos"] .fixed-footer { background: repeating-linear-gradient(90deg, #f44336 0 20px, #ff9800 20px 40px, #ffeb3b 40px 60px, #4caf50 60px 80px, #2196f3 80px 100px, #9c27b0 100px 120px) top / 100% 5px no-repeat, #fff; border-top: 0; }

/* ── Día de las Madres (mayo) ───────────────────────────────────────── */
body[data-skin="madres"] {
	--sk-bar: linear-gradient(180deg, #9aa3ad, #6b7480 55%, #8b94a0);
	--sk-foot: linear-gradient(90deg, #5d6672, #808996 50%, #5d6672);
	--sk-line: #f4a6c0; --sk-fg: #ffffff; --sk-accent: #ffd1e3; --sk-foot-fg: #ffffff;
}

/* ── Fiestas patrias (septiembre) — tricolor ────────────────────────── */
body[data-skin="patrio"] {
	--sk-bar: linear-gradient(180deg, #006847 0 33.3%, #ffffff 33.3% 66.6%, #ce1126 66.6% 100%);
	--sk-foot: linear-gradient(180deg, #3b3f45, #26292d);
	--sk-line: transparent; --sk-fg: #1b1b1b; --sk-accent: #ce1126; --sk-foot-fg: #ffffff;
}
body[data-skin="patrio"] .sticky-top-bar .top-bar-icon { background: rgba(255,255,255,.9); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
body[data-skin="patrio"] .fixed-footer { border-top: 3px solid; border-image: linear-gradient(90deg, #006847 0 33.3%, #ffffff 33.3% 66.6%, #ce1126 66.6% 100%) 1; }