/* ===================================================
   MOVE PORTAL DE ALUMNAS
   Mismo lenguaje visual que MOVE ACCESS / EVALUACIONES / PRUEBAS
=================================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Poppins",sans-serif;
}

/* Varios botones/tarjetas de aquí abajo fijan su propio "display"
   (block/flex) para verse como botón grande de ancho completo. Sin
   esta regla, ese "display" fijo le gana al atributo "hidden" que la
   página usa por JavaScript para mostrar/ocultar (por ejemplo,
   "Generar link de pago" vs "Pagar ahora"), y el elemento se queda
   visible aunque el código le haya puesto hidden=true. Esta regla
   asegura que "hidden" SIEMPRE gane, sin importar qué otra clase
   tenga el elemento. */
[hidden]{
display:none !important;
}

html{
width:100%;
min-height:100%;
}

body{
width:100%;
min-height:100dvh;
overflow-y:auto;
overflow-x:hidden;
display:flex;
justify-content:center;
align-items:flex-start;
padding:30px 20px;
background:linear-gradient(-45deg,#ffffff,#fff4fb,#ffe9f5,#fff6fc,#ffffff);
background-size:400% 400%;
animation:gradientMove 18s ease infinite;
}

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

.floating{
position:fixed;
border-radius:50%;
filter:blur(45px);
opacity:.20;
animation:float 12s infinite ease-in-out;
pointer-events:none;
}

.floating1{ width:180px; height:180px; background:#ff9ed2; left:5%; top:10%; }
.floating2{ width:240px; height:240px; background:#ffd8ea; right:5%; top:15%; animation-delay:2s; }
.floating3{ width:170px; height:170px; background:#ffc6df; left:15%; bottom:10%; animation-delay:4s; }
.floating4{ width:240px; height:240px; background:#ffeaf6; right:10%; bottom:5%; animation-delay:1s; }

@keyframes float{
50%{ transform:translateY(-25px) translateX(15px); }
}

/*=====================================
DECORACIÓN DE TEMPORADA (cumpleaños / halloween / navidad)
=====================================*/

.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(18px,-24px) rotate(10deg); opacity:1; }
}

.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.nino{
background:linear-gradient(90deg,#ff9ed2,#ffd166,#4cc9f0);
background-size:300% 300%;
animation:bannerRainbow 4s ease infinite;
}

.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.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%; }
}

/* Cada tema define de qué color se pone el brillo de la tarjeta
   principal mientras esté activo (variable --tema-color), y una sola
   regla usa esa variable — así no hay que repetir el box-shadow
   completo para cada uno de los 12 temas. */
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);
}

.container{
width:92%;
max-width:560px;
margin:20px auto;
padding:clamp(20px,6vw,35px);
border-radius:clamp(20px,5vw,35px);
background:rgba(255,255,255,.55);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
box-shadow:0 20px 60px rgba(239,75,155,.18),0 6px 15px rgba(0,0,0,.05);
text-align:center;
position:relative;
z-index:20;
}

.logo{
width:80%;
max-width:260px;
margin:auto;
display:block;
margin-bottom:6px;
animation:logoFloat 5s ease-in-out infinite;
filter:drop-shadow(0 15px 25px rgba(239,75,155,.25));
}

@keyframes logoFloat{
50%{ transform:translateY(-8px); }
}

.title{
font-size:clamp(20px,5vw,28px);
font-weight:700;
color:#ef4b9b;
margin-top:6px;
margin-bottom:14px;
}

.pantalla{
animation:fadeIn .35s ease;
}

@keyframes fadeIn{
from{ opacity:0; transform:translateY(10px); }
to{ opacity:1; transform:translateY(0); }
}

.loading-text{
font-size:clamp(16px,4.5vw,20px);
color:#ef4b9b;
font-weight:600;
padding:30px 0;
}

.subtitulo{
font-size:clamp(15px,4vw,19px);
font-weight:700;
color:#777;
margin-bottom:14px;
}

.message{
font-size:clamp(15px,4vw,18px);
color:#666;
font-weight:600;
margin-bottom:18px;
}

.mensaje-error{
min-height:24px;
color:#e0245e;
font-weight:700;
font-size:clamp(13px,3.5vw,15px);
margin-top:14px;
}

/*=====================================
BUSCADOR + LISTA DE ALUMNAS
=====================================*/

.buscador{
width:100%;
border:2px solid #ffd8ea;
border-radius:14px;
padding:clamp(10px,3vw,14px);
font-size:clamp(14px,4vw,16px);
font-family:inherit;
color:#555;
background:white;
outline:none;
transition:.18s;
margin-bottom:12px;
}

.buscador:focus{
border-color:#ef4b9b;
box-shadow:0 0 0 3px rgba(239,75,155,.15);
}

.lista-alumnas{
display:flex;
flex-direction:column;
gap:8px;
max-height:42vh;
overflow-y:auto;
padding:4px;
}

.lista-alumnas button{
border:2px solid #ffe3f0;
border-radius:14px;
padding:clamp(12px,3.5vw,16px);
font-size:clamp(14px,4vw,16px);
font-weight:700;
color:#555;
background:white;
cursor:pointer;
transition:.15s;
text-align:left;
}

.lista-alumnas button:active{ transform:scale(.98); }

.lista-alumnas button:hover{
border-color:#ef4b9b;
color:#ef4b9b;
background:rgba(239,75,155,.06);
}

/*=====================================
ENTRADA DE CLAVE (PIN)
=====================================*/

.nombre-elegido{
font-size:clamp(18px,5vw,22px);
font-weight:800;
color:#ef4b9b;
margin-bottom:16px;
}

.input-clave{
width:100%;
border:2px solid #ffd8ea;
border-radius:16px;
padding:clamp(16px,4.5vw,20px);
font-size:clamp(22px,7vw,30px);
font-weight:700;
letter-spacing:6px;
text-align:center;
color:#ef4b9b;
font-family:inherit;
outline:none;
transition:.18s;
margin-bottom:6px;
}

.input-clave:focus{
border-color:#ef4b9b;
box-shadow:0 0 0 3px rgba(239,75,155,.15);
}

/*=====================================
BOTONES GRANDES
=====================================*/

.btn-grande{
width:100%;
border:none;
border-radius:18px;
padding:clamp(14px,4.5vw,18px);
font-size:clamp(16px,4.5vw,19px);
font-weight:700;
color:white;
cursor:pointer;
transition:.18s;
margin-top:20px;
}

.btn-siguiente{
background:linear-gradient(180deg,#ff72b7,#ef4b9b);
box-shadow:0 8px 20px rgba(239,75,155,.30);
}

.btn-siguiente:disabled{
opacity:.45;
cursor:not-allowed;
box-shadow:none;
}

.btn-grande:active:not(:disabled){ transform:scale(.97); }

.btn-secundario{
border:2px solid #ef4b9b;
background:white;
color:#ef4b9b;
border-radius:18px;
padding:clamp(14px,4.5vw,18px);
font-size:clamp(15px,4.2vw,18px);
font-weight:700;
cursor:pointer;
flex:1;
transition:.18s;
}

.btn-secundario:active{ transform:scale(.97); }

.nav-botones{
display:flex;
gap:12px;
margin-top:20px;
}

.nav-botones .btn-siguiente{
flex:1.4;
margin-top:0;
}

/*=====================================
PERFIL DE LA ALUMNA
=====================================*/

.foto-perfil{
width:140px;
height:140px;
border-radius:50%;
object-fit:cover;
margin:0 auto 16px;
display:block;
border:4px solid white;
box-shadow:0 10px 25px rgba(239,75,155,.30);
}

.perfil-nombre{
font-size:clamp(20px,5.5vw,26px);
font-weight:800;
color:#ef4b9b;
margin-bottom:18px;
}

.perfil-lista{
display:flex;
flex-direction:column;
gap:10px;
text-align:left;
}

/* El botón de historial de mensualidades se reubica aquí adentro,
   justo debajo del cumpleaños; le quitamos su margen superior propio
   para que respete el mismo espaciado parejo (gap) que las demás
   filas del perfil. */
.perfil-lista > #btnHistorialPagos{
margin-top:0;
}

.perfil-fila{
border:2px solid #ffe3f0;
border-radius:16px;
padding:clamp(12px,3.5vw,16px);
background:rgba(255,255,255,.5);
}

.perfil-etiqueta{
font-size:clamp(12.5px,3.5vw,14px);
font-weight:700;
color:#ef4b9b;
margin-bottom:4px;
}

.perfil-valor{
font-size:clamp(14px,4vw,16px);
font-weight:600;
color:#555;
white-space:pre-wrap;
}

/*=====================================
CUMPLEAÑOS EDITABLE
=====================================*/

.cumple-fila-valor{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}

.btn-editar-cumple{
background:none;
border:none;
color:#ef4b9b;
font-weight:700;
font-size:clamp(12px,3.3vw,14px);
text-decoration:underline;
cursor:pointer;
white-space:nowrap;
}

.cumple-edicion{
margin-top:12px;
display:flex;
flex-direction:column;
gap:8px;
}

.input-cumple{
width:100%;
border:2px solid #ffd8ea;
border-radius:12px;
padding:clamp(10px,3vw,12px);
font-size:clamp(14px,4vw,16px);
font-family:inherit;
color:#555;
background:white;
outline:none;
}

.input-cumple:focus{
border-color:#ef4b9b;
box-shadow:0 0 0 3px rgba(239,75,155,.15);
}

.cumple-botones{
display:flex;
gap:8px;
}

.cumple-botones .btn-secundario{
padding:clamp(10px,3vw,12px);
font-size:clamp(13px,3.6vw,15px);
}

.btn-cancelar-cumple{
flex:1;
border:2px solid #e0e0e0;
background:white;
color:#888;
border-radius:14px;
padding:clamp(10px,3vw,12px);
font-size:clamp(13px,3.6vw,15px);
font-weight:700;
cursor:pointer;
}

/*=====================================
BADGES DE ESTADO (PAGADO / PENDIENTE / etc.)
=====================================*/

.badge-estado{
display:inline-block;
padding:4px 12px;
border-radius:99px;
font-size:clamp(12px,3.3vw,14px);
font-weight:700;
}

.badge-pagado{ background:rgba(46,182,125,.15); color:#1f9d63; }
.badge-pendiente{ background:rgba(255,159,28,.15); color:#c97800; }
.badge-malo{ background:rgba(224,36,94,.12); color:#e0245e; }
.badge-neutro{ background:rgba(120,120,120,.12); color:#666; }

/*=====================================
SECCIÓN DE PAGO
=====================================*/

.seccion-pago{
text-align:left;
border:2px solid #ffe3f0;
border-radius:18px;
padding:clamp(14px,4vw,18px);
margin-top:14px;
background:rgba(255,255,255,.5);
}

.pago-titulo{
font-size:clamp(15px,4.2vw,17px);
font-weight:800;
color:#ef4b9b;
margin-bottom:10px;
}

.pago-fila{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:8px;
}

.pago-monto{
font-size:clamp(14px,4vw,16px);
font-weight:700;
color:#555;
margin-bottom:6px;
}

.btn-link-pago{
text-decoration:none;
display:block;
text-align:center;
}

.btn-subir-archivo{
text-align:center;
cursor:pointer;
margin-top:8px;
}

.comprobante-ok{
margin-top:10px;
font-weight:700;
color:#1f9d63;
font-size:clamp(13px,3.6vw,15px);
}

/*=====================================
PAGOS ESPECIALES (trajes / competencias)
=====================================*/

.lista-pagos-especiales{
display:flex;
flex-direction:column;
gap:10px;
}

.pago-especial-card{
border:2px solid #ffe3f0;
border-radius:14px;
padding:clamp(12px,3.5vw,14px);
background:white;
}

.pago-especial-titulo{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
margin-bottom:8px;
}

.pago-especial-tipo{
font-size:clamp(14px,4vw,16px);
font-weight:700;
color:#555;
}

.pago-especial-fila{
display:flex;
align-items:center;
justify-content:space-between;
font-size:clamp(13px,3.6vw,15px);
color:#666;
margin-bottom:4px;
}

.pago-especial-fila span:last-child{
font-weight:700;
color:#444;
}

.pago-especial-limite{
font-size:clamp(12px,3.3vw,13.5px);
color:#c97800;
font-weight:600;
margin-top:4px;
}

/*=====================================
EVALUACIONES
=====================================*/

.lista-evaluaciones{
display:flex;
flex-direction:column;
gap:14px;
text-align:left;
margin-top:6px;
margin-bottom:10px;
}

.evaluacion-card{
border:2px solid #ffe3f0;
border-radius:18px;
padding:clamp(14px,4vw,18px);
background:rgba(255,255,255,.6);
}

.evaluacion-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:6px;
}

.evaluacion-titulo{
font-size:clamp(15px,4.3vw,18px);
font-weight:800;
color:#ef4b9b;
}

.evaluacion-subtitulo{
font-size:clamp(12px,3.4vw,14px);
color:#888;
font-weight:600;
margin-bottom:10px;
}

.nota-final-badge{
display:inline-block;
padding:5px 14px;
border-radius:99px;
font-size:clamp(13px,3.6vw,15px);
font-weight:800;
background:rgba(239,75,155,.14);
color:#ef4b9b;
white-space:nowrap;
}

.grupo-evaluacion{
margin-top:10px;
}

.grupo-evaluacion-titulo{
font-size:clamp(13px,3.6vw,15px);
font-weight:800;
color:#777;
margin-bottom:6px;
}

.rating-fila{
display:flex;
align-items:center;
justify-content:space-between;
padding:4px 0;
font-size:clamp(13px,3.6vw,15px);
}

.rating-label{
color:#555;
font-weight:600;
}

.rating-estrellas{
color:#ffb400;
letter-spacing:2px;
font-size:clamp(13px,3.8vw,16px);
}

.evaluacion-comentario{
margin-top:10px;
}

.evaluacion-comentario-titulo{
font-size:clamp(12.5px,3.5vw,14px);
font-weight:700;
color:#ef4b9b;
margin-bottom:3px;
}

.evaluacion-comentario-texto{
font-size:clamp(13.5px,3.8vw,15.5px);
color:#555;
white-space:pre-wrap;
}

.mensaje-vacio{
font-size:clamp(14px,4vw,16px);
color:#888;
font-weight:600;
padding:20px 0;
text-align:center;
}

/*=====================================
RECUPERAR / CAMBIAR CLAVE
=====================================*/

.btn-enlace{
display:block;
width:100%;
margin-top:14px;
background:none;
border:none;
color:#ef4b9b;
font-weight:700;
font-size:clamp(13px,3.6vw,15px);
text-decoration:underline;
cursor:pointer;
}

.mensaje-recuperar{
margin-top:10px;
color:#1f9d63;
font-weight:700;
font-size:clamp(13px,3.6vw,15px);
}

.input-clave-chica{
width:100%;
border:2px solid #ffd8ea;
border-radius:14px;
padding:clamp(11px,3.2vw,14px);
font-size:clamp(14px,4vw,16px);
font-family:inherit;
color:#555;
background:white;
outline:none;
transition:.18s;
margin-bottom:10px;
}

.input-clave-chica:focus{
border-color:#ef4b9b;
box-shadow:0 0 0 3px rgba(239,75,155,.15);
}

.btn-ancho{
width:100%;
margin-top:0;
}

.mensaje-clave-ok{
margin-top:10px;
font-weight:700;
color:#1f9d63;
font-size:clamp(13px,3.6vw,15px);
}

/*=====================================
HISTORIAL DE MENSUALIDADES
=====================================*/

.lista-historial-pagos{
display:flex;
flex-direction:column;
gap:10px;
text-align:left;
margin-top:6px;
margin-bottom:10px;
}

.historial-card{
border:2px solid #ffe3f0;
border-radius:14px;
padding:clamp(12px,3.5vw,14px);
background:white;
}

.historial-fila-superior{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
}

.historial-mes{
font-size:clamp(14px,4vw,16px);
font-weight:700;
color:#555;
}

.historial-cuerpo{
display:flex;
flex-direction:column;
align-items:stretch;
gap:10px;
margin-top:10px;
}

.historial-monto{
font-size:clamp(13px,3.6vw,15px);
color:#666;
font-weight:600;
}

.btn-link-pago-chico,
.btn-generar-chico,
.btn-subir-archivo-historial{
display:block;
width:100%;
text-align:center;
text-decoration:none;
padding:clamp(10px,3vw,12px);
font-size:clamp(13px,3.6vw,15px);
cursor:pointer;
box-sizing:border-box;
}

.historial-cuerpo .comprobante-ok{
margin:0;
}

/*=====================================
RESPONSIVE
=====================================*/

@media(max-width:360px){
.container{ width:96%; margin:10px auto; }
}

@media(max-height:640px){
.container{ margin:8px auto; padding:clamp(14px,4vw,22px); }
.logo{ max-width:150px; }
}

@media(min-width:900px){
.container{ max-width:600px; }
}