:root{
  --mint:#AAD8D5; --mint-light:#CEE8E6; --cream:#F3EBE6; --peach:#E3CEC2; --gray:#EAEAEB;
  --ink:#2B2B2B; --ink-soft:#6B6B6B; --teal-dark:#3E7E79; --white:#FFFFFF;
  --radius:16px; --shadow:0 4px 18px rgba(43,43,43,0.08);
  --red:#E74C3C; --amber:#FCEACA; --amber-ink:#8A5A00;
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Segoe UI',system-ui,sans-serif;background:var(--cream);color:var(--ink);}
.hidden{display:none!important;}
button{font-family:inherit;cursor:pointer;border:none;border-radius:10px;padding:9px 16px;font-size:13.5px;font-weight:600;}
.btn{background:var(--teal-dark);color:#fff;}
.btn-secondary{background:var(--gray);color:var(--ink);}
.btn-peach{background:var(--peach);color:#4a3226;}
.btn-outline{background:transparent;border:1.5px solid var(--teal-dark);color:var(--teal-dark);}
.btn-small{padding:6px 12px;font-size:12px;}
button:disabled{opacity:0.5;cursor:not-allowed;}
input,select,textarea{width:100%;padding:9px 12px;border-radius:9px;border:1px solid var(--gray);font-family:inherit;font-size:13.5px;background:#FAFAFA;}
label{font-size:12px;font-weight:600;color:var(--ink-soft);display:block;margin-bottom:4px;}
.field{margin-bottom:12px;}

/* login */
#login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;}
.login-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:32px;width:min(360px,92vw);}
.login-logo{display:block;width:auto;height:176px;margin:0 auto 10px;object-fit:contain;}
.login-card h1{font-size:20px;margin:0 0 4px;}
.login-card .sub{color:var(--ink-soft);font-size:12.5px;margin-bottom:18px;text-align:center;}
.example-row{display:flex;justify-content:space-between;padding:7px 0;font-size:12px;color:var(--ink-soft);cursor:pointer;border-bottom:1px solid var(--gray);}
.example-row:hover{color:var(--teal-dark);}
.err{color:#B23B3B;font-size:12.5px;margin-top:6px;min-height:16px;}

/* app shell */
/* La barra lateral es fija (position:fixed) con la altura exacta de la pantalla —
   así NO crece con el contenido de la pantalla principal (por ejemplo, muchas clases
   en "Clases y horarios"). El propio menú (#nav-container) es la única parte que
   hace scroll interno cuando hay más secciones de las que caben (flex:1 + overflow-y
   auto más abajo) — el logo de arriba y el pie con el nombre de la persona conectada
   quedan SIEMPRE visibles, fuera de esa zona de scroll, en vez de que sea la barra
   entera la que se desplace (que dejaría el pie fuera de la pantalla al abrir un
   menú largo).*/
#app-screen{display:flex;min-height:100vh;}
.sidebar{width:230px;height:100vh;position:fixed;top:0;left:0;background:#fff;padding:20px 14px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;}
.brand-logo{display:block;width:100%;max-width:57px;height:auto;object-fit:contain;margin:0 auto 18px;flex:none;}
#nav-container{flex:1 1 auto;min-height:0;overflow-y:auto;}
.nav-item{padding:10px 12px;border-radius:10px;font-size:13.5px;cursor:pointer;margin-bottom:2px;display:flex;justify-content:space-between;}
.nav-item.active,.nav-item:hover{background:var(--cream);}
.nav-badge{background:var(--red);color:#fff;border-radius:20px;font-size:10.5px;padding:1px 7px;}
.sidebar-foot{flex:none;margin-top:auto;padding-top:14px;border-top:1px solid var(--gray);}
.role-pill{display:inline-block;font-size:10px;font-weight:700;background:var(--peach);padding:3px 9px;border-radius:20px;margin-bottom:8px;text-transform:uppercase;}
.user-mini{font-size:12.5px;color:var(--ink-soft);margin-bottom:8px;cursor:pointer;text-decoration:underline;}
.sidebar-foot-icons{display:flex;gap:8px;margin-bottom:10px;}
.sidebar-icon-btn{position:relative;flex:1;background:var(--cream);border:1px solid var(--gray);border-radius:10px;padding:8px 0;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;}
.sidebar-icon-btn:hover,.sidebar-icon-btn.active{background:var(--mint-light);}
.sidebar-icon-badge{position:absolute;top:-6px;right:-6px;background:var(--red);color:#fff;border-radius:20px;font-size:10px;font-weight:700;padding:1px 5px;min-width:16px;text-align:center;}
/* Encabezado de un subgrupo de secciones dentro del menú lateral (p.ej.
   "Facturación", que agrupa Facturación mensual/trimestral, Gastos deducibles y
   Cómputo de clases) — ver MENUS/renderNav en app.js. Los .nav-item de ese grupo
   llevan además la clase .nav-item-sub, con una ligera sangría, para que se lean
   como pertenecientes al grupo en vez de secciones sueltas al mismo nivel. */
.nav-group-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);padding:14px 12px 4px;}
.nav-item-sub{padding-left:22px;}
/* Accesos "como icono" a herramientas secundarias dentro de una pantalla (p.ej.
   "Importar calendario" e "Historial de cambios" en Parámetros generales, que
   antes tenían su propia entrada en el menú lateral) — ver parametrosView. */
.params-tools-row{display:flex;gap:10px;flex-wrap:wrap;}
.params-tool-btn{display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;border:1px solid var(--gray);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 18px;min-width:110px;cursor:pointer;font-size:12px;color:var(--ink);text-align:center;}
.params-tool-btn:hover{background:var(--cream);}
.params-tool-btn .params-tool-icon{font-size:22px;}

/* Resalta nombres/importes pagados en efectivo (ver efectivoFlag() en app.js) —
   naranja parpadeante para que se detecten de un vistazo en cualquier pantalla
   de gestión (Alumnas, Cómputo de clases, ficha de alumna, Clases y horarios,
   Facturación). No se usa en las vistas propias de la alumna. */
@keyframes efectivo-parpadeo{0%,100%{opacity:1;}50%{opacity:0.32;}}
.efectivo-flag{color:#E67E22;font-weight:700;animation:efectivo-parpadeo 1.1s ease-in-out infinite;}
.main{flex:1;padding:26px 32px;margin-left:230px;}
.main-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;}
.main-header h2{margin:0 0 3px;}
.sub{color:var(--ink-soft);font-size:12.5px;}

.grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:22px;}
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;}
.card h3{margin:0 0 6px;font-size:12px;color:var(--ink-soft);font-weight:600;}
.card .big{font-size:22px;font-weight:800;}

table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-bottom:18px;}
th,td{padding:10px 12px;text-align:left;font-size:13px;border-bottom:1px solid var(--gray);}
th{background:var(--cream);font-size:11px;text-transform:uppercase;color:var(--ink-soft);}
.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;}
.pill-mint{background:var(--mint-light);color:var(--teal-dark);}
.pill-peach{background:var(--peach);color:#4a3226;}
.pill-gray{background:var(--gray);color:var(--ink-soft);}
.pill-amber{background:var(--amber);color:var(--amber-ink);}
.pill-red{background:var(--red);color:#fff;animation:blink-red 1.2s ease-in-out infinite;}
@keyframes blink-red{0%,100%{opacity:1;}50%{opacity:0.45;}}
.section-title{font-weight:700;margin:22px 0 10px;font-size:14px;}
.empty-state{color:var(--ink-soft);font-size:13px;padding:14px;background:#fff;border-radius:var(--radius);}

/* Empieza a la derecha del ancho de la barra lateral (230px) para que ningún modal
   la tape ni la oscurezca — el nombre de la persona conectada y el menú deben verse
   siempre, en cualquier pantalla, también con un modal abierto encima. */
.overlay{position:fixed;top:0;left:230px;right:0;bottom:0;background:rgba(0,0,0,0.35);display:none;align-items:center;justify-content:center;z-index:80;}
.overlay.show{display:flex;}
.modal{background:#fff;border-radius:var(--radius);padding:26px;width:420px;max-width:92vw;max-height:88vh;overflow:auto;position:relative;}
.modal.modal-wide{width:760px;}
.modal .close{position:absolute;top:14px;right:16px;cursor:pointer;font-size:18px;color:var(--ink-soft);}
.modal h3{margin-top:0;}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap;}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:11px 20px;border-radius:30px;font-size:13px;opacity:0;transition:all .25s;pointer-events:none;z-index:90;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

.session-row{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:12px 16px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}
.session-row.no-realizada{background:var(--red);color:#fff;animation:blink-red 1.2s ease-in-out infinite;}
.session-row.pendiente{background:var(--amber);color:var(--amber-ink);}
.session-row.cancelada{background:#F5E2E2;text-decoration:line-through;color:var(--ink-soft);}
.session-row.libre{border:1.5px dashed var(--mint);animation:blink-mint 1.4s ease-in-out infinite;}
.session-row.no-leido{background:var(--cream);border-left:3px solid var(--peach);}
@keyframes blink-mint{0%,100%{background:var(--mint-light);}50%{background:var(--mint);}}
.session-meta{font-size:12px;color:inherit;opacity:.85;}
.session-alumna{font-size:17px;font-weight:800;line-height:1.25;}
.session-alumna.session-alumna-vacio{font-size:13px;font-weight:600;opacity:.7;}
.session-actions{display:flex;gap:6px;flex-wrap:wrap;}
/* Tarjeta de "Clases recurrentes" agrupada por alumna/dueto (ver groupWeeklySlots/
   weeklySlotGroupHtml en app.js) — una tarjeta por alumna (o por dueto) con un
   renglón por cada día que tenga clase fija, en vez de una tarjeta suelta por día. */
.weekly-slot-group{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:12px 16px;margin-bottom:8px;}
.weekly-slot-group-header{font-size:17px;font-weight:800;line-height:1.25;margin-bottom:4px;}
.weekly-slot-day-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;padding:7px 0;border-top:1px solid var(--gray);}
.weekly-slot-day-row:first-of-type{border-top:none;padding-top:3px;}
.text-soft{color:var(--ink-soft);}

/* Clases y horarios: columna izquierda con las clases recurrentes, ocultable */
.clases-layout{display:flex;gap:20px;align-items:flex-start;}
.clases-lista-col{flex:1;min-width:0;}
.clases-recurrentes-col{width:360px;flex-shrink:0;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;}
.clases-recurrentes-col.collapsed{width:auto;}
.recurrentes-header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;}
.recurrentes-header .section-title{margin:0;}
@media (max-width:900px){
  .clases-layout{flex-direction:column;}
  .clases-recurrentes-col{width:100%;}
}

/* Ficha de alumna: mosaico de bloques (Datos/Horario/Acceso/Cómputo/Histórico)
   en columnas estilo "columns" de CSS en vez de un flex de 2 columnas fijas —
   así el navegador va colocando cada bloque en la columna que más hueco libre
   tenga en cada momento (como un tablón tipo Pinterest), sin dejar huecos
   grandes cuando un bloque es mucho más alto o más bajo que otro. Cada bloque
   va envuelto en .mosaic-tile (o es el propio <details> de Datos) con
   break-inside:avoid para que nunca se parta un bloque a mitad entre dos
   columnas. */
.ficha-layout{column-count:2;column-gap:20px;}
.ficha-layout .mosaic-tile,
.ficha-layout .ficha-datos-details{break-inside:avoid;margin-bottom:20px;}
@media (max-width:960px){
  .ficha-layout{column-count:1;}
}
/* "Datos" plegable — <details>/<summary> nativo, estilizado para que la
   cabecera se vea igual que el resto de section-title de la app. */
.ficha-datos-details{margin-bottom:24px;}
.ficha-datos-details > summary{list-style:none;cursor:pointer;font-weight:700;font-size:14px;margin:0 0 12px;display:flex;align-items:center;gap:6px;user-select:none;}
.ficha-datos-details > summary::-webkit-details-marker{display:none;}
.ficha-datos-details > summary::before{content:"▸";display:inline-block;transition:transform .15s;font-size:11px;}
.ficha-datos-details[open] > summary::before{transform:rotate(90deg);}
.mes-row{cursor:pointer;}
.mes-row:hover{background:var(--cream);}

/* Fila de iconos de acción (Vincular/Horario/Acceso) — ver fichaAlumnaView().
   Cada botón abre su modal correspondiente, igual en escritorio que en móvil. */
.ficha-mobile-actions{display:flex;gap:10px;}
.ficha-icon-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:#fff;border:1px solid var(--gray);border-radius:var(--radius);padding:14px 8px;font-size:11.5px;font-weight:700;color:var(--ink-soft);box-shadow:var(--shadow);}
.ficha-icon-emoji{font-size:22px;line-height:1;}

/* Cómputo de clases: rejilla de "iconos de mes" con el número de diferencia
   dentro — ver computoMesesGridHtml(). */
.mes-icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;}
.mes-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:12px;padding:10px 4px;border:none;}
.mes-icon-mes{font-size:10.5px;font-weight:700;text-transform:uppercase;opacity:0.75;}
.mes-icon-num{font-size:17px;font-weight:800;}
.mes-icon-pos{background:var(--mint-light);color:#2b6a5e;}
.mes-icon-neg{background:var(--peach);color:var(--red);}
.mes-icon-zero{background:var(--gray);color:var(--ink-soft);}

/* Facturas de la ficha de alumna: mismo lenguaje visual que .mes-icon, pero para
   abrir el PDF de cada factura — ver facturasResumenHtml(). */
.factura-icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px;}
.factura-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border-radius:12px;padding:10px 6px;border:none;cursor:pointer;font-family:inherit;}
.factura-icon-mes{font-size:10.5px;font-weight:700;text-transform:uppercase;opacity:0.75;}
.factura-icon-anio{font-size:9px;opacity:0.65;margin-bottom:2px;}
.factura-icon-importe{font-size:15px;font-weight:800;}
.factura-icon-estado{font-size:9px;font-weight:700;text-transform:uppercase;opacity:0.8;margin-top:2px;}
.factura-icon-pagada{background:var(--mint-light);color:#2b6a5e;}
.factura-icon-pendiente{background:var(--amber);color:var(--amber-ink);}

/* Guía de "orden recomendado para importar" en Importar calendario — ver
   icsGuiaOrdenHtml(). Cada paso: número en círculo + texto, igual que un checklist. */
.ics-guia-paso{display:flex;gap:12px;align-items:flex-start;margin:14px 0;}
.ics-guia-num{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--teal-dark);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;}

/* Sugerencias de "posibles coincidencias" en el modal Vincular — ver
   fichaPosiblesCoincidencias()/fichaVincularContentHtml(). Chips clicables que solo
   rellenan el <select> de abajo, nunca vinculan nada por sí solas. */
.vincular-sugerencias{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.vincular-sugerencia-chip{display:flex;flex-direction:column;align-items:flex-start;gap:1px;background:var(--mint-light);color:var(--teal-dark);border:1.5px solid transparent;border-radius:10px;padding:6px 10px;cursor:pointer;font-family:inherit;text-align:left;}
.vincular-sugerencia-chip:hover{filter:brightness(0.97);}
.vincular-sugerencia-chip-selected{border-color:var(--teal-dark);}
.vincular-sugerencia-nombre{font-size:12.5px;font-weight:700;}
.vincular-sugerencia-razon{font-size:10.5px;opacity:0.8;}

/* Histórico de clases: barras horizontales apiladas — ver historicoChartHtml().
   Especificaciones de trazo (hueco de 2px, extremos redondeados) siguen la guía
   interna de dataviz. */
.historico-chart-legend{display:flex;flex-wrap:wrap;gap:10px 14px;margin-bottom:14px;}
.historico-legend-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-soft);font-weight:600;}
.historico-legend-dot{width:9px;height:9px;border-radius:50%;flex:none;}
.historico-chart{display:flex;flex-direction:column;gap:14px;}
.historico-chart-row{}
.historico-chart-label{font-size:12px;font-weight:700;margin-bottom:5px;}
.historico-chart-bar-wrap{display:flex;align-items:center;gap:8px;}
.historico-chart-bar{display:flex;gap:2px;height:20px;border-radius:5px;overflow:hidden;min-width:2px;background:var(--gray);}
.historico-seg{display:block;height:100%;}
.historico-chart-total{font-size:12px;font-weight:700;flex:none;min-width:18px;text-align:right;}
.historico-chart-pagos{font-size:11px;color:var(--ink-soft);margin-top:4px;}

/* Lista de "Alumnas" en móvil: en vez de la tabla (una fila por alumna, cada dato
   en su propia línea al apilarse), una tarjeta por alumna con el nombre arriba del
   todo y el resto de datos en una rejilla de 2 columnas — ver alumnasView(). Oculta
   en escritorio, donde se sigue usando la tabla de siempre (.alumnas-desktop-table). */
.alumnas-mobile-list{display:none;}
.alumna-mobile-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;margin-bottom:10px;cursor:pointer;}
.alumna-mobile-name{font-size:15px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.alumna-mobile-pills{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap;}
.alumna-mobile-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:10px;}

/* Icono de fecha del detalle de un mes (ficha de alumna, Cómputo/Histórico de
   clases) — mismo look que .mes-icon pero neutro (no indica saldo, solo la fecha
   de esa clase). Ver dateIconHtml() en app.js. */
.dia-icon{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border-radius:8px;padding:4px 7px;background:var(--cream);min-width:38px;line-height:1.1;}
.dia-icon-dia{font-size:9.5px;font-weight:700;text-transform:uppercase;opacity:0.7;}
.dia-icon-num{font-size:14px;font-weight:800;}

/* Icono de horario semanal fijo (columna "Horario" de la pantalla Alumnas) — un
   icono tipo "calendario" por cada hueco fijo que tenga esa alumna, con el día
   abreviado y la hora; si tiene varias clases fijas se ven varios icono uno junto a
   otro. Ver horarioResumenHtml() en app.js. */
.horario-icon-row{display:inline-flex;gap:4px;flex-wrap:wrap;}
.horario-icon{display:inline-flex;align-items:center;gap:3px;border-radius:8px;padding:4px 7px;background:var(--cream);line-height:1.1;white-space:nowrap;}
.horario-icon-emoji{font-size:11px;}
.horario-icon-dia{font-size:9.5px;font-weight:700;text-transform:uppercase;opacity:0.7;}
.horario-icon-hora{font-size:11.5px;font-weight:700;}

/* Icono del bono asignado (columna "Bono" de la pantalla Alumnas) — mismo look
   que .horario-icon pero con el precio y las clases/semana que incluye el bono.
   Ver bonoIconHtml() en app.js. */
.bono-icon-row{display:inline-flex;gap:4px;flex-wrap:wrap;}
.bono-icon{display:inline-flex;align-items:center;gap:3px;border-radius:8px;padding:4px 7px;background:var(--cream);line-height:1.1;white-space:nowrap;}
.bono-icon-emoji{font-size:11px;}
.bono-icon-precio{font-size:11.5px;font-weight:700;}
.bono-icon-clases{font-size:9.5px;font-weight:700;text-transform:uppercase;opacity:0.7;}

/* Icono oficial de Bizum (imagen en vez de emoji) — se usa en vez de "📱" en todos
   los sitios donde se representa esta forma de pago. height:1em hace que escale
   igual que el texto que lo rodea, tanto en textos pequeños como en cifras grandes.
   Ver BIZUM_ICON_HTML en app.js. */
.bizum-icon{height:1em;width:auto;vertical-align:-0.15em;}

@media (max-width:767px){
  .ficha-layout{display:flex;flex-direction:column;column-count:1;}
  .ficha-tile-datos{order:1;}
  .ficha-mobile-actions{order:2;}
  .ficha-tile-computo{order:3;}
  .ficha-tile-historico{order:4;}
}

/* ---------------- VISTA MÓVIL ----------------
   La barra lateral pasa a ser un cajón (drawer) desplegable: oculta fuera de
   pantalla por defecto y se desliza encima del contenido (con un fondo oscuro
   detrás) al pulsar "☰ Más" en la barra inferior fija — nunca ocupa espacio
   permanente en pantallas pequeñas. La barra inferior fija es NUEVA en esta
   app y sigue el mismo patrón visual que la del calendario nuevo (React,
   /calendario/): iconos de acceso rápido a las secciones más usadas + un
   botón "Más" que abre el cajón para el resto del menú. Como cada app vive
   en su propia página (no hay iframes ni SPA-dentro-de-SPA), nunca coinciden
   la barra inferior de esta app y la del calendario nuevo a la vez: al
   navegar de una a otra se sustituye la página entera. */
.sidebar-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:65;display:none;}
.sidebar-backdrop.show{display:block;}
.bottom-nav-bar{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--mint-light);border-top:1px solid var(--mint);height:calc(60px + env(safe-area-inset-bottom,0px));padding:0 2px env(safe-area-inset-bottom,0px);align-items:stretch;justify-content:space-around;box-shadow:0 -2px 10px rgba(43,43,43,0.1);z-index:55;}
.bottom-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex:1;min-width:0;font-size:9.5px;font-weight:700;color:var(--ink-soft);text-decoration:none;cursor:pointer;padding:6px 2px;border-radius:0;-webkit-tap-highlight-color:transparent;}
.bottom-nav-item .bn-icon{font-size:18px;line-height:1;position:relative;display:inline-block;}
.bottom-nav-item.active{color:var(--teal-dark);}
.bn-badge{position:absolute;top:-6px;right:-10px;background:var(--red);color:#fff;border-radius:20px;font-size:9px;font-weight:700;padding:1px 4px;line-height:1.3;min-width:14px;text-align:center;}

@media (max-width:767px){
  .alumnas-desktop-table{display:none;}
  .alumnas-mobile-list{display:block;}
  .sidebar{transform:translateX(-100%);transition:transform .22s ease;z-index:70;width:min(78vw,260px);}
  .sidebar.open{transform:translateX(0);}
  .main{margin-left:0;padding:18px 14px calc(84px + env(safe-area-inset-bottom,0px));}
  .overlay{left:0;}
  .bottom-nav-bar{display:flex;}
  .toast{bottom:calc(78px + env(safe-area-inset-bottom,0px));}
  /* Los campos con letra por debajo de 16px hacen que Safari en iPhone haga
     zoom automático de TODA la página al tocarlos (por ejemplo, al pulsar la
     contraseña de "Acceso guardado" para copiarla) — la página deja de
     ajustarse a la pantalla hasta que el usuario hace zoom hacia atrás a
     mano. Con 16px ese zoom automático no se dispara. */
  input,select,textarea{font-size:16px;}

  /* Tablas → tarjetas apiladas: en vez de encoger columnas o exigir scroll
     lateral, cada fila se convierte en una tarjeta con pares "etiqueta: valor"
     en vertical (patrón responsive clásico). Las celdas que llevan
     data-label="..." (las pantallas de Facturación mensual, Historial de
     cambios y Cómputo de clases) muestran esa etiqueta; el resto de tablas de
     la app simplemente apilan su contenido sin etiqueta, pero tampoco
     necesitan scroll lateral. */
  table{display:block;border:none;box-shadow:none;background:transparent;border-radius:0;}
  table thead{display:none;}
  table tbody{display:block;}
  table tr{display:block;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:4px 14px;margin-bottom:10px;}
  table td{display:flex;align-items:center;justify-content:space-between;gap:10px;border:none;border-bottom:1px solid var(--gray);padding:8px 0;text-align:right;}
  table td:last-child{border-bottom:none;}
  table td::before{content:attr(data-label);font-weight:700;color:var(--ink-soft);font-size:10.5px;text-transform:uppercase;letter-spacing:.02em;text-align:left;flex-shrink:0;}
  table td:not([data-label]){justify-content:flex-start;text-align:left;}
  table td:empty{display:none;}
}

/* Carrusel de imágenes de un taller/evento (fondo del anuncio) */
.ev-carousel{position:relative;height:140px;border-radius:12px;overflow:hidden;margin-bottom:10px;background:var(--gray);}
.ev-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;animation-name:ev-fade;animation-timing-function:ease-in-out;animation-iteration-count:infinite;}
.ev-slide:only-child{opacity:1;animation:none;}
@keyframes ev-fade{0%{opacity:0;}8%{opacity:1;}25%{opacity:1;}33%{opacity:0;}100%{opacity:0;}}
.ev-media-thumb{position:relative;width:72px;height:72px;flex-shrink:0;}
.ev-media-thumb img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block;}
.ev-media-thumb .ev-thumb-remove{position:absolute;top:-6px;right:-6px;background:#fff;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:11px;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.2);}

/* Planificador de curso: rejilla semanal visual (día x hora), con arrastrar y
   soltar — ver planificadorView/plannerWeekGridHtml en app.js. */
.planner-grid-wrap{overflow-x:auto;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:10px;margin-bottom:18px;}
.planner-grid{display:grid;grid-template-columns:48px repeat(7,minmax(96px,1fr));grid-auto-rows:25px;min-width:730px;}
.planner-grid-corner{background:#fff;position:sticky;top:0;z-index:2;}
.planner-grid-daylabel{position:sticky;top:0;background:#fff;z-index:2;text-align:center;font-size:11px;font-weight:700;color:var(--ink-soft);padding:5px 2px;border-bottom:2px solid var(--gray);text-transform:uppercase;letter-spacing:.02em;}
.planner-grid-timelabel{font-size:9.5px;color:var(--ink-soft);text-align:right;padding-right:5px;white-space:nowrap;}
.planner-cell{border-top:1px solid #F0EBE7;border-left:1px solid #F0EBE7;}
.planner-cell:hover{background:var(--cream);cursor:pointer;}
.planner-cell.drag-over{background:var(--mint-light);}
.planner-block{margin:1px 2px;border-radius:8px;padding:2px 5px;font-size:10.5px;line-height:1.25;overflow:hidden;cursor:grab;position:relative;box-shadow:0 1px 3px rgba(0,0,0,.14);background:var(--mint);color:#1E4F4B;}
.planner-block.duo{background:var(--peach);color:#4a3226;}
.planner-block:active{cursor:grabbing;}
.planner-block.dragging{opacity:0.35;}
.planner-block-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:12px;}
.planner-block-time{opacity:0.85;font-size:9.5px;}
.planner-block-remove{position:absolute;top:0;right:0;background:rgba(255,255,255,.75);border-radius:0 8px;width:16px;height:14px;font-size:10px;line-height:14px;text-align:center;padding:0;color:var(--ink);}
@media (max-width:767px){
  .planner-grid{grid-template-columns:36px repeat(7,minmax(58px,1fr));grid-auto-rows:24px;min-width:442px;}
  .planner-grid-daylabel{font-size:9.5px;padding:4px 1px;}
  .planner-grid-timelabel{font-size:8.5px;}
  .planner-block{font-size:9px;padding:1px 3px;}
  .planner-block-time{display:none;}
}

/* Icono "tachado" (p.ej. el ojo de visibilidad o la marca de alumna activa cuando
   está desactivada) — ver visibilidadIconHtml/activaIconHtml en app.js. Una raya
   diagonal en rojo sobre el emoji, en vez de buscar un emoji distinto que no
   siempre existe con ese significado. */
.icon-strike{position:relative;display:inline-block;}
.icon-strike::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;border-top:2px solid var(--red);transform:rotate(-35deg);}

/* Icono con señal de "prohibido" (círculo rojo + raya diagonal, como una señal de
   tráfico) — ver accesoIconHtml en app.js: la llave de acceso, cuando la alumna NO
   tiene acceso a la app, se marca así en vez de con el tachado genérico de arriba,
   para que se distinga de un vistazo de "sin acceso a la app" sin tener que leer
   el título. Tamaño en "em" para que escale con el del emoji que envuelve. */
.icon-forbidden{position:relative;display:inline-block;}
.icon-forbidden::after{content:"";position:absolute;left:50%;top:50%;width:1.3em;height:1.3em;transform:translate(-50%,-50%);border:0.15em solid var(--red);border-radius:50%;box-sizing:border-box;}
.icon-forbidden::before{content:"";position:absolute;left:50%;top:50%;width:1.3em;height:0.15em;background:var(--red);transform:translate(-50%,-50%) rotate(-45deg);z-index:1;}

/* Buscador y panel de filtros de la pantalla Alumnas — ver alumnasView en app.js. */
.alumnas-desktop-table td[data-label="Acceso"],.alumnas-desktop-table td[data-label="Pago"]{text-align:center;font-size:15px;}
/* Cabecera fija de la tabla de Alumnas: al hacer scroll por el listado, la fila de
   títulos se queda pegada arriba en vez de desplazarse con las filas. El
   overflow:hidden que lleva <table> por defecto (para redondear las esquinas) rompe
   position:sticky en sus hijos, así que aquí lo quitamos para esta tabla en concreto
   y redondeamos las esquinas celda a celda en su lugar. */
.alumnas-desktop-table table{overflow:visible;}
.alumnas-desktop-table th{position:sticky;top:0;z-index:2;box-shadow:0 1px 0 var(--gray);}
.alumnas-desktop-table th:first-child{border-top-left-radius:var(--radius);}
.alumnas-desktop-table th:last-child{border-top-right-radius:var(--radius);}
.alumnas-desktop-table tbody tr:last-child td:first-child{border-bottom-left-radius:var(--radius);}
.alumnas-desktop-table tbody tr:last-child td:last-child{border-bottom-right-radius:var(--radius);}