/* css/app.css — la hoja del panel.
 *
 * Vivía dentro de <style> en app.html hasta el 23-09-2026: 516 líneas que
 * viajaban con cada carga del documento y que no se podían mirar sin abrir un
 * fichero de 160 KB. Fuera, además, deja de mezclarse con el marcado cuando se
 * busca por qué una regla gana a otra — que es lo que hay que ir desmontando
 * con los `!important` que quedan.
 *
 * Va DESPUÉS de Bootstrap en app.html, y de ahí depende media hoja: casi todo
 * lo que hay aquí redefine un componente suyo.
 *
 * `firebase.json` la sirve con `no-cache`, como el HTML y los módulos: se
 * revalida en cada carga y responde 304 si no ha cambiado. Sin paso de
 * compilación no hay nombre versionado que permita cachearla de verdad.
 */

/* ========================================================
   TEMA ZEN / BOUTIQUE PREMIUM - ORQUESTO 2.0
   ======================================================== */
:root {
  /* 1. CONFIGURACIÓN DEL ZOOM GLOBAL */
  --app-zoom: 0.75; /* Aquí controlas el tamaño de TODA la app (0.75 = 75%) */
  /* `--alto-visible` lo mide preferencias.js: en Safari de iPad `100vh` es más
     alto que lo que se ve, y el pie de los modales quedaba bajo la barra. */
  --vh-real: calc(var(--alto-visible, 100vh) / var(--app-zoom)); /* Magia matemática para evitar franjas blancas */
  
  --zen-primary: #6A8A76; 
  --zen-primary-hover: #55705F;
  --zen-dark: #2C3530; 
  --zen-bg: #FAF9F6; 
  --zen-surface: #FFFFFF;
  --zen-text: #3D4A41;
  --zen-text-muted: #8B9990;
  --zen-border: #E8EFEA;
  --zen-sidebar: #EBE7DF; 
  --zen-shadow-card: 0 12px 40px rgba(44, 53, 48, 0.05);
  --zen-shadow-btn: 0 6px 15px rgba(106, 138, 118, 0.2);

  /* La voz de la portada, también dentro (02-10-2026). Hasta entonces el panel
     y la web parecían dos productos: la portada y el acceso en verde hondo y
     Archivo, el panel en Inter y salvia. Ahora Archivo pone títulos, menú,
     botones y rótulos, y el verde hondo es el botón principal. Inter se queda
     en tablas, cifras y texto de trabajo, donde lee mejor a tamaño pequeño. */
  --zen-hondo: #22302A;
  --zen-hondo-hover: #3D4A41;
  --zen-tinta-cl: #6E7C73;
  --fuente-rotulos: 'Archivo', 'Inter', system-ui, sans-serif;

  /* Los cinco estados con significado fijo (.chip): hecho, pendiente, necesita
     una decisión, lo hizo Orquesto solo, y simple información. */
  --estado-ok: #2F6B47;        --estado-ok-fondo: #E1EFE5;
  --estado-pendiente: #8F5C12; --estado-pendiente-fondo: #F5EAD6;
  --estado-decision: #A3402A;  --estado-decision-fondo: #F5E2DC;
  --estado-auto: #4B6A57;      --estado-auto-fondo: #E4ECE6;
  --estado-info: #5F6A63;      --estado-info-fondo: #EEECE7;

  /* El salvia, donde Bootstrap lo lee. `.text-primary`, `.bg-primary` y
     `.border-primary` son utilidades y vienen marcadas de fábrica, así que
     pisar su declaración exigía marcar también; pisar su VARIABLE no. De paso
     se arregla todo lo demás que lee esto y aquí seguía en azul Bootstrap,
     como el anillo de foco por defecto.

     `--bs-primary-bg-subtle` se queda como está, a propósito: el azul pálido
     de `.bg-primary-subtle` es el código de color de «Recup.» en la lista de
     asistencia, frente al verde del bono. */
  --bs-primary: #6A8A76;
  --bs-primary-rgb: 106, 138, 118;
  --bs-primary-border-subtle: #6A8A76;
}

body { 
  font-family: 'Inter', sans-serif; 
  background-color: var(--zen-bg); 
  color: var(--zen-text); 
  margin: 0; 
  letter-spacing: -0.01em;
  zoom: var(--app-zoom); /* Aplicamos el zoom a todo el documento */
}

/* ── Botones ──────────────────────────────────────────────────────────────
 *
 * Bootstrap 5.3 dibuja el botón desde variables: `.btn` declara una sola vez
 * `padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x)`, `background-color:
 * var(--bs-btn-bg)` y demás, y cada variante —`.btn-sm`, `.btn-primary`— solo
 * cambia las variables. Los estados viven en reglas aparte, más específicas:
 *
 *     .btn:hover                                → --bs-btn-hover-bg
 *     .btn.active, .btn:first-child:active, …   → --bs-btn-active-bg
 *     .btn:disabled                             → --bs-btn-disabled-bg
 *     .btn:focus-visible                        → --bs-btn-focus-box-shadow
 *
 * Esta hoja redeclaraba la PROPIEDAD (`background-color: #6A8A76`), y contra
 * eso no hay manera de ganar sin `!important`: `.btn:first-child:active` tiene
 * más especificidad que `.btn-primary`, así que al pulsar, el botón se habría
 * puesto azul Bootstrap. Los 24 `!important` de este bloque sostenían eso.
 *
 * Cambiando las variables gana el tema sin marcar nada, y los estados salen
 * solos y en su color. Dos cosas se arreglan de camino: pulsar un botón vuelve
 * a tener respuesta visible (el `!important` congelaba el fondo en los cuatro
 * estados) y vuelve el anillo de foco del teclado, ahora en salvia.
 *
 * Con esto se van también los `!important` que este bloque forzaba más abajo,
 * en `.btn-fila` y en `#vista-auth .btn-primary`. */
/* En píldora, como el botón de acceso y los de la portada. Archivo, que es la
   letra de los rótulos. */
.btn {
  --bs-btn-padding-y: 0.7rem;
  --bs-btn-padding-x: 1.35rem;
  --bs-btn-font-family: var(--fuente-rotulos);
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: 999px;
  --bs-btn-border-width: 0;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.btn-sm {
  --bs-btn-padding-y: 0.45rem;
  --bs-btn-padding-x: 0.95rem;
  --bs-btn-font-size: 0.85rem;
  --bs-btn-border-radius: 999px;
}

/* Un solo botón oscuro por pantalla: el que hace lo principal. El salvia queda
   para los contornos y para lo que está seleccionado. */
.btn-primary {
  --bs-btn-bg: var(--zen-hondo);              --bs-btn-color: #FAF9F6;
  --bs-btn-hover-bg: var(--zen-hondo-hover);  --bs-btn-hover-color: #FAF9F6;
  --bs-btn-active-bg: #15201B;                --bs-btn-active-color: #FAF9F6;
  --bs-btn-disabled-bg: var(--zen-hondo);     --bs-btn-disabled-color: #FAF9F6;
  --bs-btn-focus-shadow-rgb: 106, 138, 118;
}

/* Lo que se hace de vez en cuando —exportar, descargar, imprimir— sin pesar
   como una acción: texto con su icono, sin caja. */
.btn-terciario {
  --bs-btn-color: var(--zen-tinta-cl);
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--zen-hondo);     --bs-btn-hover-bg: rgba(34, 48, 42, 0.06);
  --bs-btn-active-color: var(--zen-hondo);    --bs-btn-active-bg: rgba(34, 48, 42, 0.1);
  --bs-btn-disabled-color: var(--zen-tinta-cl);
  --bs-btn-focus-shadow-rgb: 106, 138, 118;
  --bs-btn-padding-x: 0.75rem;
}

.btn-outline-primary {
  --bs-btn-color: #4E6E5A;                --bs-btn-bg: transparent;
  --bs-btn-border-color: #A8BFAE;         --bs-btn-border-width: 1.5px;
  --bs-btn-hover-bg: #6A8A76;             --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-border-color: #6A8A76;
  --bs-btn-active-bg: #55705F;            --bs-btn-active-color: #FFFFFF;
  --bs-btn-active-border-color: #55705F;
  --bs-btn-disabled-color: #6A8A76;       --bs-btn-disabled-border-color: #6A8A76;
  --bs-btn-focus-shadow-rgb: 106, 138, 118;
  box-shadow: none;
}

.btn-outline-secondary {
  --bs-btn-color: var(--zen-text-muted);
  --bs-btn-border-color: var(--zen-border);   --bs-btn-border-width: 2px;
  --bs-btn-hover-bg: var(--zen-bg);           --bs-btn-hover-color: var(--zen-dark);
  --bs-btn-hover-border-color: var(--zen-text-muted);
  --bs-btn-active-bg: var(--zen-bg);          --bs-btn-active-color: var(--zen-dark);
  --bs-btn-active-border-color: var(--zen-text-muted);
  --bs-btn-disabled-color: var(--zen-text-muted);
  --bs-btn-disabled-border-color: var(--zen-border);
}

/* Los campos no llevan variables propias en Bootstrap 5.3: `.form-control`
   declara sus propiedades directamente. Pero tampoco hacía falta marcar nada,
   y este es el otro sabor de la deuda — `!important` puesto por si acaso.
   `.form-control` y `.form-control:focus` tienen aquí la misma especificidad
   que allí, y esta hoja va después, así que gana sola.

   Una cosa sí cambia, y a mejor: `.form-control:disabled` (0,2,0) le gana a
   esta regla, así que el único campo deshabilitado de la aplicación —el correo
   en «Datos de la cuenta», que se lee y no se edita— pasa a verse gris, que es
   lo que significa. Antes se veía igual que uno editable. */
/* Los campos, rehechos el 02-10-2026. Eran de borde doble (2px) y radio de
   14px, con 1,2rem de relleno a cada lado: parecían un botón y se veían
   «baratos». Además el relleno se declaraba con la abreviada también para
   `.form-select`, y eso le quitaba a Bootstrap los 2,25rem de la derecha que
   reserva para la flecha: en una columna estrecha el texto del desplegable se
   metía debajo de ella. Ahora el borde es fino, la flecha es nuestra y tiene
   su sitio, y el foco es un halo salvia. */
.form-control, .form-select {
  border-radius: 10px;
  border: 1px solid #D5DED8;
  padding: 0.62rem 0.9rem;
  font-size: 0.95rem;
  background-color: #FFFFFF;
  color: var(--zen-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  box-shadow: 0 1px 2px rgba(34, 48, 42, 0.04);
}
.form-control:hover, .form-select:hover { border-color: #B9C7BE; }
.form-control:focus, .form-select:focus {
  border-color: #6A8A76;
  background-color: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(106, 138, 118, 0.18);
}
.form-control::placeholder { color: #A3AFA7; }
.form-select {
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236E7C73' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='m4 6 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.85rem center;
  background-size: 16px 16px;
  cursor: pointer;
}
.form-control-sm, .form-select-sm { padding: 0.42rem 0.7rem; font-size: 0.86rem; border-radius: 8px; }
.form-select-sm { padding-right: 2.2rem; background-position: right 0.6rem center; }
.input-group-text { border: 1px solid #D5DED8; background: #F4F5F1; color: var(--zen-tinta-cl); font-size: 0.88rem; border-radius: 10px; padding: 0 0.85rem; }
.form-label { font-family: var(--fuente-rotulos); color: var(--zen-hondo); font-size: 0.86rem; font-weight: 600; letter-spacing: 0; margin-bottom: 0.4rem; }
.form-text { font-size: 0.8rem; color: var(--zen-tinta-cl); margin-top: 0.35rem; line-height: 1.45; }
.obligatorio { color: var(--estado-decision); font-weight: 600; }
.opcional { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 0.76rem; color: var(--zen-tinta-cl); margin-left: 4px; }

/* Casillas e interruptores en salvia, no en el azul de Bootstrap. El círculo
   del interruptor con foco es una imagen que Bootstrap pinta azul claro. */
.form-check-input { border: 1.5px solid #B9C7BE; }
.form-check-input:checked { background-color: var(--zen-primary); border-color: var(--zen-primary); }
.form-check-input:focus { border-color: var(--zen-primary); box-shadow: 0 0 0 3px rgba(106, 138, 118, 0.18); }
.form-switch .form-check-input:focus:not(:checked) { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23A8BFAE'/%3e%3c/svg%3e"); }

/* Por variables, como los botones. Aquí hay además una ganancia concreta:
   `--bs-card-inner-border-radius` se deriva de `--bs-card-border-radius`, así
   que una cabecera o un pie de tarjeta redondean con ella. Marcando el
   `border-radius` de `.card` a secas, las esquinas de dentro se quedaban en
   los 0,375 rem de Bootstrap y asomaban por debajo. */
.card {
  --bs-card-border-width: 0;
  --bs-card-border-radius: 16px;
  --bs-card-bg: var(--zen-surface);
  --bs-card-spacer-y: 2rem;
  --bs-card-spacer-x: 2rem;
  box-shadow: var(--zen-shadow-card);
  margin-bottom: 24px;
  transition: transform 0.3s ease;
}
.card-title { font-family: var(--fuente-rotulos); font-weight: 700; color: var(--zen-hondo); font-size: 1.25rem; letter-spacing: -0.01em; }

.table-responsive { background: white; border-radius: 20px; padding: 1rem; }
.table { margin-bottom: 0; --bs-table-bg: transparent; }
/* Bootstrap pinta las celdas con `.table>:not(caption)>*>*`, que suma una clase
   y un elemento: la misma especificidad que `.table th` y `.table td`. Esta
   hoja va después, así que gana sin marcar nada.

   El subrayado de la fila es otra cosa y por eso se queda como está: Bootstrap
   no lo pinta con `background-color` sino con una sombra interior de 9999px en
   cada CELDA (`--bs-table-bg-state`), y esta regla pinta la FILA. No compiten
   —son elementos distintos— y lo que se ve es la mezcla de las dos. Cambiarlo
   a `--bs-table-hover-bg`, que sería lo «correcto», dejaría el #FAFCFB puro
   sobre blanco: un 1 % de diferencia, o sea ningún subrayado. */
.table th { background-color: transparent; color: var(--zen-text-muted); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 1px; border-bottom: 1px solid var(--zen-border); padding: 1.2rem 1rem; border-top: none; }
.table td { vertical-align: middle; padding: 1.2rem 1rem; border-bottom: 1px solid #F4F6F5; color: var(--zen-text); }
.table-hover tbody tr:hover { background-color: #FAFCFB; }
.table-light { background-color: transparent; }

.avatar-circle { width: 42px; height: 42px; border-radius: 50%; background-color: rgba(106, 138, 118, 0.12); color: #6A8A76; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.95rem; margin-right: 14px; flex-shrink: 0;}
.flex-avatar { display: flex; align-items: center; }

/* El `border: none` marcado no competía con Bootstrap —`.badge` no declara
   borde— sino con las UTILIDADES del propio marcado: veinte plantillas piden
   `border border-success-subtle` y compañía, y esta regla se las comía. Igual
   con `py-1 px-2` y el `padding` marcado. Por variables, la utilidad vuelve a
   poder, que es para lo que se escribió en la plantilla. */
.badge {
  --bs-badge-border-radius: 12px;
  --bs-badge-font-weight: 600;
  --bs-badge-padding-y: 0.6em;
  --bs-badge-padding-x: 0.8em;
  letter-spacing: 0.3px;
}
/* Los estados no son un fondo sólido aquí, sino un tinte con su texto encima
   —lo que Bootstrap llama `-subtle` + `-emphasis`—, y eso se conseguía
   redeclarando `background-color`, que en una utilidad va marcada.
 
   No hace falta. Dentro de `.bg-success`, Bootstrap declara
   `--bs-bg-opacity: 1` SIN marcar, y luego `background-color:
   rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important`. Basta con
   pisar las dos variables desde una regla igual de específica y más abajo: la
   declaración marcada sigue siendo la suya, pero ya calcula nuestro color.
 
   El color del texto sí es una propiedad, y va sin marcar: si una plantilla
   pide `text-dark`, que mande la plantilla. Las siete que lo pedían eran
   restos del fondo sólido de Bootstrap y se han quitado del marcado. */
.bg-success   { --bs-success-rgb: 46, 204, 113;    --bs-bg-opacity: 0.15; color: #27ae60; }
.bg-warning   { --bs-warning-rgb: 241, 196, 15;    --bs-bg-opacity: 0.15; color: #d35400; }
.bg-danger    { --bs-danger-rgb: 231, 76, 60;      --bs-bg-opacity: 0.12; color: #c0392b; }
.bg-info      { --bs-info-rgb: 52, 152, 219;       --bs-bg-opacity: 0.12; color: #2980b9; }
.bg-secondary { --bs-secondary-rgb: 139, 153, 144; --bs-bg-opacity: 0.15; color: #697A70; }
.badge.bg-primary { --bs-bg-opacity: 0.15; color: #6A8A76; }

/* ── Móvil ────────────────────────────────────────────────────────────────
   Aquí solo vive lo que arregla un fallo concreto. Hubo un momento en que
   este bloque convertía las tablas en tarjetas, anulaba el zoom y recortaba
   los rellenos: era un rediseño que nadie había pedido, y se deshizo. El
   `zoom: 0.75` se queda, que es lo que da la densidad que se quiere.

   Lo que sí se queda:

   · Los encabezados de sección. Son `d-flex justify-content-between` —el
     título a un lado y los botones al otro— y en un móvil no caben en la
     misma línea: el título partía en dos y los botones se le montaban
     encima. Ese era el fallo que había que arreglar.

   · La barra lateral, que no se podía desplazar. Con el menú abierto en una
     pantalla baja, "Cambiar Local" quedaba por debajo del borde y no había
     forma de llegar a él: el contenido no cabía y nada permitía moverlo.

   · Los modales altos. `modal-dialog-centered` los centra en vertical, y la
     ficha de una alumna mide 728px en una pantalla de 812: eso empujaba la
     cabecera —con el botón de cerrar— fuera de la pantalla. */

@media (max-width: 767.98px) {
  /* Los encabezados de sección se apilan. */
  /* `align-self` en los hijos y no `align-items` en el padre: el marcado pide
     `align-items-center`, que es una utilidad y viene marcada, y contra eso no
     hay especificidad que valga. Pero lo que `align-items` hace es dar el
     valor por defecto del `align-self` de cada hijo, y ese no lo declara
     nadie. Mismo resultado, sin pelearse. */
  .seccion-dashboard > .d-flex.justify-content-between {
    flex-direction: column;
    gap: 10px;
  }
  .seccion-dashboard > .d-flex.justify-content-between > * { align-self: stretch; }
  .seccion-dashboard > .d-flex.justify-content-between > .d-flex { width: 100%; }

  /* La cabecera de cada tarjeta, igual: título y su botón de exportar. */
  .seccion-dashboard .card-body > .d-flex.justify-content-between {
    flex-wrap: wrap;
    gap: 10px;
  }
}

/* La barra lateral se desplaza. Va fuera de la media query porque la que la
   convierte en cajón deslizante es la de 991px, no la de 768. */
@media (max-width: 991px) {
  .sidebar { overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 767.98px) {
  /* Los modales altos arrancan arriba en vez de centrados. El `min-height` es
     el que Bootstrap le pone al diálogo centrado para poder centrarlo, y
     estira la tarjeta hasta la pantalla entera. El techo de alto, con el
     cuerpo desplazándose, vale ya para todas las anchuras (más abajo, junto a
     la corrección del zoom); aquí solo cambia el margen que lo calcula. */
  .modal-dialog-centered { align-items: flex-start; min-height: auto; }
  .modal { --bs-modal-margin: 16px; }
}

/* Botón de icono dentro de una fila: cuadrado, con el icono centrado. */
.btn-fila {
  width: 38px; height: 38px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}

/* El aviso de confirmar el correo. Barra fina arriba del todo, por encima de
   las tres vistas, en el ocre de los avisos del panel: se lee sin gritar y no
   empuja el contenido, porque no es un error, es un recordatorio. */
#aviso-verificar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #F6EEDD; color: #6B4C1E;
  border-bottom: 1px solid rgba(107,76,30,.18);
  padding: 10px 18px; font-size: .85rem; font-weight: 500;
  position: relative; z-index: 1040;
}
#aviso-verificar button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: .85rem; font-weight: 600; color: #6B4C1E;
}
#btn-reenviar-verificacion { text-decoration: underline; text-underline-offset: 3px; }
#btn-reenviar-verificacion[disabled] { opacity: .55; cursor: default; text-decoration: none; }
#btn-cerrar-aviso-verificar { margin-left: auto; font-size: 1.2rem; line-height: 1; opacity: .6; }
#btn-cerrar-aviso-verificar:hover { opacity: 1; }

/* ── Pantalla de acceso ───────────────────────────────────────────────────
   Es la única parte del panel que ve alguien que todavía no es cliente, así
   que viste como la portada: verde hondo de campo, papel hueso encima,
   Archivo para los rótulos y Source Serif para el texto corrido.

   Todo va colgado de #vista-auth a propósito. El resto del panel se queda
   exactamente como estaba —Inter, Bootstrap, el tema zen— porque esto es un
   cambio de puerta de entrada, no un rediseño de la herramienta. */

#vista-auth {
  min-height: var(--vh-real);
  display: flex; align-items: center; justify-content: center;
  background: #22302A;
  padding: 24px;
}

#vista-auth .acceso-marco { width: 100%; max-width: 27rem; }

#vista-auth .acceso-marca {
  display: block; text-align: center; margin-bottom: 1.5rem;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 1.0625rem;
  letter-spacing: -.015em; color: #FAF9F6; text-decoration: none;
}
#vista-auth .acceso-marca span { color: #6A8A76; }

#vista-auth .auth-card {
  background: #FAF9F6;
  color: #3D4A41;
  border-radius: 6px;
  padding: 2.5rem 2.2rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.3);
  border: 0;
  max-width: none;
}

#vista-auth h1 {
  font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: 1.5rem; line-height: 1.15; letter-spacing: -.024em;
  margin: 0 0 .4rem; color: #3D4A41;
}
#vista-auth .acceso-sub {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: .9375rem; line-height: 1.5; color: #6E7C73; margin: 0 0 1.8rem;
}

#vista-auth .form-label {
  font-family: 'Archivo', sans-serif; font-weight: 600;
  font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  color: #6E7C73; margin-bottom: .35rem;
}

#vista-auth .form-control {
  font-family: 'Archivo', sans-serif; font-size: .9375rem;
  background: #fff; border: 1px solid rgba(61,74,65,.2); border-radius: 4px;
  padding: .6rem .8rem; color: #3D4A41; box-shadow: none;
}
#vista-auth .form-control:focus {
  border-color: #6A8A76; box-shadow: 0 0 0 3px rgba(106,138,118,.18);
}

/* El verde hondo de la portada, no el salvia del panel. Llevó `!important`
   mientras `.btn-primary` declaraba su fondo marcado; ahora aquel tematiza por
   variables y este selector, que lleva un id, gana en todos los estados. */
#vista-auth .btn-primary {
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: .9375rem;
  background-color: #22302A;
  color: #FAF9F6;
  border: 0; border-radius: 999px; padding: .75rem 1rem;
  box-shadow: none;
  transition: background-color .18s ease;
}
#vista-auth .btn-primary:hover,
#vista-auth .btn-primary:focus {
  background-color: #3D4A41;
  color: #FAF9F6;
  transform: none;
  box-shadow: none;
}

/* Entrar y Registrarse dejan de pesar lo mismo. Eran dos pestañas gemelas, y
   por eso un profesor al que han invitado pulsaba Registrarse tan fácilmente
   como Entrar — de ahí las cuatro academias vacías que hay en producción. */
#vista-auth .acceso-cambio {
  font-family: 'Source Serif 4', Georgia, serif;
  text-align: center; font-size: .875rem; color: #6E7C73;
  margin: 1.4rem 0 0; padding-top: 1.2rem; border-top: 1px solid rgba(61,74,65,.14);
}
#vista-auth .acceso-enlace {
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: .875rem;
  background: none; border: 0; padding: 0; color: #3D4A41;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
#vista-auth .acceso-enlace:hover { color: #22302A; }

#vista-auth .acceso-menor {
  font-family: 'Archivo', sans-serif; font-size: .8125rem;
  background: none; border: 0; padding: 0; color: #6E7C73;
  text-decoration: none; cursor: pointer;
}
#vista-auth .acceso-menor:hover { color: #3D4A41; text-decoration: underline; }

/* Los avisos, sin los rojos y verdes de Bootstrap. */
#vista-auth .alert {
  font-family: 'Archivo', sans-serif; font-size: .8125rem; font-weight: 500;
  border-radius: 4px; border: 0; padding: .7rem .9rem; margin-bottom: 1.2rem;
}
#vista-auth .alert-danger { background: #F6E5E0; color: #8C3A21; }
#vista-auth .alert-success { background: #E2ECE5; color: #2F5B44; }

#vista-auth .acceso-pie {
  font-family: 'Archivo', sans-serif; font-size: .78rem;
  text-align: center; margin: 1.4rem 0 0; color: rgba(168,191,174,.85);
}
#vista-auth .acceso-pie a { color: inherit; text-decoration: none; }
#vista-auth .acceso-pie a:hover { color: #FAF9F6; text-decoration: underline; }

#vista-auth :focus-visible { outline: 2px solid #6A8A76; outline-offset: 2px; }

.sidebar { width: 252px; background: var(--zen-sidebar); color: var(--zen-hondo); display: flex; flex-direction: column; flex-shrink: 0; transition: transform 0.3s ease; border-right: 1px solid rgba(34, 48, 42, 0.08); }
.sidebar-header { padding: 16px 14px 14px 22px; font-family: var(--fuente-rotulos); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.015em; border-bottom: 1px solid rgba(0,0,0,0.06); display: flex; align-items: center; justify-content: space-between; color: var(--zen-hondo); }

/* La campana: un botón de verdad, con el contador de avisos sin leer encima. */
.campana { position: relative; background: transparent; border: 0; padding: 6px; line-height: 1; color: #6A8A76; font-size: 1.25rem; border-radius: 50%; transition: background 0.2s; }
.campana:hover { background: rgba(106,138,118,0.12); }
.campana:focus-visible { outline: 2px solid #6A8A76; outline-offset: 2px; }
.campana-contador { position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #d9534f; color: #fff; font-size: 0.68rem; font-weight: 800; line-height: 18px; text-align: center; border: 2px solid var(--zen-sidebar); box-sizing: content-box; transform: translate(35%, -25%); }

/* El panel de notificaciones. */
.panel-notificaciones { --bs-offcanvas-width: 480px; max-width: 100vw; border-left: none; box-shadow: -10px 0 40px rgba(0,0,0,0.08); background: #fff; }
.panel-notificaciones .offcanvas-header { padding: 22px 24px 16px; border-bottom: 1px solid var(--zen-border); background: var(--zen-bg); align-items: flex-start; }
.panel-notificaciones .offcanvas-footer { padding: 14px 24px; border-top: 1px solid var(--zen-border); background: #fff; }
.notif-dia { position: sticky; top: 0; z-index: 1; padding: 14px 24px 6px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zen-text-muted); background: #fff; }
.notif-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px 14px 24px; border-bottom: 1px solid rgba(0,0,0,0.05); transition: background 0.2s, opacity 0.2s, transform 0.2s; }
.notif-item:hover { background: rgba(0,0,0,0.02); }
.notif-item--nueva { background: rgba(106,138,118,0.07); }
.notif-item--nueva:hover { background: rgba(106,138,118,0.11); }
.notif-item--saliendo { opacity: 0; transform: translateX(24px); pointer-events: none; }
.notif-icono { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; background: var(--notif-fondo, rgba(0,0,0,0.05)); color: var(--notif-color, var(--zen-text)); }
.notif-cuerpo { flex: 1; min-width: 0; }
.notif-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.notif-tipo { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--notif-color, var(--zen-text)); }
.notif-hora { font-size: 0.75rem; color: var(--zen-text-muted); }
.notif-punto { width: 8px; height: 8px; border-radius: 50%; background: #d9534f; margin-left: auto; margin-right: 4px; }
.notif-texto { font-size: 0.92rem; line-height: 1.4; color: var(--zen-text); overflow-wrap: anywhere; }
/* Lo que la alumna cuenta (de su salud): dentro del panel, nunca en el aviso al móvil. */
.notif-detalle { margin-top: 6px; padding: 8px 10px; border-left: 3px solid var(--zen-primary); border-radius: 0 8px 8px 0; background: #F4F7F5; font-size: 0.86rem; line-height: 1.4; color: var(--zen-text); white-space: pre-line; overflow-wrap: anywhere; }
.notif-borrar { flex: 0 0 auto; background: transparent; border: 0; width: 30px; height: 30px; border-radius: 50%; color: var(--zen-text-muted); opacity: 0.55; transition: opacity 0.15s, background 0.15s; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; }
.notif-item:hover .notif-borrar, .notif-borrar:focus-visible { opacity: 1; }
.notif-borrar:hover { background: rgba(217,83,79,0.12); color: #c9302c; }
.notif-marcar { flex: 0 0 auto; background: transparent; border: 0; width: 30px; height: 30px; border-radius: 50%; color: var(--zen-text-muted); opacity: 0.55; transition: opacity 0.15s, background 0.15s; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; }
.notif-item:hover .notif-marcar, .notif-marcar:focus-visible { opacity: 1; }
.notif-marcar:hover { background: rgba(106,138,118,0.14); color: var(--zen-primary); }
.notif-confirmar { display: flex; flex-direction: column; gap: 10px; text-align: center; color: var(--zen-text); }
.notif-vacio { padding: 64px 32px; text-align: center; color: var(--zen-text); }
.notif-vacio .bi { display: block; font-size: 2.4rem; color: #A8BFAE; margin-bottom: 12px; }
/* Un color por tipo: se distingue de un vistazo antes de leer nada. */
.notif-cancelacion  { --notif-color: #c0392b; --notif-fondo: rgba(192,57,43,0.10); }
.notif-recuperacion { --notif-color: #2f6f9f; --notif-fondo: rgba(47,111,159,0.10); }
.notif-espera       { --notif-color: #b7791f; --notif-fondo: rgba(183,121,31,0.12); }
.notif-solicitud    { --notif-color: #4f7d5f; --notif-fondo: rgba(106,138,118,0.14); }
.notif-aforo        { --notif-color: #b7791f; --notif-fondo: rgba(183,121,31,0.12); }
.notif-rgpd         { --notif-color: #5b4b8a; --notif-fondo: rgba(91,75,138,0.12); }
.notif-aviso        { --notif-color: #6c757d; --notif-fondo: rgba(108,117,125,0.10); }
@media (max-width: 767.98px) {
  .panel-notificaciones { --bs-offcanvas-width: 100vw; }
  .notif-borrar, .notif-marcar { opacity: 1; }
}
/* Lleva un id: 100 puntos de especificidad contra los 10 de `.btn-outline-*`
   y los 20 de `.btn:hover`. Nunca necesitó marcar nada. */
#btn-volver-locales { color: var(--zen-tinta-cl); border: 1px solid rgba(34,48,42,0.14); background: transparent; font-weight: 600; --bs-btn-padding-y: 0.55rem; font-size: 0.9rem; }
#btn-volver-locales:hover { background: rgba(255,255,255,0.6); color: var(--zen-hondo); }

/* El menú, agrupado por uso (Día a día · Dinero · Montaje) y con la entrada
   activa como una pestaña blanca, no como una franja salvia a sangre. */
.nav-menu { list-style: none; padding: 8px 12px 10px; margin: 0; flex-grow: 1; }
.nav-grupo { font-family: var(--fuente-rotulos); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--zen-tinta-cl); padding: 12px 12px 4px; }
.nav-grupo:first-child { padding-top: 6px; }
.nav-separador { height: 1px; background: rgba(34, 48, 42, 0.08); margin: 8px 12px 6px; }
.nav-link-app { display: flex; align-items: center; padding: 6px 12px; margin: 1px 0; color: #55625A; text-decoration: none; font-family: var(--fuente-rotulos); font-weight: 500; font-size: 0.98rem; transition: background-color 0.15s, color 0.15s; cursor: pointer; border-radius: 10px; }
.nav-link-app i { margin-right: 12px; font-size: 1.1rem; opacity: 0.85; }
.nav-link-app:hover { background: rgba(255, 255, 255, 0.55); color: var(--zen-hondo); }
.nav-link-app.active { background: #FFFFFF; color: var(--zen-hondo); font-weight: 600; box-shadow: 0 1px 2px rgba(34, 48, 42, 0.08); }
.nav-link-app.active i { color: var(--zen-primary); opacity: 1; }
.sidebar-pie { padding: 8px 12px 12px; }

/* La barra lateral cabe entera en la pantalla. Con la interfaz «Normal» o
   «Grande» (--app-zoom 0,85 / 1) medía más que una ventana de portátil y la
   página entera se desplazaba para llegar a «Configuración». Dos medidas:
   en una pantalla baja, el espaciado se aprieta; y si aun así no cabe, la
   barra se desplaza ella sola, a la altura de la ventana, y la página no. */
@media (min-width: 992px) {
  .sidebar { position: sticky; top: 0; height: var(--vh-real); overflow-y: auto; }
}
@media (min-width: 992px) and (max-height: 780px) {
  .sidebar-header { padding-top: 12px; padding-bottom: 10px; }
  .nav-link-app { padding-top: 4px; padding-bottom: 4px; }
  .nav-grupo { padding-top: 9px; padding-bottom: 3px; }
  .sidebar-pie { padding-top: 6px; padding-bottom: 8px; }
}

.mobile-topbar { display: none; background: var(--zen-sidebar); color: var(--zen-dark); padding: 15px 20px; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1030; border-bottom: 1px solid var(--zen-border); }
.btn-mobile-menu { background: none; border: none; color: var(--zen-hondo); font-size: 1.8rem; cursor: pointer; padding: 0; line-height: 1; }
.sidebar-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(44, 53, 48, 0.5); backdrop-filter: blur(3px); z-index: 1040; display: none; opacity: 0; transition: opacity 0.3s ease; }
.sidebar-overlay.active { display: block; opacity: 1; }
#dashboard-wrapper { display: flex; min-height: var(--vh-real); }
.main-content { flex-grow: 1; padding: 40px; overflow-y: auto; height: var(--vh-real); }

/* ========================================================= */
/* HORARIO GRID PREMIUM (Mobile-Friendly con Sticky Completo) */
/* ========================================================= */
/* 1. overflow: auto permite scroll vertical y horizontal */
.horario-scroll-container { height: calc(var(--vh-real) - 300px); min-height: 400px; overflow: auto; background: white; border-radius: 16px; border: 1px solid var(--zen-border); position: relative; }

/* 2. min-width asegura que los 7 días tengan espacio respirable, forzando el scroll en móvil */
.horario-header-grid { display: grid; grid-template-columns: 50px repeat(7, 1fr); background: #FCFDFC; border-bottom: 1px solid var(--zen-border); min-width: 750px; } 
/* El padding-top deja sitio a la primera etiqueta de hora, que sobresale
   media altura por encima de su línea; sin él la tapaba la cabecera fija,
   en pantalla y en el PDF. Las columnas y los bloques bajan con él.
   content-box porque el JS fija `height` a horas × 50 px: con el border-box
   de Bootstrap el padding se comía 10 px de filas, que desbordaban y ponían
   una barra de scroll de 10 px en cualquier horario que cupiera entero. */
.horario-grid-bg { display: grid; grid-template-columns: 50px repeat(7, 1fr); position: relative; min-width: 750px; padding-top: 10px; box-sizing: content-box; }

/* 3. Congelamos la celda superior izquierda y toda la columna de las horas */
.horario-header-cell:first-child { position: sticky; left: 0; z-index: 40; background: #FCFDFC; border-right: 1px solid var(--zen-border); }
.horario-col-hora { position: sticky; left: 0; z-index: 20; background: #FCFDFC; border-right: 1px solid var(--zen-border); }

.horario-header-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 4px; text-align: center; color: var(--zen-tinta-cl); border: 0; border-right: 1px solid var(--zen-border); background: transparent; line-height: 1.15; font: inherit; }
button.horario-header-cell { cursor: pointer; transition: background-color 0.15s; }
button.horario-header-cell:hover { background: #F4F8F5; }
.horario-cab-dia { font-family: var(--fuente-rotulos); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.horario-cab-fecha { font-family: var(--fuente-rotulos); font-size: 1.15rem; font-weight: 700; color: var(--zen-hondo); }
.horario-cab-pie { font-size: 0.66rem; }
.horario-header-cell.dia-actual { background-color: rgba(106, 138, 118, 0.08); }
.horario-header-cell.dia-actual .horario-cab-fecha { color: #FAF9F6; background: var(--zen-hondo); border-radius: 999px; padding: 0 8px; }
.horario-header-cell.dia-festivo .horario-cab-pie { color: var(--estado-decision); font-weight: 600; }
.horario-header-esquina { justify-content: center; }
.horario-col { border-right: 1px solid var(--zen-border); position: relative; }
.horario-col.dia-actual { background-color: rgba(106, 138, 118, 0.02); }
.horario-hora-row { height: 50px; border-bottom: 1px dashed #E8EFEA; box-sizing: border-box; } 
/* La etiqueta va centrada sobre la línea de su hora, que es donde arranca el
   bloque de la clase. Ponerla debajo de la línea hacía que "16:00" quedara
   más abajo que el principio de la clase de las 16:00. El sitio para la
   primera lo da el padding-top de .horario-grid-bg. */
.horario-hora-label { position: absolute; right: 6px; font-size: 0.7rem; color: var(--zen-text-muted); font-weight: 600; transform: translateY(-50%); background: transparent; padding: 0 2px; }

/* La barra blanca con las flechas y la fecha. Antes se seleccionaba por las
   seis utilidades que llevaba —`.bg-white.p-2.rounded.shadow-sm.d-flex.align-items-center.border`—,
   que además de ilegible obligaba a marcar el `gap` del móvil para ganarle a
   `gap-3`. Con una clase propia, el valor de escritorio vive aquí y el del
   móvil lo pisa por orden. El radio también: `.rounded` viene marcada, y por
   eso el marcado llevaba un `style="border-radius: 16px !important"`. */
.barra-fechas { gap: 1rem; border-radius: 16px; }
/* Las tres barras pequeñas —agenda, horario y el filtro de salas— querían el
   mismo radio y lo pedían con un `style="border-radius: 12px !important"`,
   porque el marcado llevaba además la utilidad `.rounded`, que va marcada. */
.barra-nav { border-radius: 12px; }

/* El aviso de las citas sin cerrar. Estaba entero en un `style=""` y su
   `border-color` iba marcado porque el marcado pedía también `.border`. Sin
   esa utilidad, `.alert` declara su borde sin marcar y esta regla gana. */
.aviso-ocre { border: 1px solid #F3D9B8; border-radius: 14px; background: #FFF6EC; }
/* Y el margen de «Hoy», que estaba en un `ms-1` del marcado. */
.btn-nav-hoy { margin-left: 0.25rem; }

/* El ancho del texto de fecha de las barras de navegación. Cada barra pide el
   suyo con `--ancho-fecha`; estaba en un `style="min-width: 180px"`, y un
   estilo en línea solo se pisa marcando, así que la regla del móvil que lo
   reduce a 120px tenía que llevar `!important`. */
.nav-fecha-texto { min-width: var(--ancho-fecha, 150px); }

/* Una clase en la rejilla (04-10-2026): arriba qué clase es y cuántas van;
   debajo la hora y con quién. Con menos de 40 px solo cabe la primera línea.
   El color llega como --c y tiñe el fondo al 16 % y el filo entero. */
.evento-cancelado { opacity: .55; background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0,0,0,.06) 6px 8px); text-decoration: line-through; }
.evento-card { position: absolute; border-radius: 8px; padding: 4px 6px 4px 7px; font-size: 0.7rem; overflow: hidden; box-shadow: 0 3px 8px rgba(34, 48, 42, 0.07); border-left: 4px solid var(--c, var(--zen-primary)); background: color-mix(in srgb, var(--c, var(--zen-primary)) 16%, #FFFFFF); cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s; display: flex; flex-direction: column; gap: 1px; z-index: 10; }
.evento-card:hover { transform: translateY(-1px); z-index: 15; box-shadow: 0 8px 18px rgba(34, 48, 42, 0.14); }
.evento-fila { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; min-width: 0; }
.evento-nombre { font-weight: 700; color: var(--zen-hondo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; min-width: 0; }
.evento-sub { color: color-mix(in srgb, var(--c, var(--zen-primary)) 55%, var(--zen-hondo)); font-size: 0.66rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.evento-card--baja .evento-sub { display: none; }
.evento-aforo { background: rgba(255,255,255,0.85); color: var(--zen-hondo); padding: 1px 4px; border-radius: 4px; font-weight: 700; display: flex; align-items: center; gap: 2px; flex-shrink: 0; font-size: 0.64rem; font-variant-numeric: tabular-nums; }
.evento-card--apagada { opacity: 0.32; }
.evento-card--con-sitio { box-shadow: 0 0 0 2px var(--estado-ok), 0 3px 8px rgba(34, 48, 42, 0.07); }

.linea-hora-actual { position: absolute; left: 0; right: 0; height: 2px; background-color: #e74c3c; z-index: 12; pointer-events: none; }
.linea-hora-actual::before { content: ''; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background-color: #e74c3c; }

/* En el móvil la página no se desplaza: se desplaza solo el contenido, debajo
   de la barra. Hasta el 06-10-2026 se desplazaba la página entera con la barra
   en `position: sticky`, y Safari de iPhone calcula mal un sticky dentro de un
   `body` con `zoom` (el tamaño de la interfaz): al bajar, la barra se
   descolgaba y dejaba una franja en blanco encima. Ahora la página no se
   mueve: el panel ocupa justo la pantalla (`--vh-real`, la altura visible
   medida por preferencias.js) y la barra va `fixed` arriba, que sin
   desplazamiento de página no tiene cómo descolgarse. Fija, y no un bloque
   normal, por Safari de iOS 26: tiñe la zona del reloj con el color del
   elemento fijo que haya arriba (ya no con theme-color); con la barra en el
   flujo, la teñía del fondo blanquecino de la página. */
@media (max-width: 991px) {
  .mobile-topbar { display: flex; position: fixed; top: 0; left: 0; right: 0; height: 64px; padding: 0 20px; }
  #dashboard-wrapper { flex-direction: column; margin-top: 64px; height: calc(var(--vh-real) - 64px); min-height: 0; overflow: hidden; }
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1050; transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-content { padding: 15px; flex: 1 1 auto; height: auto; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; }
}

@media (max-width: 575px) {
    .barra-fechas { flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; margin-left: 0; margin-right: 0; }
    .nav-fecha-texto { min-width: 120px; flex-grow: 1; }
    .btn-nav-hoy { width: 100%; margin-left: 0; margin-top: 4px; }
    /* Cualquier barra de botones se apila, MENOS la de la agenda, que es de
       flechas y cabe en una fila. Decirlo aquí es lo mismo que dejar que se
       excluya ella a la fuerza con tres `!important`, pero se lee.
       `> button` y no `button`: la barra de la agenda vive DENTRO de otra
       barra, así que por descendencia esta regla llegaba igual a sus flechas
       —que es justo lo que aquellos `!important` estaban tapando—. En toda la
       aplicación los botones de una barra son hijos directos suyos. */
    .seccion-dashboard .d-flex.flex-wrap.gap-2:not(.agenda-nav), .seccion-dashboard .d-flex.gap-2:not(.agenda-nav) { flex-direction: column; width: 100%; }
    .seccion-dashboard .d-flex.flex-wrap.gap-2:not(.agenda-nav) > button, .seccion-dashboard .d-flex.gap-2:not(.agenda-nav) > button { width: 100%; }
}
  
/* ========================================================= */
/* CORRECCIÓN BOOTSTRAP PARA ZOOM (Modales y Offcanvas)      */
/* ========================================================= */
/* `body` lleva `zoom`, así que un `100vh` de dentro se dibuja al 75 % y la
   capa oscura del modal dejaba una franja sin cubrir. Bootstrap declara estas
   medidas sin marcar (`.modal-backdrop { width: 100vw }`), y esta hoja va
   después con la misma especificidad: gana sola. */
.modal-backdrop, .offcanvas-backdrop {
    width: calc(100vw / var(--app-zoom));
    height: var(--vh-real);
}
.modal {
    width: calc(100vw / var(--app-zoom));
    height: var(--vh-real);
}
.offcanvas {
    height: var(--vh-real);
}

/* Un modal nunca es más alto que la pantalla: la cabecera y el pie (Guardar,
   Cancelar) quedan fijos y lo que se desplaza es el cuerpo. Era así solo en
   el móvil; en una tableta el modal entero se desplazaba, y en un iPad antiguo
   el final quedaba bajo la barra de Safari, con los botones dentro. */
.modal-content { max-height: calc(var(--vh-real) - 2 * var(--bs-modal-margin, 1.75rem)); }
.modal-content > .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ── El vestíbulo: la lista de locales (js/vestibulo.js), 05-10-2026 ────────
   En la línea del panel: saludo con su rótulo, secciones con un título en
   Archivo y una marca de color, tarjetas blancas de 16 px. Lo propio y lo del
   equipo se distinguen a primera vista: lo propio lleva el verde hondo (el
   botón principal de la aplicación) y una franja arriba; lo del equipo, la
   tinta azul pizarra de `--vest-equipo` y la tarjeta con borde de su color.
   El dinero tiene su propia marca, ocre. */
#vista-locales {
  --vest-equipo: #3E5C76; --vest-equipo-fondo: #E6EDF3;
  --vest-dinero: #8F5C12; --vest-dinero-fondo: #F5EAD6;
  width: 100%; background-color: var(--zen-bg);
  /* Como el panel en el móvil (06-10-2026): la página no se desplaza, se
     desplaza la vista bajo una barra fija. Con la barra `sticky` y la página
     entera moviéndose, Safari de iPhone la descolgaba (el `zoom` del body) y
     teñía la zona del reloj de blanco en vez del beige de la barra. */
  height: var(--vh-real); overflow-y: auto; overscroll-behavior-y: contain; padding-top: 66px;
}
.lobby-topbar { background-color: var(--zen-sidebar); border-bottom: 1px solid rgba(34, 48, 42, 0.08); position: fixed; top: 0; left: 0; right: 0; height: 66px; z-index: 1000; padding: 0 24px; display: flex; align-items: center; }
.lobby-topbar-dentro { display: flex; justify-content: space-between; align-items: center; max-width: 1240px; width: 100%; margin: 0 auto; }
.lobby-marca { display: flex; align-items: center; gap: 10px; }
.lobby-marca-logo { width: 34px; height: 34px; border-radius: 10px; background: var(--zen-hondo); color: #FAF9F6; display: flex; align-items: center; justify-content: center; font-family: var(--fuente-rotulos); font-weight: 800; font-size: 1rem; letter-spacing: -0.06em; }
.lobby-marca-nombre { font-family: var(--fuente-rotulos); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--zen-hondo); }
.lobby-main { max-width: 1240px; margin: 0 auto; padding: 36px 24px 96px; }
#user-avatar-display { width: 42px; height: 42px; cursor: pointer; margin: 0; font-weight: 800; font-size: 1rem; }

.vest-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.vest-cab-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vest-cab h1 { font-family: var(--fuente-rotulos); font-weight: 700; font-size: 2.2rem; letter-spacing: -0.03em; line-height: 1.1; color: var(--zen-hondo); margin: 0; }
.vest-cab p { margin: 2px 0 0; color: var(--zen-tinta-cl); font-size: 1rem; }
.vest-cab-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.vest-cargando { color: var(--zen-tinta-cl); font-size: 0.9rem; }

.vest-seccion { margin-bottom: 34px; }
.vest-seccion-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.vest-seccion-cab h2, .vest-balance-cab h2 { display: flex; align-items: center; gap: 10px; font-family: var(--fuente-rotulos); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.015em; color: var(--zen-hondo); margin: 0; }
.vest-seccion-cab p, .vest-balance-cab p { margin: 4px 0 0 42px; font-size: 0.88rem; color: var(--zen-tinta-cl); }
.vest-seccion-lado { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Configuración de tus negocios (js/vestibulo-config.js). */
.cfgneg-rotulo { margin: 18px 0 8px; font-family: var(--fuente-rotulos); font-size: 0.86rem; font-weight: 700; color: var(--zen-hondo); }
.cfgneg-locales { display: flex; flex-direction: column; gap: 8px; }
.cfgneg-local { padding: 12px 14px; border: 1px solid var(--zen-border); border-radius: 12px; background: #FFFFFF; }
.cfgneg-local--si { border-color: var(--zen-primary); background: #F6F9F7; }
.cfgneg-local-cab { display: flex; align-items: flex-start; gap: 12px; margin: 0; cursor: pointer; }
.cfgneg-local-cab .form-check-input { margin: 3px 0 0; flex-shrink: 0; }
.cfgneg-local-nombre { flex: 1; min-width: 0; }
.cfgneg-local-nombre b { display: block; font-family: var(--fuente-rotulos); font-weight: 600; font-size: 0.92rem; color: var(--zen-hondo); }
.cfgneg-local-nombre small { display: block; font-size: 0.8rem; color: var(--zen-tinta-cl); margin-top: 2px; }
.cfgneg-local .form-control { margin: 10px 0 0; width: 100%; }
.cfgneg-grupo { width: auto; min-width: 150px; flex-shrink: 0; }
.cfgneg-grupos { display: flex; flex-direction: column; gap: 6px; }
.cfgneg-grupo-fila { display: flex; align-items: center; gap: 10px; }
.cfgneg-grupo-fila .form-control { width: 170px; flex-shrink: 0; }
.cfgneg-grupo-fila span { font-size: 0.84rem; color: var(--zen-tinta-cl); }
.cfgneg-portada-grupo + .cfgneg-portada-grupo { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--zen-border); }
.cfgneg-local-aviso { display: flex; gap: 6px; margin: 8px 0 0; font-size: 0.8rem; color: var(--estado-pendiente); }
.cfgneg-nota { display: flex; gap: 8px; margin: 14px 0 0; font-size: 0.82rem; color: var(--zen-tinta-cl); line-height: 1.45; }
.cfgneg-nota .bi { color: var(--zen-primary); margin-top: 1px; }
.cfgneg-interruptor { display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--zen-border); border-radius: 12px; background: #FFFFFF; }
.cfgneg-interruptor--si { border-color: var(--zen-primary); background: #F6F9F7; }
.cfgneg-interruptor--apagado { opacity: 0.6; }
.cfgneg-interruptor .vest-interruptor { flex-shrink: 0; margin: 0; }
.cfgneg-interruptor .vest-interruptor .form-check-label { min-width: 88px; font-weight: 600; color: var(--zen-hondo); }
.cfgneg-interruptor > span:not(.chip) { flex: 1; font-size: 0.84rem; color: var(--zen-tinta-cl); line-height: 1.4; }
#modal-config-negocios .aviso-suave { margin-top: 4px; }
.cfgneg-colores { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.cfgneg-color { display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--zen-tinta-cl); cursor: pointer; }
.cfgneg-color input { width: 38px; height: 30px; padding: 2px; border: 1px solid var(--zen-border); border-radius: 8px; background: #FFFFFF; cursor: pointer; }

/* Precauciones compartidas desde su consulta (paso 5). */
.oc-compartidas { margin: 4px 0 8px; padding: 10px 12px; border-radius: 10px; background: #F3F6F9; border: 1px solid #DCE5EE; }
.oc-compartidas-cab { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-family: var(--fuente-rotulos); font-size: 0.8rem; font-weight: 600; color: var(--estado-info, #4A6A8A); }

/* Fichas unidas entre locales (js/vinculos.js). */
.vinc-fila { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--zen-border); }
.vinc-fila:last-of-type { border-bottom: 0; }
.vinc-fila > .bi { color: var(--zen-tinta-cl); font-size: 1.05rem; }
.vinc-fila--unida > .bi { color: var(--zen-primary); }
.vinc-fila > span:not(.vinc-botones) { flex: 1; min-width: 0; }
.vinc-fila b, .vinc-par b { display: block; font-family: var(--fuente-rotulos); font-weight: 600; font-size: 0.9rem; color: var(--zen-hondo); }
.vinc-fila small, .vinc-par small { display: block; font-size: 0.78rem; color: var(--zen-tinta-cl); }
.vinc-botones { display: flex; gap: 6px; flex-shrink: 0; }
.vinc-aviso { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 16px; border: 1px solid var(--zen-border); border-radius: 14px; background: #FFFFFF; font-size: 0.88rem; color: var(--zen-text); }
.vinc-aviso > .bi { color: var(--zen-primary); font-size: 1.2rem; }
.vinc-aviso > span { flex: 1; }
.vinc-lista { display: flex; flex-direction: column; gap: 8px; }
.vinc-par { padding: 12px 14px; border: 1px solid var(--zen-border); border-radius: 12px; background: #FFFFFF; }
.vinc-par-fichas { display: flex; align-items: center; gap: 12px; }
.vinc-par-fichas > span { flex: 1; min-width: 0; }
.vinc-par-fichas > .bi { color: var(--zen-tinta-cl); }
.vinc-par-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.vinc-lista--elegir { max-height: 340px; overflow-y: auto; gap: 4px; }
.vinc-opcion { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: 1px solid var(--zen-border); border-radius: 10px; background: #FFFFFF; text-align: left; }
.vinc-opcion:hover { border-color: var(--zen-primary); background: #F6F9F7; }
.vinc-opcion b { flex: 1; font-weight: 600; font-size: 0.9rem; color: var(--zen-hondo); }
.vinc-opcion .bi { color: var(--zen-primary); }
@media (max-width: 575.98px) {
  .vinc-aviso { flex-wrap: wrap; }
  .vinc-fila { flex-wrap: wrap; }
  .vinc-par-fichas { flex-direction: column; align-items: stretch; gap: 4px; }
  .vinc-par-fichas > .bi { display: none; }
}
@media (max-width: 575.98px) {
  .cfgneg-interruptor { flex-wrap: wrap; gap: 8px 14px; }
  .cfgneg-interruptor > span:not(.chip) { flex-basis: 100%; order: 3; }
  .cfgneg-local-cab { flex-wrap: wrap; }
  .cfgneg-grupo { width: 100%; }
  .cfgneg-grupo-fila { flex-wrap: wrap; }
  .cfgneg-grupo-fila .form-control { width: 100%; }
  .cfgneg-local-aviso { margin-left: 0; }
}
.vest-marca { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.vest-marca--propio { background: var(--zen-hondo); color: #FAF9F6; }
.vest-marca--equipo { background: var(--vest-equipo-fondo); color: var(--vest-equipo); }
.vest-marca--dinero { background: var(--vest-dinero-fondo); color: var(--vest-dinero); }

.vest-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.vest-local { position: relative; display: flex; flex-direction: column; gap: 12px; background: #FFFFFF; border: 1px solid var(--zen-border); border-radius: 16px; padding: 18px 18px 14px; cursor: pointer; box-shadow: 0 4px 14px rgba(34, 48, 42, 0.04); transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; min-width: 0; }
.vest-local:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(34, 48, 42, 0.09); }
.vest-local--propio { border-top: 4px solid var(--zen-hondo); }
.vest-local--propio:hover { border-color: var(--zen-primary); border-top-color: var(--zen-hondo); }
.vest-local--equipo { border-color: #D3DEE8; background: #FBFCFD; }
.vest-local--equipo:hover { border-color: var(--vest-equipo); }
.vest-local--apagado { opacity: 0.78; }
.vest-local-cab { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vest-local-inicial { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: var(--fuente-rotulos); font-weight: 800; font-size: 1.2rem; }
.vest-local--propio .vest-local-inicial { background: #EEF1EE; color: var(--zen-hondo); }
.vest-local--equipo .vest-local-inicial { background: var(--vest-equipo-fondo); color: var(--vest-equipo); }
.vest-local-nombre { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.vest-local-nombre b { font-family: var(--fuente-rotulos); font-size: 1.08rem; font-weight: 700; color: var(--zen-hondo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vest-local-nombre small { font-size: 0.8rem; color: var(--zen-tinta-cl); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vest-local-menu { flex-shrink: 0; margin: -6px -6px 0 0; align-self: flex-start; }
.vest-local-menu .dropdown-menu { min-width: 250px; }
.vest-local-menu .dropdown-item { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; }
.vest-local-menu .dropdown-item .bi { color: var(--zen-tinta-cl); }
.vest-local-menu .vest-peligro, .vest-local-menu .vest-peligro .bi { color: var(--estado-decision); }
.vest-rol { flex-shrink: 0; align-self: flex-start; }
.vest-rol .chip-info { color: var(--vest-equipo); background: var(--vest-equipo-fondo); }

.vest-datos { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid #F0F3F1; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.vest-datos li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.88rem; color: var(--zen-text); line-height: 1.35; }
.vest-datos .bi { color: var(--zen-tinta-cl); margin-top: 1px; flex-shrink: 0; }
.vest-dato--ahora span { font-weight: 600; color: var(--estado-ok); }
.vest-dato--ahora .bi { color: var(--estado-ok); }
.vest-local-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; }
.vest-entrar { margin-left: auto; border: 0; background: transparent; padding: 4px 2px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--fuente-rotulos); font-weight: 600; font-size: 0.88rem; color: var(--zen-hondo); }
.vest-entrar .bi { transition: transform 0.2s; }
.vest-local:hover .vest-entrar .bi { transform: translateX(4px); }
.vest-local--equipo .vest-entrar { color: var(--vest-equipo); }
.vest-pie-texto { font-size: 0.78rem; color: var(--zen-tinta-cl); }

.vest-nuevo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 170px; border: 2px dashed #D0D8D3; border-radius: 16px; background: transparent; color: var(--zen-tinta-cl); padding: 18px; text-align: center; transition: border-color 0.2s, color 0.2s, background-color 0.2s; }
.vest-nuevo .bi { font-size: 1.6rem; }
.vest-nuevo b { font-family: var(--fuente-rotulos); font-weight: 700; font-size: 0.98rem; }
.vest-nuevo span { font-size: 0.8rem; }
.vest-nuevo:hover { border-color: var(--zen-primary); color: var(--zen-hondo); background: rgba(106, 138, 118, 0.04); }
.vest-nuevo--equipo:hover { border-color: var(--vest-equipo); color: var(--vest-equipo); background: rgba(62, 92, 118, 0.04); }
.vest-otro { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 0; font-size: 0.9rem; color: var(--zen-tinta-cl); }

/* Los dos caminos de quien acaba de llegar. */
.vest-caminos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vest-camino { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; background: #FFFFFF; border: 1px solid var(--zen-border); border-top: 4px solid var(--zen-hondo); border-radius: 16px; padding: 24px; box-shadow: 0 4px 14px rgba(34, 48, 42, 0.04); transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s; }
.vest-camino:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(34, 48, 42, 0.09); }
.vest-camino--equipo { border-top-color: var(--vest-equipo); }
.vest-camino-icono { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; background: var(--zen-hondo); color: #FAF9F6; }
.vest-camino--equipo .vest-camino-icono { background: var(--vest-equipo-fondo); color: var(--vest-equipo); }
.vest-camino b { font-family: var(--fuente-rotulos); font-size: 1.15rem; font-weight: 700; color: var(--zen-hondo); }
.vest-camino > span:not([class]) { font-size: 0.9rem; color: var(--zen-tinta-cl); line-height: 1.5; }
.vest-camino-ir { margin-top: auto; padding-top: 6px; font-family: var(--fuente-rotulos); font-weight: 600; font-size: 0.9rem; color: var(--zen-hondo); }
.vest-camino--equipo .vest-camino-ir { color: var(--vest-equipo); }

/* El balance conjunto. */
.vest-balance { margin-bottom: 34px; }
.vest-balance:empty { display: none; }
.vest-balance-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.vest-interruptor { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; padding-left: 0; }
.vest-interruptor .form-check-input { margin: 0; float: none; width: 2.4em; height: 1.3em; cursor: pointer; }
.vest-interruptor .form-check-label { font-size: 0.86rem; color: var(--zen-tinta-cl); cursor: pointer; }
.vest-balance-barra .asis-nav { justify-content: flex-start; }
.vest-balance-barra .btn-terciario { margin-left: auto; }
.vest-balance-leyendo { padding: 18px 4px; }
.vest-balance-apagado { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px dashed #D9D2C2; border-radius: 14px; background: #FFFFFF; font-size: 0.9rem; color: var(--zen-tinta-cl); }
.vest-balance-apagado > span:nth-child(2) { flex: 1; min-width: 0; }
.vest-balance-apagado b { font-family: var(--fuente-rotulos); color: var(--zen-hondo); margin-right: 6px; }
.vest-tabla { margin-bottom: 4px; }
.vest-tabla td, .vest-tabla th { font-variant-numeric: tabular-nums; white-space: nowrap; }
.vest-tabla .vest-num { text-align: right; }
.vest-tabla tbody td:first-child { white-space: normal; }
.vest-incluir { display: flex; align-items: center; gap: 12px; margin: 0; cursor: pointer; min-width: 0; }
.vest-incluir .form-check-input { margin: 0; flex-shrink: 0; cursor: pointer; }
.vest-avatar { border-radius: 10px; }
.vest-fila-nombre { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.vest-fila-nombre b { font-family: var(--fuente-rotulos); font-weight: 600; color: var(--zen-hondo); }
.vest-fila-nombre small { font-size: 0.78rem; color: var(--zen-tinta-cl); }
.vest-tenue { color: var(--zen-tinta-cl); }
.vest-sub { display: block; font-size: 0.74rem; color: var(--estado-pendiente); }
.vest-barra { display: block; margin: 5px 0 0 auto; width: 110px; height: 5px; border-radius: 999px; background: #F0F2EF; overflow: hidden; }
.vest-barra > span { display: block; height: 100%; border-radius: 999px; margin-left: auto; }
.vest-barra--mas { background: var(--estado-ok); }
.vest-barra--menos { background: var(--estado-decision); }
.vest-fila--fuera td { color: var(--zen-tinta-cl); }
.vest-fila--fuera td b, .vest-fila--fuera .alumna-avatar { opacity: 0.5; }

@media (max-width: 767.98px) {
  .lobby-topbar { padding: 0 16px; }
  .lobby-main { padding: 24px 16px 80px; }
  .vest-cab h1 { font-size: 1.7rem; }
  .vest-cab-acciones { width: 100%; }
  .vest-cab-acciones .btn { flex: 1 1 auto; }
  .vest-seccion-cab p, .vest-balance-cab p { margin-left: 0; }
  .vest-caminos { grid-template-columns: minmax(0, 1fr); }
  .vest-rejilla { grid-template-columns: minmax(0, 1fr); }
  .vest-nuevo { min-height: 96px; }
  .vest-balance-apagado { flex-wrap: wrap; }
  .vest-balance-barra .asis-nav { order: -1; flex-basis: 100%; justify-content: space-between; }
  .vest-balance-barra .asis-hoy { margin-left: 0; }
  .vest-barra { margin-left: 0; }
  /* La tabla del balance, de fila a tarjeta: el local arriba y sus cinco
     cifras debajo, cada una con su rótulo (`data-col`). */
  .vest-tabla thead { display: none; }
  .vest-tabla table, .vest-tabla tbody, .vest-tabla tfoot { display: block; }
  .tabla-alumnas.vest-tabla tr { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; padding: 12px 14px; border-bottom: 1px solid #F0F3F1; }
  .tabla-alumnas.vest-tabla tbody td, .tabla-alumnas.vest-tabla tfoot td { display: block; border: 0; padding: 0; background: transparent; text-align: left; white-space: normal; }
  .tabla-alumnas.vest-tabla tfoot tr { background: #F7F8F5; border-bottom: 0; }
  .vest-tabla td:first-child { grid-column: 1 / -1; padding-right: 40px; }
  .vest-tabla td:last-child:not([data-col]) { position: absolute; top: 10px; right: 10px; }
  .vest-tabla tfoot td:last-child:not([data-col]) { display: none; }
  .vest-tabla td[data-col]::before { content: attr(data-col); display: block; font-family: var(--fuente-rotulos); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--zen-tinta-cl); }
  .vest-tabla td[colspan] { grid-column: 1 / -1; }
}

/* ── Agenda de Fisioterapia (agenda.js + agenda-datos.js), 05-10-2026 ──────
   La barra de Asistencia (Día / Semana, flechas, Hoy, fisio y cabina), una
   rejilla con un solo scroll, una columna por día o —en Día— por fisio, lo
   que queda fuera del horario de cada uno rayado y cada media hora libre como
   botón. Las columnas se reparten con `--agenda-cols`. */
.agenda-barra { gap: 10px; }
.agenda-barra .asis-nav { flex: 1; }
#agenda-filtro-fisio, #agenda-filtro-cabina { flex: 0 1 220px; width: auto; min-width: 0; cursor: pointer; }
.agenda-filtros { margin-bottom: 10px; }
.agenda-leyenda { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 0.76rem; color: var(--zen-tinta-cl); }
.agenda-leyenda > span { display: inline-flex; align-items: center; gap: 5px; }
.agenda-leyenda-c { display: inline-block; width: 14px; height: 12px; border-radius: 3px; border-left: 3px solid transparent; }
.agenda-leyenda-fuera { background: repeating-linear-gradient(135deg, #F1F2EE 0 4px, #E3E6E0 4px 8px); border-left: 0; }

.agenda-caja { border: 1px solid var(--zen-border); border-radius: 16px; overflow: hidden; background: #FFFFFF; }
.agenda-scroll { overflow: auto; max-height: calc(var(--vh-real, 100vh) - 300px); min-height: 420px; }
.agenda-lienzo { display: flex; flex-direction: column; min-width: 822px; }
.agenda-lienzo--dia { min-width: max(100%, calc(var(--agenda-cols, 1) * 170px + 52px)); }
.agenda-cabecera { display: flex; position: sticky; top: 0; z-index: 25; background: #FCFDFC; border-bottom: 1px solid var(--zen-border); flex-shrink: 0; }
.agenda-esquina { flex: 0 0 52px; border-right: 1px solid var(--zen-border); }
#agenda-thead { display: flex; flex: 1; }
#agenda-day-grid { display: flex; }

.agenda-col-head { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 7px 4px; border: 0; border-right: 1px solid var(--zen-border); background: transparent; color: var(--zen-tinta-cl); font: inherit; line-height: 1.15; }
.agenda-col-head:last-child { border-right: 0; }
button.agenda-col-head { cursor: pointer; transition: background-color 0.15s; }
button.agenda-col-head:hover { background: #F4F8F5; }
.agenda-col-dow { font-family: var(--fuente-rotulos); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.agenda-col-num { font-family: var(--fuente-rotulos); font-size: 1.15rem; font-weight: 700; color: var(--zen-hondo); }
.agenda-col-head small { font-size: 0.66rem; }
.agenda-col-head--hoy { background: rgba(106, 138, 118, 0.08); }
.agenda-col-head--hoy .agenda-col-num { color: #FAF9F6; background: var(--zen-hondo); border-radius: 999px; padding: 0 8px; }
.agenda-col-head--festivo small { color: var(--estado-decision); font-weight: 600; }
.agenda-col-head--fisio { align-items: flex-start; padding: 8px 12px; }
.agenda-col-head--fisio b { font-family: var(--fuente-rotulos); font-size: 0.92rem; color: var(--zen-hondo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.agenda-horas { flex: 0 0 52px; display: flex; flex-direction: column; border-right: 1px solid var(--zen-border); background: #FCFDFC; position: sticky; left: 0; z-index: 20; }
.agenda-hora-slot { height: 64px; flex-shrink: 0; display: flex; align-items: flex-start; justify-content: center; font-size: 0.66rem; color: var(--zen-text-muted); font-weight: 500; padding-top: 3px; box-sizing: border-box; border-bottom: 1px solid var(--zen-border); font-variant-numeric: tabular-nums; }
.agenda-day-col { flex: 1 1 0; position: relative; min-width: 0; border-right: 1px solid var(--zen-border); background-image: repeating-linear-gradient(180deg, transparent 0 63px, var(--zen-border) 63px 64px); }
.agenda-day-col:last-child { border-right: 0; }
.agenda-day-col--hoy { background-color: rgba(106, 138, 118, 0.03); }
.agenda-day-col--festivo { background-color: rgba(220, 53, 69, 0.03); }

.agenda-fuera { position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(135deg, rgba(241, 242, 238, 0.9) 0 6px, rgba(227, 230, 224, 0.9) 6px 12px); }
.agenda-day-col--ausente .agenda-fuera { background: repeating-linear-gradient(135deg, rgba(245, 226, 220, 0.6) 0 6px, rgba(241, 242, 238, 0.9) 6px 12px); }
.agenda-ausente-marca { position: sticky; top: 6px; margin: 6px auto 0; width: max-content; display: flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; background: var(--estado-pendiente-fondo); color: var(--estado-pendiente); font-size: 0.68rem; font-weight: 600; z-index: 3; }
.agenda-festivo-marca { background: var(--estado-decision-fondo); color: var(--estado-decision); }

.agenda-hueco { position: absolute; left: 2px; right: 2px; height: 31px; border: 0; padding: 0; background: transparent; z-index: 2; cursor: copy; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.agenda-hueco span { opacity: 0; font-size: 0.68rem; font-weight: 700; color: var(--estado-ok); transition: opacity 0.12s; }
.agenda-hueco:hover, .agenda-hueco:focus-visible { background: var(--estado-ok-fondo); outline: 1px dashed var(--zen-primary); }
.agenda-hueco:hover span, .agenda-hueco:focus-visible span { opacity: 1; }
.agenda-hueco--fuera:hover { background: rgba(255, 255, 255, 0.75); }
.agenda-hueco--fuera span { color: var(--zen-tinta-cl); }

.agenda-ev { position: absolute; margin-left: 3px; border-radius: 8px; padding: 4px 7px; font-size: 0.72rem; overflow: hidden; cursor: pointer; z-index: 10; display: flex; flex-direction: column; justify-content: flex-start; gap: 1px; text-align: left; border: 0; border-left: 4px solid transparent; box-shadow: 0 3px 8px rgba(34, 48, 42, 0.08); transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s; }
.agenda-ev:hover { transform: translateY(-1px); z-index: 15; box-shadow: 0 8px 18px rgba(34, 48, 42, 0.14); }
.agenda-ev-fila { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; }
.agenda-ev-nombre { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.agenda-ev-meta { font-size: 0.66rem; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-ev--baja .agenda-ev-meta { display: none; }
.agenda-ev-marcas { display: inline-flex; gap: 3px; flex-shrink: 0; }
.agenda-ev-marca { font-size: 0.72rem; font-style: normal; line-height: 1; }
.agenda-ev-marca--euro { font-weight: 800; color: #A3582B; }
.agenda-ev--apagada { opacity: 0.25; }
.agenda-ev--programada    { background: #EEF2FC; color: #3A5FC0; border-left-color: #5B7BE0; }
/* Programada pero ya pasada: rayada y en ámbar, para que no parezca una cita futura más. */
.agenda-ev--sin-cerrar    { background: repeating-linear-gradient(135deg, #FBEBD5 0 6px, #FDF6EC 6px 12px); color: #8A4F1E; border-left-color: #E69E3C; }
.agenda-ev--completada    { background: #E7F5EC; color: #1E7E46; border-left-color: #27AE60; }
.agenda-ev--cancelada     { background: #F0F1F1; color: #6B7576; border-left-color: #A0A9AA; text-decoration: line-through; }
.agenda-ev--no-presentado { background: #FCEFE2; color: #994F0E; border-left-color: #E67E22; }
.agenda-ev--ocupado       { background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0 6px, transparent 6px 12px); color: #7F8C8D; border-left-color: #B8BFC0; cursor: default; box-shadow: none; }
.agenda-leyenda-c.agenda-ev--cancelada { text-decoration: none; }
.agenda-linea-ahora { position: absolute; left: 0; right: 0; height: 2px; background: #E74C3C; z-index: 12; pointer-events: none; }
.agenda-linea-ahora::before { content: ''; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; background: #E74C3C; border-radius: 50%; }

/* Botones del modal de estado: una fila ancha por estado, con el color de la agenda. */
.estado-cita-btn { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:12px 14px; border-radius:14px; border:1.5px solid var(--zen-border); background:#fff; color:var(--zen-text); font-weight:600; font-size:.95rem; transition: background .15s, border-color .15s; }
.estado-cita-btn:hover { background: rgba(0,0,0,0.025); }
.estado-cita-btn .punto { width:12px; height:12px; border-radius:50%; flex:0 0 auto; background: var(--estado-color); }
.estado-cita-btn .marca { margin-left:auto; color: var(--estado-color); font-size:1.1rem; }
.estado-cita-btn--actual { border-color: var(--estado-color); background: color-mix(in srgb, var(--estado-color) 10%, #fff); }
.estado-cita-btn small { display:block; font-weight:400; color: var(--zen-text-muted); font-size:.75rem; }

@media (max-width: 767.98px) {
  /* Un día a la vez: la columna ocupa todo el ancho. */
  .agenda-lienzo, .agenda-lienzo--dia { min-width: 0; }
  .agenda-barra .asis-nav { flex-basis: 100%; justify-content: space-between; order: -1; }
  #agenda-filtro-fisio, #agenda-filtro-cabina { flex: 1 1 45%; }
  .agenda-leyenda { display: none; }
  .agenda-ev { font-size: 0.8rem; }
  .agenda-ev-meta { font-size: 0.72rem; }
  .agenda-scroll { max-height: none; }
  .agenda-col-head--tira { padding: 6px 2px; }
  .agenda-col-head--activo { background: #EEF4F0; box-shadow: inset 0 -2px 0 var(--zen-hondo); }
}

/* ── Ajustes de elementos concretos ───────────────────────────────────────
   Esto vivía en un `style=""` de app.html: 61 atributos repartidos por un
   documento de 160 KB, donde un cambio de aspecto había que ir a buscarlo al
   marcado y no se veía junto a las reglas con las que compite.

   Van por id porque ya lo tenían, así que no ha hecho falta inventar ninguna
   clase. Un selector de id gana a cualquier clase, que es exactamente lo que
   hacía el atributo, así que la cascada no cambia.

   El `display` se queda donde estaba, en el marcado: es estado, no aspecto —
   el JS lo alterna escribiendo en el atributo, y si alguna vez lo vacía el
   elemento tiene que volver a lo que era, no a una regla de aquí. */
#tabla-participantes { font-size: 0.95rem; table-layout: fixed; min-width: 860px; }
#sec-horario { height: 100%; }
#contenedor-horario-header { position: sticky; top: 0; z-index: 30; }
#config-permitir { margin-top: 0.2rem; }
#config-bonos { margin-top: 0.2rem; }
#tarifa-cobrar-faltas { margin-top:0.2rem; }
#lista-bonos-ui { min-height: 60px; }
#lista-modalidades-ui { min-height: 60px; }
#lista-niveles-ui { min-height: 60px; }
#config-niveles-jerarquicos { margin-top: 0.2rem; }
#lista-festivos-ui { min-height: 80px; }
#logo-preview { max-height: 50px; border-radius: 8px; }
#contenedor-solicitudes { max-height: 600px; overflow-y: auto; }
#preview-recurrencia { font-size:0.75rem; }
#cita-evolucion-autor { font-size:.72rem; }
#import-step-dot-1 { width:28px; height:28px; border-radius:50%; background:var(--zen-primary); color:white; align-items:center; justify-content:center; font-size:0.8rem; font-weight:bold; flex-shrink:0; transition:background 0.3s; }
#import-step-dot-2 { width:28px; height:28px; border-radius:50%; background:#dee2e6; color:#6c757d; align-items:center; justify-content:center; font-size:0.8rem; flex-shrink:0; transition:background 0.3s; }
#import-step-dot-3 { width:28px; height:28px; border-radius:50%; background:#dee2e6; color:#6c757d; align-items:center; justify-content:center; font-size:0.8rem; flex-shrink:0; transition:background 0.3s; }
#import-step-dot-4 { width:28px; height:28px; border-radius:50%; background:#dee2e6; color:#6c757d; align-items:center; justify-content:center; font-size:0.8rem; flex-shrink:0; transition:background 0.3s; }
#import-drop-zone { border:2px dashed #dee2e6; border-radius:16px; padding:2.5rem 1rem; text-align:center; cursor:pointer; background:#fafafa; transition:all 0.2s; }
#import-texto-pegado { font-family: ui-monospace, monospace; font-size: 0.85rem; }
#switch-privado { cursor: pointer; }
#historial-visitas-paciente { max-height:260px; overflow-y:auto; }

/* Tres rótulos y una tabla que estaban repetidos en el marcado ───────────── */

/* El título pequeño de un bloque dentro de una tarjeta. Diecinueve veces el
   mismo `font-size` y el mismo `letter-spacing`, escritos a mano. */
.titulo-bloque { font-size: 0.8rem; letter-spacing: 1px; }

/* El texto de ayuda bajo un campo, más pequeño que el de Bootstrap. */
.ayuda-mini { font-size: 0.75rem; }

/* La rayita entre los números del paso a paso de la importación. */
.paso-linea { height: 2px; background: #dee2e6; flex: 1; max-width: 60px; }

/* Los modales. Los diecinueve llevaban su radio y su sombra en el atributo, y
   por el camino se habían quedado con dos radios distintos: los que traen
   `shadow-lg` en 16px y el resto en 24px. Se conserva tal cual —cambiarlo se
   vería en seis modales— pero aquí al menos la diferencia está a la vista y en
   un sitio, en vez de repartida por diecinueve atributos. */
.modal-content { border-radius: 24px; box-shadow: 0 25px 50px rgba(0,0,0,0.15); }
.modal-content.shadow-lg { border-radius: 16px; }

/* Los anchos de columna de la tabla de alumnas, que iban uno por `<th>`. */
/* Acciones y Inactiva en píxeles: en porcentaje, con la tabla en su ancho
   mínimo (el móvil), a Acciones le tocaban 96 px útiles para cuatro botones
   de 34 y la celda, que recorta, dejaba fuera la papelera. */
#tabla-participantes th:nth-child(1) { width: 27%; }
#tabla-participantes th:nth-child(2) { width: 22%; }
#tabla-participantes th:nth-child(3) { width: 25%; }
#tabla-participantes th:nth-child(4) { width: 168px; }
#tabla-participantes th:nth-child(5) { width: 88px; }

/* Las cuatro tarjetas que llevan un radio menor que el del tema. Clase propia
   y no `.card.border-0.shadow-sm`: ese selector cogía otras dos que tienen las
   mismas tres clases más alguna suelta y nunca llevaron ese radio. */
.tarjeta-20 { border-radius: 16px; }

/* El rótulo de sección con la barra salvia a la izquierda. */
.rotulo-seccion {
  font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase;
  border-left: 3px solid var(--zen-primary); padding-left: 10px;
}

/* ── La ayuda (js/ayuda.js) ────────────────────────────────────────────────
   El «?» comparte el aspecto de la campana, y los dos van juntos a la derecha
   de la cabecera de la barra lateral. El modal tiene dos columnas que se
   desplazan cada una por su cuenta: el índice no se pierde al leer un tema
   largo. En el móvil el índice pasa a ser un desplegable encima del texto. */
.sidebar-botones { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }

/* Más ancho que modal-xl (1140px): el texto de un tema largo necesita sitio al lado del índice. Es un max-width con los márgenes de `auto`, así que en una pantalla más estrecha hay que restarle un margen o el modal toca los bordes. El ancho de la pantalla, en px de dentro del zoom, es 100vw / --app-zoom. */
.modal-ayuda { --bs-modal-width: min(1560px, calc(100vw / var(--app-zoom) - 64px)); }
.modal-ayuda .modal-content { border-radius: 16px; overflow: hidden; }
.ayuda-subtitulo { font-size: 0.85rem; font-weight: 600; color: var(--zen-text-muted); margin-left: 8px; }
.ayuda-cuerpo { display: grid; grid-template-columns: 280px 1fr; height: min(calc(var(--vh-real) - 200px), 980px); border-top: 1px solid var(--zen-border); }
.ayuda-indice { background: var(--zen-bg); border-right: 1px solid var(--zen-border); padding: 18px 14px; overflow-y: auto; }
.ayuda-buscador { position: relative; margin-bottom: 14px; }
.ayuda-buscador .bi { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--zen-text-muted); pointer-events: none; }
.ayuda-buscador .form-control { padding-left: 38px; }
#ayuda-indice-movil { display: none; }
.ayuda-indice-lista { display: flex; flex-direction: column; gap: 2px; }
.ayuda-indice-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 10px; padding: 9px 12px; color: var(--zen-text); font-weight: 600; font-size: 0.95rem; transition: background 0.15s; }
.ayuda-indice-item:hover { background: rgba(106,138,118,0.1); }
.ayuda-indice-item.activo { background: var(--zen-primary); color: #fff; }
.ayuda-indice-item span { flex: 1; }
.ayuda-candado { font-size: 0.8rem; }
.ayuda-sin-resultados { color: var(--zen-text-muted); font-size: 0.9rem; padding: 8px 12px; }

.ayuda-contenido { overflow-y: auto; padding: 28px 36px 36px; }
.ayuda-tema-titulo { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 1.5rem; font-weight: 800; color: var(--zen-text); margin-bottom: 18px; }
.ayuda-tema-titulo .bi { color: var(--zen-primary); }
.ayuda-bloque { margin-bottom: 22px; }
.ayuda-bloque p, .ayuda-bloque li { font-size: 1rem; line-height: 1.6; color: var(--zen-text); }
.ayuda-bloque p:last-child { margin-bottom: 0; }
.ayuda-bloque ul, .ayuda-bloque ol { padding-left: 1.3rem; margin-bottom: 0; }
.ayuda-bloque li { margin-bottom: 6px; }
.ayuda-bloque-titulo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-weight: 800; font-size: 1rem; color: var(--zen-text); margin-bottom: 10px; }
.ayuda-bloque--intro p { font-size: 1.08rem; }
.ayuda-bloque--solo, .ayuda-bloque--ve, .ayuda-bloque--nota { border-radius: 12px; padding: 14px 18px; }
.ayuda-bloque--solo { background: rgba(106,138,118,0.1); }
.ayuda-bloque--solo .ayuda-bloque-titulo, .ayuda-bloque--solo .ayuda-bloque-titulo .bi { color: var(--zen-primary); }
.ayuda-bloque--ve { background: rgba(91,123,224,0.08); }
.ayuda-bloque--ve .ayuda-bloque-titulo { color: #4a64b8; }
.ayuda-bloque--nota { background: #FFF8E6; }

/* Lo que el plan no incluye: en gris, con los planes que lo traen. Solo le
   llega a la dueña (temasVisibles). */
.ayuda-bloqueado { filter: grayscale(1); opacity: 0.6; }
/* Seleccionado y bloqueado: sin el verde, que en gris dejaba el texto blanco sobre gris. */
.ayuda-indice-item.activo.ayuda-bloqueado { background: #dfe3e1; color: var(--zen-text); opacity: 0.85; }
.ayuda-plan { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; color: #5f6b64; background: #e8ebe9; border: 1px solid #d5dbd7; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.ayuda-aviso-plan { display: flex; align-items: center; gap: 8px; background: #f1f3f2; border: 1px solid #dde2df; color: #4f5a53; border-radius: 12px; padding: 12px 16px; margin-bottom: 22px; font-weight: 600; }
.ayuda-ir { margin-top: 6px; }
.ayuda-contacto { margin-top: 24px; color: var(--zen-text-muted); }

@media (max-width: 767.98px) {
  .ayuda-cuerpo { display: block; height: auto; }
  .ayuda-indice { border-right: 0; border-bottom: 1px solid var(--zen-border); padding: 14px 16px; }
  .ayuda-buscador { margin-bottom: 10px; }
  #ayuda-indice-movil { display: block; }
  .ayuda-indice-lista { display: none; }
  .ayuda-contenido { padding: 20px 18px 28px; }
}

/* Los días vista y la caducidad de un bono, editables en su propia etiqueta (Configuración). */
.bono-ajuste {
    width: 3.6em;
    padding: 0.1em 0.3em;
    border: 1px solid var(--bs-primary-border-subtle);
    border-radius: 6px;
    background: #fff;
    color: inherit;
    font: inherit;
    text-align: center;
}

/* ════════════════════════════════════════════════════════════════════════
   La voz de la portada en el panel (02-10-2026)
   ════════════════════════════════════════════════════════════════════════
   Títulos de sección en Archivo, sin el icono salvia que llevaban delante: el
   menú ya dice dónde se está, y doce títulos con doce iconos convertían cada
   pantalla en la misma. */
.seccion-dashboard > .d-flex > h2,
.seccion-dashboard > .d-flex > div > h2 {
  font-family: var(--fuente-rotulos); font-weight: 700; font-size: 1.8rem;
  letter-spacing: -0.025em; line-height: 1.15; color: var(--zen-hondo);
}
.modal-title { font-family: var(--fuente-rotulos); letter-spacing: -0.01em; }

/* Los chips de estado. Un significado por color y el mismo en todas partes:
   verde hecho, ámbar pendiente, rojo necesita una decisión, salvia lo hizo
   Orquesto solo, gris información. */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--fuente-rotulos); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.2;
  border-radius: 5px; padding: 3px 7px; white-space: nowrap;
  color: var(--estado-info); background: var(--estado-info-fondo);
}
.chip-ok        { color: var(--estado-ok);        background: var(--estado-ok-fondo); }
.chip-pendiente { color: var(--estado-pendiente); background: var(--estado-pendiente-fondo); }
.chip-decision  { color: var(--estado-decision);  background: var(--estado-decision-fondo); }
.chip-auto      { color: var(--estado-auto);      background: var(--estado-auto-fondo); }
.chip-info      { color: var(--estado-info);      background: var(--estado-info-fondo); }

/* ── Hoy (js/hoy.js), rehecha el 05-10-2026 ────────────────────────────────
   Escondida hasta que la navegación le escribe `display: block`, como a las
   demás secciones, pero sin el atributo de estilo en el marcado. Las cifras
   son las de Asistencia (`.asis-cifras`), y cada una lleva a su sitio; el día
   es una línea de tiempo con la próxima sesión destacada. */
#sec-hoy { display: none; }
.hoy-titulo { display: flex; flex-direction: column; gap: 2px; }
.hoy-rotulo { font-family: var(--fuente-rotulos); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zen-tinta-cl); }
#hoy-saludo { margin: 0; }

.hoy-cifras { margin-bottom: 20px; }
button.hoy-cifra { border: 0; background: transparent; text-align: left; cursor: pointer; transition: background-color 0.15s; }
button.hoy-cifra:hover { background: #F7FAF8; }
.hoy-cifra b.asis-cifra--ok { color: var(--estado-ok); }

.hoy-rejilla { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.hoy-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.hoy-tarjeta { background: #FFFFFF; border: 1px solid var(--zen-border); border-radius: 16px; overflow: hidden; }
.hoy-tarjeta-cab { display: flex; align-items: center; gap: 10px; padding: 14px 18px 12px; flex-wrap: wrap; }
.hoy-tarjeta-cab h3 { font-family: var(--fuente-rotulos); font-size: 1.05rem; font-weight: 700; color: var(--zen-hondo); margin: 0; letter-spacing: -0.01em; }
.hoy-tarjeta-cab > .chip, .hoy-tarjeta-cab > .hoy-pie { margin-right: auto; }
.hoy-tarjeta-cab > .segmentado { margin-left: auto; }
.hoy-pie { font-size: 0.85rem; color: var(--zen-tinta-cl); }
.hoy-tarjeta-pie { padding: 10px 18px 14px; border-top: 1px solid var(--zen-border); }
.hoy-tarjeta-pie .btn-link { color: var(--zen-tinta-cl); font-weight: 600; text-decoration: none; }
.hoy-tarjeta-pie .btn-link:hover { color: var(--zen-hondo); text-decoration: underline; }
.segmentado--mini { padding: 2px; }
.segmentado--mini button { padding: 4px 12px; font-size: 0.8rem; }

.hoy-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left; }
.hoy-texto b { font-weight: 600; color: var(--zen-hondo); }
.hoy-texto > span { font-size: 0.84rem; color: var(--zen-tinta-cl); overflow-wrap: anywhere; }
/* Lo que la alumna cuenta de su salud, con sus palabras (hoy-datos.js). */
.hoy-cita { display: block; margin: 4px 0 3px; padding: 6px 10px; border-left: 3px solid var(--zen-primary); border-radius: 0 8px 8px 0; background: #FFFFFF; font-size: 0.86rem; line-height: 1.4; color: var(--zen-text); white-space: pre-line; overflow-wrap: anywhere; quotes: '«' '»'; }
.hoy-vacio { padding: 18px; border-top: 1px solid var(--zen-border); color: var(--zen-tinta-cl); }
.hoy-vacio--ok .bi { color: var(--estado-ok); margin-right: 6px; }
.hoy-vacio--texto { font-size: 0.92rem; line-height: 1.5; }

/* Lo que espera una decisión: filas con su icono de color y su botón. */
.hoy-avisos { display: flex; flex-direction: column; padding: 0 12px 12px; gap: 8px; }
.hoy-aviso { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #F7F8F5; }
.hoy-aviso > .bi { font-size: 1.05rem; flex-shrink: 0; }
.hoy-aviso--decision { background: var(--estado-decision-fondo); }
.hoy-aviso--decision > .bi { color: var(--estado-decision); }
.hoy-aviso--pendiente { background: var(--estado-pendiente-fondo); }
.hoy-aviso--pendiente > .bi { color: var(--estado-pendiente); }
.hoy-aviso--info > .bi { color: var(--zen-primary); }
.hoy-aviso .btn { white-space: nowrap; background: #FFFFFF; }

/* El día: la próxima sesión, grande; debajo, todas en orden. */
.hoy-proxima { display: flex; align-items: center; gap: 16px; margin: 0 12px 12px; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--c, var(--zen-primary)) 12%, #FFFFFF); box-shadow: inset 4px 0 0 var(--c, var(--zen-primary)); }
.hoy-proxima-cuando { display: flex; flex-direction: column; align-items: center; min-width: 78px; line-height: 1.1; }
.hoy-proxima-cuando span { font-family: var(--fuente-rotulos); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zen-tinta-cl); }
.hoy-proxima-cuando b { font-family: var(--fuente-rotulos); font-size: 1.55rem; font-weight: 700; color: var(--zen-hondo); font-variant-numeric: tabular-nums; }
.hoy-proxima-cuando small { font-size: 0.78rem; font-weight: 600; color: color-mix(in srgb, var(--c, var(--zen-primary)) 70%, var(--zen-hondo)); }
.hoy-proxima-que { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hoy-proxima-que b { font-family: var(--fuente-rotulos); font-size: 1.05rem; font-weight: 700; color: var(--zen-hondo); }
.hoy-proxima-que span { font-size: 0.86rem; color: var(--zen-tinta-cl); }
.hoy-proxima-que .hoy-proxima-cifras { color: var(--zen-text); font-weight: 500; }
.hoy-proxima .btn { white-space: nowrap; }

.hoy-sesiones { display: flex; flex-direction: column; border-top: 1px solid var(--zen-border); }
.hoy-sesion { display: flex; align-items: center; gap: 12px; padding: 9px 18px 9px 14px; border-top: 1px solid #F0F3F1; box-shadow: inset 3px 0 0 var(--c, transparent); }
.hoy-sesion:first-child { border-top: 0; }
.hoy-sesion-abrir { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; border: 0; background: transparent; padding: 0; text-align: left; color: inherit; }
.hoy-sesion-hora { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--zen-hondo); width: 3.2em; flex-shrink: 0; }
.hoy-sesion-abrir:hover .hoy-texto b { text-decoration: underline; text-underline-offset: 2px; }
.hoy-sesion--terminada .hoy-sesion-hora, .hoy-sesion--terminada .hoy-texto b { color: var(--zen-tinta-cl); }
.hoy-sesion--en-curso { background: #F6FAF7; }
.hoy-sesion--proxima .hoy-sesion-hora { color: var(--zen-primary); }
.hoy-sesion--apagada .hoy-sesion-hora, .hoy-sesion--apagada .hoy-texto b { color: var(--zen-text-muted); text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, 0.25); }
.hoy-estado { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.hoy-ocupa { display: flex; align-items: center; gap: 8px; width: 110px; flex-shrink: 0; font-size: 0.85rem; }
.hoy-ocupa .an-ocupacion-barra { flex: 1; }
.hoy-sesion .btn { white-space: nowrap; }

/* Personas: para llamar y cumpleaños, con WhatsApp y teléfono en la fila. */
.hoy-personas { display: flex; flex-direction: column; border-top: 1px solid var(--zen-border); }
.hoy-persona { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 18px; border-top: 1px solid #F0F3F1; }
.hoy-persona:first-child { border-top: 0; }
.hoy-persona-abrir { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; border: 0; background: transparent; padding: 2px 0; text-align: left; color: inherit; }
.hoy-persona-abrir:hover .hoy-texto b { text-decoration: underline; text-underline-offset: 2px; }
.hoy-persona--hoy { background: #FBF8F1; }
.hoy-punto { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: #B9C2BB; }
.hoy-punto--decision { background: var(--estado-decision); }
.hoy-punto--pendiente { background: #C98A2B; }
/* La tarta junto al nombre el día del cumpleaños (Asistencia, panel de la clase). */
.marca-cumple { display: inline-flex; align-items: center; margin-left: 6px; color: #9A6B1E; font-size: 0.95em; vertical-align: -1px; }
.hoy-cumple-icono { width: 28px; height: 28px; border-radius: 50%; background: #F6EBD5; color: #9A6B1E; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hoy-contacto { display: flex; gap: 2px; flex-shrink: 0; }
.hoy-contacto .fila-accion { text-decoration: none; }
.hoy-wa { color: #1DA851; }
.hoy-wa:hover { background: #E3F6EA; color: #128C4B; }

.hoy-diario { padding: 2px 18px 12px; display: flex; flex-direction: column; border-top: 1px solid var(--zen-border); }
.hoy-diario-fila { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); gap: 10px; padding: 8px 0; font-size: 0.9rem; }
.hoy-diario-fila + .hoy-diario-fila { border-top: 1px dashed var(--zen-border); }
.hoy-diario-fila time { font-variant-numeric: tabular-nums; color: var(--zen-tinta-cl); font-size: 0.84rem; padding-top: 1px; }
.hoy-diario-fila p { margin: 0; color: var(--zen-text); overflow-wrap: anywhere; }
.hoy-diario-fila p .bi { color: var(--estado-auto); }

@media (max-width: 991px) {
  .hoy-rejilla { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
  .hoy-proxima { flex-wrap: wrap; gap: 10px 14px; }
  .hoy-proxima .btn { width: 100%; }
  .hoy-sesion { flex-wrap: wrap; padding: 10px 14px; }
  .hoy-sesion-abrir { flex-basis: 100%; }
  .hoy-estado { justify-content: flex-start; flex: 1; }
  .hoy-aviso { flex-wrap: wrap; }
  .hoy-aviso .btn { margin-left: 30px; }
}

/* ── El horario, con el estado de cada sesión (js/horario.js) ─────────────
   En pantalla la cifra es la de ESE día: inscritas − las que avisaron + las
   que vienen a recuperar + plazas bloqueadas. Al lado, quién avisó y quién
   recupera; la clase llena lleva la cifra recuadrada y la que no tiene
   profesora (habiendo equipo), un contorno rojo discontinuo. El PDF no lleva
   nada de esto: es el horario fijo. */
.evento-marca { display: inline-flex; align-items: center; gap: 1px; margin-left: 3px; opacity: 0.85; }
.evento-marca .bi { font-size: 0.85em; }
.evento-card--llena .evento-aforo { background: #FFFFFF; box-shadow: inset 0 0 0 1.5px currentColor; }
.evento-card--sin-profe { outline: 1.5px dashed var(--estado-decision); outline-offset: -1px; }

/* ── Los automatismos como reglas (Configuración) ─────────────────────────
   Nombre e interruptor, a quién escribe, cuándo salta, qué hace y la línea de
   la última vez. Los que no tienen interruptor dependen solo del plan. */
.regla { height: 100%; background: #FFFFFF; border: 1px solid var(--zen-border); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.regla-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.regla-cab .form-check-label, .regla-nombre { font-family: var(--fuente-rotulos); font-weight: 700; color: var(--zen-hondo); }
.regla-cab .form-check-input { cursor: pointer; }
.regla-cuando { margin: 0; font-size: 0.85rem; color: var(--zen-tinta-cl); }
.regla-que { margin: 0; font-size: 0.92rem; color: var(--zen-text); }
/* Un número dentro de una regla (el día del aviso de recibos pendientes). */
.regla-dia { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.88rem; }
.regla-dia .form-control { width: 64px; }
.regla-ultima { margin: 4px 0 0; padding-top: 8px; border-top: 1px dashed var(--zen-border); font-size: 0.85rem; color: var(--zen-tinta-cl); }
.regla-ultima:empty { display: none; }
.regla-ultima b { color: var(--zen-hondo); font-weight: 600; }

/* ── Indicaciones de salud (js/salud.js) ──────────────────────────────────
   Un punto antes del nombre: rojo si hay algo que no debe hacer, ámbar si
   hay algo que adaptar, nada si no hay indicaciones (un verde en cada fila
   sería ruido). */
.punto-salud { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; flex-shrink: 0; }
.punto-salud--rojo { background: #C2492E; box-shadow: 0 0 0 2px rgba(194, 73, 46, 0.18); }
.punto-salud--ambar { background: #D9962E; box-shadow: 0 0 0 2px rgba(217, 150, 46, 0.2); }
/* Solo algo que saber: una indicación escrita con sus palabras sin «adaptar» ni «no realizar». */
.punto-salud--info { background: #4A7FA6; box-shadow: 0 0 0 2px rgba(74, 127, 166, 0.18); }
.condicion { display: flex; align-items: center; gap: 4px; font-size: 0.9rem; color: var(--zen-text); }
.condicion--editable { background: #FFFFFF; border: 1px solid var(--zen-border); border-radius: 10px; padding: 6px 10px; }
.condicion--editable .btn-close { font-size: 0.6rem; }
/* Un texto largo respeta sus saltos de línea, y el punto se queda arriba. */
.condicion--texto { align-items: flex-start; white-space: pre-line; }
.condicion--texto .punto-salud { margin-top: 6px; }

/* ════════════════════════════════════════════════════════════════════════
   Formularios, paneles laterales y «Tu cuenta» (02-10-2026)
   ════════════════════════════════════════════════════════════════════════ */

/* ── Cabecera y pie de los modales de ficha ───────────────────────────────
   Icono, título y una línea debajo («Nueva ficha», o de quién es); el pie
   con los botones fuera del cuerpo que se desplaza, así que guardar está
   siempre a la vista por larga que sea la ficha. */
.modal-cab { display: flex; align-items: center; gap: 14px; padding: 20px 28px; border-bottom: 1px solid var(--zen-border); background: #FFFFFF; }
.modal-cab-icono { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: var(--estado-auto-fondo); color: var(--zen-hondo); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.modal-cab-texto { flex: 1; min-width: 0; }
.modal-cab .modal-title { font-size: 1.3rem; font-weight: 700; color: var(--zen-hondo); letter-spacing: -0.015em; line-height: 1.2; margin: 0; }
.modal-cab-sub { margin: 2px 0 0; font-size: 0.9rem; color: var(--zen-tinta-cl); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal-cab .btn-close { align-self: flex-start; margin: 2px 0 0; }
.modal-pie { --bs-modal-footer-gap: 10px; padding: 14px 28px; border-top: 1px solid var(--zen-border); background: #FBFAF7; }
.modal-pie > .modal-pie-nota { margin-right: auto; font-size: 0.82rem; color: var(--zen-tinta-cl); }

/* Más anchas que modal-xl (1140px), como la ayuda: el ancho útil de la
   pantalla, en px de dentro del zoom, es 100vw / --app-zoom. */
.modal-ficha { --bs-modal-width: min(1180px, calc(100vw / var(--app-zoom) - 48px)); }
.modal-ficha--media { --bs-modal-width: min(1000px, calc(100vw / var(--app-zoom) - 48px)); }
.modal-ficha .modal-content { border-radius: 20px; overflow: hidden; }
.modal-ficha .modal-body { padding: 22px 28px 24px; background: #FFFFFF; }

/* Una sección del formulario: el título y para qué sirve a la izquierda, los
   campos a la derecha. En pantallas estrechas, uno encima del otro. */
.form-seccion { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px 40px; padding: 26px 0; border-top: 1px solid var(--zen-border); }
.form-seccion:first-child { border-top: 0; }
.form-seccion-titulo { display: flex; align-items: center; gap: 9px; margin: 2px 0 6px; font-family: var(--fuente-rotulos); font-size: 1rem; font-weight: 700; color: var(--zen-hondo); }
.form-seccion-titulo .bi { color: var(--zen-primary); font-size: 1.05rem; }
.form-seccion-ayuda { margin: 0 0 10px; font-size: 0.85rem; line-height: 1.45; color: var(--zen-tinta-cl); }
.form-seccion-ayuda a { color: #4E6E5A; text-underline-offset: 2px; }
.form-caja { background: #FAFBF9; border: 1px solid var(--zen-border); border-radius: 14px; padding: 16px 18px; }
@media (max-width: 991px) {
  .form-seccion { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 20px 0; }
  .form-seccion-ayuda { margin-bottom: 4px; }
}
@media (max-width: 767.98px) {
  .modal-cab, .modal-pie { padding-left: 18px; padding-right: 18px; }
  .modal-ficha .modal-body { padding: 18px; }
  .modal-pie > .modal-pie-nota { flex-basis: 100%; }
}

/* Un interruptor con su explicación, del alto de un campo. */
.interruptor-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; min-height: 46px; border: 1px solid #D5DED8; border-radius: 10px; background: #FFFFFF; cursor: pointer; margin: 0; }
.interruptor-fila b { display: block; font-family: var(--fuente-rotulos); font-weight: 600; font-size: 0.9rem; color: var(--zen-hondo); }
.interruptor-fila small { display: block; font-size: 0.78rem; color: var(--zen-tinta-cl); }
.interruptor-fila .form-check { padding-left: 0; min-height: 0; }
.interruptor-fila .form-check-input { float: none; margin: 0; width: 2.4em; height: 1.3em; cursor: pointer; }

/* ── Elegir las clases de una alumna ──────────────────────────────────────
   Una columna por día, cada clase como una tarjeta que se marca entera; la
   marcada se rellena de salvia. El filo de la izquierda es el color de la
   clase, el mismo que en el horario. */
.clases-elegir { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; align-items: start; }
.clases-dia-titulo { font-family: var(--fuente-rotulos); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zen-tinta-cl); margin: 4px 0 8px 2px; }
.clase-opcion { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--zen-border); border-radius: 12px; background: #FFFFFF; cursor: pointer; transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s; }
.clase-opcion:hover { border-color: #B9C7BE; background: #FBFCFA; }
.clase-opcion:has(.check-asignacion:checked) { border-color: var(--zen-primary); background: #F1F6F2; box-shadow: inset 0 0 0 1px var(--zen-primary); }
.clase-opcion--llena { opacity: 0.55; cursor: not-allowed; }
.clase-opcion .form-check-input { margin: 2px 0 0; flex-shrink: 0; }
.clase-opcion-color { width: 4px; align-self: stretch; border-radius: 4px; background: var(--clase-color); flex-shrink: 0; }
.clase-opcion-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.clase-opcion-texto b { font-weight: 600; font-size: 0.9rem; line-height: 1.3; color: var(--zen-hondo); overflow-wrap: anywhere; }
.clase-opcion-linea { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.clase-opcion-hora { font-variant-numeric: tabular-nums; font-family: var(--fuente-rotulos); font-weight: 700; font-size: 0.95rem; color: var(--zen-hondo); }
.clase-opcion-texto small { font-size: 0.78rem; color: var(--zen-tinta-cl); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clase-opcion-aforo { flex-shrink: 0; font-variant-numeric: tabular-nums; font-size: 0.76rem; font-weight: 600; color: var(--zen-tinta-cl); background: #F1F3EF; border-radius: 999px; padding: 2px 8px; }
.clase-opcion-aforo--llena { color: var(--estado-decision); background: var(--estado-decision-fondo); }
/* Una clase marcada que algún día se pasaría del aforo por quien viene de
   fuera (participantes.js → _revisarAforo, fijar-datos.js). Justo debajo de
   la clase, en ámbar; en verde cuando lo marcado para liberar ya lo resuelve. */
.clase-aviso-aforo { margin: -2px 0 10px; padding: 12px 14px; border: 1px solid #EAD9B8; border-radius: 12px; background: #FDF8EE; font-size: 0.84rem; color: var(--zen-text); }
.clase-aviso-aforo--resuelto { border-color: #CFE2D5; background: #F3F8F4; }
.clase-aviso-aforo-cab { display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; color: var(--estado-pendiente); font-weight: 500; }
.clase-aviso-aforo--resuelto .clase-aviso-aforo-cab { color: var(--estado-ok); }
.clase-aviso-aforo-cab .bi { margin-top: 1px; }
.clase-aviso-aforo ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.clase-aviso-aforo li { padding-top: 10px; border-top: 1px dashed #E6D7BA; }
.clase-aviso-aforo--resuelto li { border-top-color: #D6E6DA; }
.clase-aviso-aforo-dia { margin-bottom: 6px; color: var(--zen-tinta-cl); }
.clase-aviso-aforo-dia b { color: var(--zen-hondo); font-weight: 600; }
.clase-aviso-aforo-quien { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 4px 0; }
.clase-aviso-aforo-nombre { flex: 1; min-width: 140px; font-weight: 500; color: var(--zen-hondo); }
.clase-aviso-aforo-nombre .chip { margin-left: 4px; }
.clase-aviso-aforo-quien--liberada .clase-aviso-aforo-nombre { color: var(--zen-tinta-cl); text-decoration: line-through; text-decoration-color: rgba(110, 124, 115, 0.5); }
.clase-aviso-aforo li > small { display: block; margin-top: 4px; color: var(--zen-tinta-cl); }
.clase-aviso-aforo-pie { margin-top: 10px; }
.clase-aviso-aforo-pie .btn-terciario { --bs-btn-padding-x: 0.4rem; margin-left: -0.4rem; }
.clase-aviso-aforo-otros { margin-top: 6px; }
.clase-aviso-aforo-otros p { margin: 0 0 8px; color: var(--zen-tinta-cl); }
.clase-aviso-aforo-opciones { display: flex; flex-wrap: wrap; gap: 6px; }
.clase-aviso-aforo-nota { margin: 10px 0 0; color: var(--zen-tinta-cl); }
/* En el importador va suelto, no pegado a una clase de la lista. */
#import-aviso-aforo .clase-aviso-aforo { margin: 0; }

/* ── La paleta de las clases (grupos.js → PALETA_CLASES) ──────────────────
   Doce familias en dos filas: los medios arriba y los hondos abajo, cada
   color debajo de su pareja. El elegido lleva un anillo de su color. */
.paleta { display: grid; grid-template-columns: repeat(12, 34px); gap: 10px; }
.paleta-color { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--c); color: #FFFFFF; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); transition: transform 0.12s ease, box-shadow 0.12s ease; }
.paleta-color:hover { transform: scale(1.12); }
.paleta-color.activo { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--c); }
.paleta-color:focus-visible { outline: 2px solid var(--zen-hondo); outline-offset: 4px; }
.paleta-color--propio { border-radius: 10px; }
.paleta-muestra { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 20px; }
.paleta-muestra-ev { width: 230px; display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 8px; border-left: 4px solid var(--c); background: color-mix(in srgb, var(--c) 15%, #FFFFFF); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); font-size: 0.8rem; }
.paleta-muestra-hora { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--zen-tinta-cl); font-size: 0.74rem; }
.paleta-muestra-nombre { font-weight: 700; color: var(--zen-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paleta-muestra-pie { font-size: 0.82rem; color: var(--zen-tinta-cl); }
@media (max-width: 767.98px) {
  .paleta { grid-template-columns: repeat(6, 34px); }
}

/* ── Paneles laterales (ficha de la alumna, la clase del horario) ─────────
   Arriba, quién o qué es, grande y centrado, con los atajos que más se usan;
   debajo, secciones con un rótulo pequeño; abajo del todo, los botones,
   pegados al borde mientras se desplaza. */
.btn-close { --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(106, 138, 118, 0.25); }
.panel-lateral { --bs-offcanvas-width: 560px; max-width: 100vw; border-left: 0; background: #FFFFFF; box-shadow: -18px 0 50px rgba(34, 48, 42, 0.12); }
#offcanvas-clase-horario { --bs-offcanvas-width: 460px; }
.panel-lateral .offcanvas-header { padding: 14px 22px; border-bottom: 1px solid var(--zen-border); background: #FFFFFF; }
.panel-lateral .offcanvas-title { margin: 0; font-family: var(--fuente-rotulos); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zen-tinta-cl); }
@media (max-width: 767.98px) {
  .panel-lateral, #offcanvas-clase-horario { --bs-offcanvas-width: calc(100vw / var(--app-zoom)); }
}

.oc-hero { padding: 28px 28px 22px; text-align: center; background: linear-gradient(180deg, #F3F1EB 0%, #FFFFFF 100%); border-bottom: 1px solid var(--zen-border); }
.oc-avatar { width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 50%; background: var(--zen-hondo); color: #FAF9F6; display: flex; align-items: center; justify-content: center; font-family: var(--fuente-rotulos); font-weight: 700; font-size: 1.7rem; letter-spacing: 0.02em; box-shadow: 0 0 0 4px #FFFFFF, 0 6px 18px rgba(34, 48, 42, 0.18); }
.oc-nombre { margin: 0; font-family: var(--fuente-rotulos); font-weight: 700; font-size: 1.45rem; letter-spacing: -0.02em; color: var(--zen-hondo); overflow-wrap: anywhere; }
.oc-meta { margin-top: 4px; font-size: 0.88rem; color: var(--zen-tinta-cl); }
.oc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.oc-rapidas { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.oc-rapida { width: 86px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border: 1px solid var(--zen-border); border-radius: 14px; background: #FFFFFF; color: var(--zen-hondo); text-decoration: none; font-family: var(--fuente-rotulos); font-size: 0.78rem; font-weight: 600; transition: border-color 0.15s, background-color 0.15s; }
.oc-rapida .bi { font-size: 1.15rem; color: var(--zen-primary); }
.oc-rapida:hover { border-color: var(--zen-primary); background: #F4F8F5; color: var(--zen-hondo); }

.oc-cuerpo { padding: 4px 28px 24px; --bs-border-color: #EEF2EF; }
.oc-cuerpo > .oc-datos { padding: 22px 0 18px; }
.oc-seccion { padding: 20px 0 6px; border-top: 1px solid var(--zen-border); }
.oc-cuerpo > .oc-seccion:first-child { border-top: 0; }
.oc-seccion-titulo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; font-family: var(--fuente-rotulos); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zen-tinta-cl); }
.oc-seccion-titulo .bi { color: var(--zen-primary); font-size: 0.95rem; }
.oc-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin: 0; }
.oc-dato dt { margin-bottom: 2px; font-size: 0.75rem; font-weight: 500; color: var(--zen-tinta-cl); }
.oc-dato dd { margin: 0; font-size: 0.92rem; font-weight: 500; color: var(--zen-hondo); overflow-wrap: anywhere; }
.oc-dato--ancho { grid-column: 1 / -1; }
.oc-vacio { color: #A3AFA7; font-weight: 400; }
.oc-aviso-ok { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 0.82rem; color: var(--estado-ok); }
/* Las preferencias de avisos de la ficha: «Avisos al móvil» (render.js) y
   «Avisos por correo» (js/correo-ficha.js), una fila suave cada una con su
   icono en un círculo, el texto y, si se puede cambiar, un botón discreto. */
#oc-avisos-movil:not(:empty), #oc-correo:not(:empty) { margin-top: 12px; }
#oc-avisos-movil:not(:empty) + #oc-correo:not(:empty) { margin-top: 8px; }
.oc-pref { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border: 1px solid var(--zen-border); border-radius: 12px; background: #FAFBF9; font-size: 0.84rem; color: var(--zen-tinta-cl); }
.oc-pref-icono { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(106, 138, 118, 0.12); color: var(--zen-primary); font-size: 0.9rem; }
.oc-pref-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.35; }
.oc-pref-texto b { font-size: 0.8rem; font-weight: 600; color: var(--zen-hondo); }
.oc-pref--ok .oc-pref-icono { background: var(--estado-ok-fondo); color: var(--estado-ok); }
.oc-pref--aviso .oc-pref-icono { background: var(--estado-pendiente-fondo); color: var(--estado-pendiente); }
.oc-pref--aviso .oc-pref-texto > span { color: var(--estado-pendiente); }
.oc-pref-boton { --bs-btn-padding-x: 0.65rem; --bs-btn-font-size: 0.8rem; flex: none; display: inline-flex; align-items: center; gap: 5px; }
.oc-pref--editor { display: block; padding: 12px 14px 12px; background: #FFFFFF; }
.oc-pref-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.oc-pref-cab b { font-size: 0.86rem; font-weight: 600; color: var(--zen-hondo); }
.oc-pref--editor .form-check { margin-bottom: 4px; }
.oc-pref-acciones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
#oc-correo-tipos { margin: 6px 0 0 14px; }
.oc-caja { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--zen-border); border-radius: 14px; background: #FAFBF9; font-size: 0.9rem; }
.oc-linea { display: flex; align-items: flex-start; gap: 10px; color: var(--zen-text); }
.oc-linea .bi { color: var(--zen-primary); margin-top: 2px; }
.oc-linea b { display: block; font-size: 0.75rem; font-weight: 600; color: var(--zen-tinta-cl); }
.oc-comentario { padding-top: 10px; border-top: 1px dashed var(--zen-border); font-style: italic; color: var(--zen-text); white-space: pre-line; }
.oc-caja > .oc-comentario:first-child { padding-top: 0; border-top: 0; }
.oc-cifra { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px; border: 1px solid var(--zen-border); border-radius: 14px; background: #FAFBF9; }
.oc-cifra span { font-size: 0.88rem; color: var(--zen-tinta-cl); }
.oc-cifra b { font-size: 1.35rem; font-weight: 600; color: var(--zen-hondo); font-variant-numeric: tabular-nums; }
.oc-nota-pie { margin-top: 8px; font-size: 0.82rem; color: var(--zen-tinta-cl); }
.oc-ultima { margin-top: 18px; text-align: center; font-size: 0.78rem; color: #A3AFA7; }
.oc-pie { position: sticky; bottom: 0; z-index: 2; display: flex; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--zen-border); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(6px); }
.oc-pie .btn { flex: 1; }
.oc-pie > .chip { margin: 4px auto; }

/* La clase: una franja de su color arriba y el fondo teñido de él. */
.oc-hero--clase { position: relative; padding-top: 30px; text-align: left; border-bottom: 0; background: color-mix(in srgb, var(--c) 12%, #FFFFFF); }
.oc-hero--clase::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--c); }
.oc-hero--clase .oc-chips { justify-content: flex-start; }
.oc-clase-cuando { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-family: var(--fuente-rotulos); font-size: 0.85rem; font-weight: 600; color: var(--zen-text); }
.oc-aforo { height: 6px; margin: -2px 0 12px; border-radius: 999px; background: #EEF2EF; overflow: hidden; }
.oc-aforo span { display: block; height: 100%; border-radius: inherit; background: var(--zen-primary); }
.oc-persona { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #F0F3F1; }
.oc-persona:last-child { border-bottom: 0; }
.oc-persona-avatar { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--estado-auto-fondo); color: var(--zen-hondo); display: flex; align-items: center; justify-content: center; font-family: var(--fuente-rotulos); font-size: 0.72rem; font-weight: 700; }
.oc-persona-nombre { font-size: 0.92rem; font-weight: 500; color: var(--zen-hondo); }

/* El panel de una clase mira UNA sesión (horario.js, 15-10-2026): flechas a la
   semana anterior y siguiente, y dos listas que se alternan — «Ese día» y
   «Fijas» — en vez de ponerse una debajo de otra con los mismos nombres. Dentro
   de «Ese día» cada grupo se distingue por el avatar y el tono, no por colores
   fuertes: quien viene, normal; quien viene de fuera, avatar azul; quien avisó,
   en gris apagado; la lista de espera, su puesto en ámbar. */
.oc-clase-cuando > span { display: inline-flex; align-items: center; gap: 8px; }
.oc-dia-flecha { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; padding: 0; border: 1px solid color-mix(in srgb, var(--c) 35%, #FFFFFF); border-radius: 50%; background: rgba(255, 255, 255, 0.7); color: var(--zen-hondo); font-size: 0.75rem; transition: background-color 0.15s; }
.oc-dia-flecha:hover:not(:disabled) { background: #FFFFFF; }
.oc-dia-flecha:disabled { opacity: 0.35; }
.oc-listas { display: flex; width: 100%; margin: 2px 0 4px; }
.oc-listas button { flex: 1; justify-content: center; }
.oc-dia-resumen { margin: -4px 0 8px; font-size: 0.8rem; color: var(--zen-tinta-cl); }
.oc-aforo--llena span { background: var(--estado-decision); }
.oc-persona .chip { flex-shrink: 0; }
/* El azul pálido de «Recup.» en Asistencia, frente al verde del bono. */
.oc-persona--visita .oc-persona-avatar,
.oc-persona .chip-visita { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.oc-seccion--fuera .oc-seccion-titulo .bi,
.oc-seccion--espera .oc-seccion-titulo .bi { color: var(--zen-tinta-cl); }
.oc-persona--fuera .oc-persona-avatar { background: #F1F2EE; color: #A3AFA7; }
.oc-persona--fuera .oc-persona-nombre { color: var(--zen-tinta-cl); font-weight: 400; }
.oc-persona--espera .oc-persona-avatar { background: var(--estado-pendiente-fondo); color: var(--estado-pendiente); font-variant-numeric: tabular-nums; }
.oc-persona--bloqueo .oc-persona-avatar { background: transparent; border: 1px dashed var(--zen-border); color: var(--zen-tinta-cl); }
.oc-persona--bloqueo .oc-persona-nombre { color: var(--zen-tinta-cl); font-weight: 400; }
.oc-persona--bloqueo { padding: 8px 6px; }
.oc-dia-aviso { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; padding: 12px 14px; border-radius: 12px; background: var(--estado-info-fondo); color: var(--estado-info); font-size: 0.9rem; }
.oc-dia-aviso--cancelada { background: var(--estado-decision-fondo); color: var(--estado-decision); }

/* ── El menú del avatar ───────────────────────────────────────────────────
   Quién eres arriba, una entrada por apartado de «Tu cuenta», y salir. Por
   las variables de Bootstrap, como los botones. */
#user-avatar-display { padding: 0; }
.menu-perfil {
  --bs-dropdown-min-width: 290px;
  --bs-dropdown-padding-x: 8px;
  --bs-dropdown-padding-y: 8px;
  --bs-dropdown-spacer: 0.6rem;
  --bs-dropdown-border-color: var(--zen-border);
  --bs-dropdown-border-radius: 16px;
  --bs-dropdown-item-border-radius: 10px;
  --bs-dropdown-item-padding-y: 0.5rem;
  --bs-dropdown-item-padding-x: 0.75rem;
  --bs-dropdown-link-color: var(--zen-hondo);
  --bs-dropdown-link-hover-color: var(--zen-hondo);
  --bs-dropdown-link-hover-bg: #F3F1EB;
  --bs-dropdown-link-active-color: var(--zen-hondo);
  --bs-dropdown-link-active-bg: var(--estado-auto-fondo);
  --bs-dropdown-divider-bg: var(--zen-border);
  box-shadow: 0 18px 40px rgba(34, 48, 42, 0.14);
}
.menu-perfil-cab { display: flex; align-items: center; gap: 12px; padding: 8px 10px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--zen-border); }
.menu-perfil-quien { min-width: 0; display: flex; flex-direction: column; }
.menu-perfil-quien b { font-family: var(--fuente-rotulos); color: var(--zen-hondo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-perfil-quien span { font-size: 0.8rem; color: var(--zen-tinta-cl); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-perfil .dropdown-item { display: flex; align-items: center; gap: 12px; font-family: var(--fuente-rotulos); font-weight: 600; font-size: 0.93rem; }
.menu-perfil .dropdown-item .bi { width: 20px; text-align: center; font-size: 1.05rem; color: var(--zen-tinta-cl); }
.menu-perfil .dropdown-item:hover .bi { color: var(--zen-primary); }
.menu-perfil .dropdown-item small { display: block; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 0.75rem; color: var(--zen-tinta-cl); }
.menu-perfil .menu-perfil-salir, .menu-perfil .menu-perfil-salir .bi, .menu-perfil .menu-perfil-salir:hover .bi { color: var(--estado-decision); }

/* ── Tu cuenta ────────────────────────────────────────────────────────────
   El índice a la izquierda, en el beige de la barra lateral; el apartado a
   la derecha. En el móvil el índice es una tira que se desplaza. */
.modal-cuenta { --bs-modal-width: min(980px, calc(100vw / var(--app-zoom) - 48px)); }
.modal-cuenta .modal-content { border-radius: 20px; overflow: hidden; }
.cuenta-marco { display: grid; grid-template-columns: 270px minmax(0, 1fr); min-height: 560px; }
.cuenta-lateral { padding: 26px 14px; background: #F3F1EB; border-right: 1px solid rgba(34, 48, 42, 0.08); }
.cuenta-quien { display: flex; align-items: center; gap: 12px; padding: 0 8px 20px; margin-bottom: 12px; border-bottom: 1px solid rgba(34, 48, 42, 0.08); }
.cuenta-avatar { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: var(--zen-hondo); color: #FAF9F6; display: flex; align-items: center; justify-content: center; font-family: var(--fuente-rotulos); font-weight: 700; font-size: 1rem; }
.cuenta-quien-texto { min-width: 0; display: flex; flex-direction: column; }
.cuenta-quien-texto b { font-family: var(--fuente-rotulos); font-size: 0.98rem; color: var(--zen-hondo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cuenta-quien-texto span { font-size: 0.8rem; color: var(--zen-tinta-cl); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cuenta-nav { flex-direction: column; flex-wrap: nowrap; gap: 2px; }
.cuenta-nav-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: transparent; text-align: left; color: #55625A; font-family: var(--fuente-rotulos); font-size: 0.95rem; font-weight: 600; transition: background-color 0.15s, color 0.15s; }
.cuenta-nav-item .bi { width: 20px; text-align: center; font-size: 1.1rem; color: var(--zen-tinta-cl); }
.cuenta-nav-item small { display: block; margin-top: 1px; font-family: 'Inter', sans-serif; font-size: 0.76rem; font-weight: 400; color: var(--zen-tinta-cl); }
.cuenta-nav-item:hover { background: rgba(255, 255, 255, 0.6); color: var(--zen-hondo); }
.cuenta-nav-item.active { background: #FFFFFF; color: var(--zen-hondo); box-shadow: 0 1px 2px rgba(34, 48, 42, 0.08); }
.cuenta-nav-item.active .bi { color: var(--zen-primary); }
.cuenta-nav-item:focus-visible { outline: 2px solid var(--zen-primary); outline-offset: 2px; }
.cuenta-contenido { position: relative; padding: 30px 36px 32px; max-height: calc(var(--vh-real) - 80px); overflow-y: auto; }
.cuenta-cerrar { position: absolute; top: 22px; right: 22px; }
.cuenta-cab { margin-bottom: 22px; padding-right: 40px; }
.cuenta-cab .modal-title { margin: 0 0 4px; font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; color: var(--zen-hondo); }
.cuenta-cab p { margin: 0; font-size: 0.92rem; color: var(--zen-tinta-cl); }
.cuenta-acciones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.cuenta-bloque { margin-bottom: 16px; padding: 18px 20px; border: 1px solid var(--zen-border); border-radius: 16px; background: #FFFFFF; }
.cuenta-bloque-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cuenta-bloque-cab h6 { margin: 0 0 4px; font-family: var(--fuente-rotulos); font-size: 1rem; font-weight: 700; color: var(--zen-hondo); }
.cuenta-bloque-cab p { margin: 0; font-size: 0.88rem; color: var(--zen-tinta-cl); }
/* Avisos en este dispositivo (Tu cuenta → Preferencias). */
.avisos-prefs { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--zen-border); }
.avisos-prefs-titulo { margin: 12px 0 6px; font-family: var(--fuente-rotulos); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--zen-tinta-cl); }
.avisos-prefs-titulo:first-child { margin-top: 0; }
.avisos-prefs-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 16px; }
.avisos-prefs-opcion { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.9rem; color: var(--zen-hondo); cursor: pointer; }
.avisos-prefs-opcion .form-check-input { margin: 0; flex-shrink: 0; }
.avisos-prefs-silencio { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.9rem; }
.avisos-prefs-silencio .form-control { width: 110px; }
.avisos-prefs-pie { margin: 12px 0 0; font-size: 0.82rem; color: var(--zen-tinta-cl); }
#avisos-prefs-estado { color: var(--estado-ok); }
.avisos-push { margin-top: 12px; }
.avisos-push-texto { margin: 0 0 10px; font-size: 0.9rem; color: var(--zen-hondo); }
.avisos-push-texto .chip { margin-right: 4px; }
.avisos-push-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cuenta-bloque-cab .cuenta-correo-actual { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 0.95rem; font-weight: 500; color: var(--zen-hondo); overflow-wrap: anywhere; }
.cuenta-pendiente { display: flex; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--estado-ok-fondo); color: var(--estado-ok); font-size: 0.88rem; line-height: 1.45; }
.cuenta-pendiente[hidden] { display: none; }
.cuenta-pendiente .bi { font-size: 1.2rem; }
.cuenta-bloque--peligro { border-color: #F0D5CD; background: #FFFBFA; }
.cuenta-bloque--peligro h6 { color: var(--estado-decision); }
.tamanos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.tamano-opcion { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 10px 14px; border: 1.5px solid var(--zen-border); border-radius: 14px; background: #FFFFFF; cursor: pointer; transition: border-color 0.15s, background-color 0.15s; }
.tamano-opcion:hover { border-color: #B9C7BE; }
.tamano-opcion.activo { border-color: var(--zen-primary); background: #F1F6F2; box-shadow: inset 0 0 0 1px var(--zen-primary); }
.tamano-muestra { display: flex; align-items: flex-end; height: 2.2rem; margin-bottom: 6px; font-family: var(--fuente-rotulos); font-weight: 700; color: var(--zen-hondo); line-height: 1; }
.tamano-muestra--0 { font-size: 1.15rem; }
.tamano-muestra--1 { font-size: 1.45rem; }
.tamano-muestra--2 { font-size: 1.8rem; }
.tamano-nombre { font-family: var(--fuente-rotulos); font-size: 0.92rem; font-weight: 600; color: var(--zen-hondo); }
.tamano-pie { font-size: 0.76rem; color: var(--zen-tinta-cl); }
@media (max-width: 767.98px) {
  .modal-cuenta .modal-content { overflow-y: auto; }
  .cuenta-marco { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .cuenta-lateral { padding: 18px 14px 10px; border-right: 0; border-bottom: 1px solid rgba(34, 48, 42, 0.08); }
  .cuenta-quien { padding-bottom: 12px; margin-bottom: 8px; }
  .cuenta-nav { flex-direction: row; overflow-x: auto; }
  .cuenta-nav-item { width: auto; white-space: nowrap; }
  .cuenta-nav-item small { display: none; }
  .cuenta-contenido { padding: 22px 18px; max-height: none; overflow: visible; }
  .cuenta-cerrar { top: 18px; right: 16px; }
  .cuenta-bloque-cab { flex-direction: column; }
}

/* ── Todos los modales, con el mismo esqueleto (02-10-2026) ─────────────────
   Cabecera con icono, título y una línea; cuerpo; pie con los botones. Cuatro
   anchos: el de la ficha (1180), --media (1000), --lg (820), --estrecha (560)
   y --mini (440). Un cuerpo hecho de `.form-seccion` lleva además
   `.cuerpo-secciones`, que le quita el relleno de arriba y abajo: las
   secciones traen el suyo. */
.modal-ficha--lg { --bs-modal-width: min(820px, calc(100vw / var(--app-zoom) - 48px)); }
.modal-ficha--estrecha { --bs-modal-width: min(560px, calc(100vw / var(--app-zoom) - 32px)); }
.modal-ficha--mini { --bs-modal-width: min(440px, calc(100vw / var(--app-zoom) - 32px)); }
.modal-ficha--lg .form-seccion { grid-template-columns: 170px minmax(0, 1fr); gap: 12px 28px; padding: 22px 0; }
.modal-ficha .modal-body.cuerpo-secciones { padding: 0 28px; }
@media (max-width: 991px) {
  .modal-ficha--lg .form-seccion { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px 0; }
}
@media (max-width: 767.98px) {
  .modal-ficha .modal-body.cuerpo-secciones { padding: 0 18px; }
}

.modal-cab-icono--peligro { background: var(--estado-decision-fondo); color: var(--estado-decision); }
.modal-pie > .modal-pie-izq { display: flex; gap: 8px; margin-right: auto; }
.modal-intro { font-size: 0.9rem; line-height: 1.5; color: var(--zen-tinta-cl); margin: 0 0 16px; }
.modal-rotulo { font-family: var(--fuente-rotulos); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zen-tinta-cl); margin-bottom: 10px; }

/* Una franja entre la cabecera y el cuerpo: las cifras del historial, los
   pasos de la importación. No se desplaza con el cuerpo. */
.modal-franja { padding: 14px 28px; background: #FAFBF9; border-bottom: 1px solid var(--zen-border); }
.modal-franja--pasos { padding: 14px 28px 10px; }
.pasos-rotulos { display: flex; justify-content: space-between; max-width: 296px; margin: 6px auto 0; padding: 0 4px; font-size: 0.72rem; color: var(--zen-tinta-cl); }
.pasos-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--zen-border); }
.import-drop-icono { font-size: 2.5rem; color: var(--zen-primary); }

.form-caja-titulo { font-family: var(--fuente-rotulos); font-weight: 700; font-size: 0.95rem; color: var(--zen-hondo); }
.form-caja--fila { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 10px 14px; }

/* Una casilla con su explicación debajo, que se marca pulsando en cualquier
   parte de la caja. */
.opcion-check { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--zen-border); border-radius: 12px; background: #FFFFFF; cursor: pointer; transition: border-color 0.15s, background-color 0.15s; }
.opcion-check:hover { border-color: #B9C7BE; }
.opcion-check:has(.form-check-input:checked) { border-color: var(--zen-primary); background: #F6F9F7; }
.opcion-check .form-check-input { margin: 2px 0 0; flex-shrink: 0; }
.opcion-check b { display: block; font-family: var(--fuente-rotulos); font-weight: 600; font-size: 0.92rem; color: var(--zen-hondo); }
.opcion-check small { display: block; font-size: 0.8rem; color: var(--zen-tinta-cl); margin-top: 2px; }
.opcion-check small:empty { display: none; }

/* Una elección grande: icono, nombre y una línea, y una flecha. */
.opcion-grande { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; text-align: left; border: 1px solid var(--zen-border); border-radius: 14px; background: #FFFFFF; color: var(--zen-hondo); transition: border-color 0.15s, background-color 0.15s; }
.opcion-grande > .bi:first-child { font-size: 1.3rem; color: var(--zen-primary); }
.opcion-grande span { flex: 1; min-width: 0; }
.opcion-grande b { display: block; font-family: var(--fuente-rotulos); font-weight: 600; }
.opcion-grande small { display: block; font-size: 0.8rem; color: var(--zen-tinta-cl); }
.opcion-grande-flecha { color: var(--zen-tinta-cl); }
.opcion-grande:hover:not(:disabled) { border-color: var(--zen-primary); background: #F4F8F5; }
.opcion-grande:disabled { opacity: 0.6; cursor: not-allowed; }

.aviso-suave { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--estado-info-fondo); color: var(--zen-text); font-size: 0.85rem; line-height: 1.45; }
.aviso-suave .bi { color: var(--zen-primary); margin-top: 1px; }
.lista-baja { font-size: 0.9rem; color: var(--zen-text); padding-left: 1.2rem; margin-bottom: 12px; }
.lista-baja li { margin-bottom: 4px; }

/* El rojo de lo que no tiene vuelta atrás, en el tono de los chips de
   «necesita una decisión» y no en el rojo vivo de Bootstrap. */
.btn-danger {
  --bs-btn-bg: #B5482F;              --bs-btn-color: #FFFFFF;
  --bs-btn-hover-bg: #9A3B26;        --bs-btn-hover-color: #FFFFFF;
  --bs-btn-active-bg: #86321F;       --bs-btn-active-color: #FFFFFF;
  --bs-btn-disabled-bg: #B5482F;     --bs-btn-disabled-color: #FFFFFF;
  --bs-btn-focus-shadow-rgb: 181, 72, 47;
}

/* ════════════════════════════════════════════════════════════════════════
   Asistencia (js/asistencia.js), rehecha el 03-10-2026
   ════════════════════════════════════════════════════════════════════════
   Era un acordeón por profesora con las tarjetas de toda la semana dentro.
   Ahora: barra con Día / Semana, flechas y Hoy; filtros como chips; cuatro
   cifras; y la vista diaria (tira de días + sesiones por hora) o la semanal
   (siete columnas de fichas). */
.asis-subtitulo { margin: 4px 0 0; color: var(--zen-tinta-cl); font-size: 0.95rem; }

.asis-barra { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #FFFFFF; border: 1px solid var(--zen-border); border-radius: 16px; padding: 10px 12px; margin-bottom: 12px; }
.segmentado { display: inline-flex; padding: 3px; border-radius: 999px; background: #F1F2EE; }
.segmentado button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; border-radius: 999px; padding: 7px 16px; font-family: var(--fuente-rotulos); font-weight: 600; font-size: 0.9rem; color: var(--zen-tinta-cl); transition: background-color 0.15s, color 0.15s; }
.segmentado button:hover { color: var(--zen-hondo); }
.segmentado button.activo { background: #FFFFFF; color: var(--zen-hondo); box-shadow: 0 1px 3px rgba(34, 48, 42, 0.12); }
/* El mismo control hecho de radios, para un formulario que guarda solo al
   cambiar (Configuración → Portal de la alumna → tamaño del logo). */
.segmentado--radios label { display: inline-flex; align-items: center; border-radius: 999px; padding: 7px 16px; font-family: var(--fuente-rotulos); font-weight: 600; font-size: 0.9rem; color: var(--zen-tinta-cl); cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.segmentado--radios label:hover { color: var(--zen-hondo); }
.segmentado--radios input { position: absolute; opacity: 0; pointer-events: none; }
.segmentado--radios label:has(input:checked) { background: #FFFFFF; color: var(--zen-hondo); box-shadow: 0 1px 3px rgba(34, 48, 42, 0.12); }
.segmentado--radios label:has(input:focus-visible) { outline: 2px solid var(--zen-primary); outline-offset: 1px; }
/* Recibo a mano: a nombre de alguien con ficha, o de otra persona. */
.recibo-destino { display: flex; }
.recibo-destino button { flex: 1; justify-content: center; }
.asis-nav { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: center; min-width: 0; }
.asis-flecha { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--zen-border); background: #FFFFFF; color: var(--zen-hondo); display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, background-color 0.15s; }
.asis-flecha:hover { border-color: var(--zen-primary); background: #F4F8F5; }
.asis-flecha:disabled { opacity: 0.35; cursor: default; border-color: var(--zen-border); background: #FFFFFF; }
.asis-periodo { display: flex; flex-direction: column; align-items: center; min-width: 200px; line-height: 1.2; }
.asis-periodo b { font-family: var(--fuente-rotulos); font-size: 1.1rem; font-weight: 700; color: var(--zen-hondo); letter-spacing: -0.01em; }
.asis-periodo span { font-size: 0.82rem; color: var(--zen-tinta-cl); }
.asis-hoy:disabled { opacity: 0.45; }

.asis-filtros { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.asis-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filtro-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--zen-border); background: #FFFFFF; color: var(--zen-text); border-radius: 999px; padding: 6px 14px; font-family: var(--fuente-rotulos); font-size: 0.86rem; font-weight: 600; transition: border-color 0.15s, background-color 0.15s, color 0.15s; }
.filtro-chip:hover { border-color: #B9C7BE; }
.filtro-chip.activo { background: var(--zen-hondo); border-color: var(--zen-hondo); color: #FAF9F6; }
.asis-sala { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--zen-tinta-cl); }
.asis-sala .form-select { min-width: 180px; }

.asis-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #FFFFFF; border: 1px solid var(--zen-border); border-radius: 14px; overflow: hidden; margin-bottom: 18px; }
.asis-cifra { padding: 12px 18px; display: flex; flex-direction: column; gap: 2px; min-width: 0; box-shadow: 1px 0 0 var(--zen-border); }
.asis-cifra b { font-variant-numeric: tabular-nums; font-size: 1.45rem; font-weight: 600; letter-spacing: -0.02em; color: var(--zen-hondo); line-height: 1.2; }
.asis-cifra b span { font-size: 1rem; color: var(--zen-tinta-cl); font-weight: 500; }
.asis-cifra b.asis-cifra--pendiente { color: var(--estado-pendiente); }
.asis-cifra small { font-size: 0.82rem; color: var(--zen-tinta-cl); }

/* La tira de la semana: un botón por día, con cuántas clases tiene y un
   punto ámbar si alguna ya se dio y está sin pasar lista. */
.asis-tira { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.asis-dia { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 10px 4px; border: 1px solid var(--zen-border); border-radius: 14px; background: #FFFFFF; color: var(--zen-hondo); transition: border-color 0.15s, background-color 0.15s; }
.asis-dia span { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--zen-tinta-cl); }
.asis-dia b { font-family: var(--fuente-rotulos); font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.asis-dia small { font-size: 0.74rem; color: var(--zen-tinta-cl); }
.asis-dia:hover { border-color: #B9C7BE; }
.asis-dia.hoy { border-color: var(--zen-primary); }
.asis-dia.activo { background: var(--zen-hondo); border-color: var(--zen-hondo); }
.asis-dia.activo span, .asis-dia.activo small { color: rgba(250, 249, 246, 0.72); }
.asis-dia.activo b { color: #FAF9F6; }
.asis-dia-punto { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: #D9962E; }

/* ── Una sesión ─────────────────────────────────────────────────────────── */
.asis-sesiones { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; align-items: start; }
.sesion { background: #FFFFFF; border: 1px solid var(--zen-border); border-radius: 16px; overflow: hidden; box-shadow: 0 6px 18px rgba(34, 48, 42, 0.04); border-top: 4px solid var(--c); scroll-margin-top: 16px; transition: box-shadow 0.3s, transform 0.3s; }
.sesion--resaltada { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 45%, transparent), 0 12px 30px rgba(34, 48, 42, 0.12); }
.sesion-cab { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px 12px; }
.sesion-hora { flex: 0 0 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 4px; border-radius: 12px; background: color-mix(in srgb, var(--c) 12%, #FFFFFF); line-height: 1.1; }
.sesion-hora b { font-family: var(--fuente-rotulos); font-size: 1.1rem; font-weight: 700; color: var(--zen-hondo); font-variant-numeric: tabular-nums; }
.sesion-hora span { font-size: 0.72rem; color: var(--zen-tinta-cl); margin-top: 2px; }
.sesion-titulo { flex: 1; min-width: 0; }
.sesion-titulo h3 { font-family: var(--fuente-rotulos); font-size: 1.05rem; font-weight: 700; color: var(--zen-hondo); margin: 2px 0 3px; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.sesion-titulo p { margin: 0; font-size: 0.86rem; color: var(--zen-tinta-cl); }
.asis-sustituye { display: inline-flex; align-items: center; gap: 4px; color: var(--estado-pendiente); font-weight: 600; }
.sesion-estado { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

.sesion-progreso { display: flex; align-items: center; gap: 10px; padding: 0 18px 10px; }
.sesion-barra { flex: 1; height: 6px; border-radius: 999px; background: #EEF2EF; overflow: hidden; }
.sesion-barra span { display: block; height: 100%; border-radius: inherit; background: var(--zen-primary); transition: width 0.25s ease; }
.sesion-cuenta { font-variant-numeric: tabular-nums; font-size: 0.84rem; font-weight: 600; color: var(--zen-hondo); white-space: nowrap; }
.sesion-progreso .btn { --bs-btn-padding-x: 0.6rem; --bs-btn-padding-y: 0.3rem; white-space: nowrap; }

.sesion-aviso { display: flex; align-items: center; gap: 14px; margin: 0 18px 14px; padding: 14px 16px; border-radius: 12px; background: var(--estado-decision-fondo); color: var(--estado-decision); }
.sesion-aviso > .bi { font-size: 1.5rem; }
.sesion-aviso > div { flex: 1; min-width: 0; }
.sesion-aviso b { font-family: var(--fuente-rotulos); display: block; }
.sesion-aviso p { margin: 2px 0 0; font-size: 0.85rem; }

/* La lista: la fila entera marca la asistencia. La casilla de verdad está
   escondida (sigue siendo la que se envía y la que lee el teclado) y la
   etiqueta dibuja el círculo. */
.asis-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--zen-border); }
.asis-fila { position: relative; display: flex; align-items: center; gap: 4px; padding: 0 10px 0 0; border-bottom: 1px solid #F0F3F1; transition: background-color 0.15s; }
.asis-fila:last-child { border-bottom: 0; }
.asis-fila:has(.check-asistencia:checked) { background: #F4F8F5; }
.check-asistencia { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.asis-marca { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 18px; margin: 0; cursor: pointer; }
.asis-avatar { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: #EEF1EE; color: var(--zen-hondo); display: flex; align-items: center; justify-content: center; font-family: var(--fuente-rotulos); font-size: 0.74rem; font-weight: 700; }
.asis-nombre { flex: 1; min-width: 0; font-size: 0.94rem; font-weight: 500; color: var(--zen-hondo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asis-tick { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #C9D3CC; color: transparent; display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.asis-marca:hover .asis-tick { border-color: var(--zen-primary); }
.check-asistencia:checked + .asis-marca .asis-tick { background: var(--zen-primary); border-color: var(--zen-primary); color: #FFFFFF; }
.check-asistencia:checked + .asis-marca .asis-avatar { background: var(--estado-ok-fondo); color: var(--estado-ok); }
.check-asistencia:focus-visible + .asis-marca { outline: 2px solid var(--zen-primary); outline-offset: -2px; border-radius: 8px; }
.asis-icono { flex: 0 0 32px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--zen-tinta-cl); display: flex; align-items: center; justify-content: center; opacity: 0.7; transition: background-color 0.15s, color 0.15s, opacity 0.15s; }
.asis-fila:hover .asis-icono { opacity: 1; }
.asis-icono:hover { background: #EEF1EE; color: var(--zen-hondo); }
.asis-fila--aviso, .asis-fila--bloqueo, .asis-fila--vacia { padding: 10px 10px 10px 18px; gap: 10px; }
.asis-fila--aviso .asis-nombre { color: var(--zen-tinta-cl); text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, 0.25); }
.asis-fila--bloqueo { background: #FFF8EA; }
.asis-fila--bloqueo .asis-avatar { background: var(--estado-pendiente-fondo); color: var(--estado-pendiente); }
.asis-fila--bloqueo .asis-nombre { color: var(--estado-pendiente); font-weight: 600; }
.asis-fila--vacia { color: var(--zen-tinta-cl); font-size: 0.9rem; justify-content: center; }
.chip-recupera { color: #2F5E8F; background: #E3ECF7; }

.sesion-pie { display: flex; align-items: flex-start; gap: 8px; padding: 12px 18px 14px; border-top: 1px solid var(--zen-border); background: #FBFAF7; }
/* Quién da la clase: bajo la cabecera, en una franja; en ámbar si hay sustitución. */
.sesion-imparte { display: flex; align-items: center; gap: 10px; margin: 0 18px 12px; padding: 8px 10px 8px 12px; border-radius: 12px; background: #F6F7F4; }
.sesion-imparte > .bi { color: var(--zen-primary); }
.sesion-imparte > span:not(.chip) { font-family: var(--fuente-rotulos); font-size: 0.84rem; font-weight: 600; color: var(--zen-tinta-cl); white-space: nowrap; }
.sesion-imparte .form-select { flex: 1; min-width: 0; background-color: #FFFFFF; }
/* «La dio» sin poder cambiarlo (Configuración lo reserva a la dueña). */
.sesion-imparte-fija { flex: 1; min-width: 0; font-weight: 600; font-size: 0.9rem; color: var(--zen-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sesion-imparte--sustitucion { background: var(--estado-pendiente-fondo); }
.sesion-imparte--sustitucion > .bi, .sesion-imparte--sustitucion > span:not(.chip) { color: var(--estado-pendiente); }
.sesion-nota { resize: vertical; min-height: 38px; font-size: 0.88rem; transition: border-color 0.3s, box-shadow 0.3s; }
.sesion-nota--guardada { border-color: var(--zen-primary); box-shadow: 0 0 0 3px rgba(106, 138, 118, 0.18); }
.sesion-pie .sesion-nota { flex: 1; min-width: 0; }
.sesion-acciones { flex: 0 0 auto; }
.sesion-acciones .dropdown-menu { border-radius: 12px; font-size: 0.9rem; }
.sesion-acciones .sesion-peligro { --bs-dropdown-link-color: var(--estado-decision); --bs-dropdown-link-hover-color: var(--estado-decision); --bs-dropdown-link-hover-bg: var(--estado-decision-fondo); }

.asis-leyenda { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 20px; font-size: 0.82rem; color: var(--zen-tinta-cl); }
.asis-leyenda > span { display: inline-flex; align-items: center; gap: 6px; }
.asis-leyenda .punto-salud { margin-right: 2px; }

.asis-vacio { text-align: center; background: #FFFFFF; border: 1px dashed #D5DED8; border-radius: 16px; padding: 44px 24px; color: var(--zen-tinta-cl); }
.asis-vacio .bi { display: block; font-size: 2rem; color: #A8BFAE; margin-bottom: 10px; }
.asis-vacio b { display: block; font-family: var(--fuente-rotulos); font-size: 1.05rem; color: var(--zen-hondo); margin-bottom: 4px; }
.asis-vacio p { margin: 0 auto 14px; max-width: 420px; }

/* ── Vista semanal ──────────────────────────────────────────────────────── */
.asis-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; align-items: start; }
.asis-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.asis-col-cab { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border: 0; border-radius: 12px; background: #F1F2EE; color: var(--zen-hondo); line-height: 1.1; transition: background-color 0.15s; }
.asis-col-cab span { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--zen-tinta-cl); }
.asis-col-cab b { font-family: var(--fuente-rotulos); font-size: 1.25rem; font-weight: 700; }
.asis-col-cab:hover { background: #E8EAE4; }
.asis-col.hoy .asis-col-cab { background: var(--zen-hondo); }
.asis-col.hoy .asis-col-cab span { color: rgba(250, 249, 246, 0.72); }
.asis-col.hoy .asis-col-cab b { color: #FAF9F6; }
.asis-ficha { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; text-align: left; padding: 10px 10px 10px 12px; border: 1px solid var(--zen-border); border-left: 4px solid var(--c); border-radius: 12px; background: #FFFFFF; transition: box-shadow 0.15s, transform 0.15s; }
.asis-ficha:hover { box-shadow: 0 6px 16px rgba(34, 48, 42, 0.08); transform: translateY(-1px); }
.asis-ficha--apagada { opacity: 0.6; }
.asis-ficha-hora { font-family: var(--fuente-rotulos); font-weight: 700; font-size: 0.95rem; color: var(--zen-hondo); font-variant-numeric: tabular-nums; }
.asis-ficha-nombre { font-size: 0.84rem; font-weight: 600; color: var(--zen-hondo); line-height: 1.25; overflow-wrap: anywhere; }
.asis-ficha-profe { font-size: 0.76rem; color: var(--zen-tinta-cl); margin-bottom: 3px; }
.asis-col-vacia { text-align: center; font-size: 0.78rem; color: #A3AFA7; padding: 12px 4px; }

@media (max-width: 1199.98px) {
  .asis-semana { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .asis-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asis-cifra { box-shadow: 1px 0 0 var(--zen-border), 0 1px 0 var(--zen-border); }
  .asis-semana { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asis-sesiones { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .asis-barra { gap: 10px; }
  .asis-barra .segmentado { order: 1; }
  .asis-barra .asis-hoy { order: 2; margin-left: auto; }
  .asis-nav { order: 3; flex-basis: 100%; justify-content: space-between; }
  .asis-periodo { min-width: 0; }
  .asis-tira { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; scroll-snap-type: x proximity; }
  .asis-dia { flex: 0 0 64px; scroll-snap-align: start; }
  .asis-semana { grid-template-columns: minmax(0, 1fr); }
  .asis-sala { width: 100%; }
  .asis-sala .form-select { flex: 1; }
  .sesion-cab { padding: 14px 14px 10px; gap: 12px; }
  .sesion-estado { display: none; }
  .asis-icono { opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════════════
   Alumnas (render.js → mostrarParticipantes), repasada el 03-10-2026
   ════════════════════════════════════════════════════════════════════════
   La misma barra que Asistencia (Activas / Inactivas como segmentado, en vez
   de un botón que cambiaba de texto), filtros rápidos con su número, y una
   fila más callada: las clases como píldoras con su color, lo que falta
   dicho en ámbar, y los cuatro botones de colores como iconos sin caja. */
.segmentado-n { font-variant-numeric: tabular-nums; font-size: 0.78rem; font-weight: 600; color: var(--zen-tinta-cl); background: rgba(34, 48, 42, 0.06); border-radius: 999px; padding: 1px 7px; }
.segmentado button.activo .segmentado-n { background: #EEF2EF; color: var(--zen-hondo); }

.alumnas-barra { gap: 10px; }
.alumnas-buscar { position: relative; flex: 1 1 260px; min-width: 0; }
.alumnas-buscar > .bi-search { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--zen-tinta-cl); pointer-events: none; }
.alumnas-buscar .form-control { padding-left: 38px; padding-right: 36px; }
.alumnas-buscar > button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--zen-tinta-cl); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; }
.alumnas-buscar > button:hover { background: #EEF1EE; color: var(--zen-hondo); }
#alumnas-clase { flex: 0 1 260px; width: auto; min-width: 0; cursor: pointer; }
#ordenar-participantes { flex: 0 1 230px; width: auto; min-width: 0; cursor: pointer; }

.filtro-chip-n { font-variant-numeric: tabular-nums; font-size: 0.76rem; font-weight: 600; opacity: 0.65; }
.alumnas-pie-barra { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.alumnas-total { font-size: 0.86rem; color: var(--zen-tinta-cl); white-space: nowrap; }

.tabla-alumnas { background: #FFFFFF; border: 1px solid var(--zen-border); border-radius: 16px; overflow: hidden; box-shadow: 0 6px 18px rgba(34, 48, 42, 0.04); }
.tabla-alumnas .table { --bs-table-bg: transparent; }
.tabla-alumnas thead th { background: #F7F8F5; font-family: var(--fuente-rotulos); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--zen-tinta-cl); border-bottom: 1px solid var(--zen-border); padding-top: 12px; padding-bottom: 12px; }
.tabla-alumnas tbody td { border-bottom: 1px solid #F0F3F1; padding-top: 12px; padding-bottom: 12px; overflow: hidden; }
.tabla-alumnas tbody tr:last-child td { border-bottom: 0; }
.fila-alumna { cursor: pointer; transition: background-color 0.15s; }
.fila-alumna:hover { background: #F7FAF8; }
.fila-alumna--inactiva .alumna-quien, .fila-alumna--inactiva .alumna-contacto { opacity: 0.6; }

.alumna-quien { display: flex; align-items: center; gap: 12px; min-width: 0; }
.alumna-avatar { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; background: #EEF1EE; color: var(--zen-hondo); display: flex; align-items: center; justify-content: center; font-family: var(--fuente-rotulos); font-size: 0.82rem; font-weight: 700; }
.fila-alumna:hover .alumna-avatar { background: var(--estado-ok-fondo); color: var(--estado-ok); }
.alumna-texto { min-width: 0; }
.alumna-nombre { font-weight: 600; font-size: 0.98rem; color: var(--zen-hondo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alumna-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 2px; font-size: 0.8rem; color: var(--zen-tinta-cl); }
.alumna-meta > span:not(.chip) { margin-right: 2px; }

.alumna-contacto { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 0.88rem; }
.alumna-contacto > a, .alumna-contacto > span { display: block; min-width: 0; color: var(--zen-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alumna-contacto > a:hover { color: var(--zen-hondo); text-decoration: underline; }
.alumna-contacto .bi { color: var(--zen-tinta-cl); margin-right: 7px; }
.alumna-falta { display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; color: var(--estado-pendiente); }
.alumna-contacto > .alumna-falta .bi, .alumna-falta .bi { color: inherit; }

.alumna-clases { display: flex; flex-wrap: wrap; gap: 5px; }
.alumna-clase { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; padding: 3px 9px 3px 8px; border-radius: 8px; background: color-mix(in srgb, var(--c) 12%, #FFFFFF); border-left: 3px solid var(--c); font-size: 0.8rem; color: var(--zen-hondo); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alumna-clase b { font-family: var(--fuente-rotulos); font-weight: 700; font-variant-numeric: tabular-nums; }
.alumna-cita { display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--zen-hondo); font-size: 0.9rem; }
.alumna-cita .bi { color: var(--zen-primary); }
.alumna-sub { font-size: 0.8rem; color: var(--zen-tinta-cl); margin-top: 2px; }

.fila-acciones { display: inline-flex; gap: 2px; white-space: nowrap; }
.fila-accion { width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--zen-tinta-cl); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; transition: background-color 0.15s, color 0.15s; }
.fila-accion:hover { background: #EEF1EE; color: var(--zen-hondo); }
.fila-accion--peligro:hover { background: var(--estado-decision-fondo); color: var(--estado-decision); }
.fila-accion:focus-visible { outline: 2px solid var(--zen-primary); outline-offset: 1px; }

@media (max-width: 767.98px) {
  .alumnas-barra .segmentado { flex: 1 1 100%; order: -1; }
  .alumnas-barra .segmentado button { flex: 1; justify-content: center; }
  .alumnas-buscar { flex-basis: 100%; }
  #alumnas-clase, #ordenar-participantes { flex: 1 1 45%; }
  .alumnas-pie-barra { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* ════════════════════════════════════════════════════════════════════════
   Facturación (recibos.js), repasada el 04-10-2026
   ════════════════════════════════════════════════════════════════════════
   La barra del mes de Asistencia, las cuatro cifras, la gráfica y los morosos
   en dos paneles, y la tabla como la de Alumnas. En la columna de acciones,
   «Cobrar» (o deshacer el cobro) vive en un hueco de ancho fijo para que los
   iconos de su derecha caigan en el mismo sitio en todas las filas: con
   anchos automáticos la columna se leía como una escalera. */
.fact-nav { flex: 0 0 auto; justify-content: flex-start; }
.fact-nav .asis-periodo { min-width: 150px; }
.fact-barra .alumnas-buscar { flex: 1 1 240px; }
#ordenar-facturacion { flex: 0 1 240px; width: auto; min-width: 0; cursor: pointer; }
.fact-sube { color: var(--estado-ok); font-weight: 600; }
.fact-baja { color: var(--estado-decision); font-weight: 600; }

.fact-paneles { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin-bottom: 18px; }
/* Por banco y no (Pilates): las personas con recibo en el mes, y todas las activas. */
.fact-pago { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: #FFFFFF; border: 1px solid var(--zen-border); border-radius: 14px; overflow: hidden; margin: -6px 0 18px; }
.fact-pago[hidden] { display: none; }
.fact-pago-bloque { padding: 12px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; box-shadow: 1px 0 0 var(--zen-border); }
.fact-pago-bloque > small { font-size: 0.82rem; color: var(--zen-tinta-cl); }
.fact-pago-cifras { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.fact-pago-cifra { display: inline-flex; align-items: baseline; gap: 6px; padding: 0; border: 0; background: none; font-size: 0.9rem; color: var(--zen-tinta-cl); }
.fact-pago-cifra b { font-variant-numeric: tabular-nums; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; color: var(--zen-hondo); }
.fact-pago-cifra .bi { color: var(--zen-primary); }
button.fact-pago-cifra:hover b { text-decoration: underline; text-underline-offset: 3px; }
.fact-pago-barra { display: block; height: 6px; border-radius: 3px; background: #EEF1EE; overflow: hidden; }
.fact-pago-barra i { display: block; height: 100%; background: var(--zen-primary); border-radius: 3px; }
@media (max-width: 767.98px) {
  .fact-pago { grid-template-columns: minmax(0, 1fr); }
  .fact-pago-bloque { box-shadow: 0 1px 0 var(--zen-border); }
}
.fact-panel { background: #FFFFFF; border: 1px solid var(--zen-border); border-radius: 16px; padding: 14px 16px 12px; min-width: 0; }
.fact-panel-titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-family: var(--fuente-rotulos); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--zen-tinta-cl); margin: 0 0 10px; }
.fact-leyenda { display: inline-flex; align-items: center; gap: 6px; font-family: var(--bs-body-font-family); font-size: 0.76rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.fact-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 6px; }
.fact-leyenda-cobrado { background: var(--zen-primary); }
.fact-leyenda-pendiente { background: #E3B15C; }

.fact-barras { display: flex; align-items: stretch; gap: 6px; height: 128px; }
.fact-mes { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; border-radius: 6px; }
.fact-columna { flex: 1; width: 100%; max-width: 34px; display: flex; flex-direction: column; justify-content: flex-end; }
.fact-columna > span { display: block; width: 100%; min-height: 3px; }
.fact-columna > span:first-child { border-radius: 4px 4px 0 0; }
.fact-cobrado { background: color-mix(in srgb, var(--zen-primary) 55%, #FFFFFF); transition: background-color 0.15s; }
.fact-pendiente { background: #EFCB8C; }
.fact-vacio { height: 3px; background: #EEF1EE; border-radius: 3px; }
.fact-mes small { font-size: 0.7rem; color: var(--zen-tinta-cl); text-transform: capitalize; }
.fact-mes:hover .fact-cobrado { background: var(--zen-primary); }
.fact-mes--actual .fact-cobrado { background: var(--zen-hondo); }
.fact-mes--actual .fact-pendiente { background: #E3B15C; }
.fact-mes--actual small { color: var(--zen-hondo); font-weight: 700; }
.fact-mes:focus-visible { outline: 2px solid var(--zen-primary); outline-offset: 2px; }

#lista-morosidad { max-height: 150px; overflow-y: auto; }
.fact-al-dia { display: flex; align-items: center; gap: 8px; padding: 14px 4px; color: var(--estado-ok); font-size: 0.88rem; }
.fact-moroso { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #F0F3F1; }
.fact-moroso:last-child { border-bottom: 0; }
.fact-moroso-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.fact-moroso-texto b { font-size: 0.88rem; font-weight: 600; color: var(--zen-hondo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fact-moroso-texto span { font-size: 0.76rem; color: var(--zen-tinta-cl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fact-moroso-importe { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.88rem; color: var(--estado-pendiente); white-space: nowrap; }

#tabla-facturacion { font-size: 0.92rem; min-width: 980px; }
#tabla-facturacion td { overflow: visible; }
.fila-recibo:hover { background: #F7FAF8; }
.recibo-num { font-family: var(--fuente-rotulos); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--zen-hondo); white-space: nowrap; }
.fila-recibo .chip { margin-top: 3px; }
.fila-recibo .alumna-sub { white-space: nowrap; }
.recibo-fecha { color: var(--zen-tinta-cl); white-space: nowrap; }
.recibo-quien { font-weight: 600; color: var(--zen-hondo); }
.recibo-banco { color: var(--zen-tinta-cl); }
.recibo-concepto { color: var(--zen-text); max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recibo-importe { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--zen-hondo); white-space: nowrap; }
.recibo-hueco { display: inline-flex; justify-content: flex-end; width: 92px; }
/* Donde un recibo cobrado no tiene campana de «recordar el pago»: el mismo ancho, para que los iconos de detrás sigan en columna. */
.recibo-hueco-icono { display: inline-block; width: 34px; }
.recibo-cobrar { --bs-btn-padding-x: 0.75rem; --bs-btn-padding-y: 0.3rem; --bs-btn-color: var(--estado-ok); --bs-btn-bg: var(--estado-ok-fondo); --bs-btn-border-color: transparent; --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: var(--estado-ok); --bs-btn-hover-border-color: var(--estado-ok); --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: var(--estado-ok); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.fila-accion--hecha { color: var(--estado-ok); }

@media (max-width: 991.98px) {
  .fact-paneles { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .fact-barra .fact-nav { order: -1; flex-basis: 100%; justify-content: space-between; }
  .fact-barra .alumnas-buscar { flex-basis: 100%; }
  #ordenar-facturacion { flex: 1 1 100%; }
  .fact-barras { gap: 3px; }
}

/* ════════════════════════════════════════════════════════════════════════
   Cuentas (cuentas.js), repasada el 04-10-2026
   ════════════════════════════════════════════════════════════════════════
   Las cuatro vistas como el segmentado de Asistencia (eran pestañas en
   píldora con el azul de Bootstrap tematizado a mano), las cifras en la
   franja de siempre, los paneles y la gráfica de Facturación y las tablas
   como la de Alumnas. Aquí va solo lo que no existía ya en otro sitio. */
.cuentas-barra .asis-nav { flex: 1; }
.cuentas-positivo { color: var(--estado-ok); }
.cuentas-negativo { color: var(--estado-decision); }
.cuentas-nota { font-size: 0.86rem; color: var(--zen-tinta-cl); line-height: 1.5; }
.cuentas-pie { margin: 12px 2px 0; font-size: 0.84rem; color: var(--zen-tinta-cl); }
.cuentas-explica-panel { margin-bottom: 16px; }
.cuentas-explica-panel p { margin: 0 0 6px; font-size: 0.92rem; color: var(--zen-text); line-height: 1.5; }
.cuentas-explica-panel p.cuentas-nota { margin: 0; font-size: 0.84rem; color: var(--zen-tinta-cl); }

.cuentas-avisos { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.cuentas-aviso { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: #FFFFFF; border: 1px solid var(--zen-border); font-size: 0.88rem; color: var(--zen-text); }
.cuentas-aviso > .bi { color: var(--estado-pendiente); font-size: 1.1rem; }
.cuentas-aviso > span { flex: 1; min-width: 0; }
.cuentas-aviso b { color: var(--zen-hondo); font-weight: 600; }
.cuentas-aviso .btn { white-space: nowrap; }
.cuentas-aviso--pendiente { background: var(--estado-pendiente-fondo); border-color: transparent; color: var(--estado-pendiente); }

.cuentas-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.cuentas-cabecera .cuentas-nota { max-width: 760px; }
.cuentas-vacio { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 44px 20px; background: #FFFFFF; border: 1px solid var(--zen-border); border-radius: 16px; color: var(--zen-tinta-cl); font-size: 0.88rem; }
.cuentas-vacio > .bi { font-size: 1.9rem; color: #A8BFAE; margin-bottom: 4px; }
.cuentas-vacio b { font-family: var(--fuente-rotulos); color: var(--zen-hondo); font-size: 1rem; }

/* La gráfica: dos barras por mes, lo que entra y lo que sale. */
.cuentas-leyenda-entra { background: var(--zen-primary); }
.cuentas-leyenda-sale { background: #D9926B; }
.cuentas-columnas { flex: 1; width: 100%; max-width: 40px; display: flex; align-items: flex-end; gap: 2px; }
.cuentas-columnas > span { flex: 1; min-height: 2px; border-radius: 3px 3px 0 0; }
.cuentas-entra { background: color-mix(in srgb, var(--zen-primary) 55%, #FFFFFF); }
.cuentas-sale { background: #EBC0A6; }
.fact-mes:hover .cuentas-entra { background: var(--zen-primary); }
.fact-mes--actual .cuentas-entra { background: var(--zen-hondo); }
.fact-mes--actual .cuentas-sale { background: #D9926B; }

.cuentas-cat { margin-bottom: 10px; }
.cuentas-cat:last-child { margin-bottom: 0; }
.cuentas-cat-fila { display: flex; justify-content: space-between; gap: 10px; font-size: 0.88rem; color: var(--zen-text); margin-bottom: 4px; }
.cuentas-cat-fila b { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--zen-hondo); }
.cuentas-cat-barra { height: 6px; border-radius: 999px; background: #EEF2EF; overflow: hidden; }
.cuentas-cat-barra > span { display: block; height: 100%; border-radius: inherit; background: var(--zen-primary); }

/* Las tablas: cifras alineadas a la derecha y en columnas iguales. */
.tabla-cuentas { font-size: 0.92rem; min-width: 760px; }
.cuentas-num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--zen-text); }
.cuentas-total { font-weight: 600; color: var(--zen-hondo); }
.cuentas-nombre { font-weight: 600; color: var(--zen-hondo); }
.tabla-alumnas tfoot td { background: #F7F8F5; border-top: 1px solid var(--zen-border); border-bottom: 0; padding-top: 12px; padding-bottom: 12px; font-family: var(--fuente-rotulos); font-weight: 700; color: var(--zen-hondo); }

/* Gastos */
.cuentas-gasto-form { display: grid; grid-template-columns: 150px minmax(0, 2fr) minmax(0, 1fr) 150px; gap: 12px; align-items: end; }
.cuentas-gasto-form .form-label { font-size: 0.82rem; margin-bottom: 4px; }
.cuentas-gasto-fin { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cuentas-fijos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.cuentas-fijo { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid var(--zen-border); border-radius: 999px; background: #FFFFFF; font-size: 0.84rem; color: var(--zen-text); }
.cuentas-fijo b { font-weight: 600; color: var(--zen-hondo); }
.cuentas-fijo .btn-link { font-size: 0.8rem; }

/* Tarifas y el pago de una persona (los dos modales). */
.cuentas-tarifa { display: grid; grid-template-columns: minmax(0, 1fr) 190px 150px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #F0F3F1; }
.cuentas-pago-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 0.88rem; color: var(--zen-tinta-cl); }
.cuentas-rotulo-nota { margin-left: 10px; font-family: var(--bs-body-font-family); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 0.78rem; }
.cuentas-sesiones { max-height: 270px; overflow-y: auto; border: 1px solid var(--zen-border); border-radius: 12px; }
.cuentas-sesion { display: flex; align-items: center; gap: 12px; padding: 9px 14px; margin: 0; border-bottom: 1px solid #F0F3F1; font-size: 0.88rem; cursor: pointer; }
.cuentas-sesion:last-child { border-bottom: 0; }
.cuentas-sesion .form-check-input { margin: 0; flex-shrink: 0; }
.cuentas-sesion-dia { flex: 0 0 96px; font-weight: 600; color: var(--zen-hondo); text-transform: capitalize; }
.cuentas-sesion-texto { flex: 1; min-width: 0; color: var(--zen-text); }
.cuentas-sesion--fuera .cuentas-sesion-dia, .cuentas-sesion--fuera .cuentas-sesion-texto { color: #A3AFA7; text-decoration: line-through; }
.cuentas-extras { border: 1px solid var(--zen-border); border-radius: 12px; margin-bottom: 10px; }
.cuentas-extra { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; border-bottom: 1px solid #F0F3F1; font-size: 0.88rem; }
.cuentas-extra:last-child { border-bottom: 0; }
.cuentas-extra > span { flex: 1; min-width: 0; }
.cuentas-extra > b { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--zen-hondo); }
.cuentas-extra-nuevo { display: grid; grid-template-columns: minmax(0, 1fr) 140px auto; gap: 8px; margin-bottom: 20px; }
.cuentas-totales { background: #F7F8F5; border-radius: 12px; padding: 12px 16px; margin: 20px 0; font-size: 0.9rem; }
.cuentas-totales > div { display: flex; justify-content: space-between; padding: 2px 0; font-variant-numeric: tabular-nums; color: var(--zen-text); }
.cuentas-totales > .cuentas-totales-total { border-top: 1px solid var(--zen-border); margin-top: 6px; padding-top: 8px; font-family: var(--fuente-rotulos); font-weight: 700; font-size: 1.05rem; color: var(--zen-hondo); }
.cuentas-pago-botones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

@media (max-width: 991.98px) {
  .cuentas-gasto-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cuentas-gasto-concepto { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  .cuentas-barra .segmentado { flex: 1 1 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; border-radius: 16px; }
  .cuentas-barra .segmentado button { justify-content: center; padding: 7px 10px; border-radius: 13px; }
  .cuentas-barra .asis-nav { order: 2; }
  .cuentas-cabecera { flex-direction: column; gap: 8px; }
  .cuentas-aviso { flex-wrap: wrap; }
  .cuentas-tarifa { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cuentas-tarifa > .alumna-quien { grid-column: 1 / -1; }
  .cuentas-extra-nuevo { grid-template-columns: minmax(0, 1fr) 120px; }
  .cuentas-extra-nuevo > .btn { grid-column: 1 / -1; }
}

/* ════════════════════════════════════════════════════════════════════════
   Analíticas (analiticas.js / analiticas_fisio.js), rehecha el 04-10-2026
   ════════════════════════════════════════════════════════════════════════
   Mismas piezas que Asistencia, Facturación y Cuentas (segmentado, franja de
   cifras, paneles blancos, tablas de Alumnas). Lo propio: el mapa de calor
   de la semana, las barras de ocupación de cada fila y «Lo que merece mirar»
   con un color por tono. */
.an-frescura { font-size: 0.82rem; color: var(--zen-tinta-cl); white-space: nowrap; }
.an-barra { padding: 8px 10px; }
.an-pie { margin: 10px 0 0; font-size: 0.8rem; color: var(--zen-tinta-cl); line-height: 1.45; }
.an-vacio { margin: 0; font-size: 0.86rem; color: var(--zen-tinta-cl); }
.an-pct { margin-left: 8px; font-weight: 500; color: var(--zen-tinta-cl); font-size: 0.8rem; }
.an-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.an-paneles-iguales { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* Lo que merece mirar: el icono lleva el color del tono. */
.an-aviso { border-left-width: 3px; }
.an-aviso--decision { border-left-color: var(--estado-decision); }
.an-aviso--decision > .bi { color: var(--estado-decision); }
.an-aviso--pendiente { border-left-color: #D9962E; }
.an-aviso--pendiente > .bi { color: var(--estado-pendiente); }
.an-aviso--ok { border-left-color: var(--zen-primary); }
.an-aviso--ok > .bi { color: var(--estado-ok); }
.an-aviso--info { border-left-color: #B9C7BE; }
.an-aviso--info > .bi { color: var(--zen-tinta-cl); }
.an-avisos { margin-bottom: 0; }
.an-todo-bien { display: flex; align-items: center; gap: 10px; padding: 6px 2px; color: var(--estado-ok); font-size: 0.9rem; }

/* Columnas: la segunda serie en terracota, como lo que sale en Cuentas. */
.an-serie-a { background: color-mix(in srgb, var(--zen-primary) 55%, #FFFFFF); }
.an-serie-b { background: #EBC0A6; }
.fact-mes--actual .an-serie-a { background: var(--zen-hondo); }
.fact-mes--actual .an-serie-b { background: #D9926B; }
.an-leyenda-a { background: var(--zen-primary); }
.an-leyenda-b { background: #D9926B; }
.an-columnas--valores { height: 150px; }
.an-valor { font-size: 0.68rem; font-variant-numeric: tabular-nums; color: var(--zen-tinta-cl); min-height: 1em; }
.fact-mes--actual .an-valor { color: var(--zen-hondo); font-weight: 700; }

/* Barras de una lista: los tonos de los estados de una cita. */
.an-barra-fila.tono-ok .cuentas-cat-barra > span { background: var(--estado-ok); }
.an-barra-fila.tono-pendiente .cuentas-cat-barra > span { background: #D9962E; }
.an-barra-fila.tono-apagado .cuentas-cat-barra > span { background: #B9C7BE; }

/* El mapa de calor. Cinco niveles del salvia al verde hondo. */
.an-mapa-envoltura { overflow-x: auto; }
.an-mapa { width: 100%; border-collapse: separate; border-spacing: 4px; font-variant-numeric: tabular-nums; }
.an-mapa th { font-family: var(--fuente-rotulos); font-size: 0.72rem; font-weight: 600; color: var(--zen-tinta-cl); text-align: center; padding: 2px 4px; white-space: nowrap; }
.an-mapa tbody th { text-align: right; padding-right: 8px; }
.an-mapa td { padding: 0; }
.an-celda { display: flex; align-items: center; justify-content: center; min-width: 44px; height: 32px; border-radius: 8px; font-size: 0.78rem; font-weight: 600; }
.an-celda--nada { background: #F6F7F4; }
.an-celda--0 { background: #F5EAD6; color: var(--estado-pendiente); }
.an-celda--1 { background: #E4ECE6; color: var(--zen-hondo); }
.an-celda--2 { background: #C7D7CC; color: var(--zen-hondo); }
.an-celda--3 { background: #8FAE99; color: #FFFFFF; }
.an-celda--4 { background: var(--zen-hondo); color: #FAF9F6; }
.fact-leyenda .an-celda { display: inline-block; width: 12px; height: 12px; min-width: 0; border-radius: 3px; margin-left: 8px; }

/* La ocupación dentro de una fila de tabla. */
.an-ocupacion { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.an-ocupacion-barra { flex: 1; height: 6px; border-radius: 999px; background: #EEF2EF; overflow: hidden; }
.an-ocupacion-barra > span { display: block; height: 100%; border-radius: inherit; background: var(--zen-primary); }
.an-ocupacion-barra--0 > span { background: #D9962E; }
.an-ocupacion-barra--4 > span { background: var(--zen-hondo); }
.an-orden { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 0.84rem; color: var(--zen-tinta-cl); }
.an-orden .form-select { width: auto; }

/* Personas dentro de un panel, con su dato y la flecha a la ficha. */
.an-personas { display: flex; flex-direction: column; }
.an-persona { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid #F0F3F1; }
.an-persona:last-child { border-bottom: 0; }
.an-persona .alumna-avatar { flex-basis: 32px; width: 32px; height: 32px; font-size: 0.74rem; }
.an-persona-nombre { flex: 1; min-width: 0; font-size: 0.9rem; font-weight: 600; color: var(--zen-hondo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-persona-dato { white-space: nowrap; }

@media (max-width: 1199.98px) {
  .an-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .an-rejilla, .an-paneles-iguales { grid-template-columns: minmax(0, 1fr); }
  .an-barra .segmentado { flex: 1 1 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; border-radius: 16px; }
  .an-barra .segmentado button { justify-content: center; padding: 7px 10px; border-radius: 13px; }
  .an-cabecera-derecha { flex-wrap: wrap; }
  .an-celda { min-width: 36px; height: 28px; font-size: 0.7rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   Clases (clases.js + grupos.js), rehecha el 04-10-2026
   ════════════════════════════════════════════════════════════════════════
   Era un acordeón por profesora, todo plegado. Ahora: la barra de siempre
   (Lista / Semana, buscador, agrupar, profesora y sala), chips con su número,
   una tabla agrupada con el color de cada clase en el filo, casillas para
   cambiar varias a la vez, y un tablero de la semana con un «+» por día. */
.clases-barra { gap: 10px; }
.clases-barra .alumnas-buscar { flex: 1 1 240px; }
#clases-agrupar, #clases-profe, #clases-sala { flex: 0 1 190px; width: auto; min-width: 0; cursor: pointer; }

.tabla-clases { font-size: 0.92rem; min-width: 900px; }
.tabla-clases td { overflow: visible; }
.clase-col-check { width: 44px; }
.clase-col-check .form-check-input { margin: 0; cursor: pointer; }
.clases-grupo-cab td { background: #F7F8F5; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--zen-border); }
.clases-grupo-cab b { font-family: var(--fuente-rotulos); font-weight: 700; color: var(--zen-hondo); margin-right: 10px; }
.clases-grupo-cab span { font-size: 0.82rem; color: var(--zen-tinta-cl); }
.tabla-clases tbody + tbody .clases-grupo-cab td { border-top: 1px solid var(--zen-border); }

/* El filo de color de cada fila: la clase se reconoce igual que en el horario. */
.fila-clase { cursor: pointer; transition: background-color 0.15s; }
.fila-clase > td:first-child { box-shadow: inset 4px 0 0 var(--c); }
.fila-clase:hover { background: #F7FAF8; }
.fila-clase--elegida { background: #F1F6F2; }
.clase-hora { display: flex; flex-direction: column; line-height: 1.15; font-variant-numeric: tabular-nums; }
.clase-hora small { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--zen-tinta-cl); }
.clase-hora b { font-family: var(--fuente-rotulos); font-weight: 700; font-size: 1rem; color: var(--zen-hondo); }
.clase-hora span { font-size: 0.76rem; color: var(--zen-tinta-cl); }
.clase-nombre { font-weight: 600; color: var(--zen-hondo); }
.clase-persona { display: flex; align-items: center; gap: 8px; min-width: 0; }
.clase-persona > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clase-avatar { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: #EEF1EE; color: var(--zen-hondo); display: flex; align-items: center; justify-content: center; font-family: var(--fuente-rotulos); font-size: 0.68rem; font-weight: 700; }
.clase-ocupacion { min-width: 130px; }
.clase-ocupacion--llena .an-ocupacion-barra > span { background: var(--zen-hondo); }
.clase-ocupacion--alta .an-ocupacion-barra > span { background: var(--zen-primary); }
.clase-ocupacion--media .an-ocupacion-barra > span { background: #8FAE99; }
.clase-ocupacion--baja .an-ocupacion-barra > span { background: #D9962E; }

/* La barra de lo marcado. */
.clases-lote { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 12px; margin-bottom: 12px; border-radius: 14px; background: var(--zen-hondo); color: #FAF9F6; }
.clases-lote b { font-family: var(--fuente-rotulos); font-weight: 600; margin-right: 4px; }
.clases-lote .form-select { width: auto; min-width: 200px; }
.clases-lote-aforo { width: auto; }
.clases-lote-aforo .form-control { width: 90px; }
.clases-lote .btn-outline-secondary { --bs-btn-color: #FAF9F6; --bs-btn-border-color: rgba(250, 249, 246, 0.4); --bs-btn-hover-bg: rgba(250, 249, 246, 0.12); --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-border-color: rgba(250, 249, 246, 0.6); background: transparent; }
.clases-lote .btn-outline-danger { --bs-btn-color: #F3C9BE; --bs-btn-border-color: rgba(243, 201, 190, 0.5); --bs-btn-hover-bg: var(--estado-decision); --bs-btn-hover-border-color: var(--estado-decision); --bs-btn-hover-color: #FFFFFF; }
.clases-lote .fila-accion { color: rgba(250, 249, 246, 0.8); }
.clases-lote .fila-accion:hover { background: rgba(250, 249, 246, 0.12); color: #FFFFFF; }

/* El tablero de la semana. */
.clases-tablero { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; align-items: start; }
.clases-dia { background: #FFFFFF; border: 1px solid var(--zen-border); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.clases-dia > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; padding: 2px 2px 4px; }
.clases-dia > header b { display: block; font-family: var(--fuente-rotulos); font-weight: 700; color: var(--zen-hondo); }
.clases-dia > header span { font-size: 0.74rem; color: var(--zen-tinta-cl); }
.clases-dia > header .fila-accion { width: 30px; height: 30px; flex: 0 0 30px; }
.clase-ficha { display: flex; flex-direction: column; align-items: stretch; gap: 3px; width: 100%; text-align: left; padding: 9px 10px 9px 12px; border: 1px solid var(--zen-border); border-left: 4px solid var(--c); border-radius: 10px; background: color-mix(in srgb, var(--c) 7%, #FFFFFF); transition: box-shadow 0.15s, transform 0.15s; }
.clase-ficha:hover { box-shadow: 0 6px 16px rgba(34, 48, 42, 0.08); transform: translateY(-1px); }
.clase-ficha:focus-visible { outline: 2px solid var(--zen-primary); outline-offset: 2px; }
.clase-ficha-hora { font-family: var(--fuente-rotulos); font-weight: 700; font-size: 0.86rem; color: var(--zen-hondo); font-variant-numeric: tabular-nums; }
.clase-ficha-nombre { font-size: 0.86rem; font-weight: 600; color: var(--zen-hondo); line-height: 1.25; overflow-wrap: anywhere; }
.clase-ficha-meta { font-size: 0.74rem; color: var(--zen-tinta-cl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clase-ficha-pie { display: flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 600; color: var(--zen-hondo); font-variant-numeric: tabular-nums; margin-top: 2px; }
.clase-ficha-pie .an-ocupacion-barra { flex: 1; }
.clase-ficha--llena .an-ocupacion-barra > span { background: var(--zen-hondo); }
.clase-ficha .chip { align-self: flex-start; }
.clases-dia-vacio { margin: 0; padding: 6px 2px; font-size: 0.76rem; color: #A3AFA7; }

/* El formulario: a qué hora acaba, duraciones de un clic, días extra, avisos. */
.grupo-cuando-pie { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: -4px; }
.grupo-fin { font-size: 0.86rem; font-weight: 600; color: var(--zen-hondo); }
.grupo-duraciones { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.grupo-duraciones .filtro-chip { padding: 3px 10px; font-size: 0.78rem; }
.grupo-dias { display: flex; flex-wrap: wrap; gap: 6px; }
.grupo-dia { margin: 0; cursor: pointer; }
.grupo-dia input { position: absolute; opacity: 0; pointer-events: none; }
.grupo-dia span { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; padding: 6px 12px; border: 1px solid var(--zen-border); border-radius: 999px; background: #FFFFFF; font-family: var(--fuente-rotulos); font-weight: 600; font-size: 0.86rem; color: var(--zen-text); transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.grupo-dia:hover span { border-color: #B9C7BE; }
.grupo-dia input:checked + span { background: var(--zen-hondo); border-color: var(--zen-hondo); color: #FAF9F6; }
.grupo-dia input:focus-visible + span { outline: 2px solid var(--zen-primary); outline-offset: 2px; }
#grupo-avisos:empty { display: none; }
.grupo-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; font-size: 0.86rem; line-height: 1.4; margin-bottom: 6px; }
.grupo-aviso:last-child { margin-bottom: 0; }
.grupo-aviso .bi { margin-top: 1px; }
.grupo-aviso--decision { background: var(--estado-decision-fondo); color: var(--estado-decision); }
.grupo-aviso--pendiente { background: var(--estado-pendiente-fondo); color: var(--estado-pendiente); }

@media (max-width: 1199.98px) {
  .clases-tablero { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .clases-barra .segmentado { flex: 1 1 100%; order: -1; }
  .clases-barra .segmentado button { flex: 1; justify-content: center; }
  .clases-barra .alumnas-buscar { flex-basis: 100%; }
  #clases-agrupar, #clases-profe, #clases-sala { flex: 1 1 45%; }
  .clases-tablero { display: flex; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; }
  .clases-dia { flex: 0 0 78%; scroll-snap-align: start; }
  .clases-lote .form-select { min-width: 0; flex: 1 1 100%; }
}

/* Cada alumna de la clase abre su ficha (panel lateral de la clase). */
.oc-persona--boton { width: 100%; border: 0; border-bottom: 1px solid #F0F3F1; background: transparent; text-align: left; border-radius: 8px; padding: 8px 6px; transition: background-color 0.15s; }
.oc-persona--boton:hover { background: #F4F8F5; }
.oc-persona--boton .oc-persona-nombre { flex: 1; min-width: 0; }
.oc-persona--boton > .bi { color: var(--zen-tinta-cl); font-size: 0.8rem; }
.oc-pie .btn { white-space: nowrap; }
.oc-pie-icono { flex: 0 0 40px; width: 40px; height: 40px; }

/* ════════════════════════════════════════════════════════════════════════
   Salas (salas.js + espacios.js), rehecha el 04-10-2026
   ════════════════════════════════════════════════════════════════════════
   Una tarjeta por sala (uso, plazas, sus clases), el mapa de su semana con
   los huecos pulsables para crear una clase, y «Buscar hueco». */
.salas-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.sala-tarjeta { background: #FFFFFF; border: 1px solid var(--zen-border); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 6px 18px rgba(34, 48, 42, 0.04); }
.sala-tarjeta > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sala-tarjeta-titulo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.sala-tarjeta-titulo h3 { margin: 0; font-family: var(--fuente-rotulos); font-size: 1.15rem; font-weight: 700; color: var(--zen-hondo); letter-spacing: -0.01em; }
.sala-tarjeta-desc { margin: -6px 0 0; font-size: 0.86rem; color: var(--zen-tinta-cl); }
.sala-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sala-cifras--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sala-cifras > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sala-cifras b { font-variant-numeric: tabular-nums; font-size: 1.2rem; font-weight: 600; color: var(--zen-hondo); line-height: 1.2; }
.sala-cifras span { font-size: 0.74rem; color: var(--zen-tinta-cl); line-height: 1.25; }
.sala-uso { height: 6px; border-radius: 999px; background: #EEF2EF; overflow: hidden; }
.sala-uso > span { display: block; height: 100%; border-radius: inherit; background: var(--zen-primary); }
.sala-tarjeta .grupo-aviso { margin: 0; }
.sala-clases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sala-clases button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 0; border-left: 3px solid var(--c); border-radius: 8px; background: color-mix(in srgb, var(--c) 8%, #FFFFFF); text-align: left; font-size: 0.86rem; transition: background-color 0.15s; }
.sala-clases button:hover { background: color-mix(in srgb, var(--c) 16%, #FFFFFF); }
.sala-clase-nombre { flex: 1; min-width: 0; color: var(--zen-hondo); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sala-clase-dato { font-variant-numeric: tabular-nums; font-size: 0.8rem; color: var(--zen-tinta-cl); white-space: nowrap; }
.sala-clases-mas { font-size: 0.8rem; color: var(--zen-tinta-cl); padding: 2px 4px; }
.sala-tarjeta-vacia { margin: 0; font-size: 0.86rem; color: var(--zen-tinta-cl); }
.sala-tarjeta > footer { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; border-top: 1px solid #F0F3F1; }
.sala-tarjeta > footer .btn { --bs-btn-padding-y: 0.3rem; --bs-btn-padding-x: 0.7rem; font-size: 0.82rem; }

/* El mapa de la semana de una sala. */
.salas-selector { width: auto; min-width: 220px; }
.salas-leyenda { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 0.8rem; color: var(--zen-tinta-cl); }
.salas-leyenda .sala-celda { display: inline-block; width: 14px; height: 14px; min-width: 0; border-radius: 4px; margin-left: 8px; }
.sala-mapa { width: 100%; border-collapse: separate; border-spacing: 3px; font-variant-numeric: tabular-nums; table-layout: fixed; }
.sala-mapa th { font-family: var(--fuente-rotulos); font-size: 0.72rem; font-weight: 600; color: var(--zen-tinta-cl); text-align: center; padding: 2px 4px; }
.sala-mapa thead th:first-child, .sala-mapa tbody th { width: 52px; text-align: right; padding-right: 8px; }
.sala-mapa td { padding: 0; }
.sala-celda { display: flex; align-items: center; justify-content: flex-start; width: 100%; min-width: 60px; height: 30px; border: 0; border-radius: 7px; padding: 0 6px; font-size: 0.72rem; font-weight: 600; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sala-celda--libre { justify-content: center; background: #FFFFFF; border: 1px dashed #CBD7CF; color: transparent; transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
button.sala-celda--libre:hover, button.sala-celda--libre:focus-visible { background: var(--estado-ok-fondo); border-color: var(--zen-primary); color: var(--estado-ok); }
.sala-celda--ocupada { background: color-mix(in srgb, var(--c, var(--zen-primary)) 22%, #FFFFFF); border-left: 3px solid var(--c, var(--zen-primary)); color: var(--zen-hondo); }
.salas-leyenda .sala-celda--ocupada { border-left-width: 0; }
/* Una clase de varias medias horas es un bloque: alto de sus filas más los
   huecos de border-spacing entre ellas, y el nombre puede partirse. */
.sala-celda--larga { height: calc(30px * var(--filas) + 3px * (var(--filas) - 1)); align-items: flex-start; padding-top: 7px; white-space: normal; line-height: 1.25; }
.sala-celda--cerrada { background: repeating-linear-gradient(135deg, #F1F2EE 0 6px, #E8EAE5 6px 12px); }
/* Una sala donde caben varias clases a la vez: cada día son tantas columnas
   como clases caben, con un respiro entre un día y el siguiente. */
.sala-mapa--carriles { min-width: 760px; }
.sala-mapa--carriles .sala-mapa-dia { padding-left: 8px; }
.sala-mapa--carriles .sala-celda { min-width: 0; }

/* Buscar hueco. */
.salas-buscador { display: flex; flex-direction: column; gap: 12px; }
.salas-buscador-fila { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.salas-buscador-fila .form-select { width: auto; min-width: 180px; }
.salas-huecos { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; align-items: start; }
.sala-hueco { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 8px 0; border-bottom: 1px solid #F0F3F1; }
.sala-hueco:last-child { border-bottom: 0; }
.sala-hueco-hora { font-family: var(--fuente-rotulos); font-weight: 700; color: var(--zen-hondo); font-variant-numeric: tabular-nums; min-width: 96px; }
.sala-hueco-sala { flex: 1; min-width: 0; font-size: 0.88rem; color: var(--zen-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sala-hueco-dur { font-size: 0.8rem; color: var(--zen-tinta-cl); }
.sala-hueco .btn { --bs-btn-padding-y: 0.25rem; --bs-btn-padding-x: 0.6rem; font-size: 0.8rem; }

/* El modal de pasar las clases. */
.sala-mover-lista { border: 1px solid var(--zen-border); border-radius: 12px; max-height: 300px; overflow-y: auto; }
.sala-mover-fila { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #F0F3F1; font-size: 0.88rem; }
.sala-mover-fila:last-child { border-bottom: 0; }
.sala-mover-fila > .bi { color: var(--estado-ok); }
.sala-mover-fila > span:not(.chip) { flex: 1; min-width: 0; color: var(--zen-hondo); }
.sala-mover-fila--choca > .bi { color: var(--estado-decision); }
.sala-mover-fila--choca small { flex-basis: 100%; padding-left: 24px; color: var(--estado-decision); }
.sala-mover-nota { margin: 10px 0 0; font-size: 0.86rem; color: var(--estado-decision); }
.sala-mover-nota:empty { display: none; }

/* Configuración: el horario de apertura. */
.apertura { display: flex; flex-direction: column; border: 1px solid var(--zen-border); border-radius: 14px; background: #FFFFFF; }
.apertura-fila { display: flex; align-items: center; gap: 16px; padding: 8px 14px; border-bottom: 1px solid #F0F3F1; }
.apertura-fila:last-child { border-bottom: 0; }
.apertura-dia { display: flex; align-items: center; gap: 10px; margin: 0; flex: 0 0 140px; cursor: pointer; font-family: var(--fuente-rotulos); font-weight: 600; color: var(--zen-hondo); }
.apertura-dia .form-check-input { margin: 0; }
.apertura-tramos { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 0.86rem; color: var(--zen-tinta-cl); }
.apertura-tramos .form-control { width: 116px; padding-top: 0.3rem; padding-bottom: 0.3rem; }
.apertura-y { margin: 0 4px; }
.apertura-cerrado { display: none; font-size: 0.86rem; color: var(--zen-tinta-cl); }
.apertura-fila--cerrada .apertura-tramos { display: none; }
.apertura-fila--cerrada .apertura-cerrado { display: inline; }

@media (max-width: 767.98px) {
  .salas-barra .segmentado { flex: 1 1 100%; }
  .salas-barra .segmentado button { flex: 1; justify-content: center; padding: 7px 8px; }
  .salas-rejilla, .salas-huecos { grid-template-columns: minmax(0, 1fr); }
  .sala-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apertura-fila { flex-wrap: wrap; gap: 6px; }
  .apertura-dia { flex-basis: 100%; }
  .apertura-tramos .form-control { width: 104px; }
  .sala-celda { min-width: 44px; font-size: 0.66rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   Horario (horario.js + horario-datos.js), rehecho el 04-10-2026
   ════════════════════════════════════════════════════════════════════════
   La barra de Asistencia, la vista Día (una sola columna, ancha), lo cerrado
   según el horario de apertura, los festivos, y la media hora libre que se
   pulsa para crear una clase. */
.horario-barra { gap: 10px; }
.horario-barra .asis-nav { flex: 1; }
#filtro-horario-sala, #filtro-horario-profe { flex: 0 1 200px; width: auto; min-width: 0; cursor: pointer; }
.horario-filtros { margin-bottom: 10px; }
.horario-leyenda { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 0.76rem; color: var(--zen-tinta-cl); }
.horario-leyenda > span { display: inline-flex; align-items: center; gap: 4px; }
.horario-leyenda-llena, .horario-leyenda-sinprofe, .horario-leyenda-cerrado { display: inline-block; width: 14px; height: 12px; border-radius: 3px; }
.horario-leyenda-llena { background: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--zen-hondo); }
.horario-leyenda-sinprofe { outline: 1.5px dashed var(--estado-decision); outline-offset: -1px; }
.horario-leyenda-cerrado { background: repeating-linear-gradient(135deg, #F1F2EE 0 4px, #E3E6E0 4px 8px); }

.horario-exportar { min-width: 300px; padding: 6px; border-radius: 12px; border-color: var(--zen-border); box-shadow: 0 12px 30px rgba(34, 48, 42, 0.12); }
.horario-exportar .dropdown-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 8px; white-space: normal; }
.horario-exportar .dropdown-item > .bi { color: var(--zen-primary); font-size: 1.05rem; margin-top: 1px; }
.horario-exportar .dropdown-item b { display: block; font-family: var(--fuente-rotulos); font-weight: 600; font-size: 0.9rem; color: var(--zen-hondo); }
.horario-exportar .dropdown-item small { display: block; font-size: 0.76rem; color: var(--zen-tinta-cl); }
.horario-exportar .dropdown-item:active { background: #F1F6F2; }

/* Vista Día: una columna ancha, sin el mínimo de siete. */
.horario--dia .horario-header-grid, .horario--dia .horario-grid-bg { grid-template-columns: 50px 1fr; min-width: 0; }
.horario--dia .evento-card { font-size: 0.82rem; padding: 6px 10px; }
.horario--dia .evento-sub { font-size: 0.76rem; }
.horario--dia .evento-aforo { font-size: 0.74rem; padding: 2px 6px; }

/* Lo cerrado, los festivos y los huecos que se pulsan. */
.horario-cerrado { position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(135deg, rgba(241, 242, 238, 0.85) 0 6px, rgba(227, 230, 224, 0.85) 6px 12px); }
.horario-col.dia-festivo { background: repeating-linear-gradient(135deg, rgba(245, 226, 220, 0.35) 0 8px, transparent 8px 16px); }
.horario-hueco { position: absolute; left: 2px; right: 2px; height: 25px; border: 0; padding: 0; background: transparent; z-index: 2; cursor: copy; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.horario-hueco span { opacity: 0; font-size: 0.66rem; font-weight: 700; color: var(--estado-ok); transition: opacity 0.12s; }
.horario-hueco:hover, .horario-hueco:focus-visible { background: var(--estado-ok-fondo); outline: 1px dashed var(--zen-primary); }
.horario-hueco:hover span, .horario-hueco:focus-visible span { opacity: 1; }

@media (max-width: 767.98px) {
  .horario-barra .segmentado { flex: 1 1 100%; order: -1; }
  .horario-barra .segmentado button { flex: 1; justify-content: center; }
  .horario-barra .asis-nav { flex: 1 1 auto; justify-content: space-between; order: 0; }
  .horario-barra .asis-hoy { order: 0; margin-left: 0; }
  #filtro-horario-sala, #filtro-horario-profe { order: 1; }
  #filtro-horario-sala, #filtro-horario-profe { flex: 1 1 45%; }
  .horario-leyenda { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   Equipo (equipo.js + equipo-datos.js), rehecho el 05-10-2026
   ════════════════════════════════════════════════════════════════════════
   Quien pide entrar arriba, las cifras y los avisos como en Cuentas, una
   tabla como la de Alumnas, qué ve cada rol, y dos modales: invitar y la
   ficha de una persona. */
.equipo-peticiones { margin-bottom: 18px; border-color: var(--estado-pendiente-fondo); box-shadow: inset 3px 0 0 var(--estado-pendiente); }
.equipo-peticion { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid #F0F3F1; }
.equipo-peticion:first-of-type { border-top: 0; }
.equipo-peticion-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.equipo-peticion-texto b { font-weight: 600; color: var(--zen-hondo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.equipo-peticion-texto span { font-size: 0.8rem; color: var(--zen-tinta-cl); }

.tabla-equipo { font-size: 0.92rem; min-width: 820px; }
.tabla-equipo .alumna-nombre .chip { margin-left: 4px; vertical-align: 1px; }
.equipo-acciones { display: inline-flex; align-items: center; gap: 2px; }
.equipo-atiende { margin: 8px 0 0 50px; font-size: 0.82rem; }

.equipo-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.equipo-roles > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px dashed var(--zen-border); border-radius: 14px; font-size: 0.84rem; color: var(--zen-tinta-cl); }
.equipo-roles b { display: flex; align-items: center; gap: 6px; font-family: var(--fuente-rotulos); font-weight: 600; font-size: 0.88rem; color: var(--zen-hondo); }
.equipo-roles .bi { color: var(--zen-primary); }

/* Invitar: los tres pasos, el código y el mensaje entero. */
.equipo-pasos { list-style: none; counter-reset: paso; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.equipo-pasos li { counter-increment: paso; position: relative; padding-left: 40px; display: flex; flex-direction: column; gap: 3px; font-size: 0.86rem; color: var(--zen-tinta-cl); }
.equipo-pasos li::before { content: counter(paso); position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: 50%; background: var(--zen-hondo); color: #FAF9F6; display: flex; align-items: center; justify-content: center; font-family: var(--fuente-rotulos); font-size: 0.8rem; font-weight: 700; }
.equipo-pasos b { font-family: var(--fuente-rotulos); font-weight: 600; font-size: 0.92rem; color: var(--zen-hondo); }
.equipo-codigo { display: flex; align-items: center; gap: 8px; margin: 4px 0 2px; padding: 8px 8px 8px 12px; border: 1px solid var(--zen-border); border-radius: 10px; background: #F7F8F5; }
.equipo-codigo code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 0.84rem; color: var(--zen-hondo); }
.equipo-mensaje { margin: 0 0 10px; padding: 12px 14px; border-radius: 12px; background: #F7F8F5; border: 1px solid var(--zen-border); font-family: inherit; font-size: 0.82rem; line-height: 1.5; color: var(--zen-text); white-space: pre-wrap; overflow-wrap: anywhere; }

/* La ficha de una persona. */
.miembro-avatar { font-family: var(--fuente-rotulos); font-weight: 700; font-size: 1rem; border-radius: 50%; background: var(--zen-hondo); color: #FAF9F6; }
.miembro-clases { display: flex; flex-direction: column; border: 1px solid var(--zen-border); border-radius: 12px; overflow: hidden; }
.miembro-clase { display: grid; grid-template-columns: 124px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px; border-top: 1px solid #F0F3F1; box-shadow: inset 3px 0 0 var(--c, var(--zen-primary)); font-size: 0.88rem; }
.miembro-clase:first-child { border-top: 0; }
.miembro-clase-cuando { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--zen-hondo); white-space: nowrap; }
.miembro-clase-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.miembro-clase-nombre small { margin-left: 8px; color: var(--zen-tinta-cl); }
.miembro-pasar { display: flex; gap: 8px; }
.miembro-franjas { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; font-size: 0.88rem; }
.miembro-franjas > div { display: grid; grid-template-columns: 100px 1fr; gap: 10px; }
.miembro-franjas b { font-weight: 600; color: var(--zen-hondo); }

/* El modal de disponibilidad, sin estilos en línea. */
.disp-dia { padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--zen-border); border-radius: 12px; }
.disp-dia-nombre { font-family: var(--fuente-rotulos); font-weight: 600; color: var(--zen-hondo); }
.franja-row .form-control { max-width: 130px; }
.ausencia-row .form-control { max-width: 170px; }

@media (max-width: 767.98px) {
  .equipo-roles { grid-template-columns: 1fr; }
  .equipo-peticion { flex-wrap: wrap; }
  .equipo-peticion-texto { flex-basis: calc(100% - 52px); }
  .miembro-clase { grid-template-columns: 1fr auto; }
  .miembro-clase-cuando { grid-column: 1 / -1; }
  .miembro-pasar { flex-direction: column; }
}

/* ════════════════════════════════════════════════════════════════════════
   Portal (portal_admin.js + captacion-datos.js), rehecho el 05-10-2026
   ════════════════════════════════════════════════════════════════════════
   Solicitudes como embudo (tarjetas con estado, contacto de un toque, nota),
   y el editor de Diseño / Contenido con el portal real en vivo a la derecha. */
.portal-barra { justify-content: space-between; }
.portal-estado .chip .bi { font-size: 0.55rem; }
.portal-estado .chip .bi-pause-circle { font-size: 0.8rem; }

/* Ajustes de la bandeja. */
.portal-ajustes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.portal-ajuste { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; background: #FFFFFF; border: 1px solid var(--zen-border); border-radius: 14px; font-size: 0.84rem; color: var(--zen-tinta-cl); }
.portal-ajuste b { font-family: var(--fuente-rotulos); font-weight: 600; color: var(--zen-hondo); font-size: 0.92rem; }
.portal-ajuste .form-check-label .chip { margin-left: 6px; }
.portal-plantilla summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.portal-plantilla summary::-webkit-details-marker { display: none; }
.portal-plantilla summary b::after { content: "\F282"; font-family: "bootstrap-icons"; font-size: 0.75rem; margin-left: 6px; color: var(--zen-tinta-cl); }
.portal-plantilla[open] summary b::after { content: "\F286"; }
.portal-sol-barra { margin-bottom: 10px; }

/* Una solicitud. */
.sol { background: #FFFFFF; border: 1px solid var(--zen-border); border-radius: 16px; padding: 16px 18px 14px; margin-bottom: 12px; box-shadow: 0 4px 14px rgba(34, 48, 42, 0.04); }
.sol--tarde { box-shadow: inset 3px 0 0 var(--estado-pendiente), 0 4px 14px rgba(34, 48, 42, 0.04); }
.sol--cerrada { background: #FBFBFA; }
.sol--cerrada .sol-quien b, .sol--cerrada .sol-pide { opacity: 0.75; }
.sol-cab { display: flex; align-items: center; gap: 12px; }
.sol-quien { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sol-quien b { font-family: var(--fuente-rotulos); font-weight: 600; font-size: 1rem; color: var(--zen-hondo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sol-quien span { font-size: 0.8rem; color: var(--zen-tinta-cl); }
.sol-quien em { font-style: normal; font-weight: 600; color: var(--estado-pendiente); }
.sol-pide { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 9px 12px; border-radius: 10px; background: #F4F6F3; font-size: 0.9rem; font-weight: 500; color: var(--zen-hondo); }
.sol-pide .bi { color: var(--zen-primary); margin-top: 1px; }
.sol-pide--destacado { background: var(--estado-auto-fondo); }
.sol-mensaje { margin: 10px 0 0; font-size: 0.88rem; line-height: 1.5; color: var(--zen-text); white-space: pre-line; }
.sol-detalle { margin: 6px 0 0; font-size: 0.82rem; color: var(--zen-tinta-cl); }
.sol-contacto { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 0.84rem; color: var(--zen-tinta-cl); }
.sol-contacto span { display: inline-flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.sol-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid #F0F3F1; }
.sol-rapidos, .sol-acciones { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sol-acciones .form-select { width: auto; min-width: 150px; }
.sol-notas { display: flex; gap: 8px; margin-top: 10px; }
.sol-notas .form-select { width: auto; flex: 0 0 auto; }
.sol-notas .form-control { background: #FAFBF9; border-style: dashed; }
.btn-whatsapp {
  --bs-btn-color: #128C4B; --bs-btn-bg: #FFFFFF; --bs-btn-border-color: #BFE5CD;
  --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: #25D366; --bs-btn-hover-border-color: #25D366;
  --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: #1DA851; --bs-btn-active-border-color: #1DA851;
}

/* El editor: campos a la izquierda, el portal en vivo a la derecha. */
.portal-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px; align-items: start; }
.portal-editor-panel { background: #FFFFFF; border: 1px solid var(--zen-border); border-radius: 16px; overflow: hidden; }
.portal-editor-panel form { padding: 4px 20px 8px; }
.portal-campo { padding: 18px 0; border-top: 1px solid #F0F3F1; }
.portal-campo:first-child { border-top: 0; }
.portal-campo-titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-family: var(--fuente-rotulos); font-weight: 700; font-size: 0.98rem; color: var(--zen-hondo); }
.portal-campo-titulo .bi { color: var(--zen-primary); }
.portal-publicado label { display: flex; flex-direction: column; }
.portal-publicado label span { font-size: 0.82rem; color: var(--zen-tinta-cl); }
.portal-logo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.portal-logo-caja { width: 72px; height: 72px; border-radius: 14px; border: 1px solid var(--zen-border); background: repeating-conic-gradient(#F3F4F1 0% 25%, #FFFFFF 0% 50%) 50% / 14px 14px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.portal-logo-caja img { max-width: 88%; max-height: 88%; object-fit: contain; }
.portal-colores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.portal-colores label { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--zen-border); border-radius: 12px; cursor: pointer; }
.portal-colores input[type=color] { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; flex-shrink: 0; }
.portal-colores input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.portal-colores input[type=color]::-webkit-color-swatch { border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 8px; }
.portal-colores span { display: flex; flex-direction: column; font-family: var(--fuente-rotulos); font-weight: 600; font-size: 0.86rem; color: var(--zen-hondo); line-height: 1.2; }
.portal-colores small { font-family: "Inter", system-ui, sans-serif; font-weight: 400; font-size: 0.74rem; color: var(--zen-tinta-cl); }
.portal-paletas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.portal-paletas:empty { display: none; }
.portal-paleta { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border: 1px solid var(--zen-border); border-radius: 999px; background: #FFFFFF; font-family: var(--fuente-rotulos); font-weight: 600; font-size: 0.82rem; color: var(--zen-hondo); }
.portal-paleta:hover, .portal-paleta.activo { border-color: var(--zen-hondo); }
.portal-paleta-muestra { display: inline-flex; align-items: center; gap: 3px; padding: 4px 6px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, 0.08); }
.portal-paleta-muestra i { width: 12px; height: 12px; border-radius: 50%; }
.portal-aviso { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: var(--estado-pendiente-fondo); color: var(--estado-pendiente); font-size: 0.82rem; }
.portal-fuentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.portal-fuente { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--zen-border); border-radius: 12px; background: #FFFFFF; text-align: left; transition: border-color 0.15s; }
.portal-fuente:hover { border-color: #B9C7BE; }
.portal-fuente.activo { border-color: var(--zen-hondo); box-shadow: inset 0 0 0 1px var(--zen-hondo); }
.portal-fuente-muestra { font-size: 1.6rem; font-weight: 700; color: var(--zen-hondo); line-height: 1; }
.portal-fuente-texto { display: flex; flex-direction: column; min-width: 0; }
.portal-fuente-texto b { font-family: var(--fuente-rotulos); font-size: 0.86rem; color: var(--zen-hondo); }
.portal-fuente-texto small { font-size: 0.72rem; color: var(--zen-tinta-cl); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-portada-caja { height: 120px; border-radius: 12px; border: 1px dashed var(--zen-border); background: #F7F8F5; display: flex; align-items: center; justify-content: center; color: var(--zen-tinta-cl); font-size: 0.82rem; }
.portal-portada-caja.con-foto { border-style: solid; background: var(--foto) center / cover no-repeat; }
.portal-secciones { display: flex; flex-direction: column; border: 1px solid var(--zen-border); border-radius: 12px; overflow: hidden; }
.portal-seccion { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-top: 1px solid #F0F3F1; font-size: 0.9rem; color: var(--zen-hondo); }
.portal-seccion:first-child { border-top: 0; }
.portal-seccion > span { flex: 1; font-weight: 500; }
.portal-seccion.oculta > span { color: #A3AFA7; text-decoration: line-through; }
.portal-seccion .fila-accion:disabled { opacity: 0.3; }
.portal-filas { display: flex; flex-direction: column; gap: 8px; }
.portal-fila { display: grid; gap: 6px; align-items: start; }
.portal-fila--precios { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr) minmax(0, 0.55fr) minmax(0, 1.2fr) 34px; }
.portal-fila--opiniones { grid-template-columns: minmax(0, 2fr) minmax(0, 0.8fr) 34px; }
.portal-fila--preguntas { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 34px; }
.portal-vacio { margin: 0; font-size: 0.84rem; color: #A3AFA7; }
.portal-guardar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 20px; background: #FAFBF9; border-top: 1px solid var(--zen-border); }
.portal-guardar-estado { margin-right: auto; font-size: 0.82rem; color: var(--zen-tinta-cl); }
.portal-guardar-estado.pendiente { color: var(--estado-pendiente); font-weight: 600; }

/* La vista previa en vivo. */
.portal-vista { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 10px; }
.portal-vista-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-family: var(--fuente-rotulos); font-size: 0.82rem; font-weight: 600; color: var(--zen-tinta-cl); }
.portal-vista-barra .segmentado button { padding: 5px 12px; font-size: 0.82rem; }
.portal-vista-marco { position: relative; height: calc(var(--vh-real, 100vh) - 220px); min-height: 520px; border-radius: 18px; overflow: hidden; background: #E9ECE7; border: 1px solid var(--zen-border); }
.portal-vista-marco iframe { display: block; border: 0; background: #FFFFFF; }
.portal-vista-marco--movil { display: flex; justify-content: center; padding: 14px 0; }
.portal-vista-marco--movil iframe { width: 390px; max-width: calc(100% - 20px); height: 100%; border-radius: 22px; box-shadow: 0 10px 30px rgba(34, 48, 42, 0.18); }
.portal-vista-marco--escritorio iframe { position: absolute; top: 0; left: 0; transform-origin: 0 0; }

@media (max-width: 1199.98px) {
  .portal-editor { grid-template-columns: minmax(0, 1fr); }
  .portal-vista { position: static; order: -1; }
  .portal-vista-marco { height: 560px; }
}
@media (max-width: 767.98px) {
  .portal-ajustes { grid-template-columns: minmax(0, 1fr); }
  .portal-barra .segmentado { flex: 1 1 100%; }
  .portal-barra .segmentado button { flex: 1; justify-content: center; padding: 7px 8px; }
  .portal-colores { grid-template-columns: minmax(0, 1fr); }
  .portal-fila--precios, .portal-fila--opiniones, .portal-fila--preguntas { grid-template-columns: minmax(0, 1fr) 34px; }
  .portal-fila > :not(.fila-accion) { grid-column: 1; }
  .portal-fila > .fila-accion { grid-row: 1; grid-column: 2; }
  .sol-pie { flex-direction: column; align-items: stretch; }
  .sol-acciones { justify-content: space-between; }
  .sol-notas { flex-direction: column; }
}

/* ════════════════════════════════════════════════════════════════════════
   Configuración (configuracion.js + configuracion-datos.js), 05-10-2026
   ════════════════════════════════════════════════════════════════════════
   Cuatro cifras que llevan a su sitio, lo que falta, cinco vistas en un panel
   blanco hecho de `.form-seccion`, y el indicador de guardado arriba. */
.config-estado { display: inline-flex; align-items: center; gap: 6px; font-family: var(--fuente-rotulos); font-size: 0.84rem; font-weight: 600; color: var(--zen-tinta-cl); }
.config-estado .spinner-border { width: 0.9rem; height: 0.9rem; border-width: 2px; }
.config-estado--guardado { color: var(--estado-ok); }
.config-estado--error { color: var(--estado-decision); }
.config-estado--pendiente { color: var(--estado-pendiente); }

button.config-cifra { border: 0; background: transparent; text-align: left; cursor: pointer; transition: background-color 0.15s; }
button.config-cifra:hover { background: #F7FAF8; }
.config-barra { margin-top: 2px; }

.config-panel { background: #FFFFFF; border: 1px solid var(--zen-border); border-radius: 16px; padding: 4px 28px; }
.config-panel fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.config-panel fieldset:disabled .form-seccion-cab { opacity: 0.85; }
.config-intro { margin: 20px 0 14px; color: var(--zen-tinta-cl); font-size: 0.92rem; }
.config-vista[data-vista="automatismos"] { padding-bottom: 22px; }
.config-dato { margin: 6px 0 0; font-family: var(--fuente-rotulos); font-weight: 600; font-size: 0.9rem; color: var(--zen-hondo); }
/* Recibos y facturas: el color del nombre del centro, con una muestra en la
   misma letra que el PDF (Helvetica en negrita y mayúsculas). */
.config-color-recibos { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.config-color-recibos .form-control-color { width: 56px; height: 44px; padding: 4px; }
.config-color-muestra { padding: 10px 18px; background: #FFFFFF; border: 1px solid var(--zen-border); border-radius: 10px; font-family: Helvetica, Arial, sans-serif; font-weight: 700; font-size: 1.35rem; letter-spacing: 0.01em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.config-nota-error { color: var(--estado-decision); font-weight: 600; }
.config-vacio { margin: 0; font-size: 0.86rem; color: #A3AFA7; }

/* Un interruptor con su explicación debajo. */
.config-panel .opcion-check { flex-direction: column; gap: 4px; cursor: default; margin-bottom: 0; }
/* Todos los interruptores de Configuración: el interruptor y su etiqueta en
   fila, con su hueco y del mismo tamaño en las seis vistas. Bootstrap lo
   coloca con padding-left en .form-switch y margin-left negativo en el
   input, y `.opcion-check .form-check-input { margin: 2px 0 0 }` anulaba ese
   margen: el interruptor quedaba metido hacia dentro, pegado a la etiqueta y
   desalineado con la explicación (16-10-2026). Con flex no depende de eso, y
   una etiqueta larga en el móvil se parte a su lado y no por debajo. */
#sec-configuracion .form-switch { display: flex; align-items: flex-start; gap: 10px; padding-left: 0; min-height: 0; }
#sec-configuracion .form-switch .form-check-input { float: none; flex-shrink: 0; width: 2.25rem; height: 1.25rem; margin: 1px 0 0; cursor: pointer; }
#sec-configuracion .form-switch .form-check-label { line-height: 1.35; cursor: pointer; }
/* La explicación, alineada con la etiqueta: el ancho del interruptor más el hueco. */
.config-panel .opcion-check > span { font-size: 0.82rem; color: var(--zen-tinta-cl); line-height: 1.45; padding-left: calc(2.25rem + 10px); }
.config-panel .opcion-check .form-check-label { font-family: var(--fuente-rotulos); font-weight: 600; color: var(--zen-hondo); }

/* Añadir con un campo y un botón. */
.config-anadir { display: flex; gap: 8px; max-width: 460px; }
.config-cierre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; max-width: 620px; }

/* Etiquetas: modalidades, niveles, días cerrados. */
.config-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.config-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border: 1px solid var(--zen-border); border-radius: 999px; background: #FFFFFF; font-size: 0.88rem; font-weight: 600; color: var(--zen-hondo); }
.config-chip > .bi { color: var(--zen-primary); }
.config-chip small { font-weight: 500; font-size: 0.76rem; color: var(--zen-tinta-cl); }
.config-chip-orden { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--zen-hondo); color: #FAF9F6; font-size: 0.7rem; font-weight: 700; }
.config-chip-quitar, .config-chip-mover { width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--zen-tinta-cl); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.config-chip-quitar:hover { background: var(--estado-decision-fondo); color: var(--estado-decision); }
.config-chip-mover:hover:not(:disabled) { background: #EEF1EE; color: var(--zen-hondo); }
.config-chip-mover:disabled { opacity: 0.25; }
.config-chip-accion { border: 0; background: transparent; padding: 2px 8px; border-radius: 999px; font-family: var(--fuente-rotulos); font-size: 0.78rem; font-weight: 600; color: var(--zen-primary); }
.config-chip-accion:hover { background: #EEF1EE; }
.config-chip--cierre { border-color: var(--estado-decision-fondo); background: #FDF7F5; }
.config-chip--cierre > .bi { color: var(--estado-decision); }
.config-chip--oficial { background: #FBF8F1; border-color: #EFE6D2; }
.config-chip--oficial > .bi { color: #9A7B3F; }
.config-chip--abre { background: #F7F8F5; }
.config-chip--abre .config-chip-fecha { text-decoration: line-through; color: var(--zen-tinta-cl); }
.config-pasados summary { cursor: pointer; font-size: 0.84rem; color: var(--zen-tinta-cl); }
.config-pasados .config-chip { opacity: 0.7; }

/* Créditos: una fila por tipo. */
.config-creditos { display: flex; flex-direction: column; border: 1px solid var(--zen-border); border-radius: 12px; overflow: hidden; }
.config-credito { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: end; padding: 12px 14px; border-top: 1px solid #F0F3F1; }
.config-credito:first-child { border-top: 0; }
.config-credito .form-label { font-size: 0.78rem; margin-bottom: 2px; }
.config-credito-que { align-self: center; display: flex; flex-direction: column; }
.config-credito-ancho { grid-column: span 2; }
.config-credito-que b { display: flex; align-items: center; gap: 6px; font-family: var(--fuente-rotulos); font-weight: 600; color: var(--zen-hondo); }
.config-credito-que b .bi { color: var(--zen-primary); }
.config-credito-que span { font-size: 0.8rem; color: var(--zen-tinta-cl); }

/* Bonos: el formulario de uno nuevo y la lista. */
.config-bono-nuevo { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)) minmax(0, 2fr) auto; gap: 8px; align-items: end; }
.config-bono-nuevo .form-label { font-size: 0.78rem; margin-bottom: 2px; }
/* En una consulta el bono no lleva días vista ni caducidad propia. */
.config-bono-nuevo:has(> .d-none) { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)) auto; }
.config-bonos { display: flex; flex-direction: column; border: 1px solid var(--zen-border); border-radius: 12px; overflow: hidden; }
.config-bonos:has(> .config-vacio) { border: 0; }
.config-bono { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; border-top: 1px solid #F0F3F1; }
.config-bono:first-child { border-top: 0; }
.config-bono-que { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.config-bono-que b { font-family: var(--fuente-rotulos); font-weight: 600; color: var(--zen-hondo); }
.config-bono-que span { font-size: 0.8rem; color: var(--zen-tinta-cl); }
.config-bono-ajuste { display: flex; flex-direction: column; gap: 2px; font-size: 0.74rem; color: var(--zen-tinta-cl); }
.config-bono-ajuste .form-control { width: 86px; }
/* Para qué clases sirve: «Cualquier clase» o «Solo Reformer». */
.config-bono-ajuste .form-select { width: 150px; }
/* Configuración → Avisos: qué aviso va al móvil, y si solo ahí. */
.avisos-canales { display: flex; flex-direction: column; border: 1px solid var(--zen-border); border-radius: 12px; overflow: hidden; }
.avisos-canal { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.6fr) 90px 100px; gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid #F0F3F1; font-size: 0.9rem; }
.avisos-canal:first-child { border-top: 0; }
.avisos-canal--cab { font-family: var(--fuente-rotulos); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--zen-tinta-cl); background: #FAFBFA; }
.avisos-canal > span:nth-child(n+3) { display: flex; justify-content: center; }
.avisos-canal-que { color: var(--zen-hondo); font-weight: 500; }
.avisos-canal-correo { font-size: 0.82rem; color: var(--zen-tinta-cl); }
.avisos-canal--fuera .avisos-canal-que { color: var(--zen-tinta-cl); }
.avisos-textos { display: flex; flex-direction: column; gap: 16px; }
.aviso-texto .form-label { font-size: 0.88rem; margin-bottom: 4px; }
.aviso-texto-huecos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.aviso-hueco { border: 1px solid var(--zen-border); background: #FAFBFA; color: var(--zen-hondo); border-radius: 999px; padding: 2px 10px; font-size: 0.78rem; font-family: var(--fuente-rotulos); }
.aviso-hueco:hover { border-color: var(--zen-primary); background: #F1F5F2; }
.aviso-texto-previa { margin: 6px 0 0; font-size: 0.82rem; color: var(--zen-tinta-cl); }
.aviso-texto-previa b { color: var(--zen-hondo); font-weight: 600; }
.aviso-texto-cuenta { margin-left: 6px; font-variant-numeric: tabular-nums; opacity: 0.8; }
.aviso-texto-mal { display: block; margin-top: 2px; color: var(--estado-pendiente); }
.avisos-antes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.avisos-antes .form-label { margin: 0; font-size: 0.88rem; }
.avisos-antes .form-select { width: 180px; }
.avisos-silencio { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.avisos-silencio .form-label { margin: 0; font-size: 0.88rem; }
.avisos-silencio .form-control { width: 120px; }
@media (max-width: 767.98px) {
  .avisos-canal--cab { display: none; }
  .avisos-canal { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 4px; }
  .avisos-canal-que { grid-column: 1 / -1; }
  .avisos-canal > span[data-label]::before { content: attr(data-label); font-size: 0.74rem; color: var(--zen-tinta-cl); margin-right: 6px; }
  .avisos-canal > span:nth-child(n+3) { justify-content: flex-start; align-items: center; }
}
/* Las categorías de cita de una consulta: nombre y precio, editables en la fila. */
.config-categoria-nueva { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.2fr) auto; gap: 8px; align-items: end; }
.config-categoria-nueva .form-label { font-size: 0.78rem; margin-bottom: 2px; }
.config-categoria-nombre { flex: 1; min-width: 0; margin: 0; }
.config-categoria-precio { flex: 0 0 140px; margin: 0; }
@media (max-width: 575.98px) {
  .config-categoria-nueva { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .config-categoria-nueva > div:first-child { grid-column: 1 / -1; }
  .config-categoria { flex-wrap: nowrap; }
  .config-categoria-precio { flex-basis: 110px; }
}

@media (max-width: 991.98px) {
  .config-bono-nuevo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .config-bono-nuevo .config-bono-nombre { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  .config-panel { padding: 4px 16px; }
  .config-barra .segmentado { flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; }
  .config-barra .segmentado button { flex: 0 0 auto; }
  .config-cierre { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .config-cierre .btn { grid-column: 1 / -1; }
  .config-credito { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .config-credito-que { grid-column: 1 / -1; }
  .config-bono { flex-wrap: wrap; }
  .config-bono-que { flex-basis: 100%; }
}

/* ── Configuración → Portal de la alumna / del paciente (config-portal-alumna.js),
   05-10-2026. El formulario a la izquierda y, a la derecha, un móvil con el
   portal tal y como lo verá: las mismas variables que el portal de verdad
   (marca-portal.js → variablesDeMarca) puestas en `.pa-vista`, y las mismas
   piezas de aviso y contacto, con sus estilos copiados aquí en pequeño. */
.pa-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.pa-formulario .form-seccion { grid-template-columns: 200px minmax(0, 1fr); gap: 12px 28px; }
.pa-formulario .form-seccion:first-child { border-top: 0; }
.pa-select { max-width: 360px; }
.pa-colores { display: flex; flex-wrap: wrap; gap: 10px; transition: opacity 0.15s; }
.pa-colores--apagados { opacity: 0.5; }
.pa-color { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border: 1px solid var(--zen-border); border-radius: 12px; background: #FFFFFF; cursor: pointer; margin: 0; }
.pa-color input[type="color"] { width: 38px; height: 38px; padding: 0; border: 1px solid var(--zen-border); border-radius: 9px; background: none; cursor: pointer; }
.pa-color b { display: block; font-family: var(--fuente-rotulos); font-size: 0.86rem; font-weight: 600; color: var(--zen-hondo); }
.pa-color small { display: block; font-size: 0.76rem; color: var(--zen-tinta-cl); font-variant-numeric: tabular-nums; }
.pa-logo-propio { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 4px; padding: 10px 12px; border: 1px dashed #D0D8D3; border-radius: 12px; }
.pa-logo-propio img { max-height: 44px; max-width: 140px; object-fit: contain; border-radius: 6px; }
.pa-logo-tamano:not([hidden]) { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 14px; }

.pa-previa { position: sticky; top: 16px; padding: 20px 0; }
.pa-previa-rotulo { font-family: var(--fuente-rotulos); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zen-tinta-cl); margin: 0 0 8px; text-align: center; }
.pa-movil { border: 8px solid #1F2622; border-radius: 34px; overflow: hidden; background: #1F2622; box-shadow: 0 18px 40px rgba(34, 48, 42, 0.18); }
.pa-vista {
  --marca-cab: var(--zen-hondo); --zen-primary: #6A8A76; --zen-bg: #FAF9F6; --zen-beige: #F3F1EB;
  height: 560px; overflow-y: auto; background: var(--zen-bg); color: #3D4A41; border-radius: 26px;
  font-family: var(--fuente-texto, 'Inter', system-ui, sans-serif); font-size: 13px;
}
.pa-v-cab { background: var(--marca-cab); color: var(--marca-cab-tinta, #FAF9F6); padding: 18px 16px 16px; }
/* En la proporción del portal de verdad (css/portal.css → .portal-cab-logo). */
.pa-v-logo { display: block; max-height: 64px; max-width: min(204px, 100%); object-fit: contain; background: #FFFFFF; border-radius: 10px; padding: 6px 10px; margin-bottom: 12px; }
.pa-v-logo--sin-placa { background: transparent; padding: 0; border-radius: 0; max-height: 73px; }
/* Los tamaños de css/portal.css (.portal-cab-logo--mediano / --grande), a la escala de la vista. */
.pa-v-logo--mediano { max-height: 84px; max-width: min(250px, 100%); }
.pa-v-logo--grande { width: 100%; height: auto; max-width: 100%; max-height: 132px; margin: 2px auto 14px; padding: 10px 14px; border-radius: 14px; }
.pa-v-logo--grande.pa-v-logo--sin-placa { padding: 0; border-radius: 0; }
.pa-v-rotulo { display: block; font-family: var(--fuente-rotulos); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--marca-cab-rotulo, #A8BFAE); }
.pa-v-nombre { display: block; font-family: var(--fuente-rotulos); font-size: 0.74rem; font-weight: 600; line-height: 1.2; margin-top: 3px; opacity: 0.8; }
.pa-v-cuerpo { padding: 4px 12px 18px; }
.pa-v-hola { display: block; font-family: var(--fuente-rotulos); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; margin-top: 6px; color: var(--marca-cab-tinta, #FAF9F6); }
.pa-v-bienvenida { margin: 3px 0 0; font-size: 0.76rem; line-height: 1.4; white-space: pre-line; opacity: 0.85; }
.pa-v-resumen { margin: 4px 0 0; font-size: 0.74rem; opacity: 0.85; }
.pa-v-proxima { background: #FFFFFF; border-radius: 14px; padding: 12px; box-shadow: 0 6px 16px rgba(34, 48, 42, 0.08), 0 0 0 1px rgba(34, 48, 42, 0.05); }
.pa-v-proxima b { display: block; font-family: var(--fuente-rotulos); font-size: 0.98rem; color: var(--zen-hondo); }
.pa-v-proxima small { display: block; color: #6E7C73; font-size: 0.74rem; }
.pa-v-cuando { display: block; font-family: var(--fuente-rotulos); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--zen-primary); margin-bottom: 3px; }
.pa-v-boton--borde { background: #FFFFFF; color: #A3402A; border: 1px solid #EBCFC7; }
.pa-vista .p-sec-titulo { font-family: var(--fuente-rotulos); font-size: 0.82rem; font-weight: 700; color: var(--zen-hondo); margin: 16px 4px 6px; }
.pa-vista .p-grupo { background: #FFFFFF; border-radius: 12px; box-shadow: 0 0 0 1px rgba(34, 48, 42, 0.06); overflow: hidden; }
.pa-vista .p-accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); gap: 4px; padding: 10px 6px 8px; }
.pa-vista .p-acceso { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.6rem; color: var(--zen-hondo); text-decoration: none; }
.pa-vista .p-acceso span { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--zen-primary) 14%, #FFFFFF); }
.pa-vista .p-direccion { border-top: 1px solid #EDF0EC; padding: 7px 10px; font-size: 0.66rem; color: #6E7C73; display: flex; gap: 5px; }
.pa-v-seccion { font-family: var(--fuente-rotulos); font-size: 0.82rem; font-weight: 700; color: var(--zen-hondo); margin: 12px 4px 6px; }
.pa-v-botones { display: flex; gap: 6px; margin-top: 9px; }
.pa-v-boton { flex: 1; text-align: center; border-radius: 999px; padding: 6px 8px; font-family: var(--fuente-rotulos); font-weight: 600; font-size: 0.76rem; background: var(--zen-hondo); color: #FAF9F6; }
.pa-v-boton--aviso { background: #F5E2DC; color: #A3402A; }
/* Las piezas que comparte con el portal (htmlAviso, htmlContacto), en pequeño. */
.pa-vista .p-destacado { display: flex; gap: 10px; border-radius: 14px; padding: 12px; margin-bottom: 10px; background: #EEF4F0; border: 1px solid #D5E4DA; }
.pa-vista .p-destacado--ambar { background: #FFF8EA; border-color: #F0DDB4; }
.pa-vista .p-destacado-icono { flex: 0 0 30px; height: 30px; border-radius: 9px; background: #FFFFFF; color: var(--zen-primary); display: flex; align-items: center; justify-content: center; }
.pa-vista .p-destacado--ambar .p-destacado-icono { color: #8F5C12; }
.pa-vista .p-destacado-texto { min-width: 0; }
.pa-vista .p-destacado-texto b { display: block; font-family: var(--fuente-rotulos); font-size: 0.86rem; color: var(--zen-hondo); }
.pa-vista .p-destacado-texto p { margin: 2px 0 0; font-size: 0.78rem; line-height: 1.4; overflow-wrap: anywhere; }
.pa-vista .p-bloque { background: #FFFFFF; border: 1px solid #E8EFEA; border-radius: 14px; padding: 12px; margin-top: 10px; }
.pa-vista .p-bloque-titulo { display: flex; align-items: center; gap: 6px; font-family: var(--fuente-rotulos); font-weight: 700; font-size: 0.84rem; color: var(--zen-hondo); margin: 0 0 4px; }
.pa-vista .p-bloque-titulo .bi { color: var(--zen-primary); }
.pa-vista .p-bloque-texto { font-size: 0.76rem; color: #6E7C73; margin: 0 0 8px; }
.pa-vista .p-contacto-botones { display: flex; flex-wrap: wrap; gap: 6px; }
.pa-vista .p-contacto-boton { flex: 1 1 90px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 8px; border-radius: 999px; border: 1px solid #E8EFEA; color: var(--zen-hondo); font-family: var(--fuente-rotulos); font-weight: 600; font-size: 0.74rem; text-decoration: none; pointer-events: none; }
.pa-vista .p-contacto-boton .bi { color: var(--zen-primary); }

@media (max-width: 1199.98px) {
  .pa-rejilla { grid-template-columns: minmax(0, 1fr); }
  .pa-previa { position: static; max-width: 340px; margin: 0 auto; padding-top: 0; }
  .pa-formulario .form-seccion { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* ── Los bonos en la ficha (participantes.js), 15-10-2026 ──────────────────
   Una fila por bono: qué es y cuándo caduca, su estado en chips (y «Sin
   cobrar» si se vendió para pagar después), y tres iconos — cobrar, ajustar,
   anular. «Ajustar» despliega debajo un panel con la caducidad, las clases
   usadas y el motivo; no es un modal porque ya estamos dentro de uno. */
.ficha-bono-vacio { color: var(--zen-tinta-cl); font-size: 0.88rem; margin-bottom: 6px; }
.ficha-bono-fila { padding: 8px 0; border-bottom: 1px solid #F0F3F1; }
.ficha-bono-fila:last-of-type { border-bottom: 0; }
.ficha-bono-fila-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ficha-bono-fila-texto { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ficha-bono-fila-texto b { font-size: 0.92rem; font-weight: 600; color: var(--zen-hondo); }
.ficha-bono-fila-texto span { font-size: 0.8rem; color: var(--zen-tinta-cl); }
.ficha-bono-fila-estado { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ficha-bono-fila-acciones { display: inline-flex; gap: 4px; }
.ficha-bono-fila--apagado .ficha-bono-fila-texto b { color: var(--zen-tinta-cl); font-weight: 500; }
.ficha-bono-ajuste { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--zen-border); border-radius: 12px; background: #FAFBF9; }
.ficha-bono-ajuste-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.ficha-bono-ajuste-campos .form-label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 0.8rem; }
.ficha-bono-ajuste-campos .form-text { margin: 0; font-size: 0.74rem; }
.ficha-bono-ajuste-motivo { grid-column: 1 / -1; }
.ficha-bono-ajuste-pie { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.ficha-bono-cambios { margin: 10px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--zen-border); list-style: none; font-size: 0.78rem; color: var(--zen-text); }
.ficha-bono-cambios li { padding: 2px 0; }
.ficha-bono-cambios li span { color: #A3AFA7; }
.ficha-bono-venta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ficha-bono-venta-tarifa { flex: 1 1 240px; max-width: 320px; }
.ficha-bono-venta-modalidad, .ficha-bono-venta-pago { flex: 0 1 180px; }
@media (max-width: 575px) {
  .ficha-bono-ajuste-campos { grid-template-columns: 1fr; }
}
.ficha-bono-pausa { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--zen-border); display: flex; flex-direction: column; gap: 8px; }
.ficha-bono-pausa-cab { display: flex; flex-direction: column; gap: 2px; font-size: 0.8rem; }
.ficha-bono-pausa-cab span { color: var(--zen-tinta-cl); }
.ficha-bono-pausa-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 0.82rem; color: var(--zen-text); }
.ficha-bono-pausa-nueva { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.ficha-bono-pausa-nueva .form-label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 0.8rem; flex: 1 1 140px; }
.ficha-bono-pausa-nueva .form-text { margin: 0; font-size: 0.74rem; }
.config-bono-portal { flex-direction: row; align-items: center; gap: 6px; white-space: nowrap; }
/* Lo que la alumna pide desde su portal, arriba de sus bonos (participantes.js). */
.ficha-peticion { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; margin-bottom: 10px; border-radius: 12px; background: var(--estado-pendiente-fondo); border: 1px solid #F0DDB4; }
.ficha-peticion-texto { display: flex; gap: 10px; font-size: 0.88rem; color: var(--zen-hondo); }
.ficha-peticion-texto > .bi { color: var(--estado-pendiente); margin-top: 2px; }
.ficha-peticion-texto small { color: var(--zen-tinta-cl); }
.ficha-peticion-texto em { display: block; margin-top: 2px; color: var(--zen-text); }
.ficha-peticion-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.ficha-peticion-acciones .form-select { width: auto; flex: 0 1 180px; }
/* La casilla «En el portal» lleva .bono-ajuste para que el autoguardado general
   no la recoja (la guarda su propia acción); sin esto heredaría su ancho. */
.config-bono-portal .form-check-input.bono-ajuste { width: 1em; height: 1em; padding: 0; margin: 0; border-radius: 0.25em; }

/* ── Alumnas → Bonos (bonos-vista.js), 15-10-2026 ──────────────────────────
   Un selector bajo el título separa las dos vistas; la de Bonos usa las piezas
   de siempre (cifras, barra, chips, tabla de Alumnas) para no cansar la vista
   con un estilo nuevo. Lo único propio: lo que piden desde el portal, arriba,
   en ámbar, y el resumen por tarifa plegado al final. */
.alumnas-vistas { margin: -8px 0 16px; }
.bonos-peticiones { margin-bottom: 16px; padding: 12px 16px; border-radius: 14px; background: var(--estado-pendiente-fondo); border: 1px solid #F0DDB4; }
.bonos-subtitulo { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-family: var(--fuente-rotulos); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--estado-pendiente); }
.bonos-peticion { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid rgba(143, 92, 18, 0.12); font-size: 0.9rem; color: var(--zen-hondo); }
.bonos-peticion:first-of-type { border-top: 0; }
.bonos-peticion small { color: var(--zen-tinta-cl); }
.bonos-barra { justify-content: space-between; }
.bonos-barra .alumnas-buscar { flex: 1 1 260px; max-width: 420px; }
.bonos-nombre { font-weight: 600; color: var(--zen-hondo); }
.bonos-uso { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.bonos-uso .oc-aforo { flex: 1; margin: 0; }
.bonos-estado { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.bonos-nota { font-size: 0.76rem; color: var(--zen-tinta-cl); }
.bonos-fila--apagada td { color: var(--zen-tinta-cl); }
.bonos-fila--apagada .alumna-nombre, .bonos-fila--apagada .bonos-nombre { color: var(--zen-tinta-cl); font-weight: 500; }
.bonos-tarifas { margin-top: 18px; border: 1px solid var(--zen-border); border-radius: 14px; background: #FFFFFF; overflow: hidden; }
.bonos-tarifas summary { padding: 12px 16px; cursor: pointer; font-family: var(--fuente-rotulos); font-weight: 600; color: var(--zen-hondo); }
.bonos-tarifas[open] summary { border-bottom: 1px solid var(--zen-border); }
@media (max-width: 767px) {
  .bonos-peticion { flex-direction: column; align-items: flex-start; }
}

/* Alta rápida de un paciente desde el formulario de la cita (19-10-2026). */
.cita-paciente-nuevo { margin-top: 12px; padding: 12px 14px; border: 1px dashed var(--zen-border); border-radius: 12px; background: #FAFBFA; }

/* ── Avisos (js/avisos.js) ──────────────────────────────────────────────────
   La sección: atajos de un toque y el historial. El redactor: condiciones,
   mensaje con huecos y vista previa, canales. La cola de WhatsApp. */
.avisos-atajos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 20px; }
.avisos-atajo { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--zen-border); border-radius: 14px; background: #FFFFFF; text-align: left; transition: border-color 0.15s, box-shadow 0.15s; }
.avisos-atajo:hover { border-color: var(--zen-primary); box-shadow: 0 4px 14px rgba(34, 48, 42, 0.06); }
.avisos-atajo > .bi { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(106, 138, 118, 0.12); color: var(--zen-primary); font-size: 1rem; }
.avisos-atajo span { display: flex; flex-direction: column; min-width: 0; }
.avisos-atajo b { font-family: var(--fuente-rotulos); font-weight: 600; color: var(--zen-hondo); }
.avisos-atajo small { color: var(--zen-tinta-cl); font-size: 0.8rem; }
.avisos-panel { background: #FFFFFF; border: 1px solid var(--zen-border); border-radius: 16px; padding: 18px 20px; }
.avisos-panel-titulo { font-family: var(--fuente-rotulos); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zen-tinta-cl); margin: 0 0 12px; }
.avisos-vacio { padding: 28px 12px; text-align: center; color: var(--zen-tinta-cl); }
.avisos-vacio .bi { font-size: 1.6rem; color: #B9C7BE; }
.avisos-vacio p { margin: 8px 0 0; }
.aviso-hist { padding: 14px 0; border-top: 1px solid var(--zen-border); }
.aviso-hist:first-child { border-top: 0; padding-top: 0; }
.aviso-hist-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.aviso-hist-cab b { color: var(--zen-hondo); font-weight: 600; overflow-wrap: anywhere; }
.aviso-hist-cab span { flex: none; font-size: 0.8rem; color: var(--zen-tinta-cl); }
.aviso-hist-destino { margin-top: 2px; font-size: 0.86rem; color: var(--zen-tinta-cl); }
.aviso-hist-canales { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.aviso-hist-canales .chip { text-transform: none; letter-spacing: 0; font-size: 0.74rem; }
.aviso-hist-mas { margin-top: 8px; font-size: 0.86rem; }
.aviso-hist-mas summary { color: var(--zen-primary); cursor: pointer; font-weight: 500; }
.aviso-hist-texto { margin: 8px 0 10px; padding: 10px 12px; border-radius: 10px; background: #F7F8F5; white-space: pre-line; color: var(--zen-text); }

.aviso-criterio { padding: 12px; margin-bottom: 8px; border: 1px solid var(--zen-border); border-radius: 12px; background: #FAFBF9; }
.aviso-criterio-cab { display: flex; align-items: center; gap: 8px; }
.aviso-criterio-cab .form-select { flex: 1; font-weight: 500; }
.aviso-y { font-family: var(--fuente-rotulos); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--zen-primary); }
.aviso-campos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.aviso-campo { display: flex; flex-direction: column; gap: 3px; min-width: 150px; flex: 1; font-size: 0.78rem; color: var(--zen-tinta-cl); }
.aviso-campo--ancho { flex-basis: 100%; }
.aviso-clases { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; max-height: 210px; overflow-y: auto; margin-top: 10px; padding-right: 4px; }
.aviso-clase { display: flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 0.84rem; cursor: pointer; }
.aviso-clase .form-check-input { margin: 0; flex: none; }
.aviso-clase-color { width: 4px; height: 16px; border-radius: 3px; background: var(--clase-color); flex: none; }
.aviso-manual { margin-top: 10px; }
.aviso-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.aviso-chips .chip { text-transform: none; letter-spacing: 0; font-size: 0.78rem; }
.aviso-chip-quitar { border: 0; background: transparent; padding: 0 0 0 4px; line-height: 1; color: inherit; font-size: 0.95rem; }
.aviso-mas { --bs-btn-padding-x: 0.4rem; margin: 2px 0 0 -0.4rem; }
.aviso-resultado { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #F3F8F4; }
.aviso-resultado-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--zen-hondo); }
.aviso-resultado-cab b { font-size: 1.05rem; }
.aviso-nota { margin: 6px 0 0; font-size: 0.82rem; color: var(--zen-tinta-cl); }
.aviso-lista { max-height: 280px; overflow-y: auto; margin-top: 10px; border-top: 1px solid #DCE8DF; }
.aviso-persona { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid #E6EFE8; cursor: pointer; }
.aviso-persona .form-check-input { margin: 0; flex: none; }
.aviso-persona-nombre { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 0.88rem; color: var(--zen-hondo); }
.aviso-persona-nombre small { font-size: 0.76rem; color: var(--zen-tinta-cl); }
.aviso-persona--fuera .aviso-persona-nombre { color: #A3AFA7; text-decoration: line-through; }
.aviso-persona-vias { display: flex; gap: 8px; color: var(--zen-primary); font-size: 0.9rem; }
.aviso-persona-vias [data-apagado] { color: #CDD6D0; }

.aviso-huecos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 0.8rem; color: var(--zen-tinta-cl); }
.aviso-huecos .chip { border: 0; text-transform: none; letter-spacing: 0; font-size: 0.78rem; cursor: pointer; background: #EEF4F0; color: var(--zen-hondo); }
.aviso-huecos .chip:hover { background: #DCE8DF; }
.aviso-alerta { display: flex; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: 10px; font-size: 0.84rem; background: var(--estado-info-fondo); color: var(--estado-info); }
.aviso-alerta--pendiente { background: var(--estado-pendiente-fondo); color: var(--estado-pendiente); }
.aviso-vista { margin-top: 14px; padding: 12px; border: 1px solid var(--zen-border); border-radius: 12px; background: #FAFBF9; }
.aviso-vista-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; font-family: var(--fuente-rotulos); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zen-tinta-cl); }
.aviso-vista-para { margin: 0 0 8px; font-size: 0.8rem; color: var(--zen-tinta-cl); }
.aviso-vista-correo { padding: 14px 16px; border-radius: 10px; background: #FFFFFF; border: 1px solid var(--zen-border); font-size: 0.88rem; }
.aviso-vista-de { padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--zen-border); color: var(--zen-tinta-cl); }
.aviso-vista-correo p, .aviso-vista-wa p, .aviso-vista-portal p { margin: 0 0 8px; }
.aviso-vista-boton { display: inline-block; margin-top: 4px; padding: 6px 12px; border-radius: 6px; background: #3f6b55; color: #FFFFFF; font-size: 0.8rem; font-weight: 600; }
.aviso-vista-movil { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; background: #FFFFFF; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); font-size: 0.84rem; }
.aviso-vista-movil b { color: var(--zen-hondo); }
.aviso-vista-portal { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #FFFFFF; border: 1px solid var(--zen-border); border-left: 3px solid var(--zen-primary); font-size: 0.88rem; }
.aviso-vista-portal > .bi { color: var(--zen-primary); }
.aviso-vista-wa { max-width: 92%; padding: 10px 12px; border-radius: 0 12px 12px 12px; background: #DCF8C6; color: #1F2A23; font-size: 0.88rem; }

.aviso-canal--apagado, .aviso-canal:has(.form-check-input:disabled) { opacity: 0.6; cursor: not-allowed; }
.aviso-canal small { display: block; }
.aviso-portal-hasta:not([hidden]) { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.82rem; color: var(--zen-tinta-cl); }
.aviso-todas { padding: 12px 14px; border: 1px solid var(--zen-primary); border-radius: 12px; background: #F6F9F7; font-size: 0.88rem; }
.aviso-todas p { margin: 0 0 6px; }
.aviso-todas small { color: var(--zen-hondo); font-weight: 500; }

.cola-wa-progreso { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--zen-tinta-cl); margin-bottom: 14px; }
.cola-wa-barra { flex: 1; height: 6px; border-radius: 3px; background: #E6EFE8; overflow: hidden; }
.cola-wa-barra i { display: block; height: 100%; background: var(--zen-primary); }
.cola-wa-persona { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.cola-wa-persona b { font-size: 1.05rem; color: var(--zen-hondo); }
.cola-wa-persona span { font-size: 0.84rem; color: var(--zen-tinta-cl); }
.cola-wa-botones { display: flex; gap: 8px; margin-top: 14px; }
.cola-wa-fin { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 0; text-align: center; color: var(--zen-hondo); }
.cola-wa-fin .bi { font-size: 2rem; color: var(--estado-ok); }

/* Avisos, fase 2: cuota del día, plantillas del centro, programados, «Deshacer»
   y las comunicaciones de la ficha. */
.avisos-cuota:empty { display: none; }
.avisos-cuota { margin: -8px 0 16px; font-size: 0.84rem; color: var(--zen-tinta-cl); }
.avisos-columnas { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 991px) { .avisos-columnas { grid-template-columns: 1fr; } }
.avisos-subtitulo-bloque { margin: 6px 0 4px; font-family: var(--fuente-rotulos); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zen-primary); }
.avisos-subtitulo-bloque ~ .avisos-subtitulo-bloque { margin-top: 18px; }
.aviso-hist--programado { background: #F6F9F7; border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; border-top: 0; }
.aviso-hist-destino .chip { text-transform: none; letter-spacing: 0; font-size: 0.74rem; margin-right: 4px; }
.aviso-hist-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; }
.aviso-plantilla { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--zen-border); }
.aviso-plantilla:first-child { border-top: 0; padding-top: 0; }
.aviso-plantilla-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.aviso-plantilla-texto b { color: var(--zen-hondo); font-weight: 600; font-size: 0.9rem; }
.aviso-plantilla-texto small { color: var(--zen-tinta-cl); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aviso-guardar-plantilla { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; }
.aviso-guardar-plantilla .btn-terciario { --bs-btn-padding-x: 0.4rem; }
.aviso-guardar-plantilla-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }
.aviso-guardar-plantilla-form .form-control { flex: 1; min-width: 200px; }
.aviso-cuenta--pasa { color: var(--estado-decision); font-weight: 500; }
.aviso-cuando { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--zen-border); }
.aviso-cuando .modal-rotulo { margin-bottom: 8px; }
.aviso-cuando-programado:not([hidden]) { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.aviso-cuando-programado small { font-size: 0.8rem; color: var(--zen-tinta-cl); }
.segmentado button:disabled { opacity: 0.55; cursor: not-allowed; }
.aviso-deshacer { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 1090; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 10px 12px 10px 16px; border-radius: 14px; background: var(--zen-hondo); color: #FFFFFF; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22); font-size: 0.9rem; }
.aviso-deshacer > span:not(.spinner-border) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aviso-deshacer .btn-terciario { --bs-btn-color: #FFFFFF; --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: rgba(255, 255, 255, 0.12); --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: rgba(255, 255, 255, 0.2); }
.aviso-deshacer .btn-primary { --bs-btn-bg: #FFFFFF; --bs-btn-color: var(--zen-hondo); --bs-btn-border-color: #FFFFFF; --bs-btn-hover-bg: #EEF4F0; --bs-btn-hover-color: var(--zen-hondo); --bs-btn-hover-border-color: #EEF4F0; }
.oc-coms { list-style: none; margin: 0; padding: 0; }
.oc-com { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; border-top: 1px solid #EEF2EF; }
.oc-com:first-child { border-top: 0; }
.oc-com > .bi { color: var(--zen-primary); margin-top: 2px; }
.oc-com-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 0.86rem; }
.oc-com-texto b { font-weight: 500; color: var(--zen-hondo); overflow-wrap: anywhere; }
.oc-com-texto small { font-size: 0.76rem; color: var(--zen-tinta-cl); }
.oc-com-vias { display: flex; gap: 6px; color: var(--zen-tinta-cl); font-size: 0.85rem; }
.oc-coms-mas { margin-top: 6px; font-size: 0.84rem; }
.oc-coms-mas summary { color: var(--zen-primary); cursor: pointer; }