/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   Selah · direccion.css (13 oct · DISENO.md §4) · Supervisión, Dirección, Pedagogía, Pagos profesores.
   JS: supervision.js, direccion.js, direccion-pedagogia.js, pagos-profesores.js. Diseño por vista: docs/diseno-direccion.md.
   Quién la usa: Camilo y la dirección, para ver de un vistazo qué falta en toda la escuela y validar. Vista de pájaro:
   pocas cifras grandes arriba, listas densas y ordenadas debajo. Sin color de instrumento en ninguna parte.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ───────────── piezas comunes del área ───────────── */

/* Antigüedad de un pendiente: una sola regla en Supervisión y Dirección (supervision.js · tonoEdad). Gris hasta 7 días
   (reciente), ámbar de 8 a 14 (atrasado), rojo después de 14 (vencido). */
.sp-edad { font: 500 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); white-space: nowrap; }
.sp-edad.atrasado { font-weight: 600; color: var(--aviso-texto); }
.sp-edad.vencido { font-weight: 600; color: var(--peligro-texto); }

/* «Al día»: el vacío común de componentes.css (ronda 3 · un solo patrón: ícono gris, una frase, el detalle). */

/* Nada se corta en seco (RONDA-3 §6): una lista que se desliza dentro de su tarjeta se funde al pie con el blanco de la
   tarjeta (un degradado fijo abajo, que no tapa nada cuando se llega al final: ocupa su propio hueco). */
:is(.sup-profesores, .sp-tabla, .pp-semanas, .pp-dias)::after {
  content: ""; position: sticky; bottom: 0; z-index: 2; display: block; height: 20px; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--sup) 0%, transparent), var(--sup));
}
/* Las que se deslizan sobre el fondo (sin tarjeta): el degradado es una máscara al pie, sobre su propio relleno. */
.sup-secciones, .vista-alumnos-todos .columnas-alumnos {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent); mask-image: linear-gradient(#000 calc(100% - 24px), transparent);
}

/* Un pendiente: qué falta · fecha · antigüedad · flecha. Fila de 34 px. */
.sp-grupo ul { display: grid; }
.sp-item {
  display: grid; grid-template-columns: minmax(0, 1fr) 92px 100px 16px; align-items: center; column-gap: 12px; width: 100%; min-height: 34px;
  padding: 6px 8px; border-radius: var(--r-s); text-align: left; font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta);
  transition: background-color var(--dur) var(--ease);
}
:where(html:not(.puntero-quieto)) .sp-item:hover { background: var(--sup-2); }
.sp-texto { min-width: 0; }
.sp-fecha { font-size: var(--t-m); color: var(--tinta-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sp-flecha { width: 16px; height: 16px; color: var(--tinta-4); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
:where(html:not(.puntero-quieto)) .sp-item:hover .sp-flecha { transform: translateX(2px); color: var(--acento); }
/* El grupo: «Piano 9:30» y el día en gris y en minúscula, siempre igual. */
.sp-grupo-titulo { display: flex; align-items: baseline; gap: 6px; min-width: 0; padding: 7px 0; font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.sp-grupo-titulo b { font: 600 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta); white-space: nowrap; }
.sp-nombre { display: grid; min-width: 0; }
.sp-nombre b { font: 600 var(--t-l)/var(--lh-l) var(--f-ui); color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-nombre small { font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }

/* ───────────── Supervisión › Pendientes (Camilo) ─────────────
   Una sola tabla a todo el ancho, con secciones por profesor: cada grupo a la izquierda, sus pendientes a la derecha. */
.sp-lista .sup-profesores {
  flex: 0 1 auto; min-height: 0; overflow-y: auto;
  background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--s-1);
}
.sp-lista .sup-profesor + .sup-profesor { border-top: 1px solid var(--linea); }
.sp-lista .sp-cab {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 24px 8px 20px;
  background: var(--sup-2); border-bottom: 1px solid var(--linea);
}
.sp-lista .sp-nombre { flex: 1; display: flex; align-items: baseline; gap: 8px; }
.sp-lista .sp-cuenta { font: 500 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.sp-lista .sp-grupo { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 12px; padding: 4px 12px 4px 20px; }
.sp-lista .sp-grupo + .sp-grupo { border-top: 1px solid var(--linea); }
.sp-lista .sp-grupo-titulo { padding-top: 8px; }
/* 15 oct · RONDA-FINAL §4: la cuenta del profesor, cada tipo con su cifra («3 por completar · 6 por validar»), en gris
   (el color lo dice cada clase); un tipo en cero, más tenue. Las clases por validar, en su bloque al final del profesor. */
.sp-lista .sp-cuenta { display: inline-flex; align-items: baseline; gap: 6px; font: 500 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta-2); }
.sp-cuenta-tipo { white-space: nowrap; }
.sp-cuenta-tipo b { font-weight: 700; color: var(--tinta); }
.sp-cuenta-sep { color: var(--tinta-4); }
.sp-cuenta-tipo.cero, .sp-cuenta-tipo.cero b { color: var(--tinta-3); font-weight: 500; }
.sp-validar-etq { font-weight: 600; color: var(--tinta); }
.sp-validar-grupo { color: var(--tinta-2); }
.sp-item .cf-lista { padding: 2px 0; }

/* ───────────── Supervisión › Clases, grupo y Alumnos (el marco; las tarjetas son del área profesor) ───────────── */
.vista-clases-todos .titulo-fila { align-items: center; }
.tf-hueco { flex: 1; }
/* Una fila por profesor (o por día): el nombre en una columna de 180 px, sus grupos en tarjetas compactas a la derecha. */
.sup-secciones { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; padding: 0 0 24px; }
.sup-seccion { display: grid; grid-template-columns: 180px minmax(0, 1fr); column-gap: 20px; padding: 16px 0; }
.sup-seccion + .sup-seccion { border-top: 1px solid var(--linea); }
.sup-seccion-titulo { align-self: start; display: grid; row-gap: 0; padding-top: 2px; font: 600 var(--t-l)/var(--lh-l) var(--f-ui); color: var(--tinta); }
/* Sin avatar ni ícono: el nombre basta (las iniciales de Juanma y Juanes eran la misma «J»). */
.sup-seccion-titulo > :is(.avatar, .disco) { display: none; }
.sup-seccion-titulo > span:not(.avatar):not(.disco) { min-width: 0; overflow-wrap: anywhere; }
.sup-seccion-titulo small { font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
/* El número de pendientes del profesor, en texto; la marca vive en la tarjeta del grupo. */
.sup-seccion-titulo .sup-pend { justify-self: start; height: auto; padding: 0; background: none; font: 500 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-2); }
.sup-seccion-titulo .sup-pend .ic { display: none; }
.vista-clases-todos .sup-seccion .rejilla-grupos, .vista-clases-todos .sup-seccion .rejilla-grupos[data-n] {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; align-content: start; align-items: start;
  overflow: visible; margin: 0; padding: 0; max-width: none;
}
/* Tarjeta compacta: el área profesor (profesor.css) la dibuja. Ronda 3: cada una con su alto (sin 80 px vacíos para
   igualar a la vecina que tiene pendientes). */
.vista-clases-todos .tarjeta-grupo { max-width: none; width: auto; }
/* Leyenda de una línea junto al título (supervision.js · ClasesEscuela): el color de la marca es la antigüedad. */
.sup-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-width: 0; margin-left: 8px; font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.sup-ley-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sup-ley-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--tinta-4); }
.sup-ley-item[data-edad="atrasado"] .sup-ley-punto { background: var(--aviso); }
.sup-ley-item[data-edad="vencido"] .sup-ley-punto { background: var(--peligro); }
/* 15 oct · RONDA-FINAL §2: las casillas de lo que falta (profesor.css · .cf-*) llevan el tono de la clase, también aquí:
   roja si ya pasó, ámbar si es de hoy. La leyenda muestra las dos casillas; la antigüedad sigue escrita en Pendientes. */
.sup-ley-item[data-tono] .sup-ley-punto { width: 11px; height: 11px; border: 1.5px solid var(--aviso); border-radius: 3px; background: var(--aviso-fondo); }
.sup-ley-item[data-tono="vencida"] .sup-ley-punto { border-color: var(--peligro); background: var(--peligro-fondo); }

/* Supervisión › un grupo: cada sesión es una fila de lectura. El supervisor no «empieza» clases: el botón queda quieto y se
   va con la ficha abierta; la asistencia sin tomar es una línea (no un bloque); el momento que falta se marca. */
body[data-portal="supervision"] .ficha-cab .boton.primario { background: transparent; border-color: transparent; box-shadow: none; color: var(--acento-texto); }
body[data-portal="supervision"] .ficha-cab .boton.primario .ic { display: none; }
body[data-portal="supervision"] .ficha:not(.plegada) .ficha-cab .boton { display: none; }
body[data-portal="supervision"] .ficha .alerta-grande { padding: 0; background: none; font-weight: 600; color: var(--tinta-2); }
body[data-portal="supervision"] .ficha .alerta-grande .ic { width: 16px; height: 16px; }
body[data-portal="supervision"] .ficha .caras-sin-tomar { color: var(--tinta-2); }
body[data-portal="supervision"] .ficha[data-falta="hoy"] :is(.alerta-grande, .caras-sin-tomar) { color: var(--aviso-texto); }
body[data-portal="supervision"] .ficha[data-falta="vencida"] :is(.alerta-grande, .caras-sin-tomar) { color: var(--peligro-texto); }
/* Ronda 3 · el momento que falta: borde gris y la palabra «Falta» (ámbar solo si ya pasó una semana; rojo después de dos),
   nunca cuatro cajas pintadas a la vez. La cabecera de la fecha sigue la misma regla de antigüedad que Pendientes. */
/* 15 oct · RONDA-FINAL §2: el momento que falta lleva el borde del tono de la clase (profesor.css) y «· vacío» (REGLAS-TEXTO). */
body[data-portal="supervision"] .ficha:not(.futura):not(.validada) .momento.vacio { background: var(--sup); }
body[data-portal="supervision"] .ficha:not(.futura):not(.validada):not([data-falta]) .momento.vacio { border-color: var(--linea-2); }
body[data-portal="supervision"] .ficha:not(.futura):not(.validada) .momento.vacio .momento-cab::after { content: " · vacío"; font-weight: 600; }
body[data-portal="supervision"] .og-aldia { display: none; }
body[data-portal="supervision"] .og-grupo[data-falta="hoy"] .og-pt { color: var(--aviso-texto); background: var(--aviso-fondo); }
body[data-portal="supervision"] .og-grupo[data-falta="vencida"] .og-pt { color: var(--peligro-texto); background: var(--peligro-fondo); }

/* Alumnos (40 personas): columnas de grupo en flujo de columnas, filas de 36 px con la edad en la misma línea, buscador. */
.vista-alumnos-todos .titulo-fila { align-items: center; }
.sup-buscar {
  position: relative; display: flex; align-items: center; flex: 0 1 280px; min-width: 180px; margin-left: auto;
}
.sup-buscar > .ic { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--tinta-3); pointer-events: none; }
.sup-buscar-campo { width: 100%; height: 36px; padding-left: 34px; font-size: var(--t-m); }
.vista-alumnos-todos .columnas-alumnos, .vista-alumnos-todos .columnas-alumnos[data-n] {
  flex: 1; min-height: 0; display: block; columns: 260px; column-gap: 16px; overflow-y: auto; margin: 0; padding: 2px 2px 24px;
}
.vista-alumnos-todos .col-grupo { break-inside: avoid; width: 100%; max-width: none; min-height: 0; margin: 0 0 14px; gap: 6px; }
.vista-alumnos-todos .mini-titulo { flex-wrap: nowrap; font-size: var(--t-m); line-height: var(--lh-m); }
.vista-alumnos-todos .mini-titulo > span { flex: none; }
.vista-alumnos-todos .mini-titulo small { flex: 1; min-width: 0; font-size: var(--t-s); line-height: var(--lh-s); }
.vista-alumnos-todos .alumno-fila { min-height: 36px; gap: 10px; padding: 4px 10px 4px 10px; }
.vista-alumnos-todos .alumno-fila .avatar { width: 24px !important; height: 24px !important; font-size: 10px !important; }
.vista-alumnos-todos .af-texto { display: flex; align-items: baseline; gap: 8px; }
.vista-alumnos-todos .af-texto b { flex: 1; min-width: 0; font-size: var(--t-m); line-height: var(--lh-m); }
.vista-alumnos-todos .af-texto span { flex: none; font-variant-numeric: tabular-nums; }
.vista-alumnos-todos :is(.col-grupo, .alumno-fila, .sup-buscar-vacio)[hidden] { display: none !important; }
/* 15 oct · RONDA-FINAL §4: una sola superficie para toda la escuela; cada grupo es su título y sus filas, sin caja propia
   (antes, una tarjeta por grupo: quince cajas). Las columnas se separan con una línea fina. */
.vista-alumnos-todos .columnas-alumnos, .vista-alumnos-todos .columnas-alumnos[data-n] {
  flex: 0 1 auto; column-gap: 28px; column-rule: 1px solid var(--linea); padding: 16px 20px 12px;
  background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--s-1);
  -webkit-mask-image: none; mask-image: none;
}
.vista-alumnos-todos .col-grupo { gap: 2px; margin: 0 0 16px; }
.vista-alumnos-todos .mini-titulo { padding: 0; }
.vista-alumnos-todos .col-lista { overflow: visible; background: none; border: 0; border-radius: 0; box-shadow: none; }
.vista-alumnos-todos .alumno-fila { min-height: 34px; padding: 4px 4px; border-radius: var(--r-s); border-bottom-color: var(--linea); }
.vista-alumnos-todos .alumno-fila .af-ir { display: none; }
.sup-buscar-vacio > .ic { width: 28px; height: 28px; color: var(--tinta-4); }
/* Horario: solo la vista general de la escuela (sin «Vista del profesor»). */
.horario-supervision [data-conmutador="vista"] { display: none; }

/* ───────────── Dirección · marco de cada pestaña ─────────────
   Dos niveles: la barra del portal y la fila de título del contenido, con el enlace al portal del área a la derecha,
   separado por una línea fina para que no se lea como otra pestaña. La miga «Dirección · …» queda para el lector de pantalla. */
.vista-direccion { gap: 0; }
.dir-cinta { flex: none; display: flex; align-items: center; gap: 8px; min-height: 32px; margin-bottom: 8px; }
.dir-rotulo, .dir-cinta.sin-enlace { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dir-cinta.sin-enlace { margin: 0; min-height: 0; }
.dir-area { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dir-area > .vista { flex: 1; height: auto; min-height: 0; }
.dir-ir { position: relative; flex: none; align-self: center; margin-left: 13px; white-space: nowrap; }
.dir-ir::before { content: ""; position: absolute; left: -7px; top: 50%; width: 1px; height: 20px; margin-top: -10px; background: var(--linea-2); }
.titulo-fila > .dir-ir, .adm-cab > .dir-ir { margin-left: auto; }
.adm-cab > .espacio ~ .dir-ir { margin-left: 13px; }
.dir-ir .ic { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
:where(html:not(.puntero-quieto)) .dir-ir:hover .ic { transform: translateX(2px); }
.vista-direccion .titulo-fila { align-items: center; min-height: 40px; }
.vista-direccion .titulo-fila .sub { min-width: 0; }

/* Administración (la pantalla de su área): el enlace al portal en la fila del título, como en las otras pestañas. La
   frase de ayuda de los filtros es para quien trabaja allí; aquí se quita (la fila de los filtros queda en una línea). */
.dir-administracion .pd-nota { display: none; }

/* Recepción: la apertura y el cierre de hoy, en una sola línea discreta bajo el título. Lo que falta: el punto ámbar con
   su frase («Sin registrar hoy») y un enlace a cada registro; registrados: gris con check, quién y a qué hora. */
.dir-local { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 32px; font: 500 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta-2); }
.dir-local-texto { font-weight: 600; color: var(--aviso-texto); margin-right: 2px; }
.dir-local-fila { height: 28px; padding: 0 6px 0 8px; font-weight: 600; color: var(--acento-texto); }
.dir-local-fila + .dir-local-fila { margin-left: -4px; }
.dir-punto { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--aviso); }
.dir-flecha { width: 14px; height: 14px; }
.dir-local.al-dia { gap: 6px; color: var(--tinta-3); }
.dir-local.al-dia .ic { width: 16px; height: 16px; color: var(--ok); }
.dir-local-detalle { color: var(--tinta-3); font-weight: 400; }
.dir-local.error { color: var(--peligro-texto); }
.dir-local.error .ic { width: 16px; height: 16px; }

/* Finanzas: dos bloques, lado a lado a todo el ancho (la rejilla de finanzas.css los pone en columnas). */
.dir-fin-vista { gap: 16px; }
.dir-finanzas .fi-pend { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }

/* ───────────── Dirección › Pedagogía ─────────────
   El conmutador Pendientes · Generador · Pagos va a la derecha de la fila de título (mismo sitio en las tres). */
.ped-barra { flex: none; display: flex; margin-bottom: 12px; }
.ped-cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ped-cuerpo > .vista { flex: 1; height: auto; min-height: 0; }
.ped-vistas { flex: none; }
.ped-corto { display: none; }

/* Pendientes pedagógicos · panorama: una línea de cifras y una fila por profesor, ordenada por el pendiente más antiguo. */
.sp-panorama { gap: 14px; }
.sp-cifras { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 28px; min-height: 32px; }
.sp-cifra { font: 400 var(--t-l)/var(--lh-l) var(--f-ui); color: var(--tinta-2); white-space: nowrap; }
.sp-cifra > b { font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.sp-cifra > b.sp-edad { font-size: inherit; line-height: inherit; }
.sp-cifra > b.sp-edad.reciente { color: var(--tinta); }
.sp-cifras .espacio { flex: 1; }
.sp-cifra-ir { color: var(--acento-texto); }
:where(html:not(.puntero-quieto)) .sp-cifra-ir:hover { color: var(--acento-texto); background: var(--acento-suave); }
.sp-tabla {
  flex: 0 1 auto; min-height: 0; overflow-y: auto;
  background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--s-1);
}
.sp-tr { display: grid; grid-template-columns: minmax(150px, .9fr) 88px minmax(0, 4fr); column-gap: 16px; align-items: start; padding: 10px 20px; }
.sp-tr + .sp-tr { border-top: 1px solid var(--linea); }
.sp-th {
  position: sticky; top: 0; z-index: 1; align-items: center; padding-top: 8px; padding-bottom: 8px;
  background: var(--sup-2); border-bottom: 1px solid var(--linea); font: 600 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3);
}
.sp-th + .sp-tr { border-top: 0; }
.sp-th > :nth-child(2) { text-align: right; }
.sp-panorama .sp-nombre { padding-top: 6px; }
.sp-panorama .sp-cuenta { padding-top: 6px; text-align: right; font: 600 var(--t-xl)/var(--lh-xl) var(--f-ui); color: var(--tinta); font-variant-numeric: tabular-nums; }
.sp-detalle { display: grid; min-width: 0; }
.sp-detalle .sp-grupo { display: grid; grid-template-columns: 210px minmax(0, 1fr); column-gap: 8px; }
.sp-detalle .sp-grupo + .sp-grupo { border-top: 1px dashed var(--linea); }

/* ───────────── Dirección › Pedagogía › Generador de clases ─────────────
   Izquierda: una tarjeta con los pasos 1 Día, 2 Grupos, 3 Período, separados por líneas (se desplaza). Derecha: el
   Resumen fijo con la cifra grande, las franjas del motor (las de Finanzas) y los dos botones. */
.gen-pasos { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: minmax(0, 1fr); gap: 16px; align-items: start; }
.gen-form { max-height: 100%; min-width: 0; overflow-y: auto; padding: 0; container-type: inline-size; transition: opacity var(--dur) var(--ease); }
/* Mientras el motor trabaja, todo el formulario se ve quieto por igual (fechas incluidas). */
.vista-generador.ocupado .gen-form { opacity: .55; pointer-events: none; }
.gen-lado { max-height: 100%; min-width: 0; overflow-y: auto; display: grid; gap: 12px; align-content: start; }
.gen-paso { display: grid; gap: 10px; min-width: 0; padding: 16px 24px 18px; }
.gen-form .gen-paso + .gen-paso { border-top: 1px solid var(--linea); }
.gen-paso h2 { display: flex; align-items: center; gap: 10px; min-width: 0; font: 600 var(--t-xl)/var(--lh-xl) var(--f-ui); color: var(--tinta); }
.gen-n {
  display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--sup-3); color: var(--tinta-2); font: 600 var(--t-s)/1 var(--f-ui); font-variant-numeric: tabular-nums;
}
.gen-form .gen-paso > :not(h2) { margin-left: 34px; }
.gen-paso > .conmutador { justify-self: start; }
/* Paso 1: el conmutador del día en la misma línea que su título. */
.gen-paso[data-paso="1"] { grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; row-gap: 4px; align-items: center; }
.gen-paso[data-paso="1"] > .conmutador { margin-left: 0; }
.gen-paso[data-paso="1"] > .detalle { grid-column: 1 / -1; }
/* Paso 2: la casilla común «Todos» a la derecha del título del paso (ronda 3: sin enlaces sueltos Todos / Ninguno). */
.gen-paso[data-paso="2"] { grid-template-columns: minmax(0, 1fr) auto; }
.gen-paso[data-paso="2"] > :not(h2):not(.gen-todos) { grid-column: 1 / -1; }
.gen-form .gen-paso > .gen-todos { margin-left: 0; }
.gen-todos { display: inline-flex; align-items: center; gap: 8px; align-self: center; height: 32px; padding: 0 8px; border-radius: var(--r-s); cursor: pointer; font: 500 var(--t-m)/1 var(--f-ui); color: var(--tinta-2); }
:where(html:not(.puntero-quieto)) .gen-todos:hover { background: var(--sup-2); }

/* Grupos por instrumento: encabezado plegable con su casilla, su nombre y «n de m». Filas neutras de 34 px, sin color.
   Con ancho, dos columnas: el paso 3 queda a la vista también a 1100×720. */
.gen-grupos { display: grid; align-items: start; column-gap: 20px; border-top: 1px solid var(--linea); }
@container (min-width: 600px) { .gen-grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gen-inst { border-bottom: 1px solid var(--linea); }
.gi-cab { display: flex; align-items: center; gap: 12px; padding: 0 8px; border-radius: var(--r-s); transition: background-color var(--dur) var(--ease); }
:where(html:not(.puntero-quieto)) .gi-cab:hover { background: var(--sup-2); }
.gen-inst.abierta .gi-cab { background: var(--sup-2); }
.gi-marca { flex: none; }
.gi-abrir { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 34px; text-align: left; font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta); }
.gi-nombre { flex: none; font-weight: 600; white-space: nowrap; }
.gi-resumen { flex: 1; min-width: 0; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gi-resumen.redundante { display: none; }
.gi-cuenta { flex: none; margin-left: auto; font: 500 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.gen-inst.con-elegidos .gi-cuenta { color: var(--tinta-2); }
.gi-flecha { width: 16px; height: 16px; flex: none; color: var(--tinta-4); transition: transform var(--dur) var(--ease); }
.gen-inst.abierta .gi-flecha { transform: rotate(180deg); }
.gi-cuerpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }
.gen-inst.abierta .gi-cuerpo { grid-template-rows: 1fr; }
.gi-cuerpo > div { min-height: 0; overflow: hidden; display: grid; padding: 0 4px 0 28px; }
.gen-inst.abierta .gi-cuerpo > div { padding-bottom: 6px; }
.gen-inst:not(.abierta) .gi-cuerpo > div { visibility: hidden; transition: visibility 0s var(--dur); }
.gen-grupo {
  display: grid; grid-template-columns: 16px auto minmax(0, 1fr); align-items: center; column-gap: 10px; min-height: 32px; padding: 0 8px;
  border-radius: var(--r-s); cursor: pointer; font: 400 var(--t-m)/var(--lh-m) var(--f-ui);
}
:where(html:not(.puntero-quieto)) .gen-grupo:hover { background: var(--sup-3); }
.gen-grupo b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gen-grupo small { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--t-s); color: var(--tinta-3); white-space: nowrap; }
.gen-grupo:not(.marcado) b { color: var(--tinta-2); font-weight: 500; }
.gen-grupo.sin-alumnos small { color: var(--aviso-texto); }

/* Período: Desde / Hasta como «10 nov 2026» (el campo del sistema, invisible encima) y las fechas del día como chips. */
.gen-periodo { display: flex; flex-wrap: wrap; gap: 12px; }
.gen-fecha { display: grid; gap: 4px; }
.gen-fecha > span:first-child { font: 600 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-2); }
.gen-fecha-caja {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 180px; height: 36px; padding: 0 12px;
  border: 1px solid var(--linea-2); border-radius: var(--r-m); background: var(--sup); cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.gen-fecha-caja:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-anillo); }
:where(html:not(.puntero-quieto)) .gen-fecha-caja:hover { border-color: #B7BEC9; }
.gen-fecha-texto { font: 500 var(--t-l)/1 var(--f-ui); color: var(--tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gen-fecha-caja > .ic { width: 16px; height: 16px; color: var(--tinta-3); }
.gen-fecha-caja input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.gen-fecha-caja input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.gen-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gen-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px 0 10px; border: 1px solid transparent; border-radius: var(--r-pildora);
  font: 600 var(--t-s)/1 var(--f-ui); white-space: nowrap; cursor: pointer; font-variant-numeric: tabular-nums;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.gen-chip .ic { width: 14px; height: 14px; }
.gen-chip.activa { background: var(--acento-suave); color: var(--acento-texto); }
:where(html:not(.puntero-quieto)) .gen-chip.activa:hover { border-color: color-mix(in srgb, var(--acento) 35%, #fff); }
.gen-chip.quitada { padding-left: 12px; background: var(--sup); border: 1px dashed var(--linea-2); color: var(--tinta-3); }
.gen-chip.quitada > span { text-decoration: line-through; }
.gen-chip.quitada small { font: 500 var(--t-xs)/1 var(--f-ui); color: var(--tinta-3); }
:where(html:not(.puntero-quieto)) .gen-chip.quitada:hover { border-color: var(--tinta-4); color: var(--tinta-2); }
.gen-chip.tope { padding-left: 12px; background: var(--sup-3); color: var(--tinta-4); }
.gen-chip:disabled { cursor: default; }
.gen-aviso { display: flex; align-items: center; gap: 8px; font: 500 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--aviso-texto); }
.gen-aviso .ic { width: 16px; height: 16px; flex: none; }

/* Resumen: la cifra de clases nuevas grande; grupos, fechas y ya existentes en una línea; los dos botones a lo ancho. */
.gen-paso[data-paso="4"] { gap: 14px; padding: 18px 20px 20px; }
.gen-total { display: flex; align-items: baseline; gap: 10px; }
.gen-total-n { font: 600 var(--t-titulo)/1 var(--f-ui); letter-spacing: -.02em; color: var(--tinta); font-variant-numeric: tabular-nums; }
.gen-total-rotulo { font: 600 var(--t-l)/var(--lh-l) var(--f-ui); color: var(--tinta-2); }
.gen-total.cero .gen-total-n { color: var(--tinta-4); }
.gen-cuentas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--linea); }
.gen-cuentas dt { font: 500 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.gen-cuentas dd { margin: 0; font: 600 var(--t-l)/var(--lh-l) var(--f-ui); color: var(--tinta); font-variant-numeric: tabular-nums; }
/* Franjas del motor: las comunes (componentes.css · .franja, enCurso), el mismo aspecto que en Finanzas. Lo único propio:
   en la columna del resumen, la de «clases creadas» lleva su botón debajo del texto, alineado con él. */
.gen-paso[data-paso="4"] > .franja { flex-wrap: wrap; row-gap: 8px; }
.gen-paso[data-paso="4"] > .franja.ok[data-qa="gen-creadas"] .franja-texto { flex-basis: calc(100% - 30px); font-weight: 600; }
.gen-paso[data-paso="4"] > .franja.ok[data-qa="gen-creadas"] .boton { margin-left: 26px; }
.gen-botones { display: grid; gap: 8px; }
.gen-botones .boton { width: 100%; }
.gen-primero { margin-top: -4px; }
.gen-ultimo { padding-top: 10px; border-top: 1px solid var(--linea); }
/* Cambio de fecha pendiente (del día elegido): una línea quieta, en solo lectura. */
.gen-modificacion { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--r-l); background: var(--sup-2); color: var(--tinta-3); }
.gen-modificacion .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.gen-modificacion span { display: grid; min-width: 0; }
.gen-modificacion b { font: 600 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta-2); }
.gen-modificacion small { font: 400 var(--t-s)/var(--lh-s) var(--f-ui); }
/* Diálogos del generador: la nota tranquila en gris, como en Finanzas. */
.dialogo.gen-dialogo { width: min(560px, calc(100vw - 48px)); }
.gen-dialogo .dg-avisos li { color: var(--tinta-2); background: none; padding: 0 2px; font-size: var(--t-s); line-height: var(--lh-s); }
.gen-dialogo .dg-avisos .ic { display: none; }

/* ───────────── Dirección › Pedagogía › Pagos profesores ─────────────
   El mes manda en toda la pantalla (conmutador propio bajo el título). Dos tablas densas: «Clases por validar» (filas de
   36 px, acciones en la cabecera) y «Horas autorizadas» (números alineados, total al pie, alto de sus filas). «Dictada por»
   es texto hasta que hace falta el menú. A ≤ 1200 px, una tabla a la vez (conmutador .pp-ver). */
.vista-pagos-prof { gap: 12px; }
.pp-barra { flex: none; display: flex; align-items: center; gap: 12px; min-height: 32px; }
/* El mes: filtro discreto (texto, no otro conmutador). El elegido en tinta y negrita con una raya fina debajo. */
.pp-meses { flex: none; display: flex; align-items: center; gap: 2px; }
.pp-meses-rotulo { margin-right: 6px; font: 600 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.pp-meses button {
  position: relative; height: 30px; padding: 0 8px; border-radius: var(--r-s); font: 500 var(--t-m)/1 var(--f-ui); color: var(--tinta-3);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
:where(html:not(.puntero-quieto)) .pp-meses button:hover { color: var(--tinta); background: var(--sup-3); }
.pp-meses button.activo { font-weight: 600; color: var(--tinta); }
.pp-meses button.activo::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 2px; height: 2px; border-radius: 1px; background: var(--acento); }
.pp-meses button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--acento-anillo); }
/* 14 oct · el conmutador de la tabla se ve siempre: «Por día y hora» · «Clases por validar». «Horas autorizadas» solo en
   ventana estrecha (en la ancha, las horas van siempre a la derecha). */
.pp-ver { display: inline-flex; margin-left: auto; }
.pp-ver [data-valor="horas"] { display: none; }
@media (min-width: 1201px) {
  .pp-ver button.modo-actual { background: var(--sup); color: var(--tinta); font-weight: 600; box-shadow: var(--s-1), 0 0 0 1px rgba(16, 24, 40, .04); }
}
.pp-cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(460px, 1fr); grid-template-rows: minmax(0, 1fr); gap: 16px; align-items: start; }
.pp-panel { max-height: 100%; min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.pp-cab { flex: none; display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 10px 16px 10px 20px; }
.pp-cab h2 { display: flex; align-items: center; gap: 8px; white-space: nowrap; font: 600 var(--t-xl)/var(--lh-xl) var(--f-ui); }
.pp-n {
  display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 8px; border-radius: var(--r-pildora);
  background: var(--sup-3); font: 600 var(--t-s)/1 var(--f-ui); color: var(--tinta-2); font-variant-numeric: tabular-nums;
}
.pp-acciones { display: flex; align-items: center; gap: 4px; min-width: 0; }
.pp-acciones .pp-validar-boton { margin-left: 8px; height: 32px; }
.pp-falta { display: inline-flex; align-items: center; gap: 6px; min-width: 0; margin-right: 8px; font: 600 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--peligro-texto); white-space: nowrap; }
.pp-falta .ic { width: 16px; height: 16px; flex: none; }

/* Clases por validar: cabecera única, semanas como subcabeceras fijas, filas de 36 px. */
.pp-validar { --pp-cols: 16px minmax(0, 1fr) 92px minmax(150px, 1fr) minmax(0, .9fr); }
.pp-semanas { flex: 0 1 auto; min-height: 0; overflow-y: auto; border-top: 1px solid var(--linea); }
.pp-vth, .pp-fila { display: grid; grid-template-columns: var(--pp-cols); align-items: center; column-gap: 12px; padding: 0 16px 0 20px; }
.pp-vth {
  position: sticky; top: 0; z-index: 3; height: 34px; background: var(--sup-2); border-bottom: 1px solid var(--linea);
  font: 600 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3);
}
.pp-semana .rotulo {
  position: sticky; top: 34px; z-index: 2; padding: 10px 20px 5px; background: var(--sup); border-bottom: 1px solid var(--linea);
}
.pp-fila { min-height: 36px; border-bottom: 1px solid var(--linea); font: 400 var(--t-m)/var(--lh-m) var(--f-ui); transition: background-color var(--dur) var(--ease); }
.pp-semana:last-of-type .pp-fila:last-child { border-bottom: 0; }
:where(html:not(.puntero-quieto)) .pp-fila:hover { background: var(--sup-2); }
.pp-fila.marcada, :where(html:not(.puntero-quieto)) .pp-fila.marcada:hover { background: var(--acento-suave); }
.pp-fila.falta, :where(html:not(.puntero-quieto)) .pp-fila.falta:hover { background: var(--sup); }
.pp-fila input[type="checkbox"], .pp-vth-marca input { margin: 0; }
/* La casilla común de la columna (todas / ninguna), en la cabecera, sobre las de cada fila. */
.pp-vth-marca { display: flex; align-items: center; }
.pp-clase { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pp-clase b { font-weight: 600; }
/* 14 oct · el nombre de la clase la abre: texto normal, subrayado fino al pasar el mouse. */
.pp-abrir { max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 0; color: var(--tinta); text-align: left; border-radius: var(--r-s); }
:where(html:not(.puntero-quieto)) .pp-abrir:hover b { color: var(--acento-texto); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pp-abrir:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.pp-fecha { color: var(--tinta-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pp-sel { min-width: 0; }
/* «Dictada por»: texto (sin borde ni flecha) mientras dice lo esperado; menú al pasar el mouse, con el foco, en la fila
   marcada, en un reemplazo y cuando falta. */
.pp-dictada {
  width: 100%; min-width: 0; height: 28px; margin-left: -9px; padding: 0 28px 0 8px; font-size: var(--t-m); color: var(--tinta);
  border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; text-overflow: ellipsis;
}
:where(html:not(.puntero-quieto)) .pp-fila:hover .pp-dictada:not(:disabled), .pp-dictada:focus,
.pp-fila:is(.marcada, .reemplazo, .vacia) .pp-dictada {
  border-color: var(--linea-2); background-color: var(--sup);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7385' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.pp-dictada:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-anillo); }
.pp-dictada:disabled { background-color: transparent; color: var(--tinta-3); }
.pp-fila.vacia .pp-dictada { color: var(--aviso-texto); font-weight: 600; border-color: color-mix(in srgb, var(--aviso) 55%, #fff); }
.pp-fila.falta .pp-dictada { color: var(--peligro-texto); border-color: var(--peligro); }
.pp-dueno { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.pp-dueno.oculto { visibility: hidden; }
.pp-reemplazo { display: inline-flex; align-items: center; gap: 5px; flex: none; font: 600 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-2); }
.pp-reemplazo .ic { width: 14px; height: 14px; color: var(--tinta-3); }
.pp-de { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pp-otros { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 12px 12px; border-top: 1px solid var(--linea); }
.pp-al-dia .pp-otros { justify-content: center; border-top: 0; padding: 4px 0 0; }
.pp-al-dia { gap: 6px; padding: 40px 16px 44px; }

/* Horas autorizadas: el alto de sus filas; números a la derecha y el total al pie. */
.pp-tabla { flex: 0 1 auto; min-height: 0; overflow-y: auto; border-top: 1px solid var(--linea); }
.pp-tr { display: grid; grid-template-columns: minmax(96px, 1fr) 44px 80px 92px 80px; align-items: center; column-gap: 12px; min-height: 36px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--linea); font: 400 var(--t-m)/var(--lh-m) var(--f-ui); }
.pp-th { position: sticky; top: 0; z-index: 1; min-height: 34px; background: var(--sup-2); font: 600 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.pp-tr > :nth-child(2), .pp-tr > :nth-child(3) { text-align: right; }
.pp-prof { min-width: 0; }
.pp-prof b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-num, .pp-num-total { font-weight: 600; font-variant-numeric: tabular-nums; }
.pp-num.cero, .pp-num-total.cero { color: var(--tinta-4); font-weight: 500; }
.pp-tr.sin-horas .pp-prof b { font-weight: 500; color: var(--tinta-2); }
.pp-estado { display: inline-flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; font: 500 var(--t-s)/var(--lh-s) var(--f-ui); }
.pp-estado .ic { width: 14px; height: 14px; flex: none; }
.pp-estado.si { color: var(--ok-texto); font-weight: 600; }
.pp-estado.no { color: var(--tinta-2); }
.pp-estado.nada { color: var(--tinta-4); }
.pp-estado.raro { color: var(--aviso-texto); font-weight: 600; cursor: help; }
/* Ronda 2 (con el área profesor): factura adjunta en gris (un dato), sin factura con horas en ámbar (falta). */
.pp-estado.pp-factura.adjunta { color: var(--tinta-2); font-weight: 500; }
.pp-estado.pp-factura.adjunta .ic { color: var(--tinta-3); }
.pp-estado.pp-factura.falta { color: var(--aviso-texto); font-weight: 600; }
.pp-hecho { display: inline-flex; align-items: center; gap: 6px; min-width: 0; margin-right: 8px; font: 600 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--ok-texto); white-space: nowrap; }
.pp-hecho .ic { width: 16px; height: 16px; flex: none; }
.pp-tr.recien { animation: pp-recien 1.8s var(--ease); }
@keyframes pp-recien { 0%, 45% { background: var(--acento-suave); } }
.pp-total { position: sticky; bottom: 0; background: var(--sup-2); border-top: 1px solid var(--linea); border-bottom: 0; margin-top: -1px; font-weight: 600; }
.pp-notas { flex: none; padding: 10px 16px 12px 20px; border-top: 1px solid var(--linea); }

/* ───────────── Pagos profesores › por día y hora (14 oct) ─────────────
   Para Camilo (Supervisión › Validar) y la dirección: el mes de un vistazo. Denso (filas de 36 px, letra 14), el día como
   subcabecera fija con lo que le falta a la derecha, y en cada fila hora · clase · titular · asistencia · estado. La fila
   entera abre la clase; lo único con color es el estado (ámbar por validar, verde validada). */
.pp-por-dia { --pp-h-cols: 44px minmax(0, 1fr) minmax(0, 1fr) 96px minmax(0, 1.55fr) 16px; } /* 15 oct: la casilla «Asistencia» cabe */
.pp-resumen { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font: 500 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta-2); }
.pp-resumen-n { font-weight: 600; color: var(--aviso-texto); }
.pp-resumen-ok { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--ok-texto); }
.pp-resumen-ok .ic { width: 15px; height: 15px; }
.pp-resumen-sep { color: var(--tinta-4); }
.pp-dias { flex: 0 1 auto; min-height: 0; overflow-y: auto; border-top: 1px solid var(--linea); }
.pp-h-th, .pp-h-fila { display: grid; grid-template-columns: var(--pp-h-cols); align-items: center; column-gap: 10px; padding: 0 16px 0 20px; }
.pp-h-th {
  position: sticky; top: 0; z-index: 3; height: 34px; background: var(--sup-2); border-bottom: 1px solid var(--linea);
  font: 600 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3);
}
.pp-h-th > :nth-child(4) { text-align: right; }
.pp-dia-cab {
  position: sticky; top: 34px; z-index: 2; display: flex; align-items: baseline; gap: 12px; padding: 12px 20px 6px;
  background: var(--sup); border-bottom: 1px solid var(--linea); font: 400 var(--t-s)/var(--lh-s) var(--f-ui);
}
.pp-dia-cab b { font: 600 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta); }
.pp-dia-cab b::first-letter { text-transform: uppercase; }
.pp-dia-n { margin-left: auto; font-weight: 600; color: var(--aviso-texto); }
.pp-dia-ok { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 500; color: var(--tinta-3); }
.pp-dia-ok .ic { width: 13px; height: 13px; color: var(--ok); }
.pp-h-fila {
  width: 100%; min-height: 36px; border-bottom: 1px solid var(--linea); text-align: left; cursor: pointer;
  font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta); transition: background-color var(--dur) var(--ease);
}
.pp-dia:last-of-type .pp-h-fila:last-child { border-bottom: 0; }
:where(html:not(.puntero-quieto)) .pp-h-fila:hover { background: var(--sup-2); }
.pp-h-fila:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.pp-h-fila.destello { animation: pp-recien 1.8s var(--ease); }
.pp-h-hora { font-weight: 600; font-variant-numeric: tabular-nums; }
.pp-h-clase, .pp-h-titular { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pp-h-clase b { font-weight: 600; }
.pp-h-titular { color: var(--tinta-2); }
.pp-h-asis { text-align: right; color: var(--tinta-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-h-asis.sin { color: var(--tinta-3); font-size: var(--t-s); }
.pp-h-celda-estado { min-width: 0; }
.pp-h-estado { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0; white-space: nowrap; font: 500 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-2); }
.pp-h-estado > span:not(.chip) { overflow: hidden; text-overflow: ellipsis; }
.pp-h-estado .ic { width: 14px; height: 14px; flex: none; }
.pp-h-estado.ok { color: var(--ok-texto); font-weight: 600; }
.pp-h-estado.ok small { flex: 0 100 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.pp-h-estado.cancelada { color: var(--tinta-3); }
.pp-h-estado.sin-prof { color: var(--aviso-texto); font-weight: 600; }
.pp-h-fila.cancelada :is(.pp-h-hora, .pp-h-clase b) { color: var(--tinta-3); font-weight: 500; }
/* 15 oct · RONDA-FINAL §2: la fila de una clase con algo pendiente, con el tinte de su tono; la asistencia sin tomar es su casilla */
.pp-h-fila[data-falta="vencida"] { background: color-mix(in srgb, var(--peligro-fondo) 55%, transparent); }
.pp-h-fila[data-falta="hoy"] { background: color-mix(in srgb, var(--aviso-fondo) 55%, transparent); }
.pp-h-asis .cf-lista { justify-content: flex-end; }
.pp-h-fila[data-falta] { padding-block: 6px; }
.pp-h-clase.con-faltas { display: grid; gap: 3px; white-space: normal; }
.pp-h-clase.con-faltas > b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pp-h-faltas .cf-casilla { height: 20px; font-size: 11.5px; }
.pp-h-flecha { width: 16px; height: 16px; color: var(--tinta-4); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
:where(html:not(.puntero-quieto)) .pp-h-fila:hover .pp-h-flecha { transform: translateX(2px); color: var(--acento); }

/* ───────────── Pagos profesores › la clase abierta (14 oct) ─────────────
   Normal (una clase, una decisión): arriba volver, el nombre y la fecha; la barra de validación en una tarjeta de una sola
   línea (estado · «Dictada por» · reemplazo · el botón); debajo, la ficha de la clase en lectura, a todo el ancho. */
.pp-clase-abierta { gap: 12px; }
.pp-c-cab { flex: none; display: flex; align-items: center; gap: 16px; min-width: 0; }
.pp-c-volver { flex: none; }
.pp-c-titulo { min-width: 0; display: grid; gap: 0; }
.pp-c-titulo h2 { font: 600 var(--t-2xl)/var(--lh-2xl) var(--f-ui); color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-c-meta { font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-c-fecha { display: inline-block; }
.pp-c-fecha::first-letter { text-transform: uppercase; }
.pp-c-quedan { flex: none; font: 500 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta-3); white-space: nowrap; }
.pp-c-barra {
  flex: none; display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; min-height: 64px; padding: 12px 16px 12px 20px;
}
.pp-c-barra .espacio { flex: 1 1 0; }
.pp-c-estado-celda { flex: none; display: flex; align-items: center; min-width: 120px; }
.pp-c-estado-celda .chip { height: 26px; padding: 0 10px; font-size: var(--t-m); }
.pp-c-estado, .pp-c-hecho { display: inline-flex; align-items: center; gap: 6px; font: 600 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--ok-texto); white-space: nowrap; }
.pp-c-estado .ic, .pp-c-hecho .ic { width: 16px; height: 16px; flex: none; }
.pp-c-campo { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.pp-c-rotulo { font: 600 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-2); white-space: nowrap; }
.pp-c-dictada {
  height: 36px; min-width: 200px; max-width: 280px; padding: 0 32px 0 12px; border: 1px solid var(--linea-2); border-radius: var(--r-m);
  background-color: var(--sup); font: 500 var(--t-l)/1 var(--f-ui); color: var(--tinta);
}
.pp-c-dictada:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-anillo); }
.pp-c-dictada[aria-invalid="true"] { border-color: color-mix(in srgb, var(--aviso) 55%, #fff); color: var(--aviso-texto); }
.pp-c-dictada:disabled { background-color: var(--sup-2); color: var(--tinta-3); }
.pp-c-barra .pp-reemplazo { font-size: var(--t-m); line-height: var(--lh-m); }
.pp-c-barra .boton { flex: none; height: 36px; }
.pp-c-siguiente { flex-direction: row; }
.pp-c-siguiente .ic { order: 2; }
.pp-c-nota { font: 500 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta-3); }
.pp-c-ficha { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 8px; }
/* La ficha en lectura: abierta, sin cursor de botón, los momentos enteros (sin cortar a 4 líneas). */
.pp-c-ficha .ficha.lectura .ficha-cab { cursor: default; min-height: 56px; }
.pp-c-ficha .ficha.lectura .momento p { display: block; -webkit-line-clamp: unset; overflow: visible; }
.pp-c-ficha .ficha.lectura .momento { background: var(--sup-2); border-color: transparent; }
.pp-c-ficha .ficha.lectura .momento.vacio p, .pp-c-ficha .ficha.lectura .momento.neutro p { color: var(--tinta-4); }
.notas-alumnos { display: grid; gap: 8px; }
.notas-alumnos ul { display: grid; gap: 6px; }
.na-fila { display: flex; align-items: flex-start; gap: 10px; }
.na-texto { display: grid; gap: 0; min-width: 0; font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta-2); }
.na-texto b { font-weight: 600; color: var(--tinta); }

/* ───────────── ventana estrecha (1100×720) ───────────── */
@media (max-width: 1240px) {
  .sup-seccion { grid-template-columns: 150px minmax(0, 1fr); column-gap: 16px; }
  .vista-clases-todos .sup-seccion .rejilla-grupos, .vista-clases-todos .sup-seccion .rejilla-grupos[data-n] { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
  .sp-lista .sp-grupo { grid-template-columns: 200px minmax(0, 1fr); }
  .sp-tr { grid-template-columns: minmax(130px, .8fr) 72px minmax(0, 4fr); column-gap: 12px; }
  .sp-detalle .sp-grupo { grid-template-columns: 170px minmax(0, 1fr); }
  .sp-detalle .sp-item { grid-template-columns: minmax(0, 1fr) 84px 92px 14px; }
  .gen-pasos { grid-template-columns: minmax(0, 1fr) 320px; }
  .gen-paso { padding-left: 20px; padding-right: 20px; }
  /* Administración: la fila del título va llena (vista, Saldos, búsqueda); el enlace queda en «Portal ›» (el título del
     botón y la pestaña ya dicen cuál). */
  .dir-administracion .dir-ir-area { display: none; }
  .dir-administracion .adm-cab .adm-buscador { flex: 0 1 262px; min-width: 0; }
}
@media (max-width: 1200px) {
  .pp-ver [data-valor="horas"] { display: inline-flex; }
  .pp-por-dia { --pp-h-cols: 48px minmax(0, 1fr) minmax(0, 1fr) 96px minmax(190px, 1.4fr) 16px; }
  /* El conmutador ya nombra la tabla: el título queda para el lector de pantalla. */
  .pp-cab h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pp-cab { min-height: 48px; }
  .pp-horas .pp-cab { display: none; }
  .pp-dictada { max-width: 260px; }
  .pp-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .pp-cuerpo[data-ver="validar"] .pp-horas, .pp-cuerpo[data-ver="horas"] .pp-validar { display: none; }
  .pp-tr { grid-template-columns: minmax(0, 1fr) 72px 104px 140px 140px; }
}

/* ───────────── iPhone (≤ 760 px) ───────────── */
@media (max-width: 760px) {
  .vista-direccion .titulo-fila { flex-wrap: wrap; row-gap: 8px; }
  .vista-direccion .titulo-fila .espacio { display: none; }
  /* Cabecera común: el título arriba y sus acciones (el conmutador de Pedagogía) en la línea de abajo, a lo ancho. */
  .vista-direccion .vista-cab { flex-wrap: wrap; row-gap: 8px; height: auto; }
  .vista-direccion .vista-cab-acciones { flex: 1 1 100%; margin-left: 0; }
  .vista-direccion .vista-cab-acciones:empty { display: none; }
  .vista-direccion .vista-cab-acciones > .ped-vistas { flex: 1 1 100%; }
  .sup-leyenda { flex-basis: 100%; order: 5; margin-left: 0; }
  .ped-vistas { order: 5; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; }
  .ped-vistas button { flex: 1; padding: 0 10px; }
  .ped-vistas .ic, .ped-largo { display: none; }
  .ped-corto { display: inline; }
  .dir-ir { display: none; }
  /* Pendientes (Supervisión y Dirección): una columna; el grupo encima de sus pendientes; sin la fecha (queda la antigüedad). */
  /* Ronda 3: las cifras en líneas, una debajo de otra (cada una dice qué cuenta; el conmutador ya no lleva números). */
  .vista-sup-pendientes .sp-cifras { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
  .vista-sup-pendientes .sp-cifras .sp-cifra { padding: 0; font-size: var(--t-m); line-height: var(--lh-m); white-space: normal; }
  .vista-sup-pendientes .sp-cifras .sp-cifra-ir { height: 32px; margin-left: -8px; }
  .sp-cifras .espacio { display: none; }
  .gen-paso[data-paso="2"] > .gen-todos { justify-self: start; margin-left: -8px; }
  .sp-tr { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; padding: 10px 14px; }
  .sp-th { display: none; }
  .sp-detalle { grid-column: 1 / -1; }
  .sp-detalle .sp-grupo, .sp-lista .sp-grupo { grid-template-columns: minmax(0, 1fr); padding-left: 14px; padding-right: 8px; }
  .sp-detalle .sp-grupo { padding-left: 0; padding-right: 0; }
  .sp-item, .sp-detalle .sp-item { grid-template-columns: minmax(0, 1fr) auto 14px; padding-left: 4px; padding-right: 4px; }
  .sp-item .sp-fecha { display: none; }
  .sp-lista .sp-cab { padding: 8px 14px; }
  /* Supervisión › Clases y Alumnos: una columna. */
  .sup-seccion { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .sup-seccion-titulo { grid-auto-flow: column; justify-content: start; align-items: baseline; column-gap: 8px; }
  .vista-clases-todos .titulo-fila, .vista-alumnos-todos .titulo-fila { flex-wrap: wrap; row-gap: 8px; }
  .vista-clases-todos .sup-seccion .rejilla-grupos, .vista-clases-todos .sup-seccion .rejilla-grupos[data-n] { grid-template-columns: minmax(0, 1fr); }
  .vista-alumnos-todos .columnas-alumnos, .vista-alumnos-todos .columnas-alumnos[data-n] { columns: 1; }
  .sup-buscar { flex: 1 1 100%; margin-left: 0; }
  .sup-buscar-campo { height: 40px; font-size: 16px; }
  /* Generador: una columna, todo se desplaza junto. */
  .gen-pasos { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; overflow-y: auto; }
  .gen-form, .gen-lado { max-height: none; overflow: visible; }
  .gen-paso { padding: 16px; }
  .gen-form .gen-paso > :not(h2) { margin-left: 0; }
  .gen-fecha-caja { width: 160px; }
  /* Pagos en iPhone: el mes y la tabla en dos líneas; cada clase en dos líneas (clase y fecha; quién la dictó, en texto). */
  .pp-barra { flex-wrap: wrap; gap: 8px; }
  .pp-meses { flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; }
  .pp-meses button { flex: 1; height: 36px; padding: 0 8px; font-size: var(--t-l); }
  .pp-ver { flex: 1 1 100%; margin-left: 0; }
  .pp-ver button { flex: 1; }
  .pp-cab { flex-wrap: wrap; row-gap: 6px; padding: 8px 12px 8px 14px; min-height: 0; }
  .pp-acciones { flex: 1 1 100%; justify-content: flex-end; flex-wrap: wrap; }
  .pp-falta { flex: 1 1 100%; justify-content: flex-start; margin: 0; white-space: normal; }
  .pp-validar { --pp-cols: 22px minmax(0, 1fr) auto; }
  /* La cabecera queda solo con la casilla común y «Clase» (fecha y quién la dictó van en cada fila). */
  .pp-vth { padding: 0 12px 0 14px; }
  .pp-vth > :nth-child(n+3) { display: none; }
  .pp-vth-marca input { width: 20px; height: 20px; }
  .pp-semana .rotulo { padding-left: 14px; }
  .pp-fila { row-gap: 0; min-height: 56px; padding: 6px 12px 6px 14px; }
  .pp-fila input[type="checkbox"] { grid-row: 1 / span 2; width: 20px; height: 20px; }
  .pp-fila .pp-fecha { grid-column: 3; grid-row: 1; justify-self: end; font-size: var(--t-s); }
  .pp-fila .pp-sel { grid-column: 2; grid-row: 2; }
  .pp-fila .pp-dueno { grid-column: 3; grid-row: 2; justify-self: end; }
  .pp-fila .pp-dueno.oculto { display: none; }
  .pp-dictada { height: 28px; font-size: var(--t-s); }
  .pp-tr { grid-template-columns: minmax(0, 1fr) 44px 92px 76px; column-gap: 8px; padding: 0 12px 0 14px; }
  .pp-tr > :nth-child(3) { display: none; }
  /* 14 oct · por día y hora en el iPhone: cada clase en dos líneas (hora a la izquierda; clase y estado arriba; titular y
     asistencia abajo); sin la cabecera de columnas. */
  .pp-por-dia { --pp-h-cols: 44px minmax(0, 1fr) auto 14px; }
  .pp-h-th { display: none; }
  .pp-dia-cab { top: 0; padding: 10px 14px 6px; }
  .pp-h-fila { grid-template-rows: auto auto; row-gap: 0; column-gap: 10px; min-height: 54px; padding: 6px 12px 6px 14px; }
  .pp-h-hora { grid-column: 1; grid-row: 1 / span 2; }
  .pp-h-clase { grid-column: 2; grid-row: 1; }
  .pp-h-titular { grid-column: 2; grid-row: 2; font-size: var(--t-s); line-height: var(--lh-s); }
  .pp-h-celda-estado { grid-column: 3; grid-row: 1; justify-self: end; }
  .pp-h-asis { grid-column: 3; grid-row: 2; justify-self: end; font-size: var(--t-s); line-height: var(--lh-s); }
  .pp-h-flecha { grid-column: 4; grid-row: 1 / span 2; }
  .pp-h-estado.ok small { display: none; }
  /* La clase abierta: volver arriba, el nombre debajo; la barra en líneas (estado, «Dictada por» a lo ancho, botones a lo
     ancho); la ficha se desplaza con la página. */
  .pp-c-cab { flex-wrap: wrap; gap: 4px 12px; }
  .pp-c-volver { flex: 1 1 100%; justify-content: flex-start; margin-left: -6px; }
  .pp-c-titulo { flex: 1 1 100%; }
  .pp-c-cab .espacio, .pp-c-quedan { display: none; }
  .pp-c-barra { padding: 12px 14px; gap: 10px 12px; }
  .pp-c-barra .espacio { display: none; }
  .pp-c-campo { flex: 1 1 100%; }
  .pp-c-dictada { flex: 1; min-width: 0; max-width: none; height: 44px; font-size: 16px; }
  .pp-c-barra .boton { flex: 1 1 100%; height: 44px; justify-content: center; }
  .pp-c-ficha { overflow: visible; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   15 oct B · zona B · Supervisión (docs/RONDA-15OCT-B.md: «revisa el portal de supervisión… hay bugs visuales y mejor
   manera de organizarlo»). Común a las dos apariencias; Selah pone su vidrio en selah-otros.css (misma sección).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* Pendientes: la tabla con el mismo marco que el título (antes, 1120 px centrada: empezaba 48 px a la derecha del título).
   Así el título, la tabla y las demás pestañas comparten los bordes. */
.vista-sup-pendientes.sp-lista > .sup-profesores { width: 100%; max-width: none; align-self: stretch; }

/* Alumnos: una sección por día (como Clases «por día») y en cada una una rejilla de tarjetas de grupo de 300 px como mínimo.
   Antes: columnas de periódico (columns: 260px) en las que la fila, un botón con el nombre en una línea, medía lo que su
   texto; con nombres largos la edad se dibujaba sobre la foto y el nombre de la columna vecina. Ahora cada pieza tiene
   min-width: 0, el nombre se corta con puntos suspensivos (entero en el title) y la edad va a la derecha, en su tarjeta. */
.vista-alumnos-todos .columnas-alumnos.sa-dias {
  flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; columns: auto; column-rule: none;
  overflow-y: auto; margin: 0; padding: 0 2px 24px; background: none; border: 0; border-radius: 0; box-shadow: none;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent); mask-image: linear-gradient(#000 calc(100% - 24px), transparent);
}
.sa-dia { min-width: 0; }
.sa-dia:first-child { padding-top: 4px; }
.sa-grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; align-items: start; min-width: 0; }
.vista-alumnos-todos .sa-grupos .col-grupo {
  min-width: 0; margin: 0; gap: 2px; padding: 12px 10px 6px;
  background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--s-1);
}
.vista-alumnos-todos .sa-grupos .mini-titulo { display: grid; gap: 0; min-width: 0; padding: 0 4px 6px; }
.vista-alumnos-todos .sa-grupos .mini-titulo > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vista-alumnos-todos .sa-grupos .mini-titulo small { min-width: 0; }
.vista-alumnos-todos .sa-grupos .col-lista { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.vista-alumnos-todos .sa-grupos .alumno-fila { width: 100%; min-width: 0; }
.vista-alumnos-todos .sa-grupos .alumno-fila:last-child { border-bottom: 0; }
.vista-alumnos-todos .sa-grupos .af-texto { min-width: 0; }
.vista-alumnos-todos .sa-grupos .af-texto b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vista-alumnos-todos .sa-grupos .af-texto span { flex: none; margin-left: auto; text-align: right; }
.vista-alumnos-todos .sa-dia[hidden] { display: none !important; }

/* Validar (Supervisión): la lista por día y hora pide más ancho que «Horas autorizadas» (antes, «Andrea Marulan…»,
   «Despertar Musi…» y «Validada · Cami…» cortados con la tabla de horas holgada a la derecha). Dirección no cambia. */
@media (min-width: 1201px) {
  body[data-portal="supervision"] .pp-cuerpo:has(.pp-por-dia) { grid-template-columns: minmax(0, 1.3fr) minmax(520px, 1fr); }
  body[data-portal="supervision"] .pp-por-dia { --pp-h-cols: 44px minmax(0, 1fr) minmax(0, 1.1fr) 84px minmax(0, 1.4fr) 16px; }
  body[data-portal="supervision"] .pp-cuerpo:has(.pp-por-dia) .pp-tr { grid-template-columns: minmax(140px, 1fr) 40px 84px 86px 74px; }
}

@media (max-width: 760px) {
  .vista-alumnos-todos .sa-grupos .col-grupo { padding: 10px 4px 4px; }
  /* Pendientes: el subtítulo en dos líneas (antes, «7 por completar · 21 por vali…»); la cabecera de cada profesor con el
     nombre entero y la cuenta debajo (antes, «Juan…» y «3 grupos» en dos líneas). */
  .vista-sup-pendientes .vista-cab-titulo { flex-wrap: wrap; }
  .vista-sup-pendientes .vista-cab .sub { white-space: normal; overflow: visible; text-overflow: clip; }
  .sp-lista .sp-cab { flex-wrap: wrap; row-gap: 2px; }
  .sp-lista .sp-cab .sp-nombre { flex: 1 1 100%; }
  .sp-lista .sp-cab .sp-nombre small { white-space: nowrap; }
  /* «Validación pendiente» y, debajo, el grupo entero («Guitarra 16:30 · sábado»), sin partirlo */
  .sp-item-validar .sp-texto { display: grid; }
  .sp-item-validar .sp-validar-sep { display: none; }
  .sp-item-validar .sp-validar-grupo { font-size: var(--t-s); line-height: var(--lh-s); }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   17 oct noche · Supervisión › Pendientes por niveles (supervision-pendientes.js). Profesores → grupos → clases; el color
   de la gravedad en cada tarjeta (rojo «Prioridad alta», ámbar «Prioridad media», verde «Al día»), la tarjeta del
   profesor crece hasta la vista del profesor (clip-path en JS, sin animación con movimiento reducido), los grupos se
   pliegan en su sitio (grid-template-rows) y lo que falta de cada clase se llena ahí mismo (las cajas de momento del
   profesor, profesor.css). Las dos apariencias; Selah pone su vidrio en selah-otros.css; el teléfono en tel-recepcion.css.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.spz [data-grav="alta"], .spz[data-grav="alta"] { --g: var(--peligro); --g-fondo: var(--peligro-fondo); --g-texto: var(--peligro-texto); }
.spz [data-grav="media"], .spz[data-grav="media"] { --g: var(--aviso); --g-fondo: var(--aviso-fondo); --g-texto: var(--aviso-texto); }
.spz [data-grav="al-dia"], .spz[data-grav="al-dia"] { --g: var(--ok); --g-fondo: var(--ok-fondo); --g-texto: var(--ok-texto); }
.vista-sup-pendientes.spz { gap: 12px; }
.spz-punto { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--g); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g) 18%, transparent); }
.spz-ok { display: inline-flex; align-items: center; gap: 4px; font: 600 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--ok-texto); white-space: nowrap; }
.spz-ok .ic { width: 15px; height: 15px; }

/* la leyenda del código de color, una línea bajo el título */
.spz-leyenda { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin: -4px 0 0; padding: 0; list-style: none; font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.spz-leyenda li { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.spz-leyenda b { font-weight: 600; color: var(--tinta-2); }
.spz-leyenda .spz-punto { width: 8px; height: 8px; }

/* lo que se desliza: debajo de la cabecera, con el pie fundido */
.spz-lienzo {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -6px; padding: 4px 6px 28px; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent); mask-image: linear-gradient(#000 calc(100% - 24px), transparent);
}
.spz-copia { overflow: hidden; -webkit-mask-image: none; mask-image: none; }
.spz-acercando { position: relative; z-index: 3; will-change: clip-path; }

/* ── nivel 1 · un profesor por tarjeta ── */
.spz-profesores { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; align-content: start; }
.spz-profesores.con-abiertos { grid-template-columns: minmax(0, 1fr); }
.spz-prof {
  position: relative; min-width: 0; overflow: hidden; background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--s-1);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.spz-prof::before, .spz-grupo::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--g); pointer-events: none; }
.spz-prof:not([data-grav="al-dia"]) { background: linear-gradient(100deg, color-mix(in srgb, var(--g-fondo) 70%, var(--sup)), var(--sup) 60%); }
:where(html:not(.puntero-quieto)) .spz-prof:hover { box-shadow: var(--s-2); border-color: color-mix(in srgb, var(--g) 35%, var(--linea)); }
.spz-prof-cab {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto 16px; align-items: center; column-gap: 14px; width: 100%; min-height: 76px;
  padding: 14px 16px 14px 22px; text-align: left; color: var(--tinta); border-radius: inherit;
}
.spz-prof-cab:focus-visible, .spz-grupo-cab:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.spz-prof-nombre { display: grid; min-width: 0; }
.spz-prof-nombre b { font: 600 var(--t-xl)/var(--lh-xl) var(--f-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spz-prof-nombre small { font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.spz-prof-cifra { display: grid; justify-items: end; line-height: 1; }
.spz-prof-cifra b { font: 700 28px/30px var(--f-ui); color: var(--g-texto); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.spz-prof-cifra > span:not(.spz-ok) { font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.spz-prof-nombre small.spz-prof-viejo .sp-edad { font-size: inherit; line-height: inherit; }
.spz-flecha { width: 16px; height: 16px; color: var(--tinta-4); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
:where(html:not(.puntero-quieto)) .spz-prof-cab:hover .spz-flecha { transform: translateX(3px); color: var(--acento); }
.spz-prof.abierta > .spz-grupos { padding: 0 14px 14px 22px; }

/* ── nivel 2 · el profesor: su nombre arriba a la izquierda, la vuelta encima, «Expandir todo» a la derecha ── */
.spz-nivel-profesor > .vista-cab.spz-cab { height: auto; align-items: flex-end; }
.spz-cab-titulo.vista-cab-titulo { display: grid; justify-items: start; gap: 2px; }
.spz-volver { min-height: 32px; margin-left: -6px; }
.spz-cab-nombre { display: flex; align-items: center; gap: 12px; min-width: 0; }
.spz-cab-nombre h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.spz-cab-nombre .spz-punto { width: 12px; height: 12px; }
.spz-pildora { flex: none; padding: 3px 10px; border-radius: var(--r-pildora); background: var(--g-fondo); font: 600 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--g-texto); white-space: nowrap; }
.spz-nivel-profesor .spz-cab .sub { white-space: normal; }

/* ── un grupo: cabecera plegable con su color ── */
.spz-grupos { display: grid; gap: 10px; align-content: start; min-width: 0; }
.spz-grupo { position: relative; min-width: 0; overflow: hidden; background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--s-1); }
.spz-prof .spz-grupo { box-shadow: none; }
.spz-grupo-cab {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto 96px 18px; align-items: center; column-gap: 12px; width: 100%; min-height: 56px;
  padding: 10px 16px 10px 20px; text-align: left; color: var(--tinta); transition: background-color var(--dur) var(--ease);
}
.spz-grupo-cab:disabled { cursor: default; opacity: 1; }
:where(html:not(.puntero-quieto)) .spz-grupo-cab:not(:disabled):hover { background: var(--sup-2); }
.spz-grupo-nombre { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.spz-grupo-nombre b { font: 600 var(--t-l)/var(--lh-l) var(--f-ui); white-space: nowrap; }
.spz-grupo-nombre small { font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); white-space: nowrap; }
.spz-grupo-cifra { font: 600 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--g-texto); white-space: nowrap; }
.spz-grupo-cab > .sp-edad { justify-self: end; }
.spz-chevron { width: 18px; height: 18px; color: var(--tinta-3); transition: transform calc(var(--dur) * 1.5) var(--ease); }
.spz-grupo.abierto .spz-chevron { transform: rotate(180deg); }
.spz-grupo-det { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows calc(var(--dur) * 1.5) var(--ease); }
.spz-grupo.abierto > .spz-grupo-det { grid-template-rows: 1fr; }
.spz-grupo-det > .spz-grupo-marco { min-height: 0; overflow: hidden; }
.spz-clases { display: grid; gap: 10px; padding: 2px 16px 16px 20px; }

/* ── una clase: la fecha, la antigüedad, lo que falta y, debajo, cada cosa para llenarla ── */
.spz-clase { display: grid; gap: 10px; min-width: 0; padding: 12px 14px 14px; background: var(--sup-2); border: 1px solid var(--linea); border-radius: var(--r-m); transition: background-color var(--dur) var(--ease); }
.spz-clase-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.spz-clase-cab h3 { margin: 0; font: 600 var(--t-l)/var(--lh-l) var(--f-ui); color: var(--tinta); }
.spz-clase-cab .espacio { flex: 1; }
.spz-clase.completa { background: color-mix(in srgb, var(--ok-fondo) 55%, var(--sup)); }
.spz-campos { display: grid; gap: 10px; min-width: 0; }
.spz-momentos.momentos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.spz-asis { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; padding: 10px 12px; background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-m); }
.spz-asis.tomada { display: grid; gap: 8px; }
.spz-asis-titulo { display: inline-flex; align-items: center; gap: 6px; margin: 0; font: 600 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--aviso-texto); }
.spz-clase[data-falta="vencida"] .spz-asis-titulo { color: var(--peligro-texto); }
.spz-asis-titulo .ic { width: 16px; height: 16px; }
.spz-asis .caras { padding: 2px; }
.spz-asis .spz-pasar { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  .spz-grupo-det, .spz-chevron, .spz-prof, .spz-flecha { transition: none; }
}

/* 18 oct · Supervisión › Pendientes · dentro del profesor: fichas a la medida de cuántas son (pocas = grandes) */
.spz-nivel-profesor .spz-grupos[data-cuantos="1"] .spz-grupo-cab { min-height: 96px; padding: 20px 28px 20px 32px; column-gap: 16px; grid-template-columns: auto minmax(0, 1fr) auto 120px 22px; }
.spz-nivel-profesor .spz-grupos[data-cuantos="1"] .spz-grupo-nombre b { font-size: 28px; line-height: 34px; }
.spz-nivel-profesor .spz-grupos[data-cuantos="1"] .spz-grupo-nombre small { font-size: 17px; line-height: 22px; }
.spz-nivel-profesor .spz-grupos[data-cuantos="1"] .spz-grupo-cifra { font-size: 19px; line-height: 24px; }
.spz-nivel-profesor .spz-grupos[data-cuantos="1"] .spz-punto { transform: scale(1.4); }
.spz-nivel-profesor .spz-grupos[data-cuantos="2"] .spz-grupo-cab { min-height: 80px; padding: 16px 24px 16px 28px; }
.spz-nivel-profesor .spz-grupos[data-cuantos="2"] .spz-grupo-nombre b { font-size: 23px; line-height: 29px; }
.spz-nivel-profesor .spz-grupos[data-cuantos="2"] .spz-grupo-cifra { font-size: 17px; line-height: 22px; }
.spz-nivel-profesor .spz-grupos[data-cuantos="3"] .spz-grupo-cab { min-height: 68px; padding: 13px 20px 13px 24px; }
.spz-nivel-profesor .spz-grupos[data-cuantos="3"] .spz-grupo-nombre b { font-size: 20px; line-height: 26px; }
.spz-nivel-profesor .spz-grupos:is([data-cuantos="1"], [data-cuantos="2"]) { gap: 14px; }
/* las clases dentro de un grupo, igual: una sola clase va más holgada */
.spz-clases[data-cuantas="1"] .spz-clase { padding: 20px 24px; }
.spz-clases[data-cuantas="1"] .spz-clase-cab h3 { font-size: 20px; line-height: 26px; }
.spz-clases:is([data-cuantas="1"], [data-cuantas="2"]) .spz-momentos textarea { min-height: 120px; font-size: 16px; }
.spz-vacio { display: flex; align-items: center; gap: 8px; margin: 24px 4px; font: 500 var(--t-l)/var(--lh-l) var(--f-ui); color: var(--ok-texto); }