/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   Selah · horario.css (13 oct · DISENO.md §4) · todas las vistas del horario: Profesor › Horario, Administración › Horario
   (capas, sopa, bandeja, calendario, menús, ficha corta, PDF), Asistencia (también Recepción), el horario de asignación de la
   ficha del alumno y el mini horario. JS: horario, admin-horario, admin-horario-asignar, admin-mini-horario, acciones.
   Composición por vista: docs/diseno-horario.md. Solo tokens de base.css; sin color por instrumento; el estado del alumno
   solo como anillo de foto, con su leyenda.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ───────────── 1 · la vista: mandos · línea · panel · rejilla (+ sopa a la derecha) · bandeja ─────────────
   Rejilla de dos columnas: lo principal a la izquierda; la sopa abierta ocupa la derecha junto a la rejilla (no la tapa).
   La pestaña «Alumnos» cerrada es un botón más de la fila de mandos. La bandeja va al pie, dentro del flujo. */
.vista.vista-horario {
  --fondo-rejilla: var(--fondo); /* el fondo de las cabeceras pegajosas = el de lo que hay detrás */
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 0; align-content: stretch; position: relative;
}
.vista-horario > * { min-width: 0; }
.vista-horario > .horario-controles { grid-row: 1; grid-column: 1; }
.vista-horario.con-sopa > .horario-controles, .vista-horario:not(:has(> .sopa-pestana)) > .horario-controles { grid-column: 1 / -1; }
.vista-horario > .sopa-pestana { grid-row: 1; grid-column: 2; align-self: center; margin-left: 8px; }
.vista-horario > .horario-linea { grid-row: 2; grid-column: 1 / -1; margin-top: 10px; }
.vista-horario > .hc-rel { grid-row: 3; grid-column: 1 / -1; margin-top: 8px; }
.vista-horario > :is(.rejilla-dias, .vacio-grande) { grid-row: 4; grid-column: 1 / -1; margin-top: 12px; }
.vista-horario.con-sopa > :is(.rejilla-dias, .vacio-grande) { grid-column: 1; }
.vista-horario > .sopa { grid-row: 4; grid-column: 2; margin: 12px 0 0 16px; }
.vista-horario > .bandeja-cambios { grid-row: 5; grid-column: 1 / -1; margin-top: 10px; }
.vista-horario > .pdf-cabecera { display: none; }

/* Ronda 3 · marco único (base.css): el horario es una vista ancha. La rejilla usa todo el ancho; los mandos, la línea y el
   panel de relaciones van al margen del marco (--marco-sangria), así su primera línea cae donde el título de las demás
   pestañas. Sin relleno propio arriba: el del marco basta (antes, al ocultarse la barra, se sumaban 12 px). */
.contenido > .vista-horario { --sangria: var(--marco-sangria, 0px); }
.contenido > .vista-horario > .horario-controles { margin-left: var(--sangria); }
.contenido > .vista-horario > .sopa-pestana { margin-right: var(--sangria); }
.contenido > .vista-horario:is(.con-sopa, :not(:has(> .sopa-pestana))) > .horario-controles { margin-right: var(--sangria); }
.contenido > .vista-horario > :is(.horario-linea, .hc-rel) { margin-inline: var(--sangria); }

/* ── mandos: una fila densa (controles de 32 px) ── */
.horario-controles {
  --alto-control: 32px;
  display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 32px;
}
.horario-controles .conmutador button { height: 28px; padding: 0 10px; font-size: 13px; }
.horario-controles .conmutador button .ic { width: 15px; height: 15px; }
.horario-controles [data-conmutador="vista"] { margin-left: auto; }
.horario-controles .hc-hueco { flex: 1 1 0; min-width: 0; }
.selector-dia { display: flex; flex: none; }
.horario-controles.una-fila { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.horario-controles.una-fila::-webkit-scrollbar { display: none; }
.horario-controles .conmutador { flex-wrap: nowrap; }

/* fecha de Asistencia: ‹ fecha › */
.selector-fecha { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.selector-fecha .boton-icono.redondo { width: 30px; height: 30px; }
.selector-fecha .boton-icono .ic { width: 16px; height: 16px; }
.sf-fecha {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: var(--r-m);
  font: 600 var(--t-m)/1 var(--f-ui); color: var(--tinta); white-space: nowrap;
  transition: background-color var(--dur) var(--ease);
}
:where(html:not(.puntero-quieto)) .sf-fecha:hover:not(:disabled), .sf-fecha[aria-expanded="true"] { background: var(--sup-3); }
.sf-fecha:disabled { cursor: default; color: var(--tinta-3); }
.sf-fecha .sf-flecha { width: 14px; height: 14px; color: var(--tinta-3); }
.sf-fecha.sin-clases .sf-texto { color: var(--tinta-3); }
.sf-fecha .sf-corto { display: none; }

/* capas (Administración): una a la vez, así que se ven como un conmutador (una pista con tres opciones; la encendida en
   blanco). La casilla real cubre la opción y no se ve; al encender otra, un aviso dice cuál se apagó. */
.horario-capas { display: flex; align-items: center; gap: 8px; flex: none; }
.horario-capas .capas { display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 2px; border-radius: var(--r-m); background: var(--sup-3); }
.horario-capas .capas-ic { display: none; }
.capa {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
  border: 0; border-radius: 6px; background: transparent; cursor: pointer;
  font: 500 13px/1 var(--f-ui); color: var(--tinta-2); white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.capa input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.capa .ic { width: 15px; height: 15px; color: var(--tinta-3); }
:where(html:not(.puntero-quieto)) .capa:hover:not(.activa) { color: var(--tinta); }
.capa.activa { background: var(--sup); box-shadow: var(--s-1); color: var(--tinta); font-weight: 600; }
.capa.activa .ic { color: var(--acento-texto); }
.vista-horario.modo-asistencia .horario-capas [data-accion="estados"] { display: none; }
.capa:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--acento-anillo); }
.horario-capas .boton.chico { height: 30px; font-size: 13px; }
.horario-capas .boton.suave { border: 1px solid var(--linea-2); background: var(--sup); color: var(--tinta-2); font-weight: 500; }
:where(html:not(.puntero-quieto)) .horario-capas .boton.suave:hover:not(:disabled) { background: var(--sup-2); color: var(--tinta); }
.horario-capas .boton.suave .ic { color: var(--tinta-3); }
.hc-mes { height: 30px; width: auto; padding: 0 28px 0 10px; font-size: 13px; }
.hc-qb { display: inline-flex; }
/* La fila se aprieta antes de cortar un botón (admin-horario.js · acomodarMandos). Ronda 3: las capas conservan siempre su
   nombre (a 1100 px quedaban como tres íconos sueltos); lo primero que se va son los íconos y el rótulo de «Más». */
.horario-controles.una-fila.ap-2 :is(.capa .ic, .conmutador button .ic) { display: none; }
.horario-controles.una-fila.ap-3 :is(.capa, .conmutador button) { padding: 0 8px; }
.horario-controles.una-fila.ap-3 .asg-alumno small { display: none; }
.horario-controles.una-fila.ap-4 [data-accion="estados"] .ic { display: none; }
.horario-controles.una-fila.ap-4 :is(.capa, .conmutador button) { padding: 0 7px; font-size: 12.5px; }
.horario-controles.una-fila.ap-5 [data-accion="mas"] > span:not(.ic) { display: none; }

/* «Alumnos» / «Sin registrar»: botón de la fila de mandos que abre la sopa */
.sopa-pestana {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border: 1px solid var(--linea-2); border-radius: var(--r-m); background: var(--sup); box-shadow: var(--s-1);
  font: 500 13px/1 var(--f-ui); color: var(--tinta-2); white-space: nowrap;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.sopa-pestana .ic { width: 15px; height: 15px; color: var(--tinta-3); }
:where(html:not(.puntero-quieto)) .sopa-pestana:hover { background: var(--sup-2); border-color: #B7BEC9; color: var(--tinta); }
/* ventana angosta en Administración (muchos mandos): «Buscar alumno» solo con su lupa */
@media (max-width: 1320px) {
  .horario-admin > .sopa-pestana { width: 32px; padding: 0; justify-content: center; }
  .horario-admin > .sopa-pestana span:not(.ic) { display: none; }
}
/* Asistencia no usa capas, Estados ni la bandeja de cambios del horario */
.vista-horario.modo-asistencia .horario-capas .capas, .vista-horario.modo-asistencia > .bandeja-cambios { display: none; }

/* ── línea: cuenta · leyenda (una sola línea; lo que no cabe se oculta entero, horario.js · acomodarLinea) ── */
.horario-linea {
  display: flex; align-items: center; gap: 4px 14px; min-width: 0; min-height: 16px; overflow: hidden; white-space: nowrap;
  font: 400 var(--t-s)/16px var(--f-ui); color: var(--tinta-3);
}
.horario-linea .fuera-linea { display: none !important; }
/* Administración: la línea mide siempre 28 px (con los mandos de Finanzas o «Todo el día» dentro): cambiar de capa no mueve
   la rejilla. */
.horario-admin > .horario-linea { height: 28px; min-height: 28px; }
.hc-fin-mandos { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.hc-fin-mandos .hc-mes { height: 26px; padding: 0 26px 0 8px; font-size: 12.5px; }
.hc-fin-mandos .boton.chico, .horario-linea .boton-todo-dia.boton.chico { height: 26px; padding: 0 9px; font-size: 12.5px; }
.hc-fin-mandos .boton.chico.suave, .horario-linea .boton-todo-dia { border: 1px solid var(--linea-2); background: var(--sup); color: var(--tinta-2); }
.hc-fin-mandos .boton .ic, .horario-linea .boton-todo-dia .ic { width: 14px; height: 14px; color: var(--tinta-3); }
.hc-ley-sep { flex: none; width: 1px; height: 14px; background: var(--linea-2); }
/* elegir y mover: la indicación va al inicio de la línea (antes un aviso abajo que tapaba tarjetas) */
.hc-eligiendo { display: inline-flex; align-items: center; flex: none; height: 22px; padding: 0 10px; border-radius: var(--r-pildora); background: var(--acento-suave); color: var(--acento-texto); font: 500 var(--t-s)/22px var(--f-ui); }
.hc-eligiendo b { font-weight: 600; }
.hc-cuenta { flex: none; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.hc-cuenta b { font-weight: 600; color: var(--tinta); }
.hc-leyenda { display: inline-flex; align-items: center; gap: 14px; flex: none; }
.hc-leyenda > b { font-weight: 600; color: var(--tinta-2); }
.ley-item { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--tinta-2); }
.ley-nota { flex: none; color: var(--tinta-3); }
/* columnas sin alumnos ese día: no se pintan; la línea las nombra y las muestra con un clic */
.hc-plegadas { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 20px; padding: 0 2px; border-radius: var(--r-s); font: 400 var(--t-s)/16px var(--f-ui); color: var(--tinta-3); }
.hc-plegadas span { font-weight: 600; color: var(--acento-texto); }
:where(html:not(.puntero-quieto)) .hc-plegadas:hover span { text-decoration: underline; }
/* muestra de ficha (14 × 10, como las fichas de la rejilla) */
.ley-ficha { display: inline-block; flex: none; width: 14px; height: 10px; border-radius: 3px; background: var(--sup); box-shadow: inset 0 0 0 1px var(--linea-2); }
/* anillo de estado (como en la foto) */
.ley-anillo { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--avatar-fondo); box-shadow: inset 0 0 0 2.5px var(--e, var(--tinta-4)); }

/* «Datos de Airtable»: plegado y discreto al final de la línea; abierto, un panel flotante anclado */
.horario-sin-dia { position: relative; flex: none; margin-left: auto; display: flex; align-items: center; }
.horario-sin-dia[hidden] { display: none !important; } /* Profesor y Recepción: el diagnóstico no se ve (solo Administración) */
.horario-linea > .horario-sin-dia > .hsd-items { display: none; }
.horario-datos { position: relative; }
.horario-datos summary {
  display: flex; align-items: center; gap: 4px; height: 16px; padding: 0 6px; border-radius: var(--r-s); list-style: none; cursor: pointer;
  font: 500 var(--t-xs)/1 var(--f-ui); color: var(--tinta-4);
}
.horario-datos summary::-webkit-details-marker { display: none; }
.horario-datos summary::before { content: ''; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); margin-right: 2px; }
.horario-datos[open] summary::before { transform: rotate(45deg); }
:where(html:not(.puntero-quieto)) .horario-datos summary:hover, .horario-datos[open] summary { color: var(--tinta-2); background: var(--sup-3); }
.horario-datos-caja {
  position: fixed; z-index: 60; right: 24px; width: min(440px, calc(100vw - 48px)); max-height: min(420px, calc(100vh - 220px)); overflow: auto;
  margin-top: 6px; padding: 12px 14px; display: grid; gap: 10px; white-space: normal;
  background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--s-3);
  font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-2);
}
.horario-datos-caja .hsd-items { display: grid; gap: 4px; }
.horario-datos-caja .hsd-item { display: flex; align-items: center; gap: 6px; color: var(--tinta-2); }
.horario-datos-caja .hsd-item .ic { width: 14px; height: 14px; color: var(--tinta-3); }
.horario-datos-caja ul { display: grid; gap: 4px; padding-left: 0; }
.horario-datos-caja li { padding-left: 12px; position: relative; }
.horario-datos-caja li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--tinta-4); }
.horario-datos-caja .enlace-discreto { justify-self: start; font-size: var(--t-s); }

/* ───────────── 2 · la rejilla: filas = horas, columnas = instrumentos, una sección por día ───────────── */
.rejilla-dias {
  min-height: 0; overflow: auto; display: grid; gap: 28px 32px; align-content: start; align-items: start; justify-content: start;
  grid-template-columns: minmax(0, 1fr); padding: 0 2px 24px 0; overscroll-behavior: contain; scroll-padding: 40px 0 0 72px;
}
.rejilla-dias.lado > .rejilla-dia { min-width: 0; }
.rejilla-dias.lado[data-lado="2"] > .rejilla-dia:nth-child(n+3) { grid-column: 1 / -1; }
.rejilla-dias.pila { grid-template-columns: minmax(0, 1fr); }
/* «Todos» apilado: una sola cuadrícula de columnas para todos los días (cada instrumento en su columna) */
.rejilla-dias.alineada { column-gap: 6px; justify-content: start; }
.rejilla-dias.alineada > .rejilla-dia { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.rejilla-dias.alineada > .rejilla-dia > .rejilla { grid-column: 1 / -1; }
/* Ronda 3 · lo que no cabe se desliza dentro de la caja (la hora queda fija a la izquierda). Nada se corta en seco: el borde
   que sigue lleva un degradado y, a la altura de las cabeceras, un botón con el nombre de lo que queda fuera
   («Despertar Musical ›»); al deslizar, otro a la izquierda para volver. Van encima, en la celda de la rejilla. */
.vista-horario > .hc-desliza {
  grid-row: 4; grid-column: 1 / -1; align-self: stretch; z-index: 7; width: 72px; margin-top: 12px; pointer-events: none; position: relative;
}
.vista-horario.con-sopa > .hc-desliza { grid-column: 1; }
.vista-horario > .hc-desliza[hidden] { display: none; }
.vista-horario > .hc-desliza.der { justify-self: end; background: linear-gradient(to right, transparent, var(--fondo-rejilla) 78%); }
.vista-horario > .hc-desliza.izq { justify-self: start; width: 56px; background: linear-gradient(to left, transparent, var(--fondo-rejilla) 70%); }
.hc-desliza-ir {
  position: absolute; top: -1px; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px 0 10px; pointer-events: auto;
  border: 1px solid var(--linea-2); border-radius: var(--r-pildora); background: var(--sup); box-shadow: var(--s-2);
  font: 600 12.5px/1 var(--f-ui); color: var(--tinta-2); white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.hc-desliza.der .hc-desliza-ir { right: 4px; }
.hc-desliza.izq .hc-desliza-ir { left: 4px; padding: 0 10px 0 8px; }
.hc-desliza-ir .ic { width: 14px; height: 14px; color: var(--tinta-3); }
:where(html:not(.puntero-quieto)) .hc-desliza-ir:hover { background: var(--sup-2); color: var(--tinta); }
.horario-asignar > .hc-desliza { margin-top: 4px; }
.horario-asignar .hc-desliza-ir { height: 20px; font-size: 11.5px; }
/* con línea, los botones van a su final (no tapan las cabeceras de la rejilla) */
.hc-deslizar { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
.hc-deslizar .hc-desliza-ir { position: static; height: 22px; margin-block: -3px; box-shadow: var(--s-1); }
.hc-deslizar .hc-desliza-ir[hidden] { display: none; }
.horario-asignar .hc-deslizar .hc-desliza-ir { height: 20px; }
.por-semana .rejilla-dias { gap: 20px 24px; }
/* Ronda 3 · varios días uno debajo del otro: una línea fina y aire separan los días; el nombre del día pesa más que las
   cabeceras de instrumento. */
.rejilla-dias:is(.pila, .alineada) > .rejilla-dia + .rejilla-dia { padding-top: 18px; border-top: 1px solid var(--linea-2); }
.rejilla-dias.varios .rejilla .rg-esquina { font: 700 var(--t-l)/18px var(--f-ui); }
/* «Todos» apilado: las columnas de la unión que un día no tiene llevan su nombre en gris claro y renglones vacíos */
.rejilla .rg-relleno {
  position: sticky; top: 0; z-index: 2; align-self: end; display: flex; align-items: flex-end; min-width: 0; padding: 0 4px 6px;
  background: var(--fondo-rejilla); box-shadow: 0 6px 0 var(--fondo-rejilla); font: 500 13px/16px var(--f-ui); color: var(--tinta-4); white-space: nowrap;
}
.rejilla .rj-relleno { min-width: 0; box-shadow: inset 0 1px 0 rgba(22, 29, 43, .06); }
.rejilla .rj-relleno.fuera-clase { box-shadow: inset 0 1px 0 rgba(22, 29, 43, .045); }
.rejilla-dias.apretada .rejilla .rg-relleno { font-size: 12px; }
.rejilla-dia { display: grid; min-width: 0; }

.rejilla { display: grid; gap: 6px; align-items: stretch; }
/* las pistas las mide horario.js (repartir): sin transición (con movimiento reducido, base.css da .01 s a todo y la medida
   leería el valor de antes) */
.rejilla, .rejilla-dias { transition-property: none !important; }
.rejilla.holgada { gap: 8px; }
.rejilla.holgada[data-columnas="1"] { max-width: 640px; }
.rejilla.holgada[data-columnas="2"] { max-width: 980px; }
.rejilla.holgada[data-columnas="3"] { max-width: 1320px; }

/* cabeceras pegajosas con el fondo de la app: lo que pasa por debajo no se lee */
.rejilla .rg-esquina {
  position: sticky; left: 0; top: 0; z-index: 4; align-self: end; display: flex; flex-direction: column; align-items: flex-start;
  padding: 0 0 6px 2px; background: var(--fondo-rejilla); box-shadow: 0 6px 0 var(--fondo-rejilla), 6px 0 0 var(--fondo-rejilla), 6px 6px 0 var(--fondo-rejilla);
  font: 600 13px/16px var(--f-ui); color: var(--tinta); white-space: nowrap;
}
/* en Semana, la fecha del día debajo del nombre (no invade la primera columna) */
.rejilla .rg-esquina .rg-fecha { font: 500 12px/16px var(--f-ui); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.rejilla .rg-inst {
  position: sticky; top: 0; z-index: 2; align-self: end; display: flex; align-items: flex-end; min-width: 0; padding: 0 4px 6px;
  background: var(--fondo-rejilla); box-shadow: 0 6px 0 var(--fondo-rejilla);
  font: 600 13px/16px var(--f-ui); color: var(--tinta-2); white-space: nowrap;
}
.rejilla .rg-inst.sin-grupos { color: var(--tinta-3); font-weight: 500; }
.rejilla-dias.compacta .rg-inst { font-size: 12.5px; padding: 0 2px 6px; }
/* la hora: texto arriba a la izquierda de su fila, sin caja */
.rejilla .rg-hora {
  position: sticky; left: 0; z-index: 3; display: flex; align-items: flex-start; justify-content: flex-start; padding: 7px 0 0 2px;
  background: var(--fondo-rejilla); box-shadow: 6px 0 0 var(--fondo-rejilla);
  font: 600 var(--t-m)/18px var(--f-ui); color: var(--tinta); font-variant-numeric: tabular-nums;
}
.rejilla .rg-hora.sin-hora { font: 600 13px/18px var(--f-ui); color: var(--tinta-2); white-space: nowrap; }
.rejilla-dias.apretada .rejilla .rg-hora { font-size: 13px; }
.rejilla-dias.apretada .rejilla .rg-hora.sin-hora { font-size: 11px; }
.rejilla .rg-hora.fuera-clase { padding-top: 5px; font: 500 var(--t-s)/16px var(--f-ui); color: var(--tinta-3); }

/* la celda: el hueco sin grupo no se pinta (13 oct · ronda 2: el gris pesaba más que los grupos); una línea fina arriba
   marca la fila */
.rj-celda { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 6px; border-radius: var(--r-l); }
.rj-celda.nohay { background: transparent; box-shadow: inset 0 1px 0 rgba(22, 29, 43, .06); border-radius: 0; }
.rj-celda.fuera-clase.nohay { box-shadow: inset 0 1px 0 rgba(22, 29, 43, .045); }
.rejilla .rg-hora { border-top: 0; }
.rejilla-profesor .rj-celda.nohay { min-width: 120px; box-shadow: none; }
.rejilla .rj-celda[data-inst="_sin"] { box-shadow: none; } /* día sin grupos: sin renglones (no parece una carga a medias) */
/* Ronda 3 · día sin grupos (Domingo con Disponibilidades): el vacío de componentes.css sobre sus horas, sin cabecera de
   columna; las horas quedan para el velo de disponibilidad al pasar el ratón sobre un alumno. */
.rejilla.sin-grupos { position: relative; }
/* absoluto dentro de su área de la cuadrícula: no estira las filas de las horas */
.rejilla .rj-vacio { grid-column: 2; grid-row: 2 / -1; position: absolute; top: 24px; left: 0; right: 0; z-index: 2; pointer-events: none; }
.rejilla .rj-vacio .vacio-grande.chico { padding: 0 8px; }
.rejilla.sin-grupos .rg-inst.sin-grupos { color: transparent; }
.rj-celda[data-drop-celda] { cursor: pointer; }
.rj-celda.sobre { box-shadow: inset 0 0 0 2px var(--acento); }

/* ───────────── 3 · el grupo: tarjeta blanca, profesor arriba en gris ───────────── */
.bloque {
  position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 5px 5px 6px;
  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), border-color var(--dur) var(--ease), opacity .3s var(--ease);
}
.rj-celda > .bloque { flex: 0 0 auto; min-height: 0; z-index: 1; } /* el velo de disponibilidad va detrás de la tarjeta (no la corta) */
/* ronda 3: la tarjeta mide lo que su contenido (antes se estiraba al alto de la fila: tarjetas medio vacías, «Sin alumnos» de
   140 px); la fila se lee igual por su línea fina y por la hora. */
.bloque.sobre { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento-anillo), var(--s-2); }
.rejilla-general .bloque.mio { border-color: color-mix(in srgb, var(--acento) 40%, var(--linea)); }
.bl-cab { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; flex: none; min-width: 0; min-height: 18px; padding: 0 3px; }
.bl-nombre { font: 500 var(--t-s)/16px var(--f-ui); color: var(--tinta-3); white-space: nowrap; }
/* el nombre del profesor ocupa lo que queda y salta de línea entre palabras; «Mi clase» y ⋯ quedan a su derecha */
.bl-cab > :is(.bl-nombre, .bl-prof) { flex: 1 1 0; }
.bl-cab > .bl-prof { justify-content: flex-start; }
.bl-nombre.sin { color: var(--tinta-4); }
.bl-prof {
  display: inline-flex; align-items: center; min-width: 0; max-width: 100%; min-height: 18px; margin-left: -3px; padding: 1px 3px; border-radius: var(--r-s);
  font: 500 var(--t-s)/16px var(--f-ui); color: var(--tinta-3); cursor: pointer; text-align: left;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bl-prof span { min-width: 0; white-space: nowrap; }
.bl-prof .ic { display: none; }
.bl-prof.sin { color: var(--tinta-4); }
:where(html:not(.puntero-quieto)) .bl-prof:hover { color: var(--acento-texto); } /* sin fondo: no parece un estado pegado */
.bl-mio { flex: none; margin-left: auto; height: 18px; padding: 0 7px; border-radius: var(--r-pildora); background: var(--acento-suave); color: var(--acento-texto); font: 600 11px/18px var(--f-ui); white-space: nowrap; }
.bl-candado { flex: none; margin-left: auto; color: var(--ok); display: inline-flex; }
.bl-candado .ic { width: 14px; height: 14px; }
.bl-mio + .bl-candado { margin-left: 4px; }
.bl-menu {
  flex: none; margin-left: auto; width: 24px; height: 18px; border-radius: var(--r-s); color: var(--tinta-3);
  font: 700 14px/1 var(--f-ui); letter-spacing: .04em; cursor: pointer;
}
.bl-mio + .bl-menu, .bl-candado + .bl-menu { margin-left: 4px; }
:where(html:not(.puntero-quieto)) .bl-menu:hover { background: var(--sup-3); color: var(--tinta); }
.bl-nota { padding: 2px 3px; font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.bl-ocultos { align-self: flex-start; padding: 0 3px; font: 500 var(--t-xs)/18px var(--f-ui); color: var(--tinta-3); white-space: nowrap; }
:where(html:not(.puntero-quieto)) .bl-ocultos:hover { color: var(--acento-texto); }
/* Comentario 25 · KISS: en Administración, sin el contador «+ n en pausa» (el menú Estados es el mando). */
.horario-admin:not(.horario-asignar) .rejilla .bl-ocultos { display: none; }
/* donde «+ n en pausa» sí se ve (la ficha del alumno), «Sin alumnos a la vista» sobra */
.horario-asignar .bloque:has(.bl-ocultos) .bl-nota { display: none; }
.bloque.vacio .bl-nota { color: var(--tinta-4); }
/* ronda 3: un grupo sin nadie a la vista pesa menos que uno con alumnos (sin fondo blanco ni sombra) */
.rejilla .bloque.vacio { background: transparent; box-shadow: none; }

/* ───────────── 4 · la ficha del alumno: blanca, foto, nombre y edad ───────────── */
.bl-alumnos { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* 13 oct · ronda 2: la ficha es una fila dentro de la tarjeta del grupo (sin tarjeta dentro de tarjeta); el borde aparece
   solo cuando dice algo (elegido, movido, otro instrumento, otra clase) */
.rejilla .bl-alumno {
  position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; min-height: var(--u, 30px); padding: 2px 6px 2px 2px;
  background: var(--sup); border: 1px solid transparent; border-radius: var(--r-s); color: var(--tinta);
  font: 600 13px/16px var(--f-ui); text-align: left;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity .3s var(--ease), box-shadow var(--dur) var(--ease);
}
.rejilla .bl-alumno .avatar { flex: none; transition: box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease), filter var(--dur) var(--ease); }
/* Ronda 3: el nombre entero en una línea, siempre (la columna mide lo que él; si la rejilla no cabe, se desliza). Nunca
   parte una palabra ni lleva «…» (horario.js · nomFicha) */
.bl-nom { flex: 1 1 auto; white-space: nowrap; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.bl-edad { flex: none; margin-left: auto; padding-left: 2px; font: 500 12px/16px var(--f-ui); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.bl-marcas { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.bl-marcas:empty { display: none; }
/* al medir las columnas (horario.js · medirColumnas), el hueco de las marcas de las capas: encenderlas no mueve nada */
.rejilla.midiendo .bl-alumno .bl-marcas { display: inline-flex !important; min-width: 27px; }
.rejilla .bl-alumno.movible { cursor: grab; }
.rejilla .bl-alumno:not(.marcable):not(.movible):not(.sin-tomar) { cursor: pointer; }
:where(html:not(.puntero-quieto)) .rejilla .bl-alumno:is(.movible, .marcable):hover { background: var(--sup-3); }
:where(html:not(.puntero-quieto)) .rejilla .bl-alumno:not(.movible):not(.marcable):not(.sin-tomar):hover { background: var(--sup-2); }
/* los que no asisten (Pausa, Desistió, Aspirante…) en gris; Lista de Espera y Esperando pagos ya los dice su anillo */
.rejilla .bl-alumno.no-vigente:not([data-estado="Lista de Espera"], [data-estado="Esperando pagos"]) { color: var(--tinta-3); }
.rejilla .bl-alumno.no-vigente:not([data-estado="Lista de Espera"], [data-estado="Esperando pagos"]) .avatar { opacity: .6; }
.modo-horario .rejilla .bl-alumno.e-desistio .bl-nom { text-decoration: line-through; text-decoration-color: var(--tinta-4); }

/* estado del alumno (Administración): anillo fino en la foto con el tono de su estado; Activo sin marca */
/* Ronda 3: anillo de 2 px tras 1 px de blanco (antes 1,5 px: los tonos se confundían a 24 px) */
.horario-admin.modo-horario .bl-alumno[data-estado]:not([data-estado="Activo"]) .avatar,
.horario-admin .sopa-alumno[data-estado]:not([data-estado="Activo"]) .avatar { box-shadow: 0 0 0 1px var(--sup), 0 0 0 3px var(--e, var(--tinta-4)); }
.horario-admin .rejilla .bl-alumno { padding-left: 3px; }

/* elegir y mover (Administración): el elegido destaca; lo movido queda punteado hasta «Aplicar» */
.rejilla .bl-alumno.elegido, .rejilla .bl-alumno.elegido:hover, .sopa-alumno.elegido, .sopa-alumno.elegido:hover { background: var(--acento) !important; border-color: var(--acento); color: #fff; box-shadow: 0 0 0 3px var(--acento-anillo); }
:is(.rejilla .bl-alumno, .sopa-alumno).elegido :is(.bl-edad, small, b) { color: #fff !important; }
/* Ronda 3 · un aspecto por significado (con su leyenda): pendiente de aplicar = borde azul punteado y fondo azul suave,
   siempre (también si cambia de instrumento: eso lo dice la bandeja); otro instrumento que el del grupo (hay que revisar la
   ficha) = una barra ámbar a la izquierda. El punteado ámbar ya no se usa en el horario. */
.rejilla .bl-alumno.movido { border-style: dashed; border-color: var(--acento); background: var(--acento-suave); }
.rejilla .bl-alumno.otroins:not(.movido) { box-shadow: inset 3px 0 0 var(--aviso); }
.ley-ficha.movido { background: var(--acento-suave); box-shadow: none; outline: 1px dashed var(--acento); outline-offset: -1px; }
.ley-ficha.otroins { background: var(--sup); box-shadow: inset 3px 0 0 var(--aviso), inset 0 0 0 1px var(--linea-2); }
/* quien sale de este grupo con un cambio pendiente: su rastro, en gris, con el destino */
.rejilla .bl-sale { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: var(--u, 30px); padding: 2px 6px; border: 1px dashed color-mix(in srgb, var(--acento) 45%, #fff); border-radius: var(--r-s); font: 500 12.5px/16px var(--f-ui); color: var(--tinta-3); }
.rejilla .bl-sale .bl-nom { text-decoration: line-through; text-decoration-color: var(--tinta-4); }
.rejilla .bl-sale-a { flex: none; margin-left: auto; color: var(--acento-texto); white-space: nowrap; }
.ley-ficha.propuesta { background: var(--acento-suave); box-shadow: inset 0 0 0 1.5px var(--acento); }
/* elegido para mover: los grupos se ofrecen como destino */
.vista-horario.eligiendo .rejilla .bloque[data-drop-grupo] { cursor: pointer; }
:where(html:not(.puntero-quieto)) .vista-horario.eligiendo .rejilla .bloque[data-drop-grupo]:hover { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento-anillo), var(--s-2); }
.destello { animation: destello 1.6s var(--ease); }
@keyframes destello { 0%, 60% { box-shadow: 0 0 0 3px var(--acento-anillo), 0 0 0 1px var(--acento); } }
.arrastrando { opacity: .35; }
.fantasma { position: fixed; z-index: 100; pointer-events: none; transform: translate(-50%, -50%) rotate(-1.5deg); box-shadow: var(--s-3) !important; background: var(--sup); }
body.arrastre, body.arrastre * { cursor: grabbing !important; }

/* Celdas angostas: ya no se aprietan por contenedor; la columna mide lo que su nombre más largo (horario.js · repartir) y lo
   que no cabe se desliza dentro de la caja. Con muchas columnas («Todos» apilado, 8 columnas) la letra baja un paso. */
.rejilla-dias.compacta .rejilla-general .bl-alumno, .rejilla-general[data-columnas="8"] .bl-alumno, .rejilla-general[data-columnas="9"] .bl-alumno, .rejilla-general[data-columnas="10"] .bl-alumno { font-size: 12.5px; gap: 5px; }
.rejilla-dias.compacta .rejilla-general .bl-edad, .rejilla-general:is([data-columnas="8"], [data-columnas="9"], [data-columnas="10"]) .bl-edad { font-size: 11.5px; }
/* y si aun así no cabe, un paso más (letra 12, foto 20, menos relleno) antes de deslizar dentro de la caja */
.rejilla-dias.apretada .rejilla-general .bl-alumno { gap: 4px; padding: 1px 4px 1px 2px; font-size: 12px; line-height: 15px; }
.rejilla-dias.apretada .rejilla-general .bl-alumno .avatar { width: 18px !important; height: 18px !important; font-size: 7px !important; }
.rejilla-dias.apretada .rejilla-general .bl-edad { font-size: 11px; }
.rejilla-dias.apretada .rejilla-general .rj-celda > .bloque { padding: 4px 3px 4px; }
.rejilla-dias.apretada .rejilla-general :is(.bl-nombre, .bl-prof) { font-size: 12px; }
.rejilla-dias.apretada .rejilla .rg-inst { font-size: 12px; }
.rejilla-dias.apretada .rejilla .bl-alumno.presente::after { width: 8px; height: 4px; margin-right: 1px; }
.rejilla-dias.apretada .rejilla-general .rj-celda > .bloque { padding-inline: 2px; }
.rejilla-dias.apretada .rejilla { column-gap: 4px; }
.rejilla-dias.apretada.lado { column-gap: 20px; }
.rejilla-dias.apretada.alineada { column-gap: 4px; }

/* ───────────── 5 · vista holgada: pocos grupos en el día → columnas anchas y fichas grandes ───────────── */
.rejilla.holgada .bloque { padding: 8px 8px 9px; gap: 6px; }
.rejilla.holgada .bl-cab { min-height: 20px; }
.rejilla.holgada :is(.bl-nombre, .bl-prof) { font-size: var(--t-m); }
.rejilla.holgada .bl-alumnos { gap: 4px; }
.rejilla.holgada .bl-alumno { gap: 10px; padding: 4px 10px 4px 5px; font-size: var(--t-l); line-height: 20px; }
.rejilla.holgada .bl-edad { font-size: 13px; }
.rejilla.holgada .bl-edad::after { content: ' años'; }
.rejilla.holgada .rg-inst { font-size: var(--t-m); }
.rejilla.holgada .rg-hora { font-size: var(--t-l); padding-top: 10px; }

/* ───────────── 6 · vista del profesor: sus grupos, fichas grandes ───────────── */
.rejilla-profesor .rj-celda > .bloque { padding: 10px 10px 12px; gap: 8px; }
.rejilla-profesor .bl-cab { min-height: 24px; padding: 0 4px; }
.rejilla-profesor .bl-nombre { font: 600 var(--t-xl)/24px var(--f-ui); color: var(--tinta); }
.rejilla-profesor .bl-alumnos { display: grid; grid-template-columns: repeat(var(--cols, 2), 280px); gap: 2px 12px; }
.rejilla-dias.estrecho .rejilla-profesor .bl-alumnos { grid-template-columns: 280px; }
/* la tarjeta mide lo que sus fichas (no se estira a todo el ancho) */
.rejilla-profesor .rj-celda > .bloque { align-self: flex-start; max-width: 100%; }
/* una sola columna: el instrumento ya lo dice la tarjeta («Piano 9:30»), sin rótulo encima */
.rejilla-profesor[data-columnas="1"] .rg-inst { visibility: hidden; }
.rejilla-profesor .bl-alumno { gap: 8px; padding: 5px 8px 5px 4px; font: 600 var(--t-l)/18px var(--f-ui); border-radius: var(--r-m); }
.rejilla-profesor .bl-edad { font-size: 12.5px; margin-left: 2px; }
/* ronda 3: la edad junto al nombre (antes al otro extremo de la ficha: el ojo saltaba) */
.rejilla-profesor .bl-nom { flex: none; }
.rejilla-profesor .bl-edad::after { content: ' años'; }
.rejilla-profesor .rg-hora { font-size: var(--t-l); padding-top: 12px; }
.rejilla-profesor .rg-inst { font-weight: 500; color: var(--tinta-3); }

/* ───────────── 7 · Asistencia: lo normal en calma, las excepciones con su palabra ───────────── */
/* 17 oct · asistencias · colores (pedido de Juan David: «que aparezcan azul los presentes y gris los ausentes… más
   fuerte… porque ahora se confunde»): presente = ficha azul con ✓ azul · ausente = ficha gris con la palabra «ausente» ·
   el rojo, solo la clase sin tomar (abajo). Antes: ✓ verde sin fondo y ausente blanco. Otra clase = borde azul punteado · repetido = borde ámbar punteado · sin tomar = la tarjeta lo dice y lleva
   «Pasar lista»; sus alumnos esperados en gris, sin marca */
.rejilla .bl-alumno.marcable { cursor: pointer; touch-action: none; }
.rejilla .bl-alumno.presente::after {
  content: ''; flex: none; width: 9px; height: 5px; margin: -3px 3px 0 auto; border-left: 2px solid var(--presente-texto); border-bottom: 2px solid var(--presente-texto); transform: rotate(-45deg);
}
.rejilla .bloque .bl-alumno[data-fila].presente { background: var(--presente-tinte); border-color: var(--presente-borde); --tinta-2: var(--asis-tinta); --tinta-3: var(--asis-tinta); }
.rejilla .bloque .bl-alumno[data-fila].ausente { background: var(--ausente-tinte); border-color: var(--ausente-borde); --tinta-2: var(--asis-tinta); --tinta-3: var(--asis-tinta); }
:where(html:not(.puntero-quieto)) .rejilla .bloque .bl-alumno[data-fila].marcable.presente:hover { background: color-mix(in srgb, var(--presente) 30%, var(--sup)); }
:where(html:not(.puntero-quieto)) .rejilla .bloque .bl-alumno[data-fila].marcable.ausente:hover { background: color-mix(in srgb, var(--ausente) 34%, var(--sup)); }
.rejilla .bl-alumno.presente .bl-marcas:not(:empty) + * { margin-left: 0; }
.bl-falta {
  flex: none; margin-left: auto; height: 18px; padding: 0 6px; border-radius: var(--r-pildora); background: var(--sup);
  box-shadow: inset 0 0 0 1px var(--ausente-borde); font: 600 11px/18px var(--f-ui); color: var(--ausente-texto); white-space: nowrap;
}
.rejilla .bl-alumno.ausente .avatar { opacity: .7; }
.rejilla .bl-alumno.otro { border-style: dashed; border-color: var(--presente); }
/* repetido (la misma persona dos veces en la clase): la palabra, en ámbar (antes, borde ámbar punteado) */
.bl-repetido { flex: none; height: 18px; padding: 0 6px; border-radius: var(--r-pildora); background: var(--aviso-fondo); font: 600 11px/18px var(--f-ui); color: var(--aviso-texto); white-space: nowrap; }
.rejilla .bl-alumno .bl-repetido { margin-left: auto; }
.rejilla .bl-alumno .bl-repetido + .bl-falta { margin-left: 4px; }
.rejilla .bl-alumno.presente:has(.bl-repetido)::after { margin-left: 6px; }
.rejilla .bl-alumno.sin-tomar { color: var(--tinta-3); font-weight: 500; cursor: inherit; }
.rejilla .bl-alumno.sin-tomar .avatar { filter: grayscale(1); opacity: .5; }
/* la clase sin asistencia: rojo solo si ya pasó; ámbar si es hoy; gris si viene */
.bloque.sin-asistencia { cursor: pointer; }
.bloque.sin-asistencia.vencida { border-color: color-mix(in srgb, var(--peligro) 55%, #fff); }
.bloque.sin-asistencia.hoy { border-color: color-mix(in srgb, var(--aviso) 70%, #fff); }
.bl-alerta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 1px 1px 2px 3px; }
.bl-alerta-t { display: inline-flex; align-items: flex-start; gap: 5px; font: 600 var(--t-s)/16px var(--f-ui); color: var(--tinta-3); text-wrap: balance; }
.bl-alerta-t .ic { flex: none; margin-top: 1px; }
.bl-alerta .ic { width: 14px; height: 14px; }
.bloque.vencida .bl-alerta-t { color: var(--peligro-texto); }
.bloque.hoy .bl-alerta-t { color: var(--aviso-texto); }
.bl-pasar.boton.chico { height: 24px; margin-left: auto; padding: 0 9px; font-size: 12px; }
:where(html:not(.puntero-quieto)) .bloque.sin-asistencia:hover { box-shadow: var(--s-2); }
.bloque.sin-registro { background: transparent; border-style: dashed; border-color: var(--linea-2); box-shadow: none; cursor: help; }
.bloque.sin-registro .bl-nota { color: var(--tinta-3); }
.bloque.validado { border-color: color-mix(in srgb, var(--ok) 35%, var(--linea)); }
.rejilla-profesor .bl-alerta-t { font-size: var(--t-m); }
/* 15 oct · RONDA-FINAL §2: la clase sin asistencia tomada (ya pasada o de hoy) muestra a sus alumnos en fichas completas del
   tono de la clase, como las de presente y ausente: rojo si ya pasó, ámbar si es hoy; la foto a color, el nombre en el tono.
   «Pasar lista» sigue a la vista en la cabecera. Una clase por venir no cambia (gris). */
.bloque.sin-asistencia:is(.vencida, .hoy) .bl-alumno.sin-tomar { font-weight: 600; }
.bloque.sin-asistencia:is(.vencida, .hoy) .bl-alumno.sin-tomar .avatar { filter: none; opacity: 1; }
.bloque.sin-asistencia.vencida .bl-alumno.sin-tomar { background: var(--peligro-fondo); border-color: color-mix(in srgb, var(--peligro) 40%, transparent); color: var(--peligro-texto); }
.bloque.sin-asistencia.hoy .bl-alumno.sin-tomar { background: var(--aviso-fondo); border-color: color-mix(in srgb, var(--aviso) 50%, transparent); color: var(--aviso-texto); }
.bloque.sin-asistencia:is(.vencida, .hoy) .bl-alumnos.esperados { gap: 2px; }
/* Recepción: el borde del ausente dice el motivo · sin motivo = te toca llamar (ámbar), «No Contestó» ámbar punteado,
   con motivo gris (igual que pendientes.css, que pinta la pantalla de Recepción) */
.recepcion .rejilla .bl-alumno.ausente.motivo-falta { border-color: var(--aviso); box-shadow: inset 0 0 0 1px var(--aviso); }
.recepcion .rejilla .bl-alumno.ausente.motivo-nc { border-color: var(--aviso); border-style: dashed; }
.recepcion .rejilla .bl-alumno.ausente.motivo-ok { border-color: var(--ausente-borde); }
.recepcion .rejilla .bl-alumno.ausente .bl-falta { display: none; } /* en Recepción lo dice el borde, con su leyenda */
.marca-motivo { display: inline-block; flex: none; width: 7px; height: 7px; margin-left: 2px; border-radius: 50%; background: var(--aviso); font-size: 0; }
/* muestras de la leyenda de asistencia */
.ley-ficha.presente { background: var(--presente-tinte); box-shadow: inset 0 0 0 1px var(--presente-borde); }
.ley-item :is(.bl-falta, .bl-repetido) { margin: 0; }
.ley-ficha.ausente { background: var(--ausente-tinte); box-shadow: inset 0 0 0 1px var(--ausente-borde); }
.ley-ficha.otro { background: var(--presente-tinte); box-shadow: none; outline: 1px dashed var(--presente); outline-offset: -1px; }
.ley-ficha.sin-tomar { background: var(--sup); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--peligro) 55%, #fff); }
.ley-ficha.ausente.motivo-falta { box-shadow: inset 0 0 0 1.5px var(--aviso); }
.ley-ficha.ausente.motivo-nc { box-shadow: none; outline: 1.5px dashed var(--aviso); outline-offset: -1.5px; }
.ley-ficha.ausente.motivo-ok { box-shadow: inset 0 0 0 1px var(--ausente-borde); }

/* ───────────── 8 · capas de Administración (de a una, cada una con su leyenda) ───────────── */
/* foco (Relaciones o velo): la rejilla es lo que cambia; los mandos y la línea quedan como están */
.horario-admin .rejilla .bloque .bl-cab { transition: opacity .3s var(--ease); }

/* Relaciones · al pasar el ratón (o con el alumno elegido): él y sus relacionados enteros, lo demás muy claro */
.vista-horario.horario-admin.rel-foco .rejilla .bl-alumno:not(.f-rel), .vista-horario.horario-admin.rel-foco .sopa-alumno:not(.f-rel) { opacity: .22; }
.vista-horario.horario-admin.rel-foco .rejilla .bloque:not(.f-rel) .bl-cab { opacity: .5; }
.vista-horario.horario-admin.rel-foco .rejilla .bl-alumno.f-rel { opacity: 1; }
/* 13 oct · ronda 2: el alumno bajo el ratón es el más fuerte (fondo y borde azul, como lo elegido); sus hermanos con un
   contorno violeta, sin fondo; la misma persona en otra ficha con contorno ámbar punteado (hay que corregirla) */
.rejilla .bl-alumno.f-yo, .sopa-alumno.f-yo { background: var(--acento-suave); border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
.rejilla .bl-alumno.f-herm, .sopa-alumno.f-herm { background: var(--sup); border-color: var(--e-aspirante); box-shadow: 0 0 0 1px var(--e-aspirante); }
.rejilla .bl-alumno.f-mismo, .sopa-alumno.f-mismo { background: var(--sup); border-color: var(--aviso); box-shadow: 0 0 0 1px var(--aviso); }
/* insignia «herm.» / «mismo»: un punto a la derecha de la ficha (fuera del nombre y de la foto) */
.marca-rel { display: inline-block; flex: none; width: 8px; height: 8px; padding: 0; border-radius: 50%; font-size: 0; cursor: help; }
.marca-rel.herm { background: var(--e-aspirante); }
.marca-rel.mismo { background: var(--aviso); }
.ley-item .marca-rel { cursor: default; }
/* panel «Hermanos y fichas repetidas» (plegado, bajo la línea) */
.hc-rel { border: 1px solid var(--linea); border-radius: var(--r-l); background: var(--sup); }
.hc-rel summary {
  display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; list-style: none; cursor: pointer;
  font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3);
}
.hc-rel summary::-webkit-details-marker { display: none; }
.hc-rel summary::after { content: ''; width: 6px; height: 6px; margin-left: auto; border-right: 1.5px solid var(--tinta-3); border-bottom: 1.5px solid var(--tinta-3); transform: rotate(45deg); }
.hc-rel[open] summary::after { transform: rotate(-135deg); }
.hc-rel summary .ic { width: 15px; height: 15px; color: var(--tinta-3); }
.hc-rel summary b { font-weight: 600; color: var(--tinta); }
.hc-rel-cuerpo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; max-height: 220px; overflow: auto; padding: 4px 12px 12px; border-top: 1px solid var(--linea); }
.hc-rel-cuerpo h3 { margin: 8px 0 6px; font: 600 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-2); }
.hc-rel-g { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 2px 12px; padding: 5px 0; border-top: 1px solid var(--linea); font: 400 var(--t-s)/var(--lh-s) var(--f-ui); }
.hc-rel-g .quien { grid-row: span 9; font-weight: 600; color: var(--tinta); }
.hc-ir { justify-self: start; padding: 0 4px; margin-left: -4px; border-radius: var(--r-s); text-align: left; color: var(--tinta-2); }
.hc-ir span { color: var(--tinta-3); }
.hc-ir.fuera span { color: var(--tinta-4); }
:where(html:not(.puntero-quieto)) .hc-ir:hover { background: var(--sup-3); color: var(--tinta); }

/* Disponibilidades · velo suave: verde tenue donde puede (media fila si es media hora), nada donde no */
.horario-admin { --velo-si: rgba(35, 147, 90, .12); --velo-no: transparent; }
.horario-admin .rejilla :is(.rj-celda, .rg-hora)[data-min]::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background: transparent;
  transition: background-color .3s var(--ease);
}
.horario-admin .rejilla .rg-hora[data-min]::after { right: -6px; border-radius: var(--r-m) 0 0 var(--r-m); }
.horario-admin.capa-velo .rejilla .v-si::after { background: var(--velo-si); }
.horario-admin.capa-velo .rejilla .v-no::after { background: var(--velo-no); }
.horario-admin.capa-velo .rejilla .v-alta::after { background: linear-gradient(to bottom, var(--velo-si) 0 50%, transparent 50%); }
.horario-admin.capa-velo .rejilla .v-baja::after { background: linear-gradient(to bottom, transparent 0 50%, var(--velo-si) 50%); }
.horario-admin .rejilla .bloque.d-si { border-color: color-mix(in srgb, var(--ok) 60%, #fff); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ok) 60%, #fff); }
.horario-admin .rejilla .bloque:is(.d-alta, .d-baja) { border-color: color-mix(in srgb, var(--ok) 45%, #fff); }
.horario-admin .rejilla .rg-hora:is(.d-si, .d-alta, .d-baja) { color: var(--ok-texto); }
/* ronda 3: el alumno de las horas a la vista, en azul como lo elegido (antes un contorno negro: un cuarto resaltado) */
.horario-admin .bl-alumno.d-yo { background: var(--acento-suave); border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
/* sello de media hora («12:30–13:00»); el «puede» de la hora entera no se repite (el velo ya lo dice) */
.hc-sello { position: absolute; top: -9px; right: 6px; z-index: 4; height: 18px; padding: 0 6px; border-radius: var(--r-pildora); background: var(--ok-fondo); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ok) 35%, #fff); color: var(--ok-texto); font: 600 11px/18px var(--f-ui); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
/* como una pestaña sobre el borde de la tarjeta: arriba si es la primera media hora, abajo si es la segunda; nunca encima del
   nombre del profesor */
.hc-sello.abajo { top: auto; bottom: -9px; }
.hc-sello.todo { display: none; }
/* fuera de su disponibilidad (con la capa, en su propio grupo) y sin dato */
.horario-admin .rejilla .bl-alumno.fuera { border-color: var(--aviso); box-shadow: inset 0 0 0 1px var(--aviso); }
/* sin dato de disponibilidad: es lo común, no se marca */
.ley-ficha.ley-velo-si { background: color-mix(in srgb, var(--ok) 22%, #fff); box-shadow: none; }
.ley-ficha.ley-velo-no { background: var(--sup); box-shadow: inset 0 0 0 1px var(--linea-2); }
.ley-ficha.fuera { box-shadow: inset 0 0 0 1.5px var(--aviso); }
.ley-ficha.sindato { background: var(--sup); box-shadow: none; outline: 1px dashed var(--linea-2); outline-offset: -1px; }
/* «Todo el día» (sin imán): botón chico al inicio de la leyenda */
.boton-todo-dia {
  display: inline-flex; align-items: center; gap: 4px; flex: none; height: 22px; padding: 0 8px; border: 1px solid var(--linea-2); border-radius: var(--r-s);
  background: var(--sup); font: 500 var(--t-xs)/1 var(--f-ui); color: var(--tinta-2); cursor: pointer;
}
.boton-todo-dia .ic { width: 13px; height: 13px; color: var(--tinta-3); }
.horario-asignar .boton-todo-dia { display: none; }
:where(html:not(.puntero-quieto)) .boton-todo-dia:hover { background: var(--sup-2); color: var(--tinta); }
.boton-todo-dia.activo { background: var(--acento-suave); border-color: color-mix(in srgb, var(--acento) 45%, #fff); color: var(--acento-texto); }
.boton-todo-dia.activo .ic { color: var(--acento-texto); }

/* Finanzas · solo las excepciones con color; pagada y al día quedan blancas. Ronda 3 · un rojo, una cosa: la factura
   vencida. Lo que hay que cobrar va en ámbar (por cobrar, saldo pendiente); sin factura, gris liso (sin punteado). */
.horario-admin .rejilla .bl-alumno.f-venc { background: var(--peligro-fondo); border-color: color-mix(in srgb, var(--peligro) 40%, #fff); color: var(--peligro-texto); }
.horario-admin .rejilla .bl-alumno:is(.f-porc, .f-debe) { background: var(--aviso-fondo); border-color: color-mix(in srgb, var(--aviso) 55%, #fff); color: var(--aviso-texto); }
.horario-admin .rejilla .bl-alumno:is(.f-sin, .f-nada) { background: var(--sup-3); border-color: transparent; color: var(--tinta-2); }
.horario-admin .rejilla .bl-alumno:is(.f-venc, .f-debe, .f-porc, .f-sin, .f-nada) .bl-edad { color: inherit; opacity: .75; }
.ley-ficha.f-venc { background: var(--peligro-fondo); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--peligro) 50%, #fff); }
.ley-ficha.f-porc { background: var(--aviso-fondo); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aviso) 60%, #fff); }
.ley-ficha.f-debe { background: var(--aviso-fondo); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aviso) 60%, #fff); }
.ley-ficha.f-sin { background: var(--sup-3); box-shadow: inset 0 0 0 1px var(--linea); }
.ley-cifras { display: inline; color: var(--tinta-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ley-cifras .ley-ficha { vertical-align: -1px; margin: 0 5px 0 2px; }
.ley-ficha.f-pag { background: var(--sup); box-shadow: inset 0 0 0 1px var(--linea-2); }
/* tarjeta de crédito: insignia pequeña en lugar de la edad (llena = guardada, tachada en rojo = sin tarjeta) */
.bl-tarjeta { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; color: var(--tinta-4); }
.bl-tarjeta svg { width: 15px; height: 15px; display: block; }
.bl-tarjeta.sin { color: var(--tinta-3); } /* ronda 3: gris (informa, no es un peligro) */
.ley-item .bl-tarjeta { width: 15px; height: 15px; }
/* propuesta B (?tarjeta=B): al día con tarjeta en verde suave; sin tarjeta, blanco punteado */
.horario-admin.tj-b .rejilla .bl-alumno:is(.f-pag, .f-dia).tarjeta { background: var(--ok-fondo); border-color: color-mix(in srgb, var(--ok) 35%, #fff); color: var(--ok-texto); }
.horario-admin.tj-b .rejilla .bl-alumno:is(.f-pag, .f-dia).sin-tarjeta { background: var(--sup); border-style: dashed; border-color: var(--ok); }
.horario-admin.tj-b .ley-ficha.f-pag.tarjeta { background: var(--ok-fondo); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 45%, #fff); }
.horario-admin.tj-b .ley-ficha.f-pag.sin-tarjeta { background: var(--sup); box-shadow: none; outline: 1px dashed var(--ok); outline-offset: -1px; }
/* saldo pendiente: un punto ámbar junto a la edad, solo si la ficha no lo dice ya (vencida, por cobrar o con saldo) */
.horario-admin :is(.rejilla, .horario-linea) .punto-saldo { flex: none; width: 7px; height: 7px; background: var(--aviso); }
.rejilla .bl-alumno:is(.f-venc, .f-debe, .f-porc) .punto-saldo { display: none; }
/* al pasar el ratón, el saldo sale en una etiqueta encima de la ficha, a la derecha: nunca tapa el nombre ni la edad (el
   globo con el detalle va debajo) */
.rejilla .bl-alumno .bl-saldo {
  position: absolute; right: 4px; bottom: calc(100% - 3px); z-index: 6; height: 20px; padding: 0 7px; border-radius: var(--r-s);
  background: var(--tinta); color: #fff; box-shadow: var(--s-2);
  font: 600 12px/20px var(--f-ui); font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease);
}
.rejilla .bl-alumno.con-saldo:hover .bl-saldo { opacity: 1; }
body.arrastre .rejilla .bl-alumno .bl-saldo, body.arrastre .tip-fin { display: none; }
/* estado de QuickBooks en la línea */
.hc-qb-dice { flex: none; color: var(--tinta-3); }
.hc-qb-dice.bien { color: var(--tinta-2); }
.hc-qb-dice.mal { color: var(--peligro-texto); }
/* globo de finanzas: tarjeta flotante opaca */
.tip-fin {
  position: fixed; z-index: 80; display: grid; gap: 2px; min-width: 220px; max-width: 300px; padding: 10px 12px 12px; pointer-events: none;
  background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--s-3);
  font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-2);
}
.tip-fin b { font: 600 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta); }
.tip-fin .tf-estado { margin-bottom: 6px; color: var(--tinta-3); }
.tip-fin .tf-saldo { font: 600 var(--t-xl)/var(--lh-xl) var(--f-ui); color: var(--tinta); font-variant-numeric: tabular-nums; }
.tip-fin .tf-saldo.debe { color: var(--aviso-texto); }
.tip-fin .tf-linea { color: var(--tinta-3); }
.tip-fin .tf-chip { justify-self: start; height: 20px; margin: 2px 0; padding: 0 8px; border-radius: var(--r-pildora); font: 600 var(--t-xs)/20px var(--f-ui); color: var(--neutro-texto); background: var(--neutro-fondo); }
.tip-fin .tf-chip.dia { color: var(--ok-texto); background: var(--ok-fondo); }
.tip-fin .tf-chip.debe { color: var(--aviso-texto); background: var(--aviso-fondo); }
.tip-fin .tf-chip.sin-tarjeta { color: var(--neutro-texto); background: var(--neutro-fondo); }

/* ───────────── 9 · sopa de alumnos: panel a la derecha de la rejilla ───────────── */
.sopa {
  width: 300px; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 8px;
  background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--s-1);
  animation: entra var(--dur) var(--ease);
}
.sopa-cab { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.sopa-cab h2 { font: 600 var(--t-l)/var(--lh-l) var(--f-ui); }
.sopa-n { flex: 1; font: 400 var(--t-s)/1 var(--f-ui); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.sopa-cab .boton-icono { width: 28px; height: 28px; }
.sopa-busqueda { --alto-control: 34px; flex: none; }
.sopa-buscar { font-size: var(--t-m) !important; }
.sopa-ayuda { display: none; }
.sopa-filtros { display: grid; gap: 6px; flex: none; }
.sf-grupo { display: flex; flex-wrap: wrap; gap: 4px; }
.sopa-filtro {
  display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 8px; border: 1px solid var(--linea-2); border-radius: var(--r-pildora);
  background: var(--sup); color: var(--tinta-3); font: 500 var(--t-xs)/22px var(--f-ui); white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.sopa-filtro .ic { width: 12px; height: 12px; margin-left: -2px; }
.sopa-filtro[aria-pressed="true"] { background: var(--acento-suave); border-color: color-mix(in srgb, var(--acento) 35%, #fff); color: var(--acento-texto); font-weight: 600; }
:where(html:not(.puntero-quieto)) .sopa-filtro:hover { color: var(--tinta); border-color: #B7BEC9; }
.sf-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sopa-inst { flex: 1 1 100%; min-width: 0; height: 30px; padding: 0 26px 0 8px; font-size: var(--t-s); }
.sopa-solo { display: inline-flex; align-items: center; gap: 6px; flex: none; font: 500 var(--t-s)/1 var(--f-ui); color: var(--tinta-2); cursor: pointer; white-space: nowrap; }
.sopa-lista { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 1px; align-content: start; margin: 0 -4px; padding: 2px 4px 8px; }
.sopa-seccion { display: flex; align-items: center; gap: 6px; margin: 8px 0 2px; font: 600 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-2); }
.sopa-seccion:first-child { margin-top: 0; }
.sopa-seccion::before { content: ''; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--e, var(--tinta-4)); }
.modo-asistencia .sopa-seccion::before { display: none; }
.sopa-seccion .n { font-weight: 400; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.sopa-alumno {
  position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 8px 5px 5px;
  background: var(--sup); border: 1px solid transparent; border-radius: var(--r-m); touch-action: none; cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity .3s var(--ease);
}
.horario-admin .sopa-alumno, .modo-asistencia .sopa-alumno { cursor: grab; }
:where(html:not(.puntero-quieto)) .sopa-alumno:hover { background: var(--sup-2); border-color: var(--linea-2); }
.sa-texto { display: grid; flex: 1; min-width: 0; }
.sa-texto b { font: 600 13px/17px var(--f-ui); color: var(--tinta); }
.sa-texto small { font: 400 var(--t-xs)/var(--lh-xs) var(--f-ui); color: var(--tinta-3); }
.sopa-lista > .detalle { padding: 16px 4px; text-align: center; }

/* ───────────── 10 · bandeja «Cambios pendientes»: barra al pie, en el flujo ───────────── */
.bandeja-cambios { background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--s-2); }
.bandeja-cambios:not(.pend) { box-shadow: none; background: transparent; border-style: dashed; }
.bc-cab { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 5px 8px 5px 10px; }
.bandeja-cambios:not(.pend) .bc-cab { min-height: 36px; padding-block: 2px; }
.bc-toggle { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px 0 4px; border-radius: var(--r-m); font: 600 var(--t-m)/1 var(--f-ui); color: var(--tinta); }
.bc-toggle:disabled { cursor: default; color: var(--tinta-3); }
.bc-toggle b { font-weight: 600; }
.bc-chev { width: 15px; height: 15px; color: var(--tinta-3); transform: rotate(180deg); transition: transform var(--dur) var(--ease); }
.bc-toggle[aria-expanded="true"] .bc-chev { transform: none; }
.bc-toggle:disabled .bc-chev { opacity: 0; }
:where(html:not(.puntero-quieto)) .bc-toggle:hover:not(:disabled) { background: var(--sup-3); }
.bc-n { min-width: 22px; height: 20px; padding: 0 7px; border-radius: var(--r-pildora); background: var(--acento); color: #fff; font: 600 12px/20px var(--f-ui); text-align: center; font-variant-numeric: tabular-nums; }
.bc-n.cero { background: var(--sup-3); color: var(--tinta-3); }
.bc-resumen { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.bc-acciones { display: flex; align-items: center; gap: 6px; flex: none; }
.bc-acciones .boton.chico { height: 30px; }
.bc-paso { width: 30px; padding: 0; font-size: 16px; color: var(--tinta-2) !important; }
.bandeja-cambios:not(.pend) :is(.bc-paso, [data-accion="deshacer-todo"], [data-accion="aplicar"]) { display: none; }
.bc-airtable { color: var(--tinta-2) !important; }
.bc-cuerpo { display: grid; gap: 8px; max-height: 220px; overflow: auto; padding: 6px 14px 10px; border-top: 1px solid var(--linea); }
.bc-lista { display: grid; gap: 0; align-content: start; }
.bc-lista > li { display: grid; gap: 2px; padding: 6px 0; font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta-2); }
.bc-lista > li + li { border-top: 1px solid var(--linea); }
.bc-fila { display: flex; align-items: baseline; gap: 10px; }
.bc-txt { flex: 1; min-width: 0; }
.bc-txt b { font-weight: 600; color: var(--tinta); }
.bc-des { flex: none; padding: 0 6px; border-radius: var(--r-s); font: 500 var(--t-s)/22px var(--f-ui); color: var(--acento-texto); }
:where(html:not(.puntero-quieto)) .bc-des:hover { background: var(--acento-suave); }
.bc-avisos { display: grid; gap: 6px; align-content: start; }
.bc-avisos li { display: flex; align-items: flex-start; gap: 8px; font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-2); }
.bc-avisos .ic { width: 15px; height: 15px; margin-top: 2px; color: var(--aviso); }
.bc-sin { font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }


/* ───────────── 11 · diálogos del horario (Aplicar, Avisar) ───────────── */
.dg-aplicar, .dg-avisar { width: min(680px, calc(100vw - 48px)); }
.dg-tabla-caja { padding: 0; overflow: hidden; background: var(--sup); }
.dg-tabla-caja .dg-rotulo { margin: 0; padding: 10px 14px 8px; border-bottom: 1px solid var(--linea); background: var(--sup-2); }
.dg-tabla { width: 100%; border-collapse: collapse; font: 400 var(--t-m)/var(--lh-m) var(--f-ui); font-variant-numeric: tabular-nums; }
.dg-tabla th { padding: 8px 14px; text-align: left; font: 600 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); border-bottom: 1px solid var(--linea); }
.dg-tabla td { padding: 8px 14px; color: var(--tinta); border-bottom: 1px solid var(--linea); vertical-align: top; }
.dg-tabla tr:last-child td { border-bottom: 0; }
.dg-tabla td:first-child { font-weight: 600; }
.dg-nada { color: var(--tinta-4); }
.dg-cambia { font-weight: 600; color: var(--tinta); }
.av-mandos { display: flex; align-items: center; gap: 4px; }
.av-mandos .boton.chico { height: 26px; padding: 0 8px; }
.av-cuenta { margin-left: auto; font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.av-lista { display: grid; gap: 6px; max-height: 320px; overflow: auto; }
.av-fila { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--r-m); cursor: pointer; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.av-fila input { margin-top: 2px; }
.av-fila:has(input:checked) { background: var(--acento-suave); border-color: color-mix(in srgb, var(--acento) 40%, #fff); }
.av-fila.sin { cursor: default; opacity: .7; }
.av-txt { display: grid; gap: 2px; min-width: 0; }
.av-txt b { font: 600 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta); }
.av-txt small { font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.av-nota { display: none; }

/* ───────────── 12 · popovers del horario: estados, calendario, ficha corta, menús ───────────── */
.popover-estados { min-width: 260px; }
.pe-caja { display: grid; gap: 2px; }
.pe-caja .ajustes-titulo { padding: 4px 8px 6px; font: 600 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.pe-fila { display: grid; grid-template-columns: 16px 12px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 32px; padding: 0 8px; border-radius: var(--r-s); cursor: pointer; font: 500 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta); }
:where(html:not(.puntero-quieto)) .pe-fila:hover { background: var(--sup-3); }
.pe-fila small { font: 400 var(--t-s)/1 var(--f-ui); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.pe-punto { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--avatar-fondo) !important; box-shadow: inset 0 0 0 2.5px var(--e, var(--tinta-4)); }
/* ronda 3: Activo no lleva anillo en la rejilla; aquí tampoco (un círculo liso) */
.pe-punto[data-estado="Activo"] { box-shadow: inset 0 0 0 1px var(--linea-2); }
.pe-caja .ajustes-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pe-caja .ajustes-titulo small { font: 400 var(--t-xs)/1 var(--f-ui); color: var(--tinta-3); }
.pe-pie { display: flex; gap: 2px; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--linea); }
.pe-pie .enlace-discreto { font-size: var(--t-s); padding: 2px 8px; }

.popover-calendario { width: 300px; padding: 12px; }
.calendario { display: grid; gap: 14px; max-height: min(560px, calc(100vh - 170px)); overflow: auto; margin: -2px; padding: 2px; }
.cal-cab { display: flex; align-items: center; gap: 12px; }
.cal-titulo { flex: 1; font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.cal-modo button { height: 26px; padding: 0 10px; font-size: 12.5px; }
.cal-mes { display: grid; gap: 6px; }
.cal-mes-nombre { padding-left: 4px; font: 600 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta); text-transform: capitalize; }
.cal-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-sem { display: grid; place-items: center; height: 22px; font: 500 var(--t-xs)/1 var(--f-ui); color: var(--tinta-4); }
.cal-dia { position: relative; display: grid; place-items: center; height: 34px; border-radius: var(--r-s); font: 400 13px/1 var(--f-ui); color: var(--tinta-4); font-variant-numeric: tabular-nums; }
button.cal-dia.con-clase { font-weight: 600; color: var(--tinta); }
button.cal-dia.con-clase::after { content: ''; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--acento); }
:where(html:not(.puntero-quieto)) button.cal-dia:hover:not(:disabled) { background: var(--sup-3); }
button.cal-dia.sin { color: var(--tinta-3); }
button.cal-dia.sin:disabled { color: var(--tinta-4); cursor: default; opacity: .6; }
.cal-dia.hoy { box-shadow: inset 0 0 0 1px var(--linea-2); }
button.cal-dia.activa { background: var(--acento); color: #fff; }
button.cal-dia.activa::after { background: #fff; }
.calendario.modo-semana .cal-dia.en-semana { background: var(--acento-suave); color: var(--acento-texto); border-radius: 0; }
.calendario.modo-semana .cal-dia.en-semana.con-clase { background: var(--acento); color: #fff; border-radius: var(--r-s); }
.calendario.modo-semana .cal-dia.en-semana.con-clase::after { background: #fff; }
.calendario.modo-semana .cal-dia.sem-hover:not(.en-semana) { background: var(--sup-3); border-radius: 0; }

.popover-ficha { min-width: 300px; padding: 14px 16px; }
.ficha-corta { display: grid; gap: 12px; }
.ficha-corta .fc-cab { display: flex; align-items: center; gap: 12px; }
.ficha-corta .fc-cab > div { display: grid; gap: 2px; min-width: 0; }
.ficha-corta .fc-cab b { font: 600 var(--t-l)/var(--lh-l) var(--f-ui); color: var(--tinta); }
.fc-estado { display: inline-flex; align-items: center; gap: 6px; font: 500 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-2); }
.fc-estado::before { content: ''; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--e, var(--tinta-4)); }
.fc-filas { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; font: 400 var(--t-m)/var(--lh-m) var(--f-ui); }
.fc-filas dt { color: var(--tinta-3); }
.fc-filas dd { margin: 0; color: var(--tinta); overflow-wrap: anywhere; }
.ficha-corta .fc-tel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.menu-horario .menu-cab { display: none; }
/* profesor por celda: dos columnas (cabe debajo de la celda, sin tapar la barra); el actual y los del instrumento primero */
.menu.menu-prof { display: grid; grid-template-columns: repeat(2, minmax(140px, 1fr)); column-gap: 4px; max-width: 380px; }
.menu.menu-prof > :is(.menu-cab, .menu-separador) { grid-column: 1 / -1; }

/* ───────────── 13 · horario de asignación (ficha del alumno): el de Administración en compacto ───────────── */
.asignar-horario { display: flex; flex-direction: column; width: 100%; height: 100%; min-width: 0; min-height: 0; container: asignar / inline-size; }
.asignar-rejilla { flex: 1; min-height: 0; min-width: 0; display: flex; }
.asignar-rejilla > .vista-horario { flex: 1; min-width: 0; height: 100%; padding: 0; }
/* la rejilla de la ficha va sobre blanco: las cabeceras pegajosas toman ese fondo */
.vista.vista-horario.horario-asignar { --fondo-rejilla: var(--sup); background: var(--sup); padding: 2px 2px 0 8px; }
/* uno o dos grupos en el día: tarjetas de ancho legible, no estiradas a todo el panel */
.horario-asignar .rejilla[data-columnas="1"] { max-width: 380px; }
.horario-asignar .rejilla[data-columnas="2"] { max-width: 560px; }
.horario-asignar .rejilla[data-columnas="3"] { max-width: 760px; }
.horario-asignar [data-conmutador="modo"], .horario-asignar .sopa-pestana, .horario-asignar .sopa, .horario-asignar .horario-sin-dia { display: none; }
.horario-asignar.compacto > .horario-linea { margin-top: 4px; }
.horario-asignar.compacto > .rejilla-dias { margin-top: 4px; }
.horario-asignar.compacto .horario-controles { gap: 6px; min-height: 30px; }
.horario-asignar.compacto .horario-controles .hc-hueco { display: none; }
.horario-asignar.compacto .horario-controles .horario-capas { gap: 4px; margin-left: auto; }
.horario-asignar.compacto .horario-controles :is(.conmutador button, .capa, .horario-capas .boton) { height: 26px; padding: 0 8px; font-size: 12.5px; }
.horario-asignar.compacto .horario-controles .conmutador button { height: 24px; }
.horario-asignar.compacto .horario-controles .hc-mes { height: 26px; font-size: 12.5px; }
.horario-asignar.compacto .horario-controles :is(.capa .ic, .conmutador button .ic, [data-accion="estados"] .ic) { display: none; }
.horario-asignar.compacto .horario-linea { font-size: var(--t-xs); }
.horario-asignar.compacto .rejilla-dias { gap: 16px; padding-bottom: 8px; scroll-padding: 28px 0 0 40px; }
.horario-asignar.compacto .rejilla { gap: 3px; }
.horario-asignar.compacto .rejilla .rg-esquina { font-size: 12px; padding-bottom: 4px; }
.horario-asignar.compacto .rejilla .rg-inst { font-size: 11.5px; line-height: 14px; padding: 0 2px 4px; box-shadow: 0 3px 0 var(--fondo-rejilla); }
.horario-asignar.compacto .rejilla .rg-esquina { box-shadow: 0 3px 0 var(--fondo-rejilla), 6px 0 0 var(--fondo-rejilla), 6px 3px 0 var(--fondo-rejilla); }
.horario-asignar.compacto .rejilla .rg-hora { font-size: 12px; padding-top: 4px; }
.horario-asignar.compacto .rj-celda > .bloque { padding: 2px 3px; gap: 1px; border-radius: var(--r-m); }
.horario-asignar.compacto .bl-cab { min-height: 13px; padding: 0 2px; }
.horario-asignar.compacto .bl-cab :is(.bl-nombre, .bl-prof) { font-size: 11px; line-height: 13px; min-height: 0; padding-block: 0; }
.horario-asignar.compacto .bl-alumnos { gap: 1px; }
.horario-asignar.compacto .rejilla .bl-alumno { gap: 4px; padding: 1px 4px 1px 2px; border-radius: var(--r-s); font: 600 12px/13px var(--f-ui); }
.horario-asignar.compacto .rejilla .bl-edad { font-size: 11px; line-height: 14px; }
.horario-asignar.compacto .rejilla .bl-ocultos, .horario-asignar.compacto .bl-nota { font-size: 11px; line-height: 14px; }
.horario-asignar.compacto .hc-sello { top: -7px; right: 3px; height: 14px; padding: 0 4px; font-size: 10px; line-height: 14px; }
.horario-asignar.compacto .hc-sello.abajo { top: auto; bottom: -7px; }
.horario-asignar.compacto .horario-admin .bl-alumno:not([data-estado="Activo"]) .avatar,
.horario-asignar.compacto .rejilla .bl-alumno:not([data-estado="Activo"]) .avatar { box-shadow: 0 0 0 1px var(--sup), 0 0 0 2.5px var(--e, var(--tinta-4)); }
/* la columna de su instrumento: rótulo en azul y un fondo apenas azul; el día que no tiene grupos, lo dice */
.horario-asignar .rejilla .rg-inst.propio { color: var(--acento-texto); flex-direction: column; align-items: flex-start; gap: 0; }
.horario-asignar .rejilla .rg-inst.propio small { font: 400 10.5px/12px var(--f-ui); color: var(--tinta-3); white-space: nowrap; }
/* ronda 3: sin el tinte azul de la columna (azul y verde sin leyenda): su instrumento lo dice la cabecera en azul */
/* en la ficha, el velo del alumno es fijo; los grupos se tocan para proponer */
.horario-asignar .rejilla .bloque { cursor: context-menu; } /* 14 oct · un clic ya no propone: arrastrar o clic derecho */
:where(html:not(.puntero-quieto)) .horario-asignar .rejilla .bloque:hover { border-color: var(--acento); }
.horario-asignar .rejilla .bloque.propuesto { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento); }
.bl-propuesta {
  display: flex; align-items: center; gap: 5px; min-height: 22px; padding: 1px 6px 1px 2px; border: 1px dashed var(--acento); border-radius: var(--r-s);
  background: var(--acento-suave); font: 600 12px/14px var(--f-ui); color: var(--acento-texto);
}
.bl-propuesta span { min-width: 0; }
/* casilla del alumno: abre la fila de mandos; se arrastra a un grupo */
.asg-cab { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.asg-alumno {
  display: inline-flex; align-items: center; gap: 6px; flex: none; height: 28px; padding: 0 10px 0 4px; border-radius: var(--r-m); cursor: grab; touch-action: none;
  background: var(--sup); border: 1px solid var(--acento); box-shadow: var(--s-2); font: 600 12.5px/1 var(--f-ui); color: var(--tinta);
  transition: box-shadow var(--dur) var(--ease);
}
:where(html:not(.puntero-quieto)) .asg-alumno:hover { box-shadow: var(--s-3); }
.asg-alumno b { font-weight: 600; white-space: nowrap; }
.asg-alumno small { font: 500 var(--t-xs)/1 var(--f-ui); color: var(--tinta-3); white-space: nowrap; }
.asg-alumno.con-propuesta small { color: var(--acento-texto); font-weight: 600; }
.asg-alumno.arrastrando { opacity: .4; }
.asg-asa { width: 12px !important; height: 12px !important; color: var(--tinta-4); }
.asg-cancelar { width: 26px; height: 26px; }
.asg-cancelar .ic { width: 14px; height: 14px; }
/* celdas muy angostas en la ficha: la edad importa más que la foto (se asigna por edad) */
@container (max-width: 116px) {
  .horario-asignar .rejilla-general .rj-celda .bl-edad { display: inline; font-size: 10.5px; }
  .horario-asignar .rejilla-general .rj-celda .bl-alumno .avatar { display: none; }
  .horario-asignar .rejilla-general .rj-celda .bl-alumno { padding-left: 4px; }
}
/* área media (≈ 860 px a 1100×720): capas y «Más» solo con su ícono */
@container asignar (max-width: 940px) {
  .horario-asignar.compacto .horario-controles .capa > span, .horario-asignar.compacto .horario-controles [data-accion="mas"] > span:not(.ic) { display: none; }
  .horario-asignar.compacto .horario-controles .capa .ic { display: inline-grid !important; width: 14px; height: 14px; }
  .horario-asignar.compacto .horario-controles [data-accion="mas"] .ic { display: inline-grid; }
}
/* área angosta (≈ 650 px a 1100×720): sin fotos ni leyenda, capas solo con su ícono, para ver más horas */
@container asignar (max-width: 760px) {
  .horario-asignar.compacto .rejilla .bl-alumno .avatar { display: none; }
  .horario-asignar.compacto .rejilla .bl-alumno { padding: 1px 3px 1px 4px; font-size: 10.5px; line-height: 12px; letter-spacing: -.01em; }
  .horario-asignar.compacto .rejilla .bl-edad { display: none; } /* la edad, en el globo de la ficha */
  .horario-asignar.compacto .horario-controles [data-accion="estados"] > span:not(.ic) { display: none; }
  .horario-asignar.compacto .horario-controles [data-accion="estados"] .ic { display: inline-grid; }
  .horario-asignar.compacto .horario-controles [data-accion="estados"] { width: 28px; padding: 0; }
  .horario-asignar.compacto .asg-alumno .avatar, .horario-asignar.compacto .asg-asa { display: none; }
  .horario-asignar.compacto .asg-alumno { padding-left: 8px; }
  .horario-asignar.compacto .horario-controles .capa > span { display: none; }
  .horario-asignar.compacto .horario-controles .capa .ic { display: inline-grid !important; width: 14px; height: 14px; }
  .horario-asignar.compacto .horario-controles .conmutador button { padding: 0 6px; font-size: 12px; }
  .horario-asignar.compacto .horario-linea { display: none; }
  .horario-asignar.compacto .bl-cab { display: none; }
  .horario-asignar.compacto .hc-sello { display: none; }
}

/* ───────────── 14 · mini horario (respaldo de la ficha) ───────────── */
.mini-horario { display: grid; gap: 12px; align-content: start; }
.mh-alumno {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start; height: 36px; padding: 0 12px 0 5px; border-radius: var(--r-m); cursor: grab; touch-action: none;
  background: var(--sup); border: 1px solid var(--acento); box-shadow: var(--s-2); font: 600 var(--t-m)/1 var(--f-ui); color: var(--tinta);
}
.mh-edad { font: 500 var(--t-s)/1 var(--f-ui); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.mh-ayuda { font: 400 var(--t-s)/1 var(--f-ui); color: var(--tinta-3); }
.mh-fantasma { position: fixed; z-index: 100; pointer-events: none; transform: translate(-50%, -50%) rotate(-1.5deg); box-shadow: var(--s-3); }
.mh-marco { overflow: auto; }
.mh-rejilla { display: grid; grid-template-columns: 52px repeat(var(--dias, 3), minmax(140px, 1fr)); gap: 4px; }
.mh-esquina { min-height: 1px; }
.mh-dia { padding: 0 4px 4px; font: 600 13px/16px var(--f-ui); color: var(--tinta-2); }
.mh-hora { padding: 8px 0 0 2px; font: 600 13px/16px var(--f-ui); color: var(--tinta); font-variant-numeric: tabular-nums; }
.mh-celda { display: flex; flex-direction: column; gap: 4px; min-height: 40px; padding: 4px; border-radius: var(--r-m); background: rgba(22, 29, 43, .028); }
.mh-celda.disponible { background: color-mix(in srgb, var(--ok) 20%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 30%, #fff); }
.mh-grupo {
  display: flex; align-items: center; gap: 6px; width: 100%; min-height: 30px; padding: 0 10px; border: 1px solid var(--linea); border-radius: var(--r-s);
  background: var(--sup); box-shadow: var(--s-1); text-align: left; font: 600 13px/16px var(--f-ui); color: var(--tinta);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
:where(html:not(.puntero-quieto)) .mh-grupo:hover { border-color: var(--acento); }
.mh-tit { flex: 1; min-width: 0; }
.mh-n { flex: none; font: 500 12px/1 var(--f-ui); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.mh-grupo.actual { border-color: var(--tinta-2); box-shadow: 0 0 0 1px var(--tinta-2); }
.mh-grupo.propuesto, .mh-grupo.sobre { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento-anillo); background: var(--acento-suave); }
.mh-herm { align-self: flex-start; height: 20px; padding: 0 8px; border-radius: var(--r-pildora); background: var(--acento-suave); color: var(--acento-texto); font: 600 var(--t-xs)/20px var(--f-ui); }
.mh-otros { padding: 6px 4px 0; font: 400 var(--t-xs)/var(--lh-xs) var(--f-ui); color: var(--tinta-3); }
.mh-vacio { padding: 16px 0; font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta-3); }
.mh-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-2); }
.mh-ley { display: inline-flex; align-items: center; gap: 6px; }
.mh-ley::before { content: ''; width: 14px; height: 10px; border-radius: 3px; background: var(--sup); box-shadow: inset 0 0 0 1px var(--linea-2); }
.mh-ley.disponible::before { background: color-mix(in srgb, var(--ok) 20%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 30%, #fff); }
.mh-ley.actual::before { box-shadow: inset 0 0 0 1.5px var(--tinta-2); }
.mh-ley.propuesto::before { background: var(--acento-suave); box-shadow: inset 0 0 0 1.5px var(--acento); }
.mh-ley.herm::before { background: var(--acento-suave); box-shadow: none; border-radius: var(--r-pildora); }

/* ───────────── 15 · iPhone (≤ 760 px): consulta · mandos en varias líneas, la rejilla se desplaza por dentro ───────────── */
@media (max-width: 760px) {
  .horario-controles, .horario-controles.una-fila { flex-wrap: wrap; row-gap: 8px; overflow: visible; }
  .horario-controles .conmutador button { height: 34px; padding: 0 10px; font-size: var(--t-m); }
  .selector-dia { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .selector-dia::-webkit-scrollbar { display: none; }
  .horario-controles [data-conmutador="vista"] { margin-left: 0; }
  .horario-controles .hc-hueco { display: none; }
  .horario-capas { flex-wrap: wrap; }
  .vista-horario > .sopa-pestana { grid-row: 1; align-self: start; width: 36px; height: 36px; padding: 0; justify-content: center; }
  .vista-horario > .sopa-pestana span:not(.ic) { display: none; }
  .horario-linea { flex-wrap: wrap; white-space: normal; row-gap: 4px; }
  .hc-leyenda { flex: 1 1 100%; flex-wrap: wrap; row-gap: 4px; }
  .horario-sin-dia { display: none; }
  .sf-fecha.semana .sf-texto { display: none; }
  .sf-fecha.semana .sf-corto { display: inline; white-space: nowrap; }
  /* la sopa abierta ocupa el lugar de la rejilla (hoja a todo el ancho) */
  .vista-horario > .sopa { grid-column: 1 / -1; width: auto; margin: 12px 0 0; }
  .vista-horario.con-sopa > :is(.rejilla-dias, .vacio-grande) { display: none; }
  /* la rejilla del teléfono se sale del marco (movil.css): el degradado del borde no coincidiría; queda el botón de la línea */
  .vista-horario > .hc-desliza { display: none !important; }
  .rejilla-dias { gap: 24px; scroll-padding: 32px 0 0 56px; }
  .rejilla { gap: 5px; }
  .rejilla .rg-hora { font-size: 13px; }
  /* vista del profesor: la tarjeta del grupo a todo el ancho, las fichas una debajo de otra */
  .rejilla-profesor[data-columnas="1"] { grid-template-columns: 52px minmax(0, 1fr) !important; }
  .rejilla-profesor .bl-alumnos, .rejilla-dias.uno .rejilla-profesor .bl-alumnos, .rejilla-dias.estrecho .rejilla-profesor .bl-alumnos { grid-template-columns: minmax(0, 1fr); }
  .rejilla-profesor .bl-nombre { font-size: var(--t-l); }
  .bandeja-cambios .bc-cab { flex-wrap: wrap; }
  .bc-resumen { display: none; }
}

/* ───────────── 16 · vacío ───────────── */
.vista-horario > .vacio-grande { min-height: 240px; }

/* ───────────── 16 · Exportar PDF (printToPDF usa las reglas de impresión): solo la rejilla, con una cabecera de una línea ───────────── */
@media print {
  @page { size: letter landscape; margin: 0; }
  html, body { background: #fff !important; height: auto !important; overflow: visible !important; }
  .barra, .horario-controles, .horario-linea, .hc-rel, .sopa, .sopa-pestana, .bandeja-cambios, .avisos, .popover, .menu, .pop, .tip-fin, .horario-sin-dia { display: none !important; }
  .portal { height: auto !important; display: block !important; }
  .contenido { overflow: visible !important; padding: 0 !important; }
  .vista, .vista.vista-horario { height: auto !important; padding: 0 !important; display: block !important; }
  .vista-horario > .pdf-cabecera { display: block !important; margin: 0 0 8px; font: 400 12px var(--f-ui); color: #333; }
  .pdf-cabecera b { font-weight: 700; color: #000; }
  .rejilla-dias { overflow: visible !important; height: auto !important; padding: 0 !important; }
  .rejilla :is(.rg-inst, .rg-hora, .rg-esquina) { position: static !important; box-shadow: none !important; background: #fff !important; }
  .bloque { box-shadow: none !important; border-color: #d8dce6 !important; }
  .rejilla .bl-alumno { break-inside: avoid; }
  .rj-celda.nohay { background: #f7f8fa !important; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; animation: none !important; transition: none !important; }
}

/* ═════ 15 oct · Asistencia sin fichas cuando no se tomó · alumnos no vigentes · modo Registros ═════
   Una clase sin registros de Asistencia ya no pinta alumnos: la tarjeta entera lleva el tono (rojo si ya pasó, ámbar hoy).
   Un alumno no vigente (baja, pausa, desistió) se ve con su estado en una pastilla gris.
   Registros: la tarjeta entera de la clase con el color de su registro (solo tokens: vale en las dos apariencias). */
.bloque.sin-asistencia.vencida { background: var(--peligro-fondo); }
.bloque.sin-asistencia.hoy { background: var(--aviso-fondo); }
.bl-baja { flex: none; height: 18px; padding: 0 6px; border-radius: var(--r-pildora); background: var(--sup-3); font: 600 11px/18px var(--f-ui); color: var(--tinta-3); white-space: nowrap; }
.rejilla .bl-alumno .bl-baja { margin-left: auto; }
.rejilla .bl-alumno .bl-baja + .bl-falta { margin-left: 4px; }
.rejilla .bl-alumno.no-vigente .bl-nom { font-style: italic; }
.ley-item .bl-baja { margin: 0; }
.bloque-registro {
  --rg: var(--linea-2); --rg-fondo: var(--sup-2); --rg-texto: var(--tinta-3);
  border-color: color-mix(in srgb, var(--rg) 60%, transparent); background: var(--rg-fondo);
}
.bloque-registro[data-registro-estado="completo"] { --rg: var(--ok); --rg-fondo: var(--ok-fondo); --rg-texto: var(--ok-texto); }
.bloque-registro[data-registro-estado="validado"] { --rg: var(--acento); --rg-fondo: var(--acento-suave); --rg-texto: var(--acento-texto); }
.bloque-registro[data-registro-estado="incompleto"] { --rg: var(--aviso); --rg-fondo: var(--aviso-fondo); --rg-texto: var(--aviso-texto); }
.bloque-registro[data-registro-estado="sin-hacer"] { --rg: var(--peligro); --rg-fondo: var(--peligro-fondo); --rg-texto: var(--peligro-texto); }
.bloque-registro.abrible { cursor: pointer; }
:where(html:not(.puntero-quieto)) .bloque-registro.abrible:hover { box-shadow: var(--s-2); border-color: var(--rg); }
.bloque-registro:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.bl-reg-estado { display: flex; align-items: center; gap: 5px; margin: 0; padding: 0 3px; font: 600 var(--t-s)/16px var(--f-ui); color: var(--rg-texto); }
.bl-reg-estado .ic { flex: none; width: 14px; height: 14px; }
.bl-reg-faltas { display: flex; padding: 1px 2px; }
.bl-reg-faltas .cf-casilla { height: 20px; font-size: 11.5px; background: var(--sup); }
.bl-reg-asis { margin: 0; padding: 0 3px; font: 400 var(--t-s)/16px var(--f-ui); color: var(--tinta-2); }
.rejilla-profesor .bl-reg-estado { font-size: var(--t-m); }
.ley-bloque { display: inline-block; flex: none; width: 14px; height: 10px; border-radius: 3px; background: var(--sup-2); box-shadow: inset 0 0 0 1px var(--linea-2); }
.ley-bloque[data-registro-estado="completo"] { background: var(--ok-fondo); box-shadow: inset 0 0 0 1px var(--ok); }
.ley-bloque[data-registro-estado="validado"] { background: var(--acento-suave); box-shadow: inset 0 0 0 1px var(--acento); }
.ley-bloque[data-registro-estado="incompleto"] { background: var(--aviso-fondo); box-shadow: inset 0 0 0 1px var(--aviso); }
.ley-bloque:is([data-registro-estado="sin-hacer"], .sin-tomar) { background: var(--peligro-fondo); box-shadow: inset 0 0 0 1px var(--peligro); }

/* ═════ 15 oct B · zona A · vista general del profesor sin «Mi clase» · rojos de alerta más fuertes ═════
   Juan David (15 oct): «en lugar de "mi clase"… hazle un borde azul a la columna entera con esas clases… y hazlas mas
   grandes» y «los rojos de alerta hazlos un poco mas rojos… mas fuertes». Solo tokens: vale en las dos apariencias (la
   hoja Selah ajusta el radio y el vidrio).
   · La columna del instrumento con clases del profesor (de la cabecera al final del día): una capa absoluta en su área de
     la cuadrícula (horario.js · seccionDia, .rg-mias con --col), con borde azul y un tinte muy suave; no recibe clics ni
     cuenta para medir. Sus clases (.mia-grande) van con la medida holgada (horario.js · medidaMia) y letra más grande.
   · Rojos de alerta (clase sin asistencia vencida, registro sin hacer, casillas rojas, tarjetas y fichas vencidas de Mis
     clases): tinte del 14 % del rojo (antes ~8 %) y borde del rojo entero. Dentro de esas superficies, el gris secundario
     (--tinta-3) pasa a --tinta-2 para seguir sobre 4,5:1. El ausente de las fichas no cambia (--ausente-*). ═════ */
:root {
  --alerta-tinte: color-mix(in srgb, var(--peligro) 14%, var(--sup));
  --alerta-casilla: color-mix(in srgb, var(--peligro) 18%, var(--sup));
  --alerta-borde: var(--peligro);
}
.rejilla.con-mias { position: relative; }
.rejilla > .rg-mias {
  position: absolute; inset: 0 -2px -3px; grid-column: var(--col, 2); grid-row: 1 / span var(--filas, 1); z-index: 5; pointer-events: none;
  /* absoluta: sin final de columna explícito, llegaría al borde de la rejilla (alinear pone grid-column en línea); las filas
     por su número (en el teléfono, movil.css quita la plantilla de filas: -1 sería la primera) */
  grid-column-end: span 1 !important;
  border: 2px solid var(--acento); border-radius: var(--r-l);
  background: color-mix(in srgb, var(--acento) 5%, transparent);
}
.rejilla.con-mias > .rg-inst.mias { padding-left: 10px; padding-top: 8px; color: var(--acento-texto); }
.rejilla.holgada .bloque.mia-grande .bl-alumno { font-size: 17px; line-height: 22px; }
/* el borde azul de sus tarjetas, salvo cuando el borde dice un estado (asistencia sin tomar, registro, validada) */
.rejilla-general .bloque.mia-grande:not(.bloque-registro, .sin-asistencia, .validado) { border-color: color-mix(in srgb, var(--acento) 55%, var(--linea)); }
.rejilla-general .bloque-registro.mio { border-color: color-mix(in srgb, var(--rg) 60%, transparent); }
/* rejilla densa: un paso (ficha 36, foto 26; Selah, letra 14,5 y foto 28); holgada: dos (letra 17, foto 34, ficha 46) */
.rejilla-general .bloque.mia-grande { padding: 7px 6px 7px; gap: 5px; }
.rejilla-general .bloque.mia-grande .bl-cab { min-height: 20px; }
.rejilla-general .bloque.mia-grande :is(.bl-nombre, .bl-prof) { font-size: var(--t-m); font-weight: 600; color: var(--tinta-2); }
.rejilla-general .bloque.mia-grande .bl-alumnos { gap: 3px; }
/* Clásica, rejilla densa: el sábado de 1440 px va justo (cada columna en su mínimo): la ficha propia crece en alto y en foto
   sin ganar ancho (menos hueco y relleno a la izquierda), con la letra de siempre; la holgada y Selah sí agrandan la letra. */
.rejilla-general .bloque.mia-grande .bl-alumno { gap: 5px; padding: 3px 6px 3px 1px; font-size: 13px; line-height: 18px; }
.rejilla-general .bloque.mia-grande .bl-edad { font-size: 12.5px; }
.rejilla.holgada .bloque.mia-grande { padding: 8px 8px 9px; gap: 6px; }
.rejilla.holgada .bloque.mia-grande .bl-alumnos { gap: 4px; }
.rejilla.holgada .bloque.mia-grande .bl-alumno { gap: 10px; padding: 4px 10px 4px 5px; font-weight: 600; }
.rejilla.holgada .bloque.mia-grande .bl-edad { font-size: 13px; }
.rejilla-general .bloque.mia-grande :is(.bl-alerta-t, .bl-reg-estado, .bl-nota) { font-size: var(--t-m); line-height: 18px; }
.rejilla-dias.apretada .rejilla-general .bloque.mia-grande .bl-alumno { gap: 6px; padding: 2px 6px 2px 3px; font-size: 13.5px; line-height: 17px; }
.rejilla-dias.apretada .rejilla-general .bloque.mia-grande .bl-alumno .avatar { width: 24px !important; height: 24px !important; font-size: 9px !important; }

.rejilla .bloque.sin-asistencia.vencida,
.rejilla .bloque-registro[data-registro-estado="sin-hacer"] { --tinta-3: var(--tinta-2); }
.rejilla .bloque.sin-asistencia.vencida { background: var(--alerta-tinte); border-color: var(--alerta-borde); box-shadow: 0 0 0 1px color-mix(in srgb, var(--peligro) 30%, transparent), var(--s-1); }
.rejilla .bloque-registro[data-registro-estado="sin-hacer"] { --rg-fondo: var(--alerta-tinte); border-color: var(--alerta-borde); box-shadow: 0 0 0 1px color-mix(in srgb, var(--peligro) 30%, transparent), var(--s-1); }
.ley-bloque:is([data-registro-estado="sin-hacer"], .sin-tomar) { background: var(--alerta-tinte); box-shadow: inset 0 0 0 1.5px var(--peligro); }

/* ═════ 15 oct B · zona D · capa Pendientes de Administración › Horario (admin-horario.js · pendientesDe) ═════
   Primera vista del Horario. La ficha dice lo que falta dentro de lo elegido: rojo = todo pendiente, ámbar = una parte,
   check verde suave = nada pendiente (los alumnos no vigentes quedan sin color). «Filtros» al inicio de la línea, plegado
   por defecto; abierto, una columna por categoría con su casilla y sus ítems, que se incluyen o se excluyen uno a uno. */
.horario-admin .rejilla .bl-alumno.pn-todo, .horario-admin .sopa-alumno.pn-todo { background: var(--peligro-fondo); border-color: color-mix(in srgb, var(--peligro) 45%, #fff); color: var(--peligro-texto); }
.horario-admin .rejilla .bl-alumno.pn-algo, .horario-admin .sopa-alumno.pn-algo { background: var(--aviso-fondo); border-color: color-mix(in srgb, var(--aviso) 55%, #fff); color: var(--aviso-texto); }
.horario-admin .rejilla .bl-alumno:is(.pn-todo, .pn-algo) .bl-edad { color: inherit; opacity: .75; }
.pn-check { flex: none; width: 12px; height: 12px; color: var(--ok); }
.horario-asignar .bl-marcas .pn-check { display: none; } /* en el horario pequeño de la ficha no hay sitio: basta el fondo */
.ley-ficha.pn-todo { background: var(--peligro-fondo); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--peligro) 55%, #fff); }
.ley-ficha.pn-algo { background: var(--aviso-fondo); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aviso) 60%, #fff); }
.ley-item .pn-check { width: 13px; height: 13px; }
.hp-mandos { display: inline-flex; align-items: center; gap: 8px; flex: none; max-width: 100%; min-width: 0; } /* nunca se oculta: lo que no cabe es la leyenda */
.horario-linea .hp-filtros.boton.chico { flex: none; height: 26px; padding: 0 9px; gap: 4px; border: 1px solid var(--linea-2); background: var(--sup); font-size: 12.5px; color: var(--tinta-2); }
.horario-linea .hp-filtros .ic { width: 14px; height: 14px; color: var(--tinta-3); }
.horario-linea .hp-filtros.activo { background: var(--acento-suave); border-color: color-mix(in srgb, var(--acento) 45%, #fff); color: var(--acento-texto); }
.horario-linea .hp-filtros.activo .ic { color: var(--acento-texto); }
.hp-resumen { min-width: 0; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--tinta-2); }
.hp-restablecer { flex: none; height: 26px; padding: 0 4px; border: 0; background: none; font: 500 var(--t-s)/26px var(--f-ui); color: var(--acento-texto); cursor: pointer; }
:where(html:not(.puntero-quieto)) .hp-restablecer:hover { text-decoration: underline; }
.vista-horario > .hp-panel { grid-row: 3; grid-column: 1 / -1; margin-top: 8px; }
.contenido > .vista-horario > .hp-panel { margin-inline: var(--sangria); }
.hp-panel {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; padding: 10px 12px;
  border: 1px solid var(--linea); border-radius: var(--r-l); background: var(--sup);
}
.hp-cat { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.hp-cat-t {
  display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 8px 0 4px; border: 0; border-radius: var(--r-s);
  background: none; font: 600 13px/1.2 var(--f-ui); color: var(--tinta); text-align: left; cursor: pointer;
}
.hp-cat-t > .ic { width: 15px; height: 15px; color: var(--tinta-3); }
:where(html:not(.puntero-quieto)) .hp-cat-t:hover { background: var(--sup-2); }
.hp-cat-t:focus-visible, .hp-item:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.hp-casilla { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 4px; background: var(--sup); box-shadow: inset 0 0 0 1.5px var(--linea-2); color: #fff; }
.hp-casilla .ic { width: 12px; height: 12px; }
.hp-cat.todo .hp-casilla { background: var(--acento); box-shadow: none; }
.hp-cat.parte .hp-casilla { background: var(--acento-suave); box-shadow: inset 0 0 0 1.5px var(--acento); }
.hp-cat.parte .hp-casilla::after { content: ''; width: 8px; height: 2px; border-radius: 1px; background: var(--acento); }
.hp-cat.nada .hp-cat-t { color: var(--tinta-3); }
.hp-items { display: flex; flex-wrap: wrap; gap: 4px; padding-left: 4px; }
.hp-item {
  display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px 0 7px; border: 1px solid var(--linea-2); border-radius: var(--r-pildora);
  background: var(--sup); font: 500 12.5px/1 var(--f-ui); color: var(--tinta-3); white-space: nowrap; cursor: pointer;
}
.hp-item .ic { width: 12px; height: 12px; }
.hp-item:not(.activo) span { text-decoration: line-through; }
.hp-item.activo { background: var(--acento-suave); border-color: color-mix(in srgb, var(--acento) 45%, #fff); color: var(--acento-texto); }
:where(html:not(.puntero-quieto)) .hp-item:not(.activo):hover { background: var(--sup-2); color: var(--tinta-2); }
.vista-horario.modo-asistencia > .hp-panel { display: none; }
@media (max-width: 760px) {
  .hp-panel { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hp-resumen { max-width: 100%; }
  /* con los filtros abiertos, la vista crece y se desliza la página (antes, el panel dejaba la rejilla en 26 px): la línea no
     se encoge y la rejilla conserva su alto debajo del panel */
  html:root[data-diseno] .contenido > .vista.vista-horario:has(> .hp-panel) { height: auto; }
  html:root[data-diseno] .vista-horario:has(> .hp-panel) > .horario-linea { min-height: max-content; }
  html:root[data-diseno] .vista-horario:has(> .hp-panel) > .rejilla-dias { min-height: 60dvh; }
}
@media (max-width: 760px) and (pointer: coarse) {
  html:root[data-diseno] :is(.horario-linea .hp-filtros.boton.chico, .hp-restablecer, .hp-cat-t, .hp-item) { height: 44px; min-height: 44px; }
  html:root[data-diseno] :is(.hp-item, .hp-cat-t, .horario-linea .hp-filtros.boton.chico) { font-size: 13px; }
}

/* ═════ 15 oct · tarde · cada día en su caja y vista del profesor en una columna por día ═════
   Juan David: «ahora hay como un cuadro blanco común para todo el horario… puedes hacer más clara la separación entre
   jueves y sábado… mejorar la vista del profesor para que se adapte al número de clases». Cada día lleva su propio marco
   (borde fino y aire entre días); la vista del profesor no tiene columnas por instrumento (horario.js · '_mis'): sin fila
   de cabecera de instrumento. */
.vista-horario:not(.horario-asignar) > .rejilla-dias > .rejilla-dia { padding: 2px 0 10px; border: 1px solid var(--linea-2); border-radius: var(--r-l); }
.vista-horario:not(.horario-asignar) > .rejilla-dias:is(.pila, .alineada) > .rejilla-dia + .rejilla-dia { padding-top: 4px; border-top: 1px solid var(--linea-2); }
.rejilla .rg-inst.rg-mis { min-height: 0; padding: 0; box-shadow: none; }
.rejilla .rg-inst.rg-mis > span { display: none; }
/* la tarjeta de la clase ocupa el ancho de su día y las fichas se reparten ese ancho (hasta 520 px cada una) */
.vista-horario.vista-profesor .rejilla-profesor .rj-celda > .bloque { align-self: stretch; max-width: calc(var(--cols-dia, 4) * 532px + 24px); }
.vista-horario.vista-profesor .rejilla-profesor .bl-alumnos { grid-template-columns: repeat(var(--cols, 2), minmax(240px, 1fr)); }
.vista-horario.vista-profesor .rejilla-dias.estrecho .rejilla-profesor .bl-alumnos { grid-template-columns: minmax(240px, 1fr); }
/* pocas clases a la vista (≤ 4): fichas más grandes (horario.js · MEDIDA.profesorGrande) */
.rejilla-profesor.pocas .bl-alumno { min-height: 52px; font-size: 17px; line-height: 22px; }
.rejilla-profesor.pocas .bl-alumno .avatar { width: 40px !important; height: 40px !important; font-size: 14px !important; }

/* 17 oct noche · «horario Jueves | Sábado» · una sola medida grande para las fichas de todo horario de la escuela en el
   computador (horario.js · acomodarDias · fichasGrandes): Recepción, Administración (también Pendientes y Disponibilidades),
   Supervisión y la vista general del profesor. Letra 15, foto 30, fila de 38; la marca de presente y las de motivo crecen
   con ellas. La rejilla holgada (pocos grupos) ya es grande y queda con sus medidas. El horario de la ficha del alumno
   (.horario-asignar) no. */
.vista-horario:not(.horario-asignar) .rejilla-dias.grande .rejilla-general:not(.holgada) { --u: 38px !important; }
.vista-horario:not(.horario-asignar) .rejilla-dias.grande .rejilla-general:not(.holgada) .bl-alumno { gap: 8px; min-height: 38px; padding: 3px 8px 3px 3px; font-size: 15px; line-height: 19px; }
.vista-horario:not(.horario-asignar) .rejilla-dias.grande .rejilla-general .bl-alumno .avatar { width: 30px !important; height: 30px !important; font-size: 11px !important; }
.vista-horario:not(.horario-asignar) .rejilla-dias.grande .rejilla-general .bl-alumno.presente::after { width: 12px; height: 6px; }
.vista-horario:not(.horario-asignar) .rejilla-dias.grande .rejilla-general:not(.holgada) .bl-marcas { font-size: 12.5px; }
.vista-horario:not(.horario-asignar) .rejilla-dias.grande .rejilla-general:not(.holgada) .bl-edad { font-size: 13px; }
.vista-horario:not(.horario-asignar) .rejilla-dias.grande .rejilla-general:not(.holgada) :is(.bl-nombre, .bl-prof) { font-size: 14px; line-height: 18px; }
.vista-horario:not(.horario-asignar) .rejilla-dias.grande .rejilla-general:not(.holgada) .rj-celda > .bloque { padding: 8px 6px 8px; }
.vista-horario:not(.horario-asignar) .rejilla-dias.grande .rejilla-general:not(.holgada) .bl-alumnos { gap: 3px; }
.vista-horario:not(.horario-asignar) .rejilla-dias.grande .rejilla .rg-inst { font-size: 15px; }
/* las clases del profesor en la vista general siguen un paso más grandes que las demás */
html .vista-horario:not(.horario-asignar) .rejilla-dias.grande .rejilla-general:not(.holgada) .bloque.mia-grande .bl-alumno { padding-block: 4px; font-size: 16px; line-height: 20px; min-height: 50px; }
html .vista-horario:not(.horario-asignar) .rejilla-dias.grande .rejilla-general .bloque.mia-grande .bl-alumno .avatar { width: 34px !important; height: 34px !important; font-size: 12px !important; }
/* nombre en dos líneas (horario.js · nombresEnDos) y las marcas apiladas a la derecha */
.vista-horario:not(.horario-asignar) .rejilla-dias.grande .rejilla-general .bl-nom { white-space: normal; overflow-wrap: normal; word-break: keep-all; }
.vista-horario:not(.horario-asignar) .rejilla-dias.grande .rejilla-general .bl-marcas { flex-direction: column; align-items: flex-end; gap: 2px; }
/* ceñida: la semana no cabe lado a lado con fichas grandes. Mismas fichas; la columna de la hora angosta (48 px, horario.js ·
   repartir), menos hueco entre columnas y entre días, menos relleno a los lados, y las cabeceras largas en dos líneas
   («Despertar / Musical»). Si aún no cabe, la rejilla se desliza dentro de su caja (degradado y botón con lo que falta). */
.rejilla-dias.grande.cenida.lado { column-gap: 12px; }
.rejilla-dias.grande.cenida .rejilla { column-gap: 4px; }
.vista-horario:not(.horario-asignar) .rejilla-dias.grande.cenida .rejilla-general:not(.holgada) .rj-celda > .bloque { padding-inline: 4px; }
.vista-horario:not(.horario-asignar) .rejilla-dias.grande.cenida .rejilla-general:not(.holgada) .bl-alumno { gap: 6px; padding-right: 6px; }
.vista-horario:not(.horario-asignar) .rejilla-dias.grande.cenida .rejilla .rg-hora:not(.sin-hora) { font-size: 14px; }
.vista-horario:not(.horario-asignar) .rejilla-dias.grande.cenida .rejilla .rg-hora.sin-hora { white-space: normal; font-size: 12.5px; line-height: 15px; }
.vista-horario:not(.horario-asignar) .rejilla-dias.grande.cenida .rejilla .rg-inst { white-space: normal; line-height: 17px; font-size: 14px; }