/* ===================================================
   Panel de la academia: una sección a la vez, barra de abajo
   (celular y tablet), panel "Más" e Inicio. Solo lo carga
   academia.html; el menú lateral de computadora sigue en
   biometrico-style.css. Ver bio-modulos-menu.js y
   bio-modulos-inicio.js.
=================================================== */

/* ---- Una sección a la vez ---- */
body.con-secciones [data-fuera-de-seccion]{ display:none !important; }
body.con-secciones .panel{ scroll-margin-top:16px; }
#subPagosBandeja, #subPagosHistorial, #subTrajesCatalogo, #subTrajesCargo, #subTrajesSaldos, #subClasesMarcas, #listaClases{ scroll-margin-top:16px; }

.encabezado-seccion{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.encabezado-seccion h2{ margin:0; }
.encabezado-seccion .btn{ width:auto; margin:0; }
#panelListaAlumnas .encabezado-seccion{ margin-bottom:8px; }

/* ---- Barra de abajo y panel "Más" (menos de 1024 px) ---- */
.barra-inferior{ display:none; }
.hoja-mas-fondo{ display:none; }

@media (max-width:1023.98px){
body.con-secciones{ padding-bottom:calc(84px + env(safe-area-inset-bottom)); }

body.con-secciones .barra-inferior{
display:flex;
position:fixed;
left:0;
right:0;
bottom:0;
z-index:45;
gap:2px;
background:white;
border-top:1px solid var(--color-marca-suave2);
box-shadow:0 -2px 14px rgba(60,20,45,.07);
padding:6px max(6px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-right));
}

.barra-inferior-boton{
flex:1 1 0;
min-width:0;
width:auto;
margin:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:3px;
padding:6px 2px 5px;
border:none;
border-radius:12px;
background:transparent;
color:#6b5d6b;
font-family:inherit;
font-size:11px;
font-weight:600;
line-height:1.1;
text-decoration:none;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.barra-inferior-boton:hover{ background:var(--color-marca-fondo2); color:var(--color-marca-oscuro); }
.barra-inferior-boton.activo{ background:var(--color-marca-suave); color:var(--color-marca-oscuro); }
.barra-inferior-icono{ position:relative; font-size:21px; line-height:1; }
.barra-inferior-texto{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Nombres largos ("Colaboradores", "Mensualidades"): un poco más chicos
   para que quepan completos. */
.barra-inferior-boton:has(.largo){ padding-left:0; padding-right:0; }
.barra-inferior-texto.largo{ font-size:9px; letter-spacing:-.3px; }
.barra-inferior-punto{
position:absolute;
top:-2px;
right:-7px;
width:10px;
height:10px;
border-radius:50%;
background:var(--color-marca);
border:2px solid white;
}
.barra-inferior-numero{
position:absolute;
top:-6px;
left:60%;
min-width:18px;
height:18px;
padding:0 5px;
border-radius:999px;
background:var(--color-marca);
color:white;
border:2px solid white;
font-size:10px;
font-weight:700;
display:inline-flex;
align-items:center;
justify-content:center;
}

.hoja-mas-fondo:not([hidden]){
display:flex;
position:fixed;
inset:0;
z-index:48;
align-items:flex-end;
background:rgba(30,20,30,.35);
}
.hoja-mas{
width:100%;
max-height:82vh;
overflow-y:auto;
background:white;
border-radius:20px 20px 0 0;
padding:12px max(14px, env(safe-area-inset-left)) calc(18px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-right));
box-shadow:0 -6px 24px rgba(60,20,45,.15);
animation:hojaSubir .18s ease-out;
}
@keyframes hojaSubir{ from{ transform:translateY(24px); opacity:.6; } to{ transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce){ .hoja-mas{ animation:none; } }
.hoja-mas-encabezado{ display:flex; align-items:center; justify-content:space-between; padding:2px 4px 10px; font-size:16px; color:var(--color-marca-oscuro); }
.hoja-mas-cerrar{ width:auto; margin:0; padding:6px 10px; border:none; border-radius:10px; background:var(--color-marca-fondo2); color:#3a2e3a; font-size:15px; cursor:pointer; }
.hoja-mas-subtitulo{ margin-top:10px; padding:14px 4px 6px; border-top:1px solid var(--color-marca-suave2); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--color-marca-texto-suave2); }
.hoja-mas-lista{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:6px; }
.hoja-mas-item{
display:flex;
align-items:center;
gap:6px;
min-height:46px;
padding:10px 12px;
border-radius:12px;
background:var(--color-marca-fondo);
border:1px solid var(--color-marca-suave2);
color:#3a2e3a;
font-size:14px;
font-weight:600;
text-decoration:none;
}
.hoja-mas-item.activo{ background:var(--color-marca-suave); border-color:var(--color-marca); color:var(--color-marca-oscuro); }
.hoja-mas-nombre{ flex:1; min-width:0; line-height:1.25; overflow-wrap:anywhere; }
/* Los indicadores del panel "Más" usan las clases del menú lateral, que
   solo tienen estilo en computadora. */
.hoja-mas .menu-lateral-punto{ flex-shrink:0; width:9px; height:9px; border-radius:50%; background:var(--color-marca); }
.hoja-mas .menu-lateral-numero{ flex-shrink:0; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--color-marca); color:white; font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
}

@media (max-width:360px){
.barra-inferior-boton{ font-size:10px; }
.barra-inferior-texto.largo{ font-size:8px; letter-spacing:-.35px; }
}

/* ---- Inicio ---- */
.inicio{ margin-bottom:18px; }
.inicio-titulo{ margin:4px 2px 14px; font-size:20px; color:var(--color-marca-oscuro); }
.inicio-tarjetas{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
grid-auto-flow:row dense; /* las tarjetas chicas llenan los huecos junto a las anchas */
gap:14px;
}
.tarjeta-inicio{
display:block;
min-width:0;
padding:16px 18px;
border-radius:18px;
background:white;
border:1px solid var(--color-marca-suave2);
box-shadow:0 2px 10px rgba(60,20,45,.05);
color:#3a2e3a;
text-decoration:none;
transition:border-color .15s, box-shadow .15s, transform .15s;
}
.tarjeta-inicio:hover{ border-color:var(--color-marca); box-shadow:0 4px 16px rgba(60,20,45,.09); transform:translateY(-1px); }
.tarjeta-inicio:focus-visible{ outline:3px solid var(--color-marca); outline-offset:2px; }
.tarjeta-inicio.ancha{ grid-column:span 2; }
@media (prefers-reduced-motion:reduce){ .tarjeta-inicio{ transition:none; } .tarjeta-inicio:hover{ transform:none; } }

.ti-titulo{ font-size:13px; font-weight:700; line-height:1.3; color:var(--color-marca-texto-suave); margin-bottom:8px; overflow-wrap:anywhere; }
.ti-numero{ font-size:32px; font-weight:800; line-height:1.1; color:var(--color-marca-oscuro); }
.ti-etiqueta{ font-size:13px; color:#6b5d6b; margin-top:2px; }
.ti-detalle{ font-size:13px; color:#6b5d6b; margin:6px 0 0; }
.ti-subtitulo{ margin:14px 0 6px; font-size:12px; font-weight:700; color:var(--color-marca-texto-suave2); text-transform:uppercase; letter-spacing:.05em; }
.ti-dos{ display:flex; gap:22px; }
.ti-aviso{ font-size:16px; font-weight:700; color:#3a2e3a; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

.ti-progreso{ height:10px; margin-top:10px; border-radius:999px; background:var(--color-marca-suave2); overflow:hidden; }
.ti-progreso span{ display:block; height:100%; border-radius:999px; background:var(--color-marca); }

.ti-lista{ list-style:none; margin:0; padding:0; }
.ti-lista li{ display:flex; align-items:center; gap:10px; padding:6px 0; border-top:1px solid var(--color-marca-fondo3); font-size:14px; }
.ti-lista li:first-child{ border-top:none; }
.ti-hora{ flex-shrink:0; min-width:64px; font-size:12px; font-weight:700; color:var(--color-marca-texto-suave); }
.ti-nombre{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ti-tipo{ flex-shrink:0; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--color-marca-suave); color:var(--color-marca-oscuro); }
.ti-tipo.salida{ background:#ececf1; color:#5b5b6b; }

.ti-grafica{ display:flex; align-items:flex-end; gap:6px; height:110px; margin-top:16px; }
.ti-columna{ flex:1; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:3px; min-width:0; }
.ti-barra{ width:100%; max-width:34px; border-radius:6px 6px 2px 2px; background:var(--color-marca-suave3); }
.ti-columna.hoy .ti-barra{ background:var(--color-marca); }
.ti-valor{ font-size:11px; font-weight:700; color:var(--color-marca-texto-suave); }
.ti-dia{ font-size:11px; color:#6b5d6b; }
.ti-columna.hoy .ti-dia{ font-weight:700; color:var(--color-marca-oscuro); }
.ti-leyenda{ margin-top:6px; font-size:12px; color:#8a7f8a; }

.ti-show-barra{ display:flex; height:12px; margin-top:6px; border-radius:999px; overflow:hidden; background:var(--color-marca-suave2); }
.ti-show-barra span{ display:block; height:100%; }
.ti-show-leyenda{ display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:10px; font-size:13px; color:#3a2e3a; }
.ti-show-leyenda i{ display:inline-block; width:10px; height:10px; margin-right:5px; border-radius:3px; vertical-align:-1px; }
.ti-show-barra .si, .ti-show-leyenda .si{ background:var(--color-marca); }
.ti-show-barra .no, .ti-show-leyenda .no{ background:#d6c7d0; }
.ti-show-barra .sin, .ti-show-leyenda .sin{ background:var(--color-marca-suave3); }

/* Celular: tarjetas de 2 en 2 si caben; las anchas (hoy, asistencia,
   7 días) ocupan toda la fila. */
@media (max-width:600px){
.inicio-tarjetas{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.tarjeta-inicio{ padding:14px; border-radius:16px; }
.tarjeta-inicio.ancha{ grid-column:1 / -1; }
.ti-numero{ font-size:26px; }
.ti-dos{ gap:16px; }
}
@media (max-width:340px){
.inicio-tarjetas{ grid-template-columns:1fr; }
}

/* ===================================================
   Portal de Alumnos / Colaboradores: mismas secciones, menú y barra que
   el panel (portal.js, menuPortal). Aquí solo lo propio del portal.
   =================================================== */
#panelImportantes{ scroll-margin-top:16px; }

/* Inicio: la cabecera (foto, nombre y código) arriba de las tarjetas. */
.cabecera-inicio-portal{ margin-bottom:14px; }
.ti-numero-chico{ font-size:24px; }
.ti-de{ font-size:18px; font-weight:700; color:var(--color-marca-texto-suave); }
.ti-enlace{ font-weight:700; color:var(--color-marca-oscuro); }

/* Mi cuenta: un subtítulo por parte (notificaciones, correo, PIN). */
.subtitulo-cuenta{ margin:0 0 8px; font-size:15px; color:var(--color-marca-oscuro); }

/* Nota discreta al pie de Asistencia / Mis marcas. */
.nota-retencion{ margin:14px 0 0; font-size:12px; color:#8a7f8a; }

/* Varias cuentas (hermanas). Celular y tablet: arriba de la página, fijo
   al bajar, con desplazamiento de lado si son muchas (sin ensanchar la
   página). Computadora: arriba del menú lateral, una debajo de otra. */
@media (max-width:1023.98px){
  body.con-secciones .selector-alumnas{
    position:sticky;
    top:0;
    z-index:30;
    flex-wrap:nowrap;
    overflow-x:auto;
    margin:0 -4px 14px;
    padding:8px 4px;
    background:rgba(255,255,255,.94);
    border-bottom:1px solid var(--color-marca-suave2);
    scrollbar-width:none;
  }
  body.con-secciones .selector-alumnas:empty{ display:none; }
  body.con-secciones .selector-alumnas::-webkit-scrollbar{ display:none; }
  body.con-secciones .selector-alumnas .chip-alumna{ flex-shrink:0; }
}
.menu-lateral .selector-alumnas{ flex-direction:column; gap:6px; margin:0 4px 14px; }
.menu-lateral .selector-alumnas:empty{ display:none; }
.menu-lateral .chip-alumna{ text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }