/*=====================================
FECHAS ESPECIALES — estilos compartidos
(Portal de Alumnas, Panel de Clase, Biométrico). Las fechas y textos
viven en temas-fecha.js; aquí solo van colores y animaciones.
=====================================*/

/* Capa de partículas: fija, detrás de la tarjeta principal (.container
   tiene z-index 20) y sin recibir toques (pointer-events:none), así
   nunca tapa ni bloquea botones. */
.tema-decoracion{
position:fixed;
inset:0;
overflow:hidden;
pointer-events:none;
z-index:15;
}

.tema-particula{
position:absolute;
top:0;
line-height:1;
user-select:none;
will-change:transform, opacity;
}

.tema-particula.cae{
animation-name:temaCae;
animation-timing-function:linear;
animation-iteration-count:infinite;
}

.tema-particula.sube{
top:auto;
bottom:0;
animation-name:temaSube;
animation-timing-function:linear;
animation-iteration-count:infinite;
}

.tema-particula.flota{
top:50%;
animation-name:temaFlota;
animation-timing-function:ease-in-out;
animation-iteration-count:infinite;
animation-direction:alternate;
}

@keyframes temaCae{
0%{ transform:translateY(-10vh) rotate(0deg); opacity:0; }
10%{ opacity:.9; }
90%{ opacity:.9; }
100%{ transform:translateY(110vh) rotate(360deg); opacity:0; }
}

@keyframes temaSube{
0%{ transform:translateY(10vh) rotate(0deg); opacity:0; }
10%{ opacity:.9; }
90%{ opacity:.9; }
100%{ transform:translateY(-110vh) rotate(-15deg); opacity:0; }
}

@keyframes temaFlota{
0%{ transform:translate(0,0) rotate(0deg); opacity:.75; }
100%{ transform:translate(60px,-80px) rotate(20deg); opacity:1; }
}

/* Si el dispositivo pide "reducir movimiento", no se animan partículas
   (el letrero y el color sí se quedan). */
@media (prefers-reduced-motion: reduce){
.tema-decoracion{ display:none; }
}

.tema-banner{
display:inline-block;
margin:0 0 14px;
padding:8px 18px;
border-radius:999px;
font-weight:800;
font-size:clamp(13px,3.6vw,16px);
color:#fff;
}

.tema-banner.back-to-dance{ background:linear-gradient(90deg,#4cc9f0,#7c3aed); }
.tema-banner.carino{ background:linear-gradient(90deg,#ff6b9d,#e0245e); }
.tema-banner.mujer{ background:linear-gradient(90deg,#9b5de5,#7c3aed); }
.tema-banner.danza{ background:linear-gradient(90deg,#ff72b7,#ffd166); }
.tema-banner.madre{ background:linear-gradient(90deg,#ff9ed2,#ff6b9d); }
.tema-banner.padre{ background:linear-gradient(90deg,#4cc9f0,#2563eb); }
.tema-banner.independencia{ background:linear-gradient(90deg,#0d6efd,#1e3a8a); }
.tema-banner.halloween{ background:linear-gradient(90deg,#ff8a3d,#7c3aed); }
.tema-banner.show{ background:linear-gradient(90deg,#ffd166,#ff72b7); }
.tema-banner.navidad{ background:linear-gradient(90deg,#e53950,#1f9d63); }

.tema-banner.nino{
background:linear-gradient(90deg,#ff9ed2,#ffd166,#4cc9f0);
background-size:300% 300%;
animation:bannerRainbow 4s ease infinite;
}

.tema-banner.cumple{
background:linear-gradient(90deg,#ff72b7,#ffd166,#06d6a0,#4cc9f0);
background-size:300% 300%;
animation:bannerRainbow 4s ease infinite;
}

@keyframes bannerRainbow{
0%{ background-position:0% 50%; }
50%{ background-position:100% 50%; }
100%{ background-position:0% 50%; }
}

/* Color del brillo de la tarjeta principal mientras el tema está activo. */
body.tema-back-to-dance{ --tema-color:124,58,237; }
body.tema-carino{ --tema-color:224,36,94; }
body.tema-mujer{ --tema-color:155,93,229; }
body.tema-danza{ --tema-color:255,114,183; }
body.tema-madre{ --tema-color:255,107,157; }
body.tema-padre{ --tema-color:37,99,235; }
body.tema-independencia{ --tema-color:13,110,253; }
body.tema-nino{ --tema-color:255,159,28; }
body.tema-halloween{ --tema-color:124,58,237; }
body.tema-show{ --tema-color:255,209,102; }
body.tema-navidad{ --tema-color:31,157,99; }
body.tema-cumple{ --tema-color:255,183,0; }

body[class*="tema-"] .container{
box-shadow:0 20px 60px rgba(var(--tema-color),.20),0 6px 15px rgba(0,0,0,.05);
}