/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   Selah · profesor.css (13 oct · DISENO.md §4 · ronda 2) · Mis clases, pendientes, grupo y fichas de clase, modo clase,
   Mis alumnos, ficha del alumno y Factura (clases.js, modo-clase.js, alumnos.js, factura.js). Composición: docs/diseno-profesor.md.
   Quién: profesores con prisa entre clases, en el Mac o en el teléfono. Mucho aire, controles cómodos, nada técnico.
   Color: un azul de acción; rojo solo para la asistencia vencida (clase pasada sin tomar) y los errores; lo demás que falta,
   ámbar; presente, azul (17 oct · asistencias · colores; antes verde) y ausente, gris. Lo normal (completa, al día) no se pinta. Sin color de instrumento.
   Con pocos elementos, crecen y se centran (sin estirarse); con muchos, compactos.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* Ronda 3 · asistencia, una sola representación en toda el área (grupo, ficha del alumno, modo clase, leyenda):
   presente = cara a color con marca azul (✓; 17 oct, antes verde) · ausente = cara en gris con marca gris (✕) · sin tomar =
   cara tenue con contorno punteado. Las marcas son las mismas en todas las filas y todos los tamaños. */
:root {
  --marca-presente: var(--presente) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 70% no-repeat;
  --marca-ausente: var(--ausente) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center / 62% no-repeat;
}

/* «sin guardar»: un aspecto en todas las vistas del profesor · texto gris con un punto ámbar (no texto naranja) */
:is(.vista-grupo, .vista-ficha, .modo) .estado-guardado { display: inline-flex; align-items: center; gap: 6px; color: var(--ok-texto); }
:is(.vista-grupo, .vista-ficha, .modo) .estado-guardado.sucio { color: var(--tinta-3); }
:is(.vista-grupo, .vista-ficha, .modo) .estado-guardado.sucio::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--aviso); }

/* ═════════════ 1 · Mis clases (amplio): una tarjeta por grupo, lo que falta justo bajo el nombre ═════════════ */
/* Ronda 3 · marco único: el título en el mismo sitio que en las demás pestañas (arriba a la izquierda del marco); las
   tarjetas empiezan bajo el título, sin estirarse más de 520 px. */
.vista-clases:not(.vista-clases-todos) { --cols: 3; }
.vista-clases[data-n="1"] { --cols: 1; }
.vista-clases:is([data-n="2"], [data-n="4"]) { --cols: 2; }
.mc-cab { flex: none; display: grid; gap: 6px; }
.mc-cab .titulo-fila .sub::first-letter { text-transform: uppercase; }
.mc-hoy { display: flex; align-items: center; gap: 8px; font: 500 var(--t-l)/var(--lh-l) var(--f-ui); color: var(--tinta-2); }
.mc-hoy .ic { flex: none; width: 17px; height: 17px; color: var(--tinta-3); }

.rejilla-grupos {
  --cols: 3;
  flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 16px;
  grid-template-columns: repeat(var(--cols), minmax(0, 520px)); justify-content: center; align-content: start;
  margin: 0 -8px; padding: 2px 8px 96px; /* abajo, aire para el disco de pendientes */
}
.vista-clases:not(.vista-clases-todos) > .rejilla-grupos { margin: 0; padding: 2px 0 96px; justify-content: start; }
.rejilla-grupos[data-n="1"] { --cols: 1; }
.rejilla-grupos:is([data-n="2"], [data-n="4"]) { --cols: 2; }

.tarjeta-grupo {
  display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 20px 20px 16px; text-align: left; cursor: pointer;
  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);
}
:where(html:not(.puntero-quieto)) .tarjeta-grupo:hover { box-shadow: var(--s-2); border-color: var(--linea-2); }
.tg-cab { display: flex; align-items: flex-start; gap: 12px; }
.tg-titulo { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tg-instrumento { font: 600 var(--t-2xl)/var(--lh-2xl) var(--f-ui); color: var(--tinta); }
.tg-dia { font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta-3); }
.tg-pie { display: grid; place-items: center; width: 28px; height: 28px; margin: -2px -6px 0 0; border-radius: 50%; color: var(--tinta-4); transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
:where(html:not(.puntero-quieto)) .tarjeta-grupo:hover .tg-pie { color: var(--acento-texto); background: var(--acento-suave); }
/* lo que falta: una línea por clase (punto, frase y fecha); «Al día» con la misma forma, en gris */
.tg-estado { display: grid; gap: 4px; margin-top: -4px; }
.tg-falta { display: flex; align-items: baseline; gap: 8px; min-width: 0; font: 500 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--aviso-texto); }
.tg-falta::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--aviso); align-self: flex-start; margin-top: 6px; }
.tg-falta.vencida { color: var(--peligro-texto); }
.tg-falta.vencida::before { background: var(--peligro); }
.tg-falta-texto { flex: 1; min-width: 0; text-wrap: pretty; }
.tg-falta-fecha { flex: none; font-weight: 400; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.tg-falta.tg-aldia { color: var(--tinta-3); font-weight: 400; }
.tg-falta.tg-aldia::before { background: var(--ok); }
.tg-mas { padding-left: 16px; font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }

/* ── 15 oct · RONDA-FINAL §2 · lo que falta, cada cosa en su casilla con nombre (clases.js · casillasFaltas): Asistencia,
   Registro, Momento inicial, Momento central, Momento final, Tarea. Roja si la clase ya pasó (vencida), ámbar si es de hoy.
   La misma pieza en Mis clases, el grupo, la caja de pendientes, Supervisión y Validar; la tarjeta entera lleva el tono
   (data-falta en la tarjeta, la ficha o la fila). Vale en las dos apariencias (solo tokens). ── */
.cf-lista { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; vertical-align: middle; }
.cf-casilla {
  --cf: var(--aviso); --cf-fondo: var(--aviso-fondo); --cf-texto: var(--aviso-texto);
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px 0 6px; border: 1px solid color-mix(in srgb, var(--cf) 55%, transparent);
  border-radius: 6px; background: var(--cf-fondo); color: var(--cf-texto); font: 600 12px/16px var(--f-ui); white-space: nowrap;
}
.cf-lista[data-tono="vencida"] .cf-casilla { --cf: var(--peligro); --cf-fondo: var(--peligro-fondo); --cf-texto: var(--peligro-texto); }
.cf-caja { flex: none; width: 11px; height: 11px; border: 1.5px solid var(--cf); border-radius: 3px; background: var(--sup); }
/* en las filas que antes llevaban un punto y una frase: sin el punto (la casilla ya lo dice) */
.tg-falta.cf-fila { align-items: center; }
.tg-falta.cf-fila::before, .pend-texto.cf-lista::before { display: none; }
.pend-texto.cf-lista { display: flex; margin-top: 4px; }
/* la tarjeta entera, marcada con el tono de su clase más urgente */
.tarjeta-grupo[data-falta="vencida"] { border-color: color-mix(in srgb, var(--peligro) 50%, transparent); background: color-mix(in srgb, var(--peligro-fondo) 45%, var(--sup)); }
.tarjeta-grupo[data-falta="hoy"] { border-color: color-mix(in srgb, var(--aviso) 60%, transparent); background: color-mix(in srgb, var(--aviso-fondo) 45%, var(--sup)); }
.ficha[data-falta="vencida"]:not(.validada) { border-color: color-mix(in srgb, var(--peligro) 50%, transparent); background: color-mix(in srgb, var(--peligro-fondo) 40%, var(--sup)); }
.ficha[data-falta="hoy"]:not(.validada) { border-color: color-mix(in srgb, var(--aviso) 60%, transparent); background: color-mix(in srgb, var(--aviso-fondo) 40%, var(--sup)); }
.ficha[data-falta] .ficha-fecha small.falta { color: var(--aviso-texto); }
.ficha[data-falta="vencida"] .ficha-fecha small.falta { color: var(--peligro-texto); }
/* abierta: los momentos que faltan, con el borde de su tono (las casillas grandes de la clase) */
.ficha[data-falta]:not(.validada) .momento.vacio { border-color: color-mix(in srgb, var(--aviso) 70%, transparent); }
.ficha[data-falta]:not(.validada) .momento.vacio .momento-cab { color: var(--aviso-texto); }
.ficha[data-falta="vencida"]:not(.validada) .momento.vacio { border-color: color-mix(in srgb, var(--peligro) 60%, transparent); }
.ficha[data-falta="vencida"]:not(.validada) .momento.vacio .momento-cab { color: var(--peligro-texto); }
.ficha[data-falta="hoy"] .alerta-grande { color: var(--aviso-texto); }
.tg-alumnos { display: flex; flex-wrap: wrap; gap: 12px 8px; }
.tg-alumno { display: grid; justify-items: center; gap: 6px; width: 58px; font: 500 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-2); text-align: center; }
.tg-alumnos.grandes .tg-alumno { width: 72px; font-size: var(--t-m); line-height: var(--lh-m); }
.tg-alumno > span:last-child { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* el pie, abajo del todo: a la misma altura en todas las tarjetas de una fila */
.tg-proxima { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--linea); font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }

/* vacío: sin grupos (Mis clases y Mis alumnos) · el componente común, un poco por encima del centro */
.vacio-profesor { padding-bottom: 12vh; }

/* ── Supervisión · Clases (15 grupos o más): las mismas tarjetas, compactas, vista de pájaro. El marco (secciones por
   profesor o por día) vive en direccion.css; aquí solo el tamaño de las tarjetas. Lo normal («Al día») no se escribe. ── */
.vista-clases.vista-clases-todos .sup-seccion .rejilla-grupos[data-n] { margin: 0; }
.vista-clases-todos .tarjeta-grupo { gap: 10px; padding: 14px 16px 12px; }
.vista-clases-todos .tg-instrumento { font-size: var(--t-l); line-height: var(--lh-l); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vista-clases-todos .tg-dia { font-size: var(--t-s); line-height: var(--lh-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vista-clases-todos .tg-estado { margin-top: -2px; }
.vista-clases-todos .tg-estado:has(> .tg-aldia) { display: none; }
.vista-clases-todos .tg-falta { font-size: var(--t-s); line-height: var(--lh-s); }
.vista-clases-todos .tg-alumnos { gap: 8px 4px; }
.vista-clases-todos .tg-alumno { width: 48px; font-size: var(--t-xs); line-height: var(--lh-xs); }
.vista-clases-todos .tg-proxima { padding-top: 8px; }
.vista-clases.vista-clases-todos .sup-seccion-titulo > span:not(.avatar):not(.disco) { white-space: normal; overflow-wrap: anywhere; }

/* ── Supervisión · Pendientes: la lista centrada con un ancho de lectura, como su título ── */
.vista-sup-pendientes.sp-lista > :is(.titulo-fila, .sup-profesores) { width: 100%; max-width: 1120px; align-self: center; }
.vista-sup-pendientes.sp-lista .sp-grupo-titulo small { color: var(--tinta-3); }

/* ═════════════ 2 · Pendientes: disco abajo a la derecha con su rótulo; la caja crece hacia arriba (SPEC-17 §3, SPEC-21 P3) ═════════════ */
.pendientes {
  position: absolute; right: 24px; bottom: 20px; z-index: 15;
  display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 10px;
}
.pendientes.limpia { display: none; } /* sin pendientes no hay disco */
.pend-fila { display: flex; align-items: center; gap: 10px; }
/* el rótulo dice qué es el disco; con la lista abierta se aparta */
.pend-rotulo {
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: var(--r-pildora); pointer-events: none;
  background: var(--sup); border: 1px solid var(--linea); box-shadow: var(--s-2);
  font: 600 var(--t-s)/1 var(--f-ui); color: var(--tinta-2); transition: opacity var(--dur) var(--ease);
}
.pendientes.abierta .pend-rotulo { opacity: 0; }
.pend-boton {
  display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--peligro); color: #fff;
  box-shadow: 0 2px 6px rgba(168, 38, 31, .22), 0 10px 24px rgba(168, 38, 31, .22);
  transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.pend-cuenta { font: 700 20px/1 var(--f-ui); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
:where(html:not(.puntero-quieto)) .pend-boton:not(:disabled):hover { background: var(--peligro-texto); box-shadow: 0 2px 6px rgba(168, 38, 31, .26), 0 14px 32px rgba(168, 38, 31, .28); }
.pendientes.abierta .pend-boton { box-shadow: 0 0 0 4px rgba(208, 55, 46, .18), 0 10px 24px rgba(168, 38, 31, .22); }
/* sin asistencia vencida: lo que falta es «te toca», en ámbar (número en tinta: contraste completo) */
.pendientes.solo-aviso .pend-boton { background: var(--aviso); color: var(--tinta); box-shadow: 0 2px 6px rgba(138, 82, 4, .2), 0 10px 24px rgba(138, 82, 4, .2); }
:where(html:not(.puntero-quieto)) .pendientes.solo-aviso .pend-boton:hover { background: #D68A12; }
.pendientes.solo-aviso.abierta .pend-boton { box-shadow: 0 0 0 4px rgba(229, 154, 30, .22), 0 10px 24px rgba(138, 82, 4, .2); }

.pend-lista {
  display: grid; grid-template-rows: 0fr; width: 400px; max-width: calc(100vw - 48px); overflow: hidden; opacity: 0; pointer-events: none;
  background: var(--sup-flotante); -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
  border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--s-3);
  transition: grid-template-rows var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.pendientes.abierta .pend-lista { grid-template-rows: 1fr; opacity: 1; pointer-events: auto; }
.pend-lista > div { min-height: 0; overflow: hidden; }
.pend-titulo { padding: 14px 16px 6px; font: 600 var(--t-l)/var(--lh-l) var(--f-ui); color: var(--tinta); }
.pend-lista ul { max-height: calc(100vh - 280px); overflow-y: auto; padding: 0 6px 6px; }
/* cada fila: el grupo y la fecha arriba; lo que falta debajo, con el mismo color que en la tarjeta; chevrón a la derecha */
.pend-item {
  display: grid; grid-template-columns: minmax(0, 1fr) 16px; align-items: center; gap: 12px; width: 100%; min-height: 52px;
  padding: 8px 10px 8px 12px; border: 0; border-radius: var(--r-m); background: none; cursor: pointer; text-align: left;
}
.pend-item:hover, .pend-item:focus-visible { background: var(--sup-3); outline: none; }
.pend-quien { display: grid; gap: 1px; min-width: 0; }
.pend-linea { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pend-grupo { font: 600 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta); white-space: nowrap; }
.pend-fecha { font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pend-texto { display: flex; align-items: center; gap: 6px; min-width: 0; font: 500 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--aviso-texto); }
.pend-texto::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--aviso); }
.pend-item.vencida .pend-texto { color: var(--peligro-texto); }
.pend-item.vencida .pend-texto::before { background: var(--peligro); }
.pend-ir { width: 16px; height: 16px; color: var(--tinta-4); }
.pend-item:hover .pend-ir { color: var(--tinta-2); }

/* ═════════════ 3 · Grupo (normal): cabecera sobre el fondo, fichas blancas, barra «Mis grupos» ═════════════ */
.vista-grupo { flex-direction: row; gap: 24px; }
.grupo-principal { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }

/* cabecera: volver, nombre, «Sábado · 4 alumnos», los nombres en una línea y, si existe el campo, las notas del grupo */
.grupo-cab { flex: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.gc-izq { display: grid; gap: 2px; align-content: start; min-width: 0; }
.gc-izq .volver { justify-self: start; margin: -4px 0 4px -8px; }
.gc-meta { font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta-3); }
.gc-cuando { color: var(--tinta-2); font-weight: 500; }
/* leyenda de la asistencia: una línea gris, una sola vez para toda la lista (RONDA-3 §3) */
.leyenda-asis { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 6px; font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.ley-item { display: inline-flex; align-items: center; gap: 11px; }
.ley-cara { position: relative; flex: none; width: 16px; height: 16px; border-radius: 50%; background: #B9C3D3; }
.ley-cara.ausente { background: #D3D8E0; }
.ley-cara:is(.presente, .ausente)::after { content: ""; position: absolute; right: -4px; bottom: -3px; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--fondo); }
.ley-cara.presente::after { background: var(--marca-presente); }
.ley-cara.ausente::after { background: var(--marca-ausente); }
.ley-cara.sin-tomar { background: transparent; box-shadow: none; border: 1.5px dashed var(--tinta-4); }
/* notas del grupo: un campo discreto bajo el título (sin tarjeta flotante), que crece con lo escrito; Guardar secundario */
.gc-notas { display: grid; gap: 4px; min-width: 0; max-width: 760px; }
.gc-notas-titulo { font: 600 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.notas-grupo {
  width: 100%; min-height: 40px; max-height: 160px; padding: 8px 12px; resize: none; overflow-y: auto;
  background: var(--sup); border: 1px solid var(--linea-2); border-radius: var(--r-m); box-shadow: none;
  font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta);
}
.notas-grupo:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-anillo); outline: none; }
.gc-notas-pie { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 28px; }
.gc-notas-pie .estado-guardado { flex: 1; }
/* sin cambios ni estado, el pie no se ve (aparece al escribir) */
.gc-notas-pie:has(.boton:disabled):not(:has(.estado-guardado:not(:empty))) { display: none; }

/* lista de clases: se desplaza dentro de la vista; al desplazar, una línea la separa de la cabecera */
.registros {
  flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin: 0 -8px; padding: 2px 8px 32px;
  border-top: 1px solid transparent; transition: border-color var(--dur) var(--ease);
}
.registros.desplazada { border-top-color: var(--linea-2); }
/* nada se corta en seco (RONDA-3 §6): las listas que se deslizan se funden en su borde de abajo (el relleno inferior
   deja la última tarjeta entera al llegar al final) */
:is(.registros, .vista-clases:not(.vista-clases-todos) > .rejilla-grupos, .vista-alumnos:not(.vista-alumnos-todos) > .columnas-alumnos, .factura-cuerpo) { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent); }

/* ── ficha de una clase ── */
.ficha {
  flex: none; 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);
}
:where(html:not(.puntero-quieto)) .ficha.plegada:hover { box-shadow: var(--s-2); border-color: var(--linea-2); }
.ficha.cancelada { background: var(--sup-2); box-shadow: none; }
.ficha.cancelada .ficha-fecha h3 { color: var(--tinta-3); }
.ficha.destello { animation: destello 1.6s var(--ease); }
@keyframes destello { 0%, 40% { box-shadow: 0 0 0 3px var(--acento-anillo), var(--s-2); border-color: var(--acento); } }

/* la fecha tiene ancho fijo: las caras de todas las filas empiezan en la misma columna */
.ficha-cab { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 10px 12px 10px 20px; cursor: pointer; }
.ficha-fecha { flex: none; display: grid; gap: 1px; width: 244px; }
.ficha-fecha h3 { font: 600 var(--t-l)/var(--lh-l) var(--f-ui); color: var(--tinta); white-space: nowrap; }
.ficha-fecha h3::first-letter { text-transform: uppercase; }
.ficha-fecha small { display: flex; align-items: center; gap: 4px; font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
/* lo que falta, en una línea y un tono: rojo si la asistencia está vencida, ámbar si no (la regla de los pendientes) */
.ficha-fecha small.falta { color: var(--aviso-texto); font-weight: 500; }
.ficha.vencida .ficha-fecha small.falta { color: var(--peligro-texto); }

/* validada: el candado y «Validado» como la línea de estado, en gris (no una píldora que empuja las caras) */
.ficha-fecha .etiqueta.validado { height: auto; padding: 0; gap: 4px; background: none; color: var(--tinta-3); font: 500 var(--t-s)/var(--lh-s) var(--f-ui); }
.ficha-fecha .etiqueta.validado .ic { width: 12px; height: 12px; }

/* caras (32 px) en la línea del título: se ven con la ficha plegada, en la misma columna en todas las filas */
.caras { display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; padding: 4px; overflow: hidden; transition: opacity var(--dur) var(--ease); }
.ficha:not(.plegada) .caras { opacity: 0; pointer-events: none; }
.cara { position: relative; display: inline-flex; border-radius: 50%; cursor: pointer; }
.cara.sin-tomar { cursor: inherit; }
.ficha.validada .cara { cursor: default; }
.ficha-cab .boton { flex: none; }
/* «Completar la clase»: el mismo botón secundario en todas las filas (blanco, borde, texto tinta). Lleva .primario solo
   por el sonido de hover de sonidos.js; aquí se ve secundario. El azul lleno queda para «Empezar la clase» (hoy). */
.ficha-cab .boton.primario.accion-clase { background: var(--sup); border-color: var(--linea-2); color: var(--tinta); box-shadow: none; }
:where(html:not(.puntero-quieto)) .ficha-cab .boton.primario.accion-clase:hover:not(:disabled) { background: var(--sup-2); border-color: #B7BEC9; }
.ficha-cab .boton.primario.accion-clase:active:not(:disabled) { background: var(--sup-3); }
.ficha-cab .boton.suave { padding: 0 12px; }
/* «Abrir la clase» en una clase completa: discreto, aparece al pasar el mouse por la fila (o con la ficha abierta) */
.ficha.plegada .boton.discreto { opacity: 0; transition: opacity var(--dur) var(--ease); }
:where(html:not(.puntero-quieto)) .ficha.plegada:hover .boton.discreto, .ficha.plegada:focus-within .boton.discreto { opacity: 1; }
.ficha .plegar .ic { transition: transform var(--dur) var(--ease); }
.ficha:not(.plegada) .plegar .ic { transform: rotate(180deg); }

/* presente: a color con ✓ azul · ausente: en gris (visible, no un fantasma) con ✕ gris · sin tomar: tenue con contorno
   punteado. Igual en todas las filas (también en las completas y validadas) y en grupo, ficha del alumno y modo clase. */
:is(.cara, .asis-alumno, .ca-comp, .tile).ausente:not(.sin-marcar) .avatar { filter: grayscale(1); opacity: .55; }
:is(.cara, .asis-alumno, .ca-comp):is(.presente, .ausente)::after {
  content: ''; position: absolute; width: 15px; height: 15px; border-radius: 50%; box-shadow: 0 0 0 2px var(--sup); pointer-events: none;
}
:is(.cara, .asis-alumno, .ca-comp).presente::after { background: var(--marca-presente); }
:is(.cara, .asis-alumno, .ca-comp).ausente::after { background: var(--marca-ausente); }
.cara:is(.presente, .ausente)::after { right: -3px; bottom: -3px; width: 13px; height: 13px; }
.cara.sin-tomar .avatar { filter: grayscale(1); opacity: .4; }
.cara.sin-tomar::before { content: ''; position: absolute; inset: -3px; border: 1.5px dashed var(--tinta-4); border-radius: 50%; pointer-events: none; }

/* abrir y plegar en su sitio */
.ficha-det { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur) var(--ease); }
.ficha.plegada .ficha-det { grid-template-rows: 0fr; }
.ficha-det > div { min-height: 0; overflow: hidden; }
.ficha-cuerpo { display: grid; gap: 16px; padding: 2px 20px 20px; }

/* momentos: cuatro columnas iguales. Escrito: hundido. Vacío y editable: un campo blanco (invita a escribir). El que se
   edita crece solo (los demás no se estiran con él). */
.momentos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 8px; }
.momento {
  display: grid; align-content: start; gap: 4px; min-width: 0; min-height: 88px; padding: 10px 12px;
  background: var(--sup-2); border: 1px solid transparent; border-radius: var(--r-m);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.momento-cab { font: 600 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.momento p { font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.momento:is(.vacio, .neutro).editable { background: var(--sup); border-color: var(--linea-2); }
.momento:is(.vacio, .neutro) p { color: var(--tinta-4); }
.momento.editable { cursor: text; }
:where(html:not(.puntero-quieto)) .momento.editable:hover { border-color: var(--tinta-4); }
:where(html:not(.puntero-quieto)) .momento.vacio.editable:hover p { color: var(--tinta-3); }
.momento.editando { background: var(--sup); border: 1px solid var(--acento); box-shadow: 0 0 0 3px var(--acento-anillo); gap: 6px; }
.momento-texto {
  width: 100%; min-height: 72px; padding: 0; border: 0; border-radius: 0; resize: none; background: transparent; box-shadow: none !important;
  font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta);
}
.momento-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 8px; }
.momento-pie .estado-guardado { flex: 1 1 auto; }
.momento.editando.sucio.avisar .estado-guardado { animation: destello-texto 1.2s var(--ease); }
@keyframes destello-texto { 0%, 50% { color: var(--peligro-texto); } }
.momento.lleno.recien { animation: recien 1.4s var(--ease); }
@keyframes recien { 0%, 40% { border-color: var(--ok); background: var(--ok-fondo); } }
/* validada: un documento cerrado, sin bordes, texto en gris oscuro */
.ficha.validada .momento { background: transparent; border-color: transparent; padding-left: 0; }
.ficha.validada .momento p { color: var(--tinta-2); }
.momento:focus-visible, .cara:focus-visible, .asis-alumno:focus-visible, .ca-comp:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* asistencia de la ficha abierta (va primero): caras de 44 px con el nombre debajo */
.asistencia { display: grid; gap: 10px; }
.asis-titulo { font: 600 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.asis-alumnos { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 14px; }
.asis-alumno {
  position: relative; display: grid; justify-items: center; gap: 6px; width: 60px; padding: 2px 0; border-radius: var(--r-m); cursor: pointer;
  font: 500 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); text-align: center;
}
.asis-alumno:is(.presente, .ausente)::after { top: 32px; left: calc(50% + 10px); }
.asis-alumno.presente .asis-nombre { color: var(--tinta); }
.asis-nombre { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ficha.validada .asis-alumno { cursor: default; }
/* duplicado: las dos caras juntas en un solo marco ámbar, y una línea con la acción directa */
.asis-par { display: inline-flex; gap: 6px; padding: 4px 6px; margin: -6px -2px; border: 1.5px solid var(--aviso); border-radius: 14px; }
.asis-aviso { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 500 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--aviso-texto); }
.asis-aviso > .ic { width: 16px; height: 16px; color: var(--aviso); }
.asis-aviso .boton { margin-left: 4px; }
/* asistencia sin tomar: una línea con ícono, en el tono de su pendiente (ámbar; rojo la vencida), no una franja */
.alerta-grande { display: flex; align-items: center; gap: 8px; font: 600 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--aviso-texto); }
.alerta-grande .ic { width: 17px; height: 17px; }
.ficha.vencida .alerta-grande { color: var(--peligro-texto); }
.asis-futura { display: flex; align-items: center; gap: 8px; font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta-3); }
.asis-futura .ic { width: 16px; height: 16px; }

/* ── barra lateral «Mis grupos»: la selección en píldora blanca que se desplaza ── */
.otros-grupos { flex: none; width: 220px; display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.og-titulo { padding: 0 12px; font: 600 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.og-lista { position: relative; display: grid; gap: 2px; }
.og-grupo {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px;
  border: 0; border-radius: 10px; background: transparent; cursor: pointer; text-align: left;
  transition: background-color var(--dur) var(--ease);
}
:where(html:not(.puntero-quieto)) .og-grupo:hover:not(:disabled) { background: rgba(22, 29, 43, .045); }
.og-grupo:disabled { cursor: default; color: inherit; }
.og-texto { flex: 1; min-width: 0; display: grid; }
.og-texto b { font: 600 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.og-texto span { font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.og-grupo.actual .og-texto b { font-weight: 700; }
/* pendientes con su palabra («2 pendientes»), en gris: la suma no lleva color (cada clase dice el suyo en su línea);
   sin pendientes, «Al día» en gris claro */
.og-pt { flex: none; font: 600 var(--t-s)/var(--lh-s) var(--f-ui); font-variant-numeric: tabular-nums; color: var(--tinta-2); white-space: nowrap; }
.og-pt::after { content: " pendientes"; font-weight: 500; }
.og-pt[data-n="1"]::after { content: " pendiente"; }
.og-aldia { flex: none; font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.og-marcador {
  position: absolute; left: 0; right: 0; top: 0; z-index: 0; height: 0; opacity: 0; border-radius: 10px;
  background: var(--sup); box-shadow: var(--s-1), 0 0 0 1px rgba(16, 24, 40, .06);
  transition: top var(--dur) var(--ease), height var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.og-marcador.quieto { transition: none; }

/* ═════════════ 4 · Modo clase (amplio): pantalla completa por pasos ═════════════ */
.modo {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; overflow: hidden; background: var(--fondo);
  transition: opacity var(--dur) var(--ease);
}
.modo.entrando, .modo.saliendo { opacity: 0; }
.modo-cab { flex: none; display: flex; align-items: center; gap: 16px; padding: 20px 28px 16px; }
.modo-cab.entrada, .modo-cuerpo.entrada > * { animation: entra var(--dur) var(--ease) backwards; }
.modo-cuerpo.entrada > :nth-child(2) { animation-delay: .04s; }
.modo-cuerpo.entrada > :nth-child(3) { animation-delay: .08s; }
.modo-titulo { min-width: 0; display: grid; gap: 2px; }
.modo-titulo h1 { font: 700 var(--t-titulo)/var(--lh-titulo) var(--f-titulo); color: var(--tinta); }
.modo-titulo p { font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta-3); }
.modo-titulo p::first-letter { text-transform: uppercase; }
.cerrar-modo {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--linea-2); background: var(--sup); color: var(--tinta-2); box-shadow: var(--s-1);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cerrar-modo .ic { width: 18px; height: 18px; }
:where(html:not(.puntero-quieto)) .cerrar-modo:hover { background: var(--sup-2); color: var(--tinta); }

.modo-cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; padding: 0 28px 24px; }
.modo-cuerpo.con-notas { grid-template-columns: 220px minmax(0, 1fr) 280px; }

/* los avisos, abajo al centro y por encima del pie del paso (DISENO §1.8: nada tapa nada) */
body.con-modo .avisos { bottom: 92px; }

/* pasos 1 a 6: número gris; hecho, el número pasa a check verde; el actual en píldora blanca; uno saltado dice «vacío» */
.pasos { min-height: 0; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.paso {
  display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 6px 12px 6px 10px; border: 0; border-radius: 10px;
  background: transparent; cursor: pointer; text-align: left; white-space: nowrap;
  font: 500 var(--t-l)/var(--lh-l) var(--f-ui); color: var(--tinta-2);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
:where(html:not(.puntero-quieto)) .paso:hover:not(.actual) { background: rgba(22, 29, 43, .045); color: var(--tinta); }
.paso.actual { background: var(--sup); color: var(--tinta); font-weight: 600; box-shadow: var(--s-1), 0 0 0 1px rgba(16, 24, 40, .06); }
.paso-n {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%;
  font: 600 var(--t-s)/1 var(--f-ui); color: var(--tinta-3); background: var(--sup-3);
}
.paso-n .ic { width: 14px; height: 14px; }
.paso.hecho .paso-n { color: #fff; background: var(--ok); }
.paso.actual:not(.hecho) .paso-n { color: #fff; background: var(--acento); }
.paso-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.paso-saltado { flex: none; font: 500 var(--t-xs)/var(--lh-xs) var(--f-ui); color: var(--tinta-3); }
/* el registro (pasos 2 a 4) se agrupa con dos líneas finas, sin rótulo */
.bloque-registro { display: grid; gap: 2px; margin: 4px 0; padding: 4px 0; border-block: 1px solid var(--linea); }
.paso[data-ir="terminar"] { margin-top: 8px; }

/* centro: una tarjeta blanca que se llena */
.paso-centro {
  min-height: 0; display: flex; flex-direction: column; padding: 24px 28px;
  background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-xl); box-shadow: var(--s-1);
}
.paso-centro > div { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 16px; }
.paso-titulo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; flex: none; }
.paso-titulo h2 { font: 600 var(--t-2xl)/var(--lh-2xl) var(--f-ui); }
.pista, .cuenta { font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta-3); }
.cuenta { font-variant-numeric: tabular-nums; }
.paso-pie { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
/* «Siguiente paso» y sus variantes: un solo estilo (azul, grande) con la flecha de avance a la derecha del texto */
.boton.avanzar > .ic { order: 2; margin-right: -4px; }
.paso-pie > .detalle { flex: 1; font-size: var(--t-m); line-height: var(--lh-m); }
.paso-pie > .estado-guardado { flex: 1; font-size: var(--t-m); }
.asistir > .asis-aviso { flex: none; }

/* asistencia: tarjetas grandes que reparten el alto; un toque cambia presente/ausente */
.tiles {
  flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(150px, 260px); gap: 12px;
  grid-auto-flow: row dense; align-content: start; overflow-y: auto; margin: -2px; padding: 2px;
}
.tiles:is([data-n="1"], [data-n="2"], [data-n="4"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles:is([data-n="7"], [data-n="8"], [data-n="10"], [data-n="11"], [data-n="12"]) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile-celda { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.tile, .tile-espera {
  position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-width: 0; padding: 16px 12px;
  background: var(--sup); border: 1px solid var(--linea-2); border-radius: var(--r-xl); box-shadow: var(--s-1); cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
:where(html:not(.puntero-quieto)) :is(.tile, .tile-espera):hover:not(:disabled) { box-shadow: var(--s-2); border-color: #B7BEC9; }
:is(.tile, .tile-espera):disabled { cursor: default; }
.tile-nombre { max-width: 100%; font: 600 var(--t-2xl)/var(--lh-2xl) var(--f-ui); color: var(--tinta-2); text-align: center; overflow-wrap: anywhere; }
.tile-estado {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-pildora);
  font: 600 var(--t-m)/1 var(--f-ui); color: var(--tinta-3); background: var(--sup-3);
}
.tile-estado .ic { width: 15px; height: 15px; }
:is(.tile, .tile-espera).presente { background: var(--presente-tinte); border-color: var(--presente-borde); }
:where(html:not(.puntero-quieto)) :is(.tile, .tile-espera).presente:hover:not(:disabled) { border-color: var(--presente); }
:is(.tile, .tile-espera).presente .tile-nombre { color: var(--tinta); }
:is(.tile, .tile-espera).presente .tile-estado { color: #fff; background: var(--presente); }
/* 17 oct · asistencias · colores: el ausente marcado, ficha gris (como en el horario) */
.tile.ausente:not(.sin-marcar) { background: var(--ausente-tinte); border-color: var(--ausente-borde); }
:where(html:not(.puntero-quieto)) .tile.ausente:not(.sin-marcar):hover:not(:disabled) { border-color: var(--ausente); }
.tile.ausente:not(.sin-marcar) .tile-estado { color: var(--ausente-texto); background: var(--sup); box-shadow: inset 0 0 0 1px var(--ausente-borde); }
/* sin marcar: neutro, con contorno punteado (como las caras sin tomar): nadie lo ha tocado; al seguir cuenta como ausente */
:is(.tile, .tile-espera).sin-marcar { border-style: dashed; border-color: var(--tinta-4); box-shadow: none; }
:is(.tile, .tile-espera).sin-marcar .tile-estado { color: var(--tinta-2); background: transparent; border: 1px dashed var(--tinta-4); }
/* duplicado: las dos tarjetas en un solo marco ámbar con su rótulo (la cifra de arriba cuenta al alumno una vez) */
.tile-par {
  grid-column: span 2; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 6px 8px 8px;
  border: 1.5px solid var(--aviso); border-radius: 20px;
}
.tile-par-rotulo { flex: none; padding: 0 4px; font: 600 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--aviso-texto); }
.tile-par-tarjetas { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 8px; }
/* no se guardó: la tarjeta muestra lo guardado, con borde rojo y, dentro, qué quedó y «Reintentar» (a mano) */
.tiles .tile.sin-guardar, :where(html:not(.puntero-quieto)) .tiles .tile.sin-guardar:hover { border: 2px solid var(--peligro); padding-bottom: 48px; }
.tile-fallo {
  position: absolute; left: 2px; right: 2px; bottom: 2px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 40px; padding: 0 6px 0 14px; border-radius: 0 0 14px 14px; background: var(--peligro-fondo);
  font: 600 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--peligro-texto);
}
.tile-fallo .boton { color: var(--peligro-texto); }
:where(html:not(.puntero-quieto)) .tile-fallo .boton:hover:not(:disabled) { background: rgba(208, 55, 46, .1); }
/* la nota de cada alumno, dentro de su tarjeta (clase validada) */
.tile-nota { max-width: 100%; font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta-2); text-align: center; overflow-wrap: anywhere; }
/* «⋯» en la esquina: el mismo menú que el clic derecho, también en pantalla táctil */
.tile-mas {
  position: absolute; top: 8px; right: 8px; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--tinta-2); font: 700 18px/1 var(--f-ui); cursor: pointer;
  transition: opacity var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
:where(html:not(.puntero-quieto)) .tile-celda:hover .tile-mas, .tile-mas:focus-visible { opacity: 1; }
:where(html:not(.puntero-quieto)) .tile-mas:hover { background: rgba(22, 29, 43, .06); color: var(--tinta); }
/* solo lectura (clase validada): las mismas tarjetas que en edición, quietas (sin sombra de botón) */
.modo.solo-lectura .tile { box-shadow: none; }

/* pasos de texto: un campo que crece con lo escrito (desde unas 6 líneas); el botón justo debajo */
.paso-centro > .escribir { width: 100%; max-width: 820px; margin: 0 auto; justify-content: center; padding-bottom: 4%; }
.texto-paso {
  flex: none; min-height: 200px; max-height: 50vh; overflow-y: auto; padding: 16px 20px; resize: none;
  border: 1px solid var(--linea-2); border-radius: var(--r-l); background: var(--sup);
  font: 400 18px/1.6 var(--f-ui); color: var(--tinta);
}
.texto-paso:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-anillo); outline: none; }
.texto-paso[readonly] { background: var(--sup-2); }
.texto-paso[readonly]:focus { border-color: var(--linea-2); box-shadow: none; }
/* lo escrito en la clase anterior del grupo, para dar continuidad */
.paso-anterior { flex: none; display: grid; gap: 2px; padding: 10px 14px; border-radius: var(--r-m); background: var(--sup-2); }
.paso-anterior small { font: 600 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.paso-anterior p { font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta-2); overflow-wrap: anywhere; }

/* terminar: los cinco pasos en una lista; cada fila lleva a su paso; el botón final en el azul de siempre */
.terminar { align-items: center; justify-content: center; gap: 24px !important; text-align: center; }
.terminar .paso-titulo { flex-direction: column; align-items: center; gap: 4px; }
.resumen-pasos { display: grid; width: min(480px, 100%); overflow: hidden; background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-l); }
.resumen-paso {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 16px; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px;
  border: 0; border-bottom: 1px solid var(--linea); background: none; cursor: pointer; text-align: left;
  font: 500 var(--t-l)/var(--lh-l) var(--f-ui); color: var(--tinta);
}
.resumen-paso:last-child { border-bottom: 0; }
:where(html:not(.puntero-quieto)) .resumen-paso:hover { background: var(--sup-2); }
.rp-disco { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 600 var(--t-s)/1 var(--f-ui); color: var(--tinta-3); background: var(--sup-3); }
.rp-disco .ic { width: 14px; height: 14px; }
.resumen-paso.hecho .rp-disco { color: #fff; background: var(--ok); }
.rp-estado { display: inline-flex; align-items: center; gap: 6px; font: 600 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--ok-texto); }
.resumen-paso.vacio .rp-estado { color: var(--tinta-2); font-weight: 500; }
.resumen-paso > .ic { width: 16px; height: 16px; color: var(--tinta-4); }
.terminar > .boton { min-width: 260px; }

/* notas por alumno (solo en el paso de asistencia, cuando hay presentes) */
.presentes {
  min-height: 0; display: flex; flex-direction: column; gap: 2px; padding: 20px 16px 12px;
  background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-xl); box-shadow: var(--s-1);
}
.presentes h2 { padding: 0 4px; font: 600 var(--t-xl)/var(--lh-xl) var(--f-ui); }
.presentes > .detalle { padding: 0 4px 8px; }
.presentes-lista { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; margin: 0 -6px; padding: 0 6px; }
.pr { display: grid; gap: 4px; padding: 10px 4px; border-top: 1px solid var(--linea); }
.pr-cab { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pr-nombre { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta); }
.pr-nota { padding-left: 42px; font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta-2); overflow-wrap: anywhere; }
.pr-agregar {
  justify-self: start; display: inline-flex; align-items: center; gap: 4px; margin-left: 36px; padding: 4px 6px; border: 0; border-radius: var(--r-s); white-space: nowrap;
  background: none; cursor: pointer; font: 600 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--acento-texto);
}
.pr-agregar .ic { width: 14px; height: 14px; }
:where(html:not(.puntero-quieto)) .pr-agregar:hover { background: var(--acento-suave); }
.pr.abierta { gap: 8px; }
.pr-nota-texto { width: 100%; min-height: 84px; resize: none; font: 400 var(--t-l)/var(--lh-l) var(--f-ui); }
.pr-botones { display: flex; justify-content: flex-end; gap: 6px; }
.pr-botones .boton { height: 36px; padding: 0 14px; }

/* salir con texto sin guardar: tres salidas; «Salir sin guardar» en texto rojo discreto a la izquierda */
.dialogo.dialogo-salir { width: min(580px, 100%); }
.dialogo-salir .dialogo-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dialogo-salir .espacio { flex: 1; }
.dialogo-salir .salir-sin-guardar { color: var(--peligro-texto); }
:where(html:not(.puntero-quieto)) .dialogo-salir .salir-sin-guardar:hover { background: var(--peligro-fondo); }

/* ═════════════ 5 · Mis alumnos (normal o amplio): una columna por grupo; con pocos alumnos, filas grandes ═════════════ */
/* Ronda 3 · marco único: el título en el mismo sitio que en las demás pestañas; las columnas empiezan bajo el título. */
.columnas-alumnos {
  --cols: 3;
  flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 420px)); gap: 24px;
  justify-content: start; align-content: start; align-items: start; margin: 0 -8px; padding: 2px 8px 32px;
}
.vista-alumnos.amplio .columnas-alumnos { grid-template-columns: repeat(var(--cols), minmax(0, 480px)); }
.columnas-alumnos[data-n="1"] { --cols: 1; }
.columnas-alumnos[data-n="2"] { --cols: 2; }
.columnas-alumnos[data-n="4"] { --cols: 4; }
.col-grupo { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.mini-titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; padding: 0 4px; font: 600 var(--t-l)/var(--lh-l) var(--f-ui); color: var(--tinta); }
.vista-alumnos.amplio .mini-titulo { font-size: var(--t-xl); line-height: var(--lh-xl); }
.mini-titulo > span { white-space: nowrap; }
.mini-titulo small { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta-3); }
.col-lista { display: grid; overflow: hidden; background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--s-1); }
.alumno-fila {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px 8px 12px; border: 0; border-bottom: 1px solid var(--linea);
  background: transparent; cursor: pointer; text-align: left; transition: background-color var(--dur) var(--ease);
}
.alumno-fila:last-child { border-bottom: 0; }
:where(html:not(.puntero-quieto)) .alumno-fila:hover { background: var(--sup-2); }
.af-texto { flex: 1; min-width: 0; display: grid; }
.af-texto b { font: 600 var(--t-l)/var(--lh-l) var(--f-ui); color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-texto span { font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-senal { flex: none; font: 500 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); white-space: nowrap; }
.af-senal.ausencias { color: var(--aviso-texto); }
.af-ir { flex: none; width: 16px; height: 16px; color: var(--tinta-4); transition: color var(--dur) var(--ease); }
:where(html:not(.puntero-quieto)) .alumno-fila:hover .af-ir { color: var(--tinta-2); }
/* amplio (12 alumnos o menos): foto de 56 px, nombre grande y el acudiente debajo */
.vista-alumnos.amplio .alumno-fila { gap: 14px; min-height: 84px; padding: 12px 16px; }
.vista-alumnos.amplio .af-texto { gap: 1px; }
.vista-alumnos.amplio .af-texto b { font-size: var(--t-xl); line-height: var(--lh-xl); }
.vista-alumnos.amplio .af-texto span { font-size: var(--t-m); line-height: var(--lh-m); }
.vista-alumnos.amplio .af-acudiente { color: var(--tinta-3); }

/* ═════════════ 6 · Ficha del alumno (normal): volver arriba; la persona a la izquierda, sus clases a la derecha ═════════════ */
.vista-ficha { gap: 10px; }
.vista-ficha > .volver { flex: none; align-self: flex-start; margin: -4px 0 0 -8px; }
.fa-cuerpo { flex: 1; min-height: 0; display: flex; gap: 24px; }
.fa-perfil {
  flex: none; width: 300px; max-height: 100%; align-self: flex-start; display: flex; flex-direction: column; gap: 14px; overflow-y: auto;
  padding: 20px; background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--s-1);
}
.fa-perfil h1 { margin-top: -4px; font-size: 30px; line-height: 32px; overflow-wrap: anywhere; }
/* datos en pares: rótulo pequeño arriba, valor debajo */
.fa-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.fa-datos > div { display: grid; gap: 1px; min-width: 0; }
.fa-datos > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.fa-datos dt { font: 600 var(--t-xs)/var(--lh-xs) var(--f-ui); color: var(--tinta-3); }
.fa-datos dd { font: 500 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta); overflow-wrap: anywhere; }
.acudiente { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--linea); }
.acudiente-titulo, .fa-notas-titulo { font: 600 var(--t-xs)/var(--lh-xs) var(--f-ui); color: var(--tinta-3); }
.acudiente-nombre { font: 600 var(--t-l)/var(--lh-l) var(--f-ui); color: var(--tinta); }
.acudiente p:not(.acudiente-titulo):not(.acudiente-nombre) { display: flex; align-items: center; gap: 8px; min-width: 0; font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta-2); }
.acudiente p .copiable { min-width: 0; overflow-wrap: anywhere; }
.acudiente p .ic { width: 16px; height: 16px; color: var(--tinta-3); }
.acudiente .whatsapp { justify-self: start; margin: 2px 0 0 -10px; }
.fa-notas { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--linea); }
.notas-alumno { width: 100%; min-height: 96px; resize: none; font: 400 var(--t-m)/var(--lh-m) var(--f-ui); }
.fa-notas-pie { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 28px; }
.fa-notas-pie .estado-guardado { flex: 1; }

.fa-clases { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.fa-clases-cab { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.fa-clases-cab h2 { font: 600 var(--t-2xl)/var(--lh-2xl) var(--f-ui); color: var(--tinta); }
/* filtro segmentado: el número y su palabra; el elegido en blanco; los de 0 no se ven */
.contadores { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: var(--r-m); background: var(--sup-3); }
.contador {
  display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border: 0; border-radius: var(--r-s);
  background: transparent; cursor: pointer; white-space: nowrap; font: 500 var(--t-s)/1 var(--f-ui); color: var(--tinta-2);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.contador b { font: 600 var(--t-m)/1 var(--f-ui); color: var(--tinta); font-variant-numeric: tabular-nums; }
:where(html:not(.puntero-quieto)) .contador:hover:not(:disabled):not(.activo) { color: var(--tinta); }
.contador.activo { background: var(--sup); color: var(--tinta); font-weight: 600; box-shadow: var(--s-1), 0 0 0 1px rgba(16, 24, 40, .06); }
.contador:disabled { display: none; cursor: default; }

/* historial: una tarjeta con filas de 48 px en columnas fijas (fecha · grupo si es otro · estado · nota) */
.clases-alumno {
  flex: 0 1 auto; min-height: 0; overflow-y: auto; align-self: stretch;
  background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--s-1);
}
.clases-alumno:not(:has(.ca)) { flex: 1; }
.ca { border-bottom: 1px solid var(--linea); }
.ca:last-child { border-bottom: 0; }
.ca-tramo { padding: 10px 16px 8px 42px; border-bottom: 1px solid var(--linea); background: var(--sup-2); font: 600 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.ca-tramo:not(:first-child) { border-top: 1px solid var(--linea); margin-top: -1px; }
.ca-cab {
  display: grid; grid-template-columns: 16px 150px 184px minmax(0, 1fr); align-items: center; column-gap: 12px;
  width: 100%; min-height: 48px; padding: 8px 16px 8px 14px; border: 0; background: none; cursor: pointer; text-align: left;
  transition: background-color var(--dur) var(--ease);
}
:where(html:not(.puntero-quieto)) .ca-cab:hover { background: var(--sup-2); }
/* columnas fijas (no se mueven al filtrar): flecha · fecha (con el grupo debajo si es otro) · estado · nota */
.ca-cab > .flecha { grid-column: 1; }
.ca-cab > .ca-cuando { grid-column: 2; display: grid; min-width: 0; }
.ca-cab > .ca-estado { grid-column: 3; }
.ca-cab > .ca-nota { grid-column: 4; }
.ca .flecha { width: 16px; height: 16px; color: var(--tinta-4); transform: rotate(-90deg); transition: transform var(--dur) var(--ease); }
.ca.abierta .flecha { transform: none; }
.ca-fecha { font: 600 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta); white-space: nowrap; }
.ca-fecha::first-letter { text-transform: uppercase; }
.ca-grupo { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); white-space: nowrap; }
/* el estado, un solo componente para los tres casos (la misma píldora, como las marcas de las caras): ✓ presente en azul,
   ✕ ausente en gris, «sin tomar» con contorno punteado */
.ca-estado {
  justify-self: start; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border: 1px solid transparent;
  border-radius: var(--r-pildora); font: 600 var(--t-s)/1 var(--f-ui); white-space: nowrap;
}
.ca-estado .ic { width: 13px; height: 13px; }
.ca-estado.presente { color: var(--presente-texto); background: var(--presente-tinte); }
.ca-estado.ausente { color: var(--ausente-texto); background: var(--ausente-tinte); }
.ca-estado.sin { color: var(--tinta-2); background: transparent; border: 1px dashed var(--tinta-4); }
.ca-nota { min-width: 0; font: 400 var(--t-m)/var(--lh-m) var(--f-ui); font-style: normal; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-det { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }
.ca.abierta .ca-det { grid-template-rows: 1fr; }
.ca-det > div { min-height: 0; overflow: hidden; }
.ca-cuerpo { display: grid; gap: 14px; padding: 4px 16px 18px 42px; }
/* la nota de esta persona, con su rótulo: es lo propio de esta ficha */
.ca-nota-entera { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-m); background: var(--sup-2); border: 1px solid var(--linea); }
.ca-nota-entera b { font: 600 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-2); }
.ca-nota-entera p { font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta); overflow-wrap: anywhere; }
/* abierta, la nota se lee entera debajo: la de la línea se aparta */
.ca.abierta .ca-cab .ca-nota { visibility: hidden; }
.ca-momentos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ca-momento { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 10px 12px; border: 1px solid transparent; border-radius: var(--r-m); background: var(--sup-2); }
.ca-momento b { font: 600 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.ca-momento p { font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta); overflow-wrap: anywhere; }
/* en lectura: lo vacío no parece un campo (sin borde), solo «Sin escribir» en gris */
.ca-momento.vacio { background: transparent; }
.ca-momento.vacio p { color: var(--tinta-3); }
.ca-companeros { display: flex; flex-wrap: wrap; gap: 12px 14px; }
.ca-comp {
  position: relative; display: grid; justify-items: center; gap: 6px; width: 60px; padding: 2px 0; border-radius: var(--r-m);
  font: 500 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); text-align: center; white-space: nowrap;
}
.ca-comp.presente { color: var(--tinta); }
.ca-comp:is(.presente, .ausente)::after { top: 30px; left: calc(50% + 9px); width: 14px; height: 14px; }
.ca-comp-nombre { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ca-comp.yo { font-weight: 700; color: var(--tinta); }
.ca-comp:not(.yo) .avatar { opacity: .85; }
.ca-comp.marcable { cursor: pointer; }

/* ═════════════ 7 · Factura (amplio): una columna bajo el título del marco; el mes que pide atención, abierto ═════════════
   Ronda 3: el título en el mismo sitio que en las demás pestañas (sin columna centrada); cada mes con la misma rejilla y el
   estado siempre en la última columna, pegado a la derecha (el abierto también: mismo relleno). Letra un punto mayor: hay
   muy pocos datos. */
.factura-cuerpo { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; max-width: 880px; margin: 0 -8px; padding: 2px 8px 24px; }
.factura-cuerpo:has(> .vacio-grande) { max-width: none; }
.meses { display: grid; gap: 8px; }
.mes { min-width: 0; background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--s-1); }
.mes-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.mes-nombre { min-width: 0; display: grid; }
.mes-nombre h2 { font: 600 var(--t-xl)/var(--lh-xl) var(--f-ui); color: var(--tinta); }
/* estado en palabras con el tono que le toca: pagada = hecho, falta = te toca, problema = error; lo demás, gris */
.mes-estado {
  flex: none; display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: var(--r-pildora);
  font: 600 var(--t-s)/1 var(--f-ui); white-space: nowrap; color: var(--neutro-texto); background: var(--neutro-fondo);
}
.mes.est-pagada .mes-estado { color: var(--ok-texto); background: var(--ok-fondo); }
.mes.falta .mes-estado { color: var(--aviso-texto); background: var(--aviso-fondo); }
.mes.est-problema .mes-estado { color: var(--peligro-texto); background: var(--peligro-fondo); }
.mes-horas { font: 400 var(--t-l)/var(--lh-l) var(--f-ui); color: var(--tinta-2); white-space: nowrap; }
.mes-horas b { font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
.mes-archivos { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.mes-archivos li {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 30px; padding: 0 10px; border-radius: var(--r-s);
  background: var(--sup-2); border: 1px solid var(--linea); font: 500 var(--t-s)/1 var(--f-ui); color: var(--tinta-2);
}
.mes-archivos li span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mes-archivos .ic { width: 14px; height: 14px; color: var(--tinta-3); }
/* el problema se lee una sola vez, dentro de su mes, con la manera de resolverlo */
.globo { display: flex; align-items: flex-start; gap: 8px; font: 500 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--peligro-texto); }
.globo .ic { width: 16px; height: 16px; margin-top: 2px; }
/* un archivo rechazado: el mensaje debajo del botón, en rojo con su ícono; el botón no cambia de forma */
.mes-error { display: flex; align-items: flex-start; gap: 6px; font: 500 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--peligro-texto); }
.mes-error .ic { flex: none; width: 15px; height: 15px; margin-top: 2px; }

/* el mes abierto: nombre y estado arriba (el estado a la derecha, como en las filas), las horas como cifra principal y la acción */
.mes.foco { display: grid; gap: 14px; padding: 20px; }
.mes.foco .mes-nombre h2 { font: 600 var(--t-2xl)/var(--lh-2xl) var(--f-ui); }
.mes.foco .mes-horas { font-size: var(--t-l); line-height: var(--lh-titulo); }
.mes.foco .mes-horas b { margin-right: 2px; font: 600 var(--t-titulo)/var(--lh-titulo) var(--f-ui); letter-spacing: -.01em; }
.mes-reemplazos, .mes-sin-horas, .mes-sin-ficha { font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta-2); }
.mes.foco .mes-reemplazos { margin-top: -10px; color: var(--tinta-3); }
.mes-sin-horas { font-size: var(--t-l); line-height: var(--lh-l); }
.mes-accion { display: grid; justify-items: start; gap: 8px; padding-top: 2px; }
.mes-accion .boton.suave { margin-left: -12px; } /* el quieto alinea su texto con lo de arriba */
/* los otros meses: una fila de una línea en columnas fijas · mes · horas · archivo · acción · estado (a la derecha) */
.mes.compacto { display: grid; grid-template-columns: 120px 196px minmax(0, 1fr) auto 172px; align-items: center; gap: 4px 14px; min-height: 60px; padding: 10px 20px; }
.mes.compacto > .mes-cab { display: contents; }
.mes.compacto .mes-nombre { grid-column: 1; grid-row: 1; }
.mes.compacto .mes-horas { grid-column: 2; grid-row: 1; }
.mes.compacto .mes-archivos { grid-column: 3; grid-row: 1; flex-wrap: nowrap; overflow: hidden; }
.mes.compacto :is(.adjuntar, .adjuntar-hueco) { grid-column: 4; grid-row: 1; justify-self: end; }
.mes.compacto .mes-estado { grid-column: 5; grid-row: 1; justify-self: end; }
.mes.compacto :is(.globo, .mes-error) { grid-column: 1 / -1; }
.mes.compacto .mes-reemplazos { grid-column: 2 / 4; margin-top: -4px; font-size: var(--t-s); line-height: var(--lh-s); color: var(--tinta-3); }
/* meses por llegar: una línea gris, sin tarjeta; el estado en la misma columna que los demás */
.mes.compacto.est-futuro { min-height: 44px; padding-block: 6px; background: transparent; border-color: transparent; box-shadow: none; }
.mes.compacto.est-futuro .mes-nombre h2 { color: var(--tinta-3); font-weight: 500; }
.mes.compacto.est-futuro .mes-estado { background: transparent; color: var(--tinta-3); font-weight: 500; padding: 0; }

/* ═════════════ 8 · ventana estrecha (1100×720) ═════════════ */
@media (max-width: 1240px) {
  .vista-ficha .fa-cuerpo { gap: 20px; }
  .ficha-fecha { width: 228px; }
  .tg-alumnos.grandes { gap: 10px 4px; }
  .tg-alumnos.grandes .tg-alumno { width: 64px; }
  .ficha-cab { gap: 12px; padding-left: 16px; }
  .fa-perfil { width: 272px; }
  .modo-cuerpo { grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 0 24px 20px; }
  .modo-cuerpo.con-notas { grid-template-columns: 200px minmax(0, 1fr) 240px; }
  .modo-cab { padding: 16px 24px 12px; }
  .paso-centro { padding: 20px 22px; }
  .pr-agregar { margin-left: 0; }
  .pr-nota { padding-left: 0; }
  .ca-cab { grid-template-columns: 16px 132px 176px minmax(0, 1fr); column-gap: 10px; }
  /* «Mis grupos» deja de robar ancho: pasa a una fila de píldoras bajo la cabecera del grupo */
  .vista-grupo { flex-direction: column; gap: 10px; }
  .grupo-principal { display: contents; }
  .grupo-cab { order: 0; }
  .otros-grupos { order: 1; width: auto; padding: 0; flex-direction: row; align-items: center; }
  .registros { order: 2; }
  .og-titulo, .og-marcador { display: none; }
  .og-lista { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .og-lista::-webkit-scrollbar { display: none; }
  .og-grupo { flex: none; min-height: 36px; padding: 6px 12px; border: 1px solid var(--linea-2); border-radius: var(--r-pildora); background: var(--sup); gap: 8px; }
  .og-grupo.actual { border-color: var(--acento); background: var(--acento-suave); }
  .og-grupo.actual .og-texto b { color: var(--acento-texto); }
  .og-texto { display: flex; align-items: baseline; gap: 6px; }
  .og-texto span { display: none; }
  .og-aldia { display: none; }
}
@media (max-height: 760px) {
  .tiles { grid-auto-rows: minmax(120px, 1fr); }
  .tile { gap: 8px; padding: 12px 10px; }
}

/* ═════════════ 9 · iPhone (≤ 760 px): una columna; zonas táctiles de 44 px ═════════════ */
@media (max-width: 760px) {
  .vista-clases:not(.vista-clases-todos), .vista-alumnos:not(.vista-alumnos-todos), .vista-factura { align-items: stretch; }
  .rejilla-grupos, .rejilla-grupos[data-n] { grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; padding: 0 0 96px; }
  .tarjeta-grupo { padding: 16px 16px 14px; gap: 12px; }
  .tg-alumnos { gap: 10px 6px; }
  .pendientes { position: fixed; right: calc(var(--margen, 16px) + var(--seg-der, 0px)); bottom: calc(var(--tabbar, 64px) + var(--seg-abajo, 0px) + 14px); }
  .pend-boton { width: 52px; height: 52px; }
  .pend-cuenta { font-size: 19px; }
  .pend-lista { width: calc(100vw - 32px); max-width: none; }
  .pend-lista ul { max-height: 55dvh; }

  .vista-grupo { flex-direction: column; gap: 12px; }
  .otros-grupos { order: -1; }
  .og-lista { margin: 0 -16px; padding: 2px 16px; }
  .og-grupo { min-height: 44px; }
  .grupo-cab, .grupo-cab:not(:has(.gc-notas)) { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .registros { margin: 0; padding: 0 0 24px; }
  .ficha-cab { flex-wrap: wrap; gap: 8px 10px; padding: 12px 10px 12px 14px; }
  .ficha-fecha { flex: 1 1 auto; width: auto; min-width: 0; }
  .ficha-cab .caras { order: 3; flex: 1 1 100%; }
  .ficha:not(.plegada) .caras { display: none; }
  .ficha-cab .boton { min-height: 44px; }
  .ficha.plegada .boton.discreto { opacity: 1; }
  .ficha .plegar { width: 44px; height: 44px; }
  .ficha-cuerpo { padding: 0 14px 14px; }
  .momentos, .ca-momentos { grid-template-columns: minmax(0, 1fr); }
  .momento { min-height: 0; }

  .modo { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modo-cab { padding: calc(10px + var(--seg-arriba, 0px)) 16px 8px; gap: 10px; }
  .modo-titulo h1 { font-size: 26px; line-height: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cerrar-modo { width: 44px; height: 44px; }
  .modo-cuerpo, .modo-cuerpo.con-notas { flex: none; display: flex; flex-direction: column; gap: 12px; padding: 0 16px calc(20px + var(--seg-abajo, 0px)); }
  .pasos { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 4px; margin: 0 -16px; padding: 2px 16px 4px; }
  .pasos::-webkit-scrollbar { display: none; }
  .bloque-registro { display: contents; }
  .paso { flex: none; min-height: 44px; }
  .paso[data-ir="terminar"] { margin-top: 0; }
  .paso-centro { padding: 16px; min-height: 60vh; }
  .tiles, .tiles[data-n] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); overflow: visible; }
  .tile-nombre { font-size: var(--t-xl); line-height: var(--lh-xl); }
  .tile-mas { width: 44px; height: 44px; top: 2px; right: 2px; opacity: .8; }
  .texto-paso { min-height: 40vh; font-size: 17px; }
  .paso-pie .boton { min-height: 44px; }
  body.con-modo .avisos { bottom: 24px; }

  .columnas-alumnos, .vista-alumnos .columnas-alumnos[data-n], .vista-alumnos-todos .columnas-alumnos { grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0 0 24px; }
  .vista-alumnos.vista-alumnos > :is(.titulo-fila, .columnas-alumnos) { max-width: none; }
  .vista-alumnos.amplio .alumno-fila { min-height: 72px; padding: 10px 12px; }
  .vista-ficha { overflow-y: auto; }
  .fa-cuerpo { flex: none; flex-direction: column; gap: 12px; }
  .fa-perfil { width: auto; max-height: none; align-self: stretch; overflow: visible; }
  .fa-clases { flex: none; }
  .clases-alumno { flex: none; overflow: visible; }
  .ca-cab { grid-template-columns: 16px minmax(0, 1fr) auto; row-gap: 4px; }
  .ca-cab > .ca-estado { grid-column: 3; grid-row: 1; }
  .ca-cab > .ca-nota { grid-column: 2 / -1; white-space: normal; }
  .ca-cuerpo { padding: 0 14px 14px; }

  .factura-cuerpo { margin: 0; padding: 0 0 24px; }
  .mes.compacto { grid-template-columns: minmax(0, 1fr) auto; }
  .mes.compacto .mes-nombre { grid-column: 1; grid-row: 1; }
  .mes.compacto .mes-estado { grid-column: 2; grid-row: 1; }
  .mes.compacto .mes-horas { grid-column: 1; grid-row: 2; }
  .mes.compacto .mes-archivos { grid-column: 1 / -1; grid-row: 3; }
  .mes.compacto :is(.adjuntar, .adjuntar-hueco) { grid-column: 2; grid-row: 2; }
  .mes .adjuntar { min-height: 44px; }
}

/* ═════ 15 oct B · zona A · rojos de alerta más fuertes (las variables --alerta-* están en horario.css; solo tokens: vale en
   las dos apariencias) ═════
   Casillas rojas: tinte del 18 % y borde del rojo entero. Tarjetas y fichas vencidas de Mis clases (también el héroe):
   tinte del 14 % y borde rojo; dentro, el gris secundario pasa a --tinta-2 (sobre 4,5:1). El ausente no cambia. */
.cf-lista[data-tono="vencida"] .cf-casilla { --cf-fondo: var(--alerta-casilla); border-color: var(--alerta-borde); }
.tarjeta-grupo[data-falta="vencida"], .ficha[data-falta="vencida"]:not(.validada) { --tinta-3: var(--tinta-2); }
.tarjeta-grupo[data-falta="vencida"] { border-color: var(--alerta-borde); background: var(--alerta-tinte); }
.ficha[data-falta="vencida"]:not(.validada) { border-color: var(--alerta-borde); background: var(--alerta-tinte); }