/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   Selah · movil.css (13 oct · DISENO.md §4) · iPhone (≤ 760 px) de todas las áreas. Se carga la última.
   Composición en docs/diseno-movil.md. Las hojas de área ya traen su bloque @media (max-width: 760px) al final:
   aquí va lo común (estructura, barra, pestañas, zonas táctiles, flotantes) y lo que esos bloques no cubren.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* Pantallas táctiles (también un iPad): sin el menú de iOS al mantener pulsado, sin el gris al tocar. */
@media (hover: none) and (pointer: coarse) {
  body { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
  input, textarea, .copiable, .ca-telefono { -webkit-touch-callout: default; }
}

@media (max-width: 760px) {
  :root {
    --margen: 16px;
    --tabbar: 56px;
    --alto-arriba: 52px;
    --seg-arriba: env(safe-area-inset-top, 0px);
    --seg-abajo: env(safe-area-inset-bottom, 0px);
    --seg-izq: env(safe-area-inset-left, 0px);
    --seg-der: env(safe-area-inset-right, 0px);
    --t-titulo: 28px; --lh-titulo: 32px;
    --marco-lado: 16px; --marco-lado-ancha: 16px; --marco-arriba: 16px;
  }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  html, body { width: 100%; max-width: 100%; overflow: hidden; overscroll-behavior: none; }
  #app { height: 100dvh; max-width: 100vw; overflow: hidden; }
  /* iOS amplía la página al enfocar un campo con letra menor de 16 px */
  input:not([type="checkbox"], [type="radio"], [type="range"]), select, textarea { font-size: 16px !important; }

  /* ═════ 1 · estructura: barra arriba, contenido que se desplaza, pestañas abajo ═════ */
  .portal { height: 100dvh; width: 100%; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
  .contenido { min-width: 0; padding: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
  /* marco único (ronda 3 · DISENO.md § Marco): como en el escritorio, el margen lo pone la .vista hija de .contenido.
     En el teléfono: 16 px a los lados (más la zona segura), 16 arriba; abajo, lo que tapan las pestañas. Todas las
     pestañas, también las anchas (horario, Hoja, Pendientes), con el título en x = 16. */
  .contenido > .vista, .contenido > .vista:is(.ancha, .vista-horario, .adm-hoja, .vista-pendientes) {
    --marco-sangria: 0px;
    width: 100%; max-width: none; margin: 0;
    padding: var(--marco-arriba) calc(var(--marco-lado) + var(--seg-der)) calc(var(--tabbar) + var(--seg-abajo) + 24px) calc(var(--marco-lado) + var(--seg-izq));
  }
  .contenido > .vista:is(.ancha, .vista-horario, .adm-hoja, .vista-pendientes) > :is(.vista-cab, .titulo-fila, .adm-cab, .pd-cab) { margin-inline: 0; }
  /* las vistas crecen con lo suyo: se desplaza .contenido, no cada lista por separado */
  .contenido > .vista { height: auto; min-height: 100%; min-width: 0; gap: 14px; }
  .vista > * { min-width: 0; }
  .titulo-fila { flex-wrap: wrap; row-gap: 2px; column-gap: 10px; }
  .titulo-fila .sub { white-space: normal; }

  /* ── barra de arriba: quién soy a la izquierda, sonido y ajustes a la derecha ── */
  .barra {
    grid-template-columns: minmax(0, 1fr) auto; gap: 8px; min-height: calc(var(--alto-arriba) + var(--seg-arriba));
    padding: calc(4px + var(--seg-arriba)) calc(8px + var(--seg-der)) 4px calc(10px + var(--seg-izq));
    background: var(--fondo); -webkit-backdrop-filter: none; backdrop-filter: none; /* sin desenfoque: las pestañas fijas se anclan a la ventana */
  }
  .portal.barra-oculta:has(.vista-horario) .barra { margin-top: 0; opacity: 1; pointer-events: auto; }
  .tarjeta-yo { height: 44px; padding: 4px 12px 4px 4px; gap: 10px; }
  .tarjeta-yo .avatar { width: 32px !important; height: 32px !important; font-size: 12.5px !important; }
  .yo-nombre { font: 600 var(--t-xl)/22px var(--f-ui); }
  .yo-sub { display: none; }
  .barra-logo { display: none; }
  .barra-derecha { gap: 0; }
  .icono-btn { width: 44px; height: 44px; }
  .icono-btn .ic { width: 20px; height: 20px; }

  /* ── pestañas: barra inferior fija, estilo iOS (ícono y texto corto; la activa en azul) ── */
  .pestanas {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0;
    padding: 0 calc(4px + var(--seg-der)) var(--seg-abajo) calc(4px + var(--seg-izq)); border-radius: 0;
    background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
    border-top: 1px solid var(--linea);
  }
  .pestanas-marcador { display: none; }
  .pestana {
    flex-direction: column; justify-content: center; gap: 3px; min-width: 0; height: var(--tabbar); padding: 6px 2px 4px;
    border-radius: 0; font: 600 11px/13px var(--f-ui); letter-spacing: .01em; color: var(--tinta-3);
  }
  .pestana-disco .ic { width: 24px; height: 24px; }
  .pestana-texto { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .pestana.activa { color: var(--acento-texto); font-weight: 600; }
  .pestana.activa .pestana-disco { color: var(--acento); }
  .pestana:active .pestana-disco { transform: scale(.92); }

  /* ═════ 2 · zonas táctiles: 44 px en lo que se toca ═════ */
  .boton, .boton.chico, .boton.grande { min-height: 44px; height: auto; }
  .boton { padding: 0 16px; font-size: var(--t-l); }
  .boton.chico { padding: 0 12px; font-size: var(--t-m); border-radius: var(--r-m); }
  .boton.enorme { min-height: 50px; }
  .boton-icono { width: 44px; height: 44px; }
  .volver, .enlace-discreto { min-height: 44px; }
  .segmentado button, .conmutador button { height: 40px; padding: 0 12px; font-size: var(--t-m); }
  .menu-item { min-height: 44px; font-size: var(--t-l); }
  .interruptor { min-height: 44px; }
  .campo, .adm-buscador, .sopa-busqueda { height: 44px; }
  :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), select) { height: 44px; }

  /* ═════ 3 · flotantes: dentro de la pantalla y encima de las pestañas ═════ */
  .menu { min-width: min(260px, calc(100vw - 24px)); max-width: calc(100vw - 24px); }
  .popover { min-width: 0; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px - var(--seg-arriba) - var(--seg-abajo)); overflow: auto; }
  .ajustes { width: min(320px, calc(100vw - 40px)); }
  .velo { padding: calc(12px + var(--seg-arriba)) 12px calc(12px + var(--seg-abajo)); }
  .velo > * { min-width: 0; max-width: 100%; }
  .panel, .panel-datos { width: 100%; max-height: 100%; }
  .panel-cuerpo { grid-template-columns: minmax(0, 1fr); }
  /* Datos de Airtable: el cuerpo del panel se desplaza; la tabla ancha, dentro de su marco */
  .panel-datos .panel-cuerpo { display: flex; flex-direction: column; }
  .panel-datos .panel-cuerpo > * { flex: none; min-width: 0; }
  .panel-datos .tabla-marco { overflow-x: auto; }
  .datos-dia { flex: 1 1 140px; min-width: 0; }
  .datos-fuentes { margin-left: 0; }
  .panel-cab { padding: 12px 8px 12px 16px; }
  .panel-cuerpo { padding: 14px 16px 18px; }
  .dialogo, .dialogo-grande { width: 100%; padding: 20px 18px 18px; }
  .dialogo-texto { padding-left: 0; }
  .dialogo-botones, .pop-botones { flex-direction: column-reverse; align-items: stretch; }
  .avisos { left: 12px; right: 12px; transform: none; bottom: calc(var(--tabbar) + var(--seg-abajo) + 12px); }
  .aviso { max-width: 100%; white-space: normal; }
  .pop { max-width: calc(100vw - 24px); }

  /* conexión y carga */
  body:is([data-pantalla="carga"], [data-pantalla="conexion"]) #app { padding: calc(16px + var(--seg-arriba)) 16px calc(16px + var(--seg-abajo)); }
  form.conexion { padding: 28px 20px 22px; }

  /* ═════ 4 · Perfil: una columna; los portales como filas ═════ */
  .perfil { height: 100dvh; gap: 16px; padding: calc(20px + var(--seg-arriba)) calc(var(--margen) + var(--seg-der)) calc(20px + var(--seg-abajo)) calc(var(--margen) + var(--seg-izq)); }
  .perfil-interruptor { width: 100%; }
  .pi-boton { height: 40px; }
  .perfil-filas { padding: 0 14px; }
  .estante { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 0; }
  .estante-tarjetas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .tarjeta-perfil { min-width: 0; min-height: 56px; }
  .perfil-pie > .boton { margin-left: 0; }
  .perfil-pie-der { flex-direction: column; align-items: stretch; }
  .tarjeta-supervision { width: 100%; min-width: 0; margin-left: 0; }
  .portales, .portales[data-n="3"] { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .portal-tarjeta {
    min-height: 0; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto; align-items: center; column-gap: 14px;
    padding: 14px 16px 14px 14px; border-radius: var(--r-l);
  }
  .pt-ic { margin: 0; }
  .pt-texto b { font-size: var(--t-xl); line-height: var(--lh-xl); }
  .pt-entrar { margin: 0; align-self: center; font-size: 0; }
  .pt-entrar .ic { width: 18px; height: 18px; color: var(--tinta-4); }
  .pt-candado { top: 50%; right: 40px; transform: translateY(-50%); }

  /* ═════ 5 · Profesor (completa profesor.css § 10) ═════ */
  /* ficha de una clase: fecha y plegar en la primera línea; el botón de la clase debajo, a lo ancho si es el principal */
  .ficha-cab { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 8px; padding: 10px 6px 12px 14px; }
  .ficha-cab > .ficha-fecha { grid-column: 1; grid-row: 1; }
  .ficha-cab > .plegar { grid-column: 2; grid-row: 1; }
  .ficha-cab > .espacio { display: none; }
  .ficha-cab > :is(.etiquetas, .caras, .caras-sin-tomar, .boton) { grid-column: 1 / -1; margin-right: 8px; }
  .ficha-cab > .boton.primario { justify-self: stretch; }
  .ficha-cab > .boton.suave { justify-self: start; margin-left: -12px; }
  .ficha-fecha h3 { white-space: normal; }
  /* modo clase: la marca de «dos veces» en una línea, arriba de la ficha; el pie en dos líneas (texto, botón) */
  .tile { padding-top: 22px; }
  .tile-duplicado { top: 6px; left: 50%; right: auto; transform: translateX(-50%); max-width: calc(100% - 12px); height: 20px; padding: 0 7px; font-size: var(--t-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .paso-pie { flex-direction: column; align-items: stretch; gap: 8px; }
  .paso-pie > .detalle { text-align: center; }
  .paso-pie .boton { width: 100%; }
  .mes .adjuntar { width: 100%; }

  /* ═════ 6 · Horario (todos los portales): un día; la rejilla se desliza dentro de su caja, la página no ═════ */
  .contenido:has(> .vista-horario) { overflow: hidden; }
  .contenido > .vista.vista-horario { height: 100%; min-height: 0; padding-bottom: 0; }
  .vista-horario > .rejilla-dias {
    min-height: 0; margin: 12px calc(-1 * var(--margen)) 0 0; padding: 0 var(--margen) calc(var(--tabbar) + var(--seg-abajo) + 20px) 0;
    overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; scroll-padding: 0 0 0 72px; /* un poco más que la columna de la hora: el imán nunca la tapa */
  }
  .vista-horario > .vacio-grande { margin-bottom: calc(var(--tabbar) + var(--seg-abajo) + 16px); }
  .rejilla .rg-inst { scroll-snap-align: start; }
  /* al bajar por la rejilla se va la barra de arriba; las pestañas de abajo se quedan */
  .portal.barra-oculta:has(.vista-horario) .barra { margin-top: calc(-1 * var(--alto-barra, 60px)); }
  .portal.barra-oculta:has(.vista-horario) .pestanas { pointer-events: auto; }
  .portal.barra-oculta:has(.vista-horario) .contenido { padding-top: 0; }
  .portal.barra-oculta .contenido > .vista.vista-horario { padding-top: calc(10px + var(--seg-arriba)); }
  /* columnas a la medida del nombre: cada ficha en una sola línea (sin partir el nombre); se ve que hay más a la derecha */
  .rejilla.rejilla-general { width: max-content; min-width: 100%; }
  .rejilla-general .rj-celda:not(.plegada) { container-type: normal; } /* sin contención: la columna mide lo que su ficha más larga */
  .rejilla-general .bl-nom { white-space: nowrap; }
  /* vista del profesor: la tarjeta del grupo a lo ancho; el nombre en una línea */
  .rejilla-profesor .bl-alumno { gap: 8px; padding-right: 10px; font-size: var(--t-m); }
  .rejilla-profesor .bl-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rejilla-general .rg-inst { white-space: nowrap; }
  .rejilla-general .bl-cab > :is(.bl-nombre, .bl-prof) { white-space: nowrap; }
  .rejilla .bl-alumno { min-height: 36px; }
  .horario-controles .boton-icono, .vista-horario > .sopa-pestana { width: 40px; height: 40px; }
  .horario-controles .selector-fecha .boton-icono.redondo { width: 40px; height: 40px; }
  .horario-controles .sf-fecha { height: 40px; }
  /* «Sin registrar» abierta: hoja sobre la rejilla, encima de las pestañas */
  .vista-horario > .sopa { margin-bottom: calc(var(--tabbar) + var(--seg-abajo) + 12px); min-height: 0; overflow: auto; }
  .vista-horario > .bandeja-cambios { position: fixed; left: 8px; right: 8px; bottom: calc(var(--tabbar) + var(--seg-abajo) + 8px); z-index: 30; margin: 0; }
  .horario-datos-caja { left: 12px; right: 12px; width: auto; }

  /* Recepción › Asistencias · tocar un ausente: hoja desde abajo, encima de las pestañas (no las tapa a medias) */
  .popover.popover-contacto { top: auto !important; bottom: calc(var(--tabbar) + var(--seg-abajo) + 8px); max-height: calc(100dvh - var(--tabbar) - var(--seg-abajo) - var(--seg-arriba) - 24px); }

  /* ═════ 7 · Finanzas (completa finanzas.css) ═════ */
  .fi-cab h1 { order: 0; }
  .fi-cab .fi-estado { order: 2; flex: 1 1 100%; margin-top: 0; }
  .fi-cab .fi-estado.chip { flex: none; margin-top: 0; }
  .fi-cab .fi-mes { order: 3; }
  .fi-cab .fi-filtro-emitidas { order: 4; }
  .fi-pend-fila :is(.fi-pend-textos, .fi-tarjeta-textos) b, .fi-tarjeta-fila .fi-tarjeta-textos b { white-space: normal; }

  /* ═════ 8 · Dirección (completa direccion.css) ═════ */
  .gen-paso[data-paso="2"] { grid-template-columns: minmax(0, 1fr); }
  .gen-paso[data-paso="2"] > .gen-atajos { justify-self: start; }

  /* ═════ 9 · Administración: la ficha a pantalla completa respeta la muesca y el indicador de inicio ═════ */
  .ficha-adm { padding-top: var(--seg-arriba); }
  .ficha-adm .fc-pie { padding-bottom: calc(10px + var(--seg-abajo)); }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   Ronda 2 (13 oct, tarde) · cada pantalla vista como una app de iPhone: listas en vez de matrices, hojas desde
   abajo con velo, rejillas que dicen que se deslizan, vista de pájaro donde hay muchos elementos.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  :root { --velo-hoja: rgba(16, 24, 40, .32); --sombra-hoja: 0 0 0 100vmax var(--velo-hoja), 0 -8px 32px rgba(16, 24, 40, .12); }
  /* título de pantalla y su línea gris sobre la misma base */
  .vista .titulo-fila { align-items: baseline; }
  .vista .titulo-fila > :not(h1, .sub) { align-self: center; }

  /* ═════ 10 · hojas desde abajo: popovers, confirmaciones y menús llegan al pulgar, con velo detrás ═════
     El velo es una sombra enorme (no recibe toques: un toque fuera cierra, como antes). La hoja tapa las pestañas. */
  :is(.popover, .pop, .menu) {
    left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important;
    width: auto !important; min-width: 0 !important; max-width: none !important;
    max-height: calc(100dvh - 48px - var(--seg-arriba)); overflow-y: auto; overscroll-behavior: contain;
    padding: 24px 16px calc(16px + var(--seg-abajo)) !important;
    border: 0; border-radius: var(--r-xl) var(--r-xl) 0 0;
    background: var(--sup); -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: var(--sombra-hoja);
    transform: translateY(16px); transform-origin: bottom center;
    font-size: var(--t-l); line-height: var(--lh-l);
  }
  :is(.popover, .menu).ver, .pop { transform: none; }
  /* el toque en el velo cierra la hoja y no llega a lo de detrás (los cierres ya escuchan el toque fuera) */
  body:has(:is(.popover.ver, .menu.ver, .pop:not(.saliendo)))::after { content: ''; position: fixed; inset: 0; z-index: 84; }
  .pop { animation: hoja-sube var(--dur) var(--ease); }
  .pop.saliendo { opacity: 0; transform: translateY(24px); }
  /* el asa de la hoja (en .pop reemplaza la flecha que apuntaba al botón) */
  /* ronda 3: con la especificidad de «.popover:not([data-lado])::before» de componentes.css, que la escondía */
  :is(.popover.ver, .popover:not(.ver), .menu)::before, .pop::before, .pop[data-lado]::before {
    display: block; content: ''; position: absolute; top: 8px; left: 50% !important; right: auto; bottom: auto;
    width: 36px; height: 5px; border: 0; border-radius: 3px; background: var(--linea-2); transform: translateX(-50%);
  }
  .pop-titulo { font-size: var(--t-xl); line-height: var(--lh-xl); }
  .pop-texto { font-size: var(--t-l); line-height: var(--lh-l); }
  .pop-botones { margin-top: 18px; gap: 8px; }
  .pop-botones .boton { min-height: 48px; justify-content: center; }
  .menu .menu-item { min-height: 48px; padding: 10px 12px; border-radius: var(--r-m); }
  .menu .menu-cab { padding: 2px 12px 10px; }
  /* Recepción › contacto: hoja completa; «Guardar» sin escribir se lee como botón apagado */
  .popover.popover-contacto { left: 0 !important; right: 0 !important; bottom: 0 !important; }
  .ca-acciones .boton.primario:disabled { background: var(--sup-3); color: var(--tinta-3); border-color: transparent; }

  /* ═════ 11 · Profesor › Mis clases: los pendientes en una cápsula sobre las pestañas; la lista, hoja con velo ═════ */
  .pendientes { left: 0; right: 0 !important; width: max-content; margin-inline: auto; bottom: calc(var(--tabbar) + var(--seg-abajo) + 12px) !important; z-index: 45; }
  .pendientes .pend-boton, .pendientes.solo-aviso .pend-boton {
    display: inline-flex; align-items: center; gap: 8px; width: auto; height: 40px; padding: 0 16px 0 14px; border-radius: var(--r-pildora);
    background: var(--sup); color: var(--tinta); border: 1px solid var(--linea); box-shadow: var(--s-3);
  }
  .pendientes .pend-boton::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--peligro); }
  .pendientes.solo-aviso .pend-boton::before { background: var(--aviso); }
  .pendientes .pend-cuenta { font: 600 var(--t-l)/1 var(--f-ui); letter-spacing: 0; }
  .pendientes .pend-rotulo { display: none; } /* la cápsula ya dice «3 pendientes» */
  .pendientes .pend-boton[aria-label$="pendientes"] .pend-cuenta::after { content: ' pendientes'; }
  .pendientes .pend-boton[aria-label$="pendiente"] .pend-cuenta::after { content: ' pendiente'; }
  /* abierta: la cápsula se vuelve el velo (un toque fuera de la hoja la cierra, sin código nuevo) */
  .pendientes.abierta .pend-boton {
    position: fixed; inset: 0; z-index: 1; width: auto; height: auto; padding: 0; border: 0; border-radius: 0;
    background: var(--velo-hoja); box-shadow: none; color: transparent;
  }
  .pendientes.abierta .pend-boton::before, .pendientes.abierta .pend-cuenta { visibility: hidden; }
  .pendientes .pend-lista {
    position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-width: none; z-index: 2;
    border: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--sup); -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: 18px 8px calc(10px + var(--seg-abajo)); box-shadow: none;
  }
  .pendientes.abierta .pend-lista { box-shadow: 0 -8px 32px rgba(16, 24, 40, .12); }
  .pendientes .pend-lista::before { content: ''; position: absolute; top: 8px; left: 50%; width: 36px; height: 5px; border-radius: 3px; background: var(--linea-2); transform: translateX(-50%); }
  .pend-titulo { padding: 6px 12px 8px; font-size: var(--t-xl); line-height: var(--lh-xl); }
  .pendientes .pend-lista ul { max-height: 60dvh; padding: 0; }
  /* una fila por pendiente (ronda 3): la clase y la fecha arriba; debajo, lo que falta con su punto; una sola flecha a la
     derecha. 64 px; sin fondo de «seleccionada» (el toque deja el hover pegado en iOS). */
  .pendientes .pend-lista ul { display: grid; gap: 0; padding: 0 4px; }
  .pend-item {
    display: grid; grid-template-columns: minmax(0, 1fr) 16px; align-items: center; column-gap: 12px;
    width: 100%; min-height: 64px; padding: 10px 12px; border-radius: var(--r-m); text-align: left;
  }
  .pendientes li + li .pend-item { box-shadow: inset 0 1px 0 var(--linea); border-radius: 0; }
  .pend-item:hover:not(:focus-visible) { background: transparent; }
  .pend-item:active { background: var(--sup-2); }
  .pend-quien { display: grid; gap: 3px; min-width: 0; }
  .pend-linea { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
  .pend-grupo { font: 600 var(--t-l)/var(--lh-l) var(--f-ui); color: var(--tinta); }
  .pend-fecha { font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta-3); }
  .pend-texto { gap: 8px; font: 500 var(--t-m)/var(--lh-m) var(--f-ui); }
  .pend-texto::before { width: 8px; height: 8px; }
  .pend-item .pend-ir { grid-column: 2; width: 16px; height: 16px; color: var(--tinta-4); }
  .rejilla-grupos, .rejilla-grupos[data-n] { padding-bottom: 72px; }
  /* lo que falta en la tarjeta: una línea por pendiente, sin partir */
  .tg-falta { min-width: 0; }
  .tg-falta-texto { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* ═════ 12 · Profesor › grupo: volver arriba del todo; sin la fila de píldoras (se llega desde Mis clases) ═════ */
  .vista-grupo > .otros-grupos { display: none; }
  /* modo clase: cerrar sin disco; «Siguiente paso» con la flecha a la derecha del texto */
  .cerrar-modo { border-color: transparent; background: transparent; box-shadow: none; }
  .paso-pie .boton.primario { flex-direction: row-reverse; }
  /* los pasos como progreso: el actual con su nombre, los demás solo su número (verde si ya tiene algo) */
  .pasos { overflow: visible; gap: 4px; justify-content: space-between; }
  .pasos .paso { min-width: 40px; justify-content: center; padding: 0 4px; }
  .pasos .paso.actual { padding: 0 14px 0 6px; }
  .pasos .paso:not(.actual) .paso-nombre, .pasos .paso-estado { display: none; }
  .pasos .paso.hecho:not(.actual) .paso-n { background: var(--ok-fondo); color: var(--ok-texto); }
  .pasos .espacio { flex: 1 1 0; }
  /* la marca «dos veces» arriba de la ficha, sin pisar la foto */
  .tile:has(.tile-duplicado) { padding-top: 34px; }

  /* Factura: las horas en una línea, igual en todos los meses */
  .mes .mes-horas { white-space: nowrap; }

  /* ═════ 13 · Profesor › ficha de un alumno: volver pegado arriba; las cifras como franja; el estado a la derecha ═════ */
  .vista-ficha .fa-perfil { padding-top: 4px; gap: 10px; }
  .vista-ficha .fa-perfil > .fa-foto { margin-top: 12px !important; } /* ronda 3: la foto no toca el borde de la tarjeta */
  .vista-ficha .fa-perfil > .volver { margin: 0 0 0 -10px; align-self: flex-start; }
  .vista-ficha .fa-perfil > .fa-foto { margin-top: 0; }
  .vista-ficha .contadores {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; padding: 4px;
    background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--s-1);
  }
  .vista-ficha .contador {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; height: auto; min-height: 64px;
    padding: 8px 2px; border: 0; border-radius: var(--r-m); background: transparent; box-shadow: none; text-align: center;
  }
  .vista-ficha .contador b { font: 700 22px/26px var(--f-ui); color: var(--tinta); font-variant-numeric: tabular-nums; }
  .vista-ficha .contador span { font: 500 var(--t-xs)/14px var(--f-ui); color: var(--tinta-3); text-wrap: balance; }
  .vista-ficha .contador.activo { background: var(--acento-suave); }
  .vista-ficha .contador.activo :is(b, span) { color: var(--acento-texto); }
  /* ronda 3: la flecha de desplegar a la derecha, como en el resto de la app */
  .vista-ficha .ca-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; column-gap: 10px; row-gap: 2px; }
  .vista-ficha .ca-cab > .flecha { grid-column: 3; grid-row: 1; }
  .vista-ficha .ca-cab > .ca-fecha { grid-column: 1; grid-row: 1; min-width: 0; }
  .vista-ficha .ca-cab > .ca-estado { grid-column: 2; grid-row: 1; justify-self: end; }
  .vista-ficha .ca-cab > .ca-grupo { grid-column: 1 / -1; grid-row: 2; font-size: var(--t-s); line-height: var(--lh-s); color: var(--tinta-3); }
  .vista-ficha .ca-cab > .ca-nota { grid-column: 1 / -1; grid-row: 3; padding-left: 0; }

  /* ═════ 14 · Supervisión › Clases: vista de pájaro · una fila por grupo dentro de una lista agrupada ═════ */
  .vista-clases-todos .rejilla-grupos, .vista-clases-todos .rejilla-grupos[data-n] {
    gap: 0; padding: 0; background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--s-1); overflow: hidden;
  }
  .vista-clases-todos .tarjeta-grupo {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; column-gap: 10px; row-gap: 4px;
    min-height: 60px; padding: 10px 12px 10px 14px; border: 0; border-radius: 0; box-shadow: none; background: transparent;
  }
  .vista-clases-todos .tarjeta-grupo + .tarjeta-grupo { box-shadow: inset 0 1px 0 var(--linea); }
  .vista-clases-todos .tg-cab { display: contents; }
  .vista-clases-todos .tg-titulo { grid-column: 1; grid-row: 1; min-width: 0; }
  .vista-clases-todos .tg-instrumento { font: 600 var(--t-l)/var(--lh-l) var(--f-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vista-clases-todos .tg-dia { font: 400 var(--t-s)/var(--lh-s) var(--f-ui); }
  .vista-clases-todos .tg-pie { grid-column: 3; grid-row: 1; width: 16px; height: 16px; color: var(--tinta-4); }
  .vista-clases-todos .tg-alumnos { grid-column: 2; grid-row: 1; display: flex; gap: 0; flex-wrap: nowrap; padding-left: 6px; }
  .vista-clases-todos .tg-alumno { width: auto; min-width: 0; margin-left: -6px; }
  .vista-clases-todos .tg-alumno .avatar { width: 26px !important; height: 26px !important; font-size: 10px !important; box-shadow: 0 0 0 2px var(--sup); }
  .vista-clases-todos .tg-alumno > span:not(.avatar) { display: none; }
  .vista-clases-todos .tg-alumno:nth-child(n+5) { display: none; }
  .vista-clases-todos .tg-estado { grid-column: 1 / -1; grid-row: 2; padding: 0; border: 0; margin: 0; }
  .vista-clases-todos .tarjeta-grupo:not(.con-pendientes) .tg-estado, .vista-clases-todos :is(.tg-aldia, .tg-proxima) { display: none; }
  .vista-clases-todos .tg-faltas { gap: 2px; }
  .vista-clases-todos .tg-falta { font-size: var(--t-s); line-height: var(--lh-s); }

  /* ═════ 15 · Supervisión › Alumnos: filas de 48 px (foto de 32, nombre y edad en una línea) ═════ */
  .vista-alumnos-todos .alumno-fila { min-height: 48px; padding: 6px 12px; gap: 12px; }
  .vista-alumnos-todos .alumno-fila .avatar { width: 32px !important; height: 32px !important; font-size: 12px !important; }
  .vista-alumnos-todos .af-texto { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .vista-alumnos-todos .af-texto b { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--t-l); }
  .vista-alumnos-todos .af-texto span { flex: none; font-size: var(--t-s); color: var(--tinta-3); }

  /* ═════ 16 · Perfil: filas simples con separador dentro de la tarjeta (sin tarjeta gris dentro de la blanca) ═════ */
  .estante-tarjetas { gap: 0; }
  .tarjeta-perfil { min-height: 56px; padding: 8px 4px; border: 0; border-radius: 0; background: transparent; }
  .tarjeta-perfil + .tarjeta-perfil { box-shadow: inset 0 1px 0 var(--linea); }
  .tarjeta-perfil:active { background: var(--sup-2); }

  /* ═════ 17 · Horario (todos): mandos en dos líneas; la rejilla dice que se desliza ═════
     Línea 1: Horario | Asistencia y la vista (solo íconos) · línea 2: días o semana a lo ancho. */
  .horario-controles, .horario-controles.una-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .horario-controles [data-conmutador="modo"] { order: 1; }
  .horario-controles [data-conmutador="modo"] button .ic { display: none; }
  .horario-controles [data-conmutador="vista"] { order: 2; margin-left: auto; }
  .horario-controles [data-conmutador="vista"] button { width: 44px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .horario-controles [data-conmutador="vista"] button .ic { width: 18px; height: 18px; }
  .horario-controles :is(.selector-dia, .selector-fecha) { order: 3; flex: 1 1 100%; min-width: 0; }
  .horario-controles .selector-dia .conmutador { display: flex; width: 100%; }
  .horario-controles .selector-dia .conmutador button { flex: 1 1 auto; padding: 0 8px; }
  .horario-controles .selector-fecha { justify-content: space-between; }
  .horario-controles .selector-fecha .boton-icono.redondo { width: 40px; height: 40px; border-color: transparent; background: transparent; box-shadow: none; }
  /* Administración: capas con su nombre, en una fila que se desliza; todos los botones de la misma altura */
  .horario-controles .horario-capas {
    order: 4; flex: 1 1 100%; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-right: calc(-1 * var(--margen)); padding-right: var(--margen);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .horario-controles .horario-capas::-webkit-scrollbar { display: none; }
  .horario-controles .horario-capas .capas { flex: none; gap: 6px; }
  .horario-controles .horario-capas :is(.capa, .boton, .boton.chico) { flex: none; height: 36px !important; min-height: 36px; width: auto !important; padding: 0 12px !important; gap: 6px; font-size: var(--t-m); }
  .horario-controles .horario-capas :is(.capa, .boton) > span:not(.ic) { display: inline !important; }
  .horario-controles .horario-capas :is(.capa, .boton) .ic { display: inline-grid !important; }

  /* la rejilla que no cabe (general, semana de Asistencia): ronda 3 · nada se corta en seco. Cada columna mide como mucho
     lo que deja ver ~56 px de la siguiente; ese borde se funde hasta desaparecer (se ve que sigue, no que se rompió). La hora
     queda fija a la izquierda. horario.js quita .desborda al llegar al final: ahí la última columna se ve entera. */
  .vista-horario > .rejilla-dias { --fundido: 56px; }
  .vista-horario > .rejilla-dias.desborda {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--fundido)), rgba(0, 0, 0, .35) calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - var(--fundido)), rgba(0, 0, 0, .35) calc(100% - 28px), transparent);
  }
  .vista-horario .rejilla-general > :is(.rj-celda, .rg-inst) { max-width: calc(100vw - 2 * var(--margen) - 52px - 6px - 56px); min-width: 0; }
  /* un día (no «Todos» alineado, que reparte sus pistas desde horario.js): cada columna a la medida de su contenido con ese
     tope, en vez de proporcional (las fr ensanchaban la primera columna hasta tapar la siguiente) */
  .vista-horario .rejilla-dias:not(.alineada) .rejilla-general[data-columnas="1"] { grid-template-columns: 52px repeat(1, max-content) !important; }
  .vista-horario .rejilla-dias:not(.alineada) .rejilla-general[data-columnas="2"] { grid-template-columns: 52px repeat(2, max-content) !important; }
  .vista-horario .rejilla-dias:not(.alineada) .rejilla-general[data-columnas="3"] { grid-template-columns: 52px repeat(3, max-content) !important; }
  .vista-horario .rejilla-dias:not(.alineada) .rejilla-general[data-columnas="4"] { grid-template-columns: 52px repeat(4, max-content) !important; }
  .vista-horario .rejilla-dias:not(.alineada) .rejilla-general[data-columnas="5"] { grid-template-columns: 52px repeat(5, max-content) !important; }
  .vista-horario .rejilla-dias:not(.alineada) .rejilla-general[data-columnas="6"] { grid-template-columns: 52px repeat(6, max-content) !important; }
  .vista-horario .rejilla-dias:not(.alineada) .rejilla-general[data-columnas="7"] { grid-template-columns: 52px repeat(7, max-content) !important; }
  .vista-horario .rejilla-dias:not(.alineada) .rejilla-general[data-columnas="8"] { grid-template-columns: 52px repeat(8, max-content) !important; }
  .vista-horario .rejilla-dias:not(.alineada) .rejilla-general[data-columnas="9"] { grid-template-columns: 52px repeat(9, max-content) !important; }
  .vista-horario .rejilla-dias:not(.alineada) .rejilla-general[data-columnas="10"] { grid-template-columns: 52px repeat(10, max-content) !important; }
  .vista-horario .rejilla-dias:not(.alineada) .rejilla-general[data-columnas="11"] { grid-template-columns: 52px repeat(11, max-content) !important; }
  .vista-horario .rejilla-dias:not(.alineada) .rejilla-general[data-columnas="12"] { grid-template-columns: 52px repeat(12, max-content) !important; }
  .vista-horario .rejilla-dias:not(.alineada) .rejilla-general > .rj-celda:not(.plegada) { min-width: 150px; }
  .vista-horario .rejilla-general .bl-alumno { min-width: 0; }
  .vista-horario .rejilla-general .bl-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .vista-horario .rejilla-general .rg-inst { overflow: hidden; text-overflow: ellipsis; }
  /* huecos sin grupo: sin gris de relleno (la vista va a lo ocupado) */
  .rejilla .rj-celda.nohay, .rejilla .rj-celda.fuera-clase.nohay { background: transparent; box-shadow: inset 0 0 0 1px rgba(22, 29, 43, .045); }
  /* vista general: fichas compactas (vista de pájaro), nombre en una línea */
  .rejilla-general .bl-alumno { min-height: 30px; gap: 6px; padding: 2px 8px 2px 3px; font-size: var(--t-m); }
  .rejilla-general .bl-alumno .avatar { width: 24px !important; height: 24px !important; font-size: 9px !important; }
  .rejilla-general .bloque { gap: 3px; padding: 4px 4px 5px; }
  /* vista del profesor: el grupo es una lista (sin cajas dentro de la caja); el título repetido se va */
  .vista-horario:not(.modo-registros) .rejilla-profesor .bloque > .bl-cab:not(:has(> :not(.bl-nombre))) { display: none; } /* 15 oct · en Registros, el grupo se nombra */
  .rejilla-profesor .rj-celda > .bloque { padding: 4px 4px 4px 12px; gap: 0; }
  .rejilla-profesor .bl-alumnos { gap: 0; }
  .vista-horario:not(.modo-asistencia) .rejilla-profesor .bl-alumno { min-height: 48px; border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 6px 8px 6px 0; }
  .vista-horario:not(.modo-asistencia) .rejilla-profesor .bl-alumno + .bl-alumno { box-shadow: inset 0 1px 0 var(--linea); }

  /* ═════ 18 · Administración › Pendientes (y Dirección › Administración): lista por alumno, no matriz ═════
     Cada fila: el nombre (abre su ficha o su editor) y, debajo, lo que le falta en palabras. Cada palabra se toca y hace
     lo mismo que su celda en el escritorio (marcar, abrir la ficha, la rejilla). Lo hecho y lo que no aplica no se muestra.
     Arriba, en tres líneas: título y total · Por alumno | Por pendiente · búsqueda · filtros (se deslizan) y Saldos. */
  .vista-pendientes .pd-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; }
  .vista-pendientes .pd-cab h1, .vista-pendientes .pd-cab .adm-total { align-self: baseline; }
  .vista-pendientes .pd-cab > .adm-cab, .vista-pendientes .pd-filtros { display: contents; }
  /* ronda 3: «Saldos» sube a la línea del título (a la derecha); los filtros ocupan su propia línea, empiezan por «Todos»,
     se deslizan y se funden en el borde (ninguno cortado en seco, nada montado encima). La frase de ayuda no va. */
  .vista-pendientes .pd-cab h1 { order: 1; flex: none; min-width: 0; }
  .vista-pendientes .pd-cab .adm-total { order: 2; flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--t-m); color: var(--tinta-3); white-space: nowrap; }
  .vista-pendientes .pd-cab .adm-cab .espacio { display: none; }
  .vista-pendientes .pd-cab .pd-saldos { order: 3; flex: none; align-self: center; min-height: 36px; margin-left: auto; padding: 0 0 0 4px; }
  .vista-pendientes .pd-cab .adm-vistas { order: 4; flex: 1 1 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .vista-pendientes .pd-cab .adm-vistas button { justify-content: center; }
  .vista-pendientes .pd-cab .adm-buscador { order: 5; flex: 1 1 100%; width: 100%; }
  .vista-pendientes .pd-cab .pd-cats {
    order: 6; flex: 1 1 100%; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px;
    margin-right: calc(-1 * var(--margen)); padding-right: 48px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
  }
  .vista-pendientes .pd-cab .pd-cats::-webkit-scrollbar { display: none; }
  .vista-pendientes .pd-cab :is(.pd-cat, .pd-todos) { order: 0; flex: none; height: 36px; min-height: 36px; padding: 0 12px; white-space: nowrap; }
  .vista-pendientes .pd-cab .pd-nota { display: none; }
  .vista-pendientes .pd-clientes .pdc-cab { min-height: 48px; }

  .vista-pendientes .pd-cuerpo { overflow: visible; padding: 0; }
  .vista-pendientes .pd-hoja { width: 100%; min-width: 0; overflow: hidden; }
  .vista-pendientes .pdh-encabezado { display: none; }
  .vista-pendientes .pd-hoja .pdh-fila {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 0; padding: 8px 14px 10px; border-top: 1px solid var(--linea);
  }
  .vista-pendientes .pd-hoja .pdh-encabezado + .pdh-fila { border-top: 0; }
  .vista-pendientes .pd-hoja .pdh-fila > .pdh-nombre {
    position: static; flex: 1 1 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    min-height: 26px; padding: 0; background: transparent; box-shadow: none;
  }
  .vista-pendientes .pdh-nombre b { font-size: var(--t-l); line-height: var(--lh-l); }
  .vista-pendientes .pd-hoja .pdh-nombre .pd-estado { display: inline-flex; flex: none; }
  .vista-pendientes .pdh-fila > .pdh-c { display: none; }
  .vista-pendientes .pdh-fila > .pdh-c:is([data-estado="falta"], [data-estado="sin-campo"]) {
    display: inline-flex; align-items: center; align-self: auto; height: 32px; padding: 0 12px; border: 0; border-radius: var(--r-pildora);
    background: var(--aviso-fondo); color: var(--aviso-texto); box-shadow: none; font: 600 var(--t-m)/1 var(--f-ui); white-space: nowrap;
  }
  .vista-pendientes .pdh-fila > .pdh-c[data-estado="sin-campo"] { background: var(--neutro-fondo); color: var(--neutro-texto); }
  /* «Disponibilidades por revisar» va en todas las filas: solo se escribe con su filtro puesto */
  .vista-pendientes:not(:has(.pd-cat[data-filtro="dispo"].activa)) .pdh-fila > .pdh-c[data-estado="sin-campo"] { display: none; }
  .vista-pendientes .pdh-fila > .pdh-c > i { display: none; }
  .vista-pendientes .pdh-fila > .pdh-c:active { filter: brightness(.96); }
  .vista-pendientes .pdh-c[data-tipo="matricula"]::after { content: 'Matrícula'; }
  .vista-pendientes .pdh-c[data-tipo="tarjeta"]::after { content: 'Tarjeta de crédito'; }
  .vista-pendientes .pdh-c[data-tipo="contrato"]::after { content: 'Contrato'; }
  .vista-pendientes .pdh-c[data-tipo="foto"]::after { content: 'Foto'; }
  .vista-pendientes .pdh-c[data-tipo="cuaderno"]::after { content: 'Cuaderno'; }
  .vista-pendientes .pdh-c[data-tipo="camiseta"]::after { content: 'Camiseta'; }
  .vista-pendientes .pdh-c[data-tipo="baquetas"]::after { content: 'Baquetas'; }
  .vista-pendientes .pdh-c[data-tipo="contacto"]::after { content: 'Teléfono o correo'; }
  .vista-pendientes .pdh-c[data-tipo="dispo"]::after { content: 'Disponibilidades'; }
  .vista-pendientes .pdh-c.saldo { justify-items: initial; font-variant-numeric: tabular-nums; }
  .vista-pendientes .pdh-c.saldo::before { content: 'Saldo\00a0'; font-weight: 500; }

  /* ═════ 19 · Administración › Admisiones ═════ */
  /* Kanban: una etapa por pantalla con imán; la siguiente asoma y se funde (se ve que hay más) */
  /* ronda 3: la etapa siguiente asoma 56 px y se funde hasta desaparecer (nada cortado en seco) */
  .kanban {
    margin-right: calc(-1 * var(--margen)); padding-right: 64px; scroll-padding-left: 0; /* al final, la última etapa fuera del fundido */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), rgba(0, 0, 0, .35) calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 64px), rgba(0, 0, 0, .35) calc(100% - 32px), transparent);
  }
  .kb-col { flex-basis: calc(100vw - 2 * var(--margen) - 56px); }
  .kb-cab { min-height: 40px; }
  /* Hoja (ronda 3): en el teléfono no es una hoja de cálculo cortada, es la lista de alumnos agrupada por estado (la
     cabecera de cada grupo dice el estado y cuántos). Cada fila: foto y nombre (abre la ficha) y el instrumento en gris a
     la derecha. Sin columnas, sin selector de columnas, sin celdas que marcar: editar en lote es cosa del escritorio. */
  .vista-admisiones .adm-columnas { display: none; }
  .vista-admisiones.adm-hoja .adm-cuerpo { overflow: visible; }
  .vista-admisiones .hoja { overflow: visible !important; max-height: none; height: auto; -webkit-mask-image: none; mask-image: none; }
  .vista-admisiones .hj-tabla { display: block; width: 100% !important; min-width: 0 !important; table-layout: auto; }
  .vista-admisiones .hj-tabla :is(colgroup, thead) { display: none; }
  .vista-admisiones .hj-tabla tbody { display: block; }
  .vista-admisiones .hj-tabla tbody tr { display: flex; align-items: center; gap: 12px; width: 100%; }
  .vista-admisiones .hj-tabla tbody tr > td { display: none; }
  .vista-admisiones .hj-tabla tbody tr.hj-bloque > td,
  .vista-admisiones .hj-tabla tbody tr[data-alumno] > td:is([data-k="Alumno"], [data-k="Instrumento"]) {
    display: block; position: static; width: auto !important; min-width: 0; height: auto; padding: 0; border: 0;
    background: transparent; box-shadow: none !important; outline: 0;
  }
  .vista-admisiones .hj-tabla tbody tr.hj-bloque > td { flex: 1 1 auto; }
  .vista-admisiones .hj-tabla tbody tr[data-alumno] { min-height: 52px; padding: 0 14px; border-top: 1px solid var(--linea); background: var(--sup); }
  .vista-admisiones .hj-tabla tbody tr.hj-bloque + tr[data-alumno] { border-top: 0; }
  .vista-admisiones .hj-tabla td[data-k="Alumno"] { flex: 1 1 auto; }
  .vista-admisiones .hj-tabla td[data-k="Alumno"] .hj-c { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .vista-admisiones .hj-tabla td[data-k="Alumno"] .avatar { width: 32px !important; height: 32px !important; font-size: 12px !important; flex: none; }
  .vista-admisiones .hj-tabla .hj-abrir {
    flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font: 600 var(--t-l)/var(--lh-l) var(--f-ui); color: var(--tinta);
  }
  .vista-admisiones .hj-tabla td[data-k="Instrumento"] { flex: none; font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta-3); }
  .vista-admisiones .hj-tabla td[data-k="Instrumento"] .hj-texto { color: inherit; }
  .vista-admisiones .hj-tabla :is(.hj-tirador, .hj-esquina) { display: none; }
  .vista-admisiones .hoja::after { display: none; } /* la sombra de «sigue a la derecha»: aquí no sigue nada */
  .vista-admisiones .hj-tabla td::before, .vista-admisiones .hj-tabla td::after { display: none; }
  .vista-admisiones .hj-tabla td.cambiada { background-image: none; }
  .vista-admisiones .hj-tabla tr.hj-bloque .hj-bloque-in { position: static; padding: 0; }
  .vista-admisiones .hj-tabla tr.hj-bloque { min-height: 44px; padding: 0 6px; background: var(--sup-2); border-top: 1px solid var(--linea); }
  .vista-admisiones .hj-tabla tbody > tr.hj-bloque:first-child { border-top: 0; }
  .vista-admisiones .hj-pie:not(:has(.boton)) { display: none; }
  /* ficha: estado e instrumento en una línea; pasar de etapa compacto; etapas solo las que se pueden abrir;
     los cuatro pasos en una línea (el actual con su nombre); el formulario empieza en el primer tercio */
  .fc-barra { padding-bottom: 8px; }
  .fc-barra-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .fc-barra-fila > .fc-sel { min-width: 0; height: 44px; padding: 0 10px; }
  .fc-barra-fila > .boton.fc-pasar { grid-column: 1 / -1; min-height: 40px; height: 40px; font-size: var(--t-m); }
  .fc-barra-fila .fc-sel-etiqueta { display: none; } /* el punto y el valor se explican solos; el instrumento también */
  .fc-sel-valor { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fc-etapa.bloqueada, .fc-etapa-sep:has(+ .fc-etapa.bloqueada) { display: none; }
  .fc-etapas:not(:has(.fc-etapa:not(.bloqueada):not(.en-vista))) { display: none; }
  .fc-pasos { flex-wrap: nowrap; gap: 6px; padding: 8px 16px; }
  .fc-paso { flex: none; min-height: 40px; padding: 4px 6px; }
  .fc-paso.actual { flex: 1 1 auto; padding-right: 12px; }
  .fc-paso:not(.actual) .fc-paso-txt { display: none; }
  .fc-paso.actual::before { display: none; }
  .fc-ed-cab { flex-wrap: wrap; row-gap: 2px; }
  .fc-ed-cab .fc-t-faltan { margin-left: auto; }

  /* ═════ 20 · Finanzas ═════ */
  /* Emitidas: «Exportada» lo dicen casi todas: no se escribe; solo la excepción lleva su etiqueta. Sin «Líneas». */
  [data-qa="fi-tabla-emitidas"] .fi-estado-linea { display: none; }
  [data-qa="fi-tabla-emitidas"] th.fi-col-estado { font-size: 0; width: 1px; }
  .fi-emitidas .fi-cifras .fi-cifra:nth-child(2):not(.fi-total) { display: none; }
  /* «Leer los datos otra vez» (⇄): en el teléfono se lee al abrir; sin ícono suelto junto al título */
  .vista-fin .fi-cab .fi-releer { display: none; }
  /* Dirección › Finanzas: la fila de saldos en dos líneas (texto, fecha) y, en la misma línea a la derecha, la misma
     flecha gris que las filas de tarjetas (ronda 3: nunca sola en una línea propia). */
  .fi-pend-fila { flex-wrap: nowrap; align-items: center; }
  .fi-pend-fila [data-qa="fi-pend-ir"] {
    flex: none; align-self: stretch; width: 44px; min-width: 44px; height: auto; min-height: 44px; margin: -8px -12px -8px 0; padding: 0;
    justify-content: center; border: 0; background: transparent; box-shadow: none; color: var(--tinta-4);
  }
  .fi-pend-fila [data-qa="fi-pend-ir"] > span:not(.ic) { display: none; }
  .fi-pend-fila [data-qa="fi-pend-ir"] .ic { width: 16px; height: 16px; }
  .fi-pend-fila .fi-pend-textos { flex: 1 1 auto; min-width: 0; }
  .fi-pend-fila .fi-pend-textos :is(b, small) { text-wrap: balance; }

  /* ═════ 21 · Dirección y Supervisión › Pendientes pedagógicos: tres cifras en una franja (el total ya está en la pestaña) ═════ */
  /* ronda 3: el resumen ya no son tres columnas partidas en cuatro líneas: una lista de cifras dentro de una tarjeta, una
     por línea; el enlace a Pagos es la última fila, a lo ancho, con su flecha a la derecha. */
  .sp-cifras {
    display: flex; flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding: 0 14px;
    background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--s-1);
  }
  .sp-cifras > * + * { border-top: 1px solid var(--linea); }
  .sp-cifras .espacio { display: none; }
  .ped-pendientes .sp-cifra[data-cifra="pendientes"] { display: none; }
  .sp-cifras .sp-cifra { display: block; min-width: 0; margin: 0; padding: 11px 0; white-space: normal; font: 400 var(--t-l)/var(--lh-l) var(--f-ui); color: var(--tinta-2); }
  .sp-cifras .sp-cifra > b { color: var(--tinta); }
  .sp-cifras .sp-cifra > b.sp-edad.vencido { color: var(--peligro-texto); }
  .sp-cifras .sp-cifra-ir {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: auto; height: auto; min-height: 46px;
    margin: 0; padding: 10px 0; border-radius: 0; text-align: left; font: 500 var(--t-m)/var(--lh-m) var(--f-ui); text-wrap: balance;
  }
  .sp-cifras .sp-cifra-ir .ic { width: 16px; height: 16px; flex: none; }
  /* los grupos de un profesor se separan con la misma línea continua que el resto */
  .sp-detalle .sp-grupo + .sp-grupo { border-top-style: solid; }
  /* Pagos profesores: cada fila dice la clase y quién la dictó; el nombre se toca para cambiarlo (selector del teléfono) */
  .pp-cab { min-height: 0; padding: 4px 8px 4px 14px; }
  .pp-cab .boton.chico { min-height: 36px; height: 36px; border-color: transparent; background: transparent; box-shadow: none; color: var(--acento-texto); padding: 0 8px; }
  .pp-fila:not(.reemplazo) .pp-dueno { display: none; }
  /* ronda 3: la clase y quien la dictó empiezan en la misma x; el nombre entero (sin «Andrea Marula…»); el menú con borde
     (falta, reemplazo, marcada) corre su caja hacia la izquierda para que el texto siga alineado */
  .pp-fila .pp-sel { grid-column: 2 / -1; grid-row: 2; justify-self: stretch; min-width: 0; }
  .pp-fila.reemplazo .pp-sel { grid-column: 2; justify-self: stretch; }
  .pp-fila .pp-clase { white-space: normal; padding: 0; margin: 0; }
  .pp-fila select.pp-dictada {
    width: auto; height: 30px; min-height: 0; max-width: 100%; margin-left: 0; padding: 0 28px 0 0 !important;
    border-color: transparent; background-color: transparent; box-shadow: none; font-size: 15px !important; color: var(--tinta-2);
  }
  .pp-fila:is(.marcada, .reemplazo, .vacia, .falta) select.pp-dictada, .pp-fila select.pp-dictada:focus {
    margin-left: -11px; max-width: calc(100% + 11px); padding: 0 30px 0 10px !important; height: 32px;
  }
  /* tres segmentados seguidos → uno grande (Pedagogía) y, debajo, el mes y la tabla en una sola línea compacta */
  .vista-pagos-prof { gap: 10px; }
  .pp-barra { flex-wrap: wrap; gap: 8px; }
  .pp-barra .conmutador { padding: 2px; }
  .pp-barra .conmutador button { height: 34px; padding: 0 7px; font-size: var(--t-m); }
  .pp-meses { flex: 1 1 auto; min-width: 0; }
  .pp-ver { flex: 0 1 auto; margin-left: 0; }
  .pp-ver button { flex: 1 0 auto; }
  .pp-acciones { justify-content: space-between; }
  .pp-cab .pp-acciones .boton.chico { margin-left: -8px; }
  .vista-pagos-prof .pp-cab:has(h2[hidden], h2:empty) { padding-block: 2px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   Ronda 3 (13 oct, noche) · consistencia: nada cortado en seco, teléfonos en la letra de la interfaz, hojas a lo ancho
   con el mismo margen a los dos lados, rejillas sin horas vacías, el botón de la clase a lo ancho de su tarjeta.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* teléfonos: letra de la interfaz. Con Inter, tabular-nums ensancha el guion y los paréntesis hasta el ancho de una
     cifra («555 - 4582», aspecto de máquina de escribir); en el teléfono van con cifras proporcionales. */
  :is(.rl-tel, .ca-telefono, .kbt-tel .copiable, .fa-datos a[href^="tel:"]) { font-variant-numeric: normal; letter-spacing: 0; }

  /* marco: el título de Admisiones en la misma y que el de las demás pestañas (el conmutador de al lado lo bajaba 6 px) */
  .vista-admisiones .adm-cab { align-items: flex-start; }
  .vista-admisiones .adm-cab > .adm-vistas { margin-top: -4px; }
  .vista-admisiones .adm-cab > .adm-vistas button { height: 36px; }

  /* Recepción › Apertura: el orden de la tarea · quién abre, la lista y, al final, «Registrar la apertura» (antes el botón
     iba antes de revisar). Solo cambia el orden visual: la cabecera y el bloque de registro se abren en la columna. */
  .vista-apertura > .ap-cab, .vista-apertura .ap-registro { display: contents; }
  .vista-apertura .ap-cab-titulo { order: 1; }
  .vista-apertura .ap-cab .espacio { display: none; }
  .vista-apertura .ap-cab .ap-tipo { order: 2; width: 100%; }
  .vista-apertura .ap-quien { order: 3; width: 100%; }
  .vista-apertura > .ap-cuerpo { order: 4; }
  .vista-apertura .ap-registro > [data-accion^="guardar-"] { order: 5; width: 100%; min-height: 48px; justify-content: center; }

  /* Profesor › Horario: cada grupo a lo ancho de su columna (bordes derechos alineados, no dentados) */
  .rejilla-profesor .rj-celda > .bloque { width: 100%; justify-self: stretch; }

  /* Dirección › Recepción: los dos avisos del local a lo ancho, el mismo borde derecho (no dos anchos distintos) */
  .dir-local { flex-direction: column; align-items: stretch; }
  .dir-local > .dir-local-fila { width: 100%; justify-content: flex-start; }
  .dir-local > .dir-local-fila .dir-flecha { margin-left: auto; }

  /* Administración › Horario: la fila de capas se funde en su borde (nada cortado en «Fi»); el anillo de la foto con aire */
  .horario-controles .horario-capas { padding-right: 48px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
  .vista-horario .rejilla .bl-alumno { gap: 8px; }
  .vista-horario .rejilla .bl-alumno > .avatar:first-child { margin-left: 2px; }

  /* Ajustes: la hoja usa todo su ancho (antes 320 px fijos dentro de una hoja de 390) */
  .popover-ajustes .ajustes, .popover .ajustes { width: 100%; max-width: none; }

  /* Recepción › contacto: hoja de borde a borde, el mismo margen a los dos lados; la cabecera sin franja gris */
  .popover.popover-contacto, .popover.popover-contacto:has(.contacto-ausencia) { left: 0 !important; right: 0 !important; width: auto !important; margin: 0; }
  .contacto-ausencia .ca-cab { background: transparent; margin: 0; padding: 0; }

  /* Profesor › ficha del alumno: las cinco cifras con su rótulo en una línea */
  .vista-ficha .contador span { white-space: nowrap; font-size: 11px; letter-spacing: -.01em; }

  /* horario: las horas sin clase no ocupan su alto proporcional (a la vista va lo ocupado) */
  .vista-horario .rejilla { grid-template-rows: none !important; grid-auto-rows: auto; }
  .vista-horario .rejilla .rj-celda.nohay { min-height: 0; }
  /* «Pasar lista»: a lo ancho de su tarjeta, sin hueco a la izquierda */
  .vista-horario .bl-alerta { padding: 2px 2px 6px 3px; row-gap: 8px; }
  .vista-horario .bl-alerta-t { flex: 1 1 100%; }
  .vista-horario .bl-alerta .bl-pasar.boton.chico { flex: 1 1 100%; min-height: 40px; margin-left: 0; justify-content: center; font-size: var(--t-m); }
}
@keyframes hoja-sube { from { opacity: 0; transform: translateY(24px); } }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   Ronda final (15 oct) · el iPhone de verdad, con el dedo (pruebas/area-telefono.mjs, 390×844 y 375×667).
   «Asegúrate que para el teléfono funcione también perfecto… sobre todo para profesores y para recepción».
   Va para las dos apariencias: los selectores llevan html:root[data-diseno] para pasar por encima de los de Selah
   (:root[data-diseno="selah"] …), que se cargan después. Solo tamaños, zonas táctiles y capas: ningún marcado cambia.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* Modo clase: la cápsula de pendientes de Mis clases no flota encima de la clase (tapaba «Siguiente paso») */
  :root:has(.modo) .pendientes { display: none; }
  /* Horario: la sombra de la columna de la hora (6 px a la derecha) tapaba el borde y la primera letra de la primera
     columna («Piano» se leía «iano»). Lo que pasa por debajo ya lo tapa su fondo. */
  html:root[data-diseno] .vista-horario .rejilla .rg-hora { box-shadow: none; }
  html:root[data-diseno] .vista-horario .rejilla .rg-esquina { box-shadow: 0 6px 0 var(--fondo-rejilla); }
  /* la línea de la cuenta y la leyenda crece con lo suyo: los botones «Más columnas» se veían cortados abajo */
  html:root[data-diseno] .vista-horario > .horario-linea { height: auto; min-height: 0; }
  /* Selah: la rejilla es una tarjeta de vidrio con 16 px abajo (selah-horario.css); llegaba hasta el borde de la
     pantalla y lo último quedaba bajo las pestañas. La tarjeta termina encima de ellas. */
  html:root[data-diseno="selah"] .vista-horario:not(.horario-asignar) > .rejilla-dias { margin-bottom: calc(var(--tabbar) + var(--seg-abajo) + 10px); }
  /* Modo clase: los seis pasos caben siempre. Con el nombre del paso actual («Momento central», 182 px) la fila medía
     438 px y el 6 quedaba fuera de la pantalla (390 y 375). En el teléfono, solo números: el actual en su píldora
     blanca; su nombre ya es el título grande del paso, justo debajo. */
  html:root[data-diseno] .modo .pasos { container-type: inline-size; }
  /* El registro (pasos 2 a 4) era «display: contents» en el teléfono: sin caja propia, la Formación no lo encontraba
     («Paso sin elemento en pantalla · Abrir el registro de la clase»). Ahora es una caja que ocupa tres columnas de la
     misma rejilla: los seis pasos siguen repartidos igual. */
  html:root[data-diseno] .modo .pasos { display: grid; grid-template-columns: repeat(6, auto); justify-content: space-between; align-items: center; }
  html:root[data-diseno] .modo .pasos .bloque-registro { display: flex; grid-column: span 3; justify-content: space-between; margin: 0; padding: 0; border: 0; }
  @supports (grid-template-columns: subgrid) {
    html:root[data-diseno] .modo .pasos .bloque-registro { display: grid; grid-template-columns: subgrid; align-items: center; }
  }
  /* Formación: la franja de arriba ya ocupa la muesca; la barra y la cabecera de la clase, debajo, no la suman otra vez */
  body.en-formacion :is(#app, .modo) { --seg-arriba: 0px; }
  /* «Salir de la formación» en la franja: 28 px a la vista, 44 de zona táctil */
  html:root[data-diseno] .fm-franja-boton { position: relative; }
  html:root[data-diseno] .fm-franja-boton::after { content: ''; position: absolute; inset: -10px -8px; }
}
@container (max-width: 480px) {
  html:root[data-diseno] .pasos .paso.actual { padding: 0; justify-content: center; }
  html:root[data-diseno] .pasos .paso.actual .paso-nombre { display: none; }
}

/* Con el dedo (iPhone, iPad): lo que se toca mide 44 px o más; la letra de los detalles, 12 px o más. */
@media (max-width: 760px) and (pointer: coarse) {
  :root { --t-xs: 12px; }
  /* pestañas de abajo: el rótulo a 12 px */
  html:root[data-diseno] .pestana { font-size: 12px; line-height: 14px; }
  /* conmutadores (Profesores | Administración, Horario | Asistencia, días, Apertura | Cierre, Ajustes, Pendientes…) */
  html:root[data-diseno] :is(.segmentado, .conmutador) button,
  html:root[data-diseno] .horario-controles .conmutador button,
  html:root[data-diseno] .pi-boton { height: 44px; min-height: 44px; }
  html:root[data-diseno] .horario-controles [data-conmutador="vista"] button { width: 44px; }
  html:root[data-diseno] .interruptor { min-height: 44px; }
  /* sitio web · Perfil: «Áreas de otra cuenta» y «Salir» */
  html:root[data-diseno] :is(.web-otra, .web-salir) { min-height: 44px; }

  /* Profesor › Mis clases: la cápsula de pendientes */
  html:root[data-diseno] .pendientes:not(.abierta) .pend-boton { height: 44px; }
  /* Profesor › grupo: las caras de una clase pasada (un toque abre su asistencia) */
  html:root[data-diseno] .ficha .caras .cara { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  html:root[data-diseno] .ficha .caras .cara > .avatar { width: 40px !important; height: 40px !important; }
  /* Modo clase: los pasos de arriba y «Agregar nota» */
  html:root[data-diseno] .pasos .paso { min-width: 44px; }
  html:root[data-diseno] .pr-agregar { min-height: 44px; padding: 0 10px; margin-left: 26px; }
  /* Profesor › ficha del alumno: las cifras con su rótulo legible (12 px, en dos líneas si hace falta) */
  html:root[data-diseno] .vista-ficha .contador span { font-size: 12px; line-height: 14px; white-space: normal; text-align: center; }

  /* Horario (profesor y Recepción): mandos, flechas de la semana, la sopa, el menú de la clase y las fichas */
  html:root[data-diseno] .horario-controles :is(.boton-icono, .selector-fecha .boton-icono.redondo, .sf-fecha) { height: 44px; min-height: 44px; }
  html:root[data-diseno] .horario-controles :is(.boton-icono, .selector-fecha .boton-icono.redondo) { width: 44px; }
  html:root[data-diseno] .vista-horario > .sopa-pestana { width: 44px; height: 44px; }
  html:root[data-diseno] .bl-menu { width: 44px; height: 44px; margin-block: -13px; margin-right: -8px; }
  html:root[data-diseno] .vista-horario .bl-alumno.marcable { min-height: 44px; }
  html:root[data-diseno] :is(.bl-falta, .bl-repetido, .bl-mio, .bl-baja) { font-size: 12px; }
  /* 15 oct · una clase sin tomar ya no lleva fichas: la tarjeta sola sigue siendo un blanco de toque de 44 px */
  .vista-horario .rejilla .bloque.sin-asistencia { min-height: 44px; justify-content: center; }
  html:root[data-diseno] .rejilla-dias.apretada .rejilla .rg-hora.sin-hora { font-size: 12px; }
  html:root[data-diseno] .hc-desliza-ir,
  html:root[data-diseno] .hc-deslizar .hc-desliza-ir { height: 44px; margin-block: 0; padding: 0 12px 0 14px; font-size: 13px; }
  html:root[data-diseno] .hc-desliza.izq .hc-desliza-ir { padding: 0 14px 0 12px; }
  html:root[data-diseno] .vista-horario .bl-pasar.boton.chico { min-height: 44px; }

  /* Recepción › Local: «Marcar todo», las casillas, las fotos y su «quitar» */
  html:root[data-diseno] .ap-listo { height: 44px; padding: 0 10px; margin-block: -9px; }
  html:root[data-diseno] :is(.ap-puesto li label, .ap-casilla) { min-height: 44px; }
  /* las fotos de cuatro en cuatro: con cinco, «Por subir» no cabía en la miniatura y se cortaba */
  html:root[data-diseno] .ap-fotos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html:root[data-diseno] .ap-foto-btn { width: 100%; height: 52px; aspect-ratio: auto; }
  html:root[data-diseno] .ap-badge { height: 20px; font-size: 12px; white-space: nowrap; }
  html:root[data-diseno] .ap-quitar { position: relative; width: 22px; height: 22px; }
  html:root[data-diseno] .ap-quitar::after { content: ''; position: absolute; inset: -11px; }
  /* Recepción › Pendientes: los tres filtros a lo ancho, repartidos (a 375 px, «Sin respuesta» se salía 1 px) */
  html:root[data-diseno] .vista-llamadas [data-conmutador="llamadas"] { display: flex; width: 100%; max-width: 100%; }
  html:root[data-diseno] .vista-llamadas [data-conmutador="llamadas"] button { flex: 1 1 auto; min-width: 0; padding: 0 8px; white-space: nowrap; }
  /* Recepción › contacto: el teléfono (un toque lo selecciona para copiar) */
  html:root[data-diseno] .ca-telefono { display: inline-flex; align-items: center; min-height: 44px; }

  /* Con el teclado en pantalla: fuera las pestañas y la cápsula, que se montarían encima del campo */
  body:has(:is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"]), textarea, select):focus) :is(.pestanas, .pendientes) { display: none; }
}

/* ═════ 15 oct · iPhone: flecha de volver y medidas más compactas ═════
   Juan David (video del iPhone): «agrega una flecha o algo para regresar atrás» y «en iPhone se ve todo muy grande».
   La flecha va a la izquierda de la barra (app.js · nav.atras: la ventana abierta, la clase, el grupo o la ficha, Perfil);
   el gesto «atrás» del iPhone hace lo mismo (historia del navegador). Títulos y fichas de la clase, un punto más chicos. */
@media (max-width: 760px) {
  .barra { grid-template-columns: auto minmax(0, 1fr) auto; }
  .barra > .boton-atras { display: inline-grid; place-items: center; margin-left: -4px; color: var(--tinta-2); }
  .barra > .boton-atras .ic { width: 22px; height: 22px; }
  /* la clase: tres fichas por fila desde tres alumnos, foto de 52 px y nombre de 15 px */
  .tiles:not([data-n="1"]):not([data-n="2"]):not([data-n="4"]), .tiles[data-n] { grid-auto-rows: minmax(118px, auto); gap: 8px; }
  .tiles:not([data-n="1"]):not([data-n="2"]):not([data-n="4"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile, .tile-espera { gap: 6px; padding: 12px 6px 10px; }
  .tile .avatar, .tile-espera .avatar { width: 52px !important; height: 52px !important; font-size: 18px !important; }
  .tile-nombre { font-size: 15px; line-height: 19px; }
  .tile-estado { height: 24px; padding: 0 8px; font-size: 12.5px; }
  .modo-titulo h1 { font-size: 22px; line-height: 26px; }
}