/* 16 oct · tel-profesor.css · teléfono rediseñado (docs/TELEFONO-16OCT.md). Solo reglas dentro de @media (max-width: 760px). */
/* Zona Profesor: Mis clases, el grupo y sus fichas, el modo clase, Mis alumnos y la ficha del alumno, Factura.
   Una mano, una columna, de arriba abajo; títulos de pantalla de 22, de sección de 17, texto de 15, secundario de 13; la hora
   de la clase que toca como mucho de 34; fotos de 32–40 en listas y 52 en la clase. Las dos apariencias: cada selector
   empieza por html:root[data-diseno]. El escritorio (> 760 px) no cambia. */

@media (max-width: 760px) {
  /* ═════ 0 · títulos de pantalla y su línea gris ═════ */
  html:root[data-diseno] :is(.vista-clases, .vista-alumnos, .vista-factura) .titulo-fila h1 { font-size: var(--t-titulo); line-height: var(--lh-titulo); }
  html:root[data-diseno] :is(.vista-clases, .vista-alumnos, .vista-factura) .titulo-fila .sub { font-size: 13px; line-height: 18px; }
  html:root[data-diseno] .vista-clases .mc-hoy { font-size: 15px; line-height: 20px; }

  /* ═════ 1 · Mis clases ═════ */
  /* la cápsula de pendientes en el flujo (clases.js · ponerPendientes): una fila bajo el título, nunca encima de una tarjeta */
  html:root[data-diseno] .pendientes.pend-en-flujo {
    position: static; inset: auto; left: auto; right: auto !important; bottom: auto !important; width: auto; margin: 0; z-index: auto;
    display: block; align-self: stretch; justify-self: stretch;
  }
  html:root[data-diseno] .pendientes.pend-en-flujo .pend-fila { display: block; min-height: 48px; }
  /* abierta: la hoja y su velo por encima de la barra y de las pestañas (la cápsula ya no vive al nivel de la página) */
  html:root[data-diseno] .pendientes.pend-en-flujo.abierta { position: relative; z-index: 85; }
  html:root[data-diseno] .pendientes.pend-en-flujo:not(.abierta) .pend-boton {
    display: flex; align-items: center; gap: 10px; width: 100%; height: 48px; padding: 0 14px 0 16px; justify-content: flex-start;
    border-radius: 14px; background: var(--sup); border: 1px solid var(--linea); box-shadow: var(--s-1); color: var(--tinta);
  }
  html:root[data-diseno="selah"] .pendientes.pend-en-flujo:not(.abierta) .pend-boton { background: var(--vidrio); border-color: var(--vidrio-borde); box-shadow: var(--vidrio-sombra); border-radius: 16px; }
  html:root[data-diseno] .pendientes.pend-en-flujo:not(.abierta) .pend-boton::after {
    content: ''; width: 8px; height: 8px; margin-left: auto; border: solid var(--tinta-4); border-width: 0 2px 2px 0; transform: rotate(-45deg);
  }
  html:root[data-diseno] .pendientes.pend-en-flujo .pend-cuenta { font: 600 15px/20px var(--f-ui); }
  /* sin la cápsula flotante ya no hace falta el hueco de abajo que la dejaba pasar */
  html:root[data-diseno] .vista-clases .rejilla-grupos, html:root[data-diseno] .vista-clases .rejilla-grupos[data-n] { padding-bottom: 0; }
  html:root[data-diseno="selah"] .mc-despues-lista { padding-bottom: 0; }
  html:root[data-diseno] .vista-clases > .mc-cab { display: grid; gap: 4px; }

  /* tarjetas de grupo (Clásica y «Después»): nombre 17, caras de 40 */
  html:root[data-diseno] .vista-clases:not(.vista-clases-todos) .tarjeta-grupo:not(.tg-heroe) .tg-instrumento { font: 700 var(--tel-seccion)/var(--tel-lh-seccion) var(--f-ui); letter-spacing: 0; }
  html:root[data-diseno="selah"] .vista-clases:not(.vista-clases-todos) .tarjeta-grupo:not(.tg-heroe) .tg-instrumento { font: 800 20px/22px var(--f-titulo); }
  html:root[data-diseno] .vista-clases:not(.vista-clases-todos) .tarjeta-grupo .tg-dia { font-size: 13px; line-height: 18px; }
  html:root[data-diseno] .vista-clases:not(.vista-clases-todos) .tarjeta-grupo:not(.tg-heroe) { gap: 10px; padding: 14px 14px 12px 16px; }
  html:root[data-diseno] .vista-clases:not(.vista-clases-todos) .tg-alumnos:not(.pildoras) .avatar { width: 40px !important; height: 40px !important; font-size: 14px !important; }
  html:root[data-diseno] .vista-clases:not(.vista-clases-todos) .tg-alumnos:not(.pildoras) .tg-alumno { font-size: 13px; }
  html:root[data-diseno] .vista-clases .tg-proxima { font-size: 13px; line-height: 18px; }

  /* Selah · el héroe: la hora de la clase que toca a 34 px (antes 38–56); el botón dentro, sin hueco de más */
  html:root[data-diseno] .tg-heroe .tg-instrumento { font-size: 34px; line-height: 36px; }
  html:root[data-diseno="selah"] .tarjeta-grupo.tg-heroe { padding: 18px 18px 18px; }
  html:root[data-diseno="selah"] .mc-heroe.con-accion .tg-heroe { padding-bottom: 88px; }
  html:root[data-diseno="selah"] .mc-accion { left: 18px; right: 18px; bottom: 18px; }
  html:root[data-diseno="selah"] .mc-accion .boton { height: 52px; font-size: 16px; }
  html:root[data-diseno="selah"] .mc-linea { margin-bottom: 10px; font-size: 13px; }
  html:root[data-diseno="selah"] .mc-linea .voz { font-size: 20px; }
  html:root[data-diseno="selah"] .tg-heroe .tg-dia { font-size: 15px; line-height: 20px; margin-top: 4px; }
  html:root[data-diseno="selah"] .tg-alumnos.pildoras { margin: 12px 0 12px; }
  html:root[data-diseno="selah"] .mc-escena { gap: 18px; padding-top: 4px; }
  html:root[data-diseno="selah"] .mc-despues-titulo { font: 700 var(--tel-seccion)/var(--tel-lh-seccion) var(--f-ui); margin: 0 2px 10px; letter-spacing: 0; }
  html:root[data-diseno="selah"] .mc-despues-lista { gap: 10px; }
  html:root[data-diseno="selah"] .mc-anteriores-titulo { font-size: 13px; }

  /* ═════ 2 · el grupo y sus fichas: a pantalla completa, la flecha de la barra vuelve (sin el «‹ Mis clases» repetido) ═════ */
  html:root[data-diseno] body[data-portal="profesor"] .vista-grupo .grupo-cab .volver,
  html:root[data-diseno] body[data-portal="profesor"] .vista-ficha > .volver { display: none; }
  html:root[data-diseno] .vista-grupo .gc-titulo h1 { font-size: var(--t-titulo); line-height: var(--lh-titulo); }
  html:root[data-diseno] .vista-grupo .gc-meta { font-size: 13px; line-height: 18px; }
  html:root[data-diseno] .leyenda-asis { gap: 4px 18px; font-size: 13px; line-height: 18px; }
  html:root[data-diseno] .leyenda-asis .ley-item { gap: 10px; }
  html:root[data-diseno] .leyenda-asis .ley-cara { width: 14px; height: 14px; }
  html:root[data-diseno] .leyenda-asis .ley-cara:is(.presente, .ausente)::after { width: 8px; height: 8px; right: -3px; bottom: -2px; }
  html:root[data-diseno] .ficha .ficha-fecha h3 { font: 600 15px/20px var(--f-ui); }
  html:root[data-diseno] .ficha .ficha-fecha :is(p, small, .ficha-estado) { font-size: 13px; line-height: 18px; }
  html:root[data-diseno] .registros { gap: 10px; }

  /* ═════ 3 · modo clase ═════ */
  html:root[data-diseno] .modo-titulo h1 { font-size: var(--t-titulo); line-height: var(--lh-titulo); }
  html:root[data-diseno] .modo-titulo p { font-size: 13px; line-height: 18px; }
  /* los pasos: sin la caja del registro (2 a 4) pintada como un bloque blanco o gris a media fila */
  html:root[data-diseno] .modo .pasos .bloque-registro { background: transparent; box-shadow: none; border: 0; border-radius: 0; }
  html:root[data-diseno] .modo .pasos { margin-block: 2px 4px; }
  /* un paso que se dejó sin escribir: la palabra «vacío» ensanchaba la fila (los seis pasos dejaban de caber); en el teléfono
     el número lleva un contorno punteado y la palabra queda para los lectores (letra 0, sin ocupar sitio) */
  html:root[data-diseno] .modo .paso-saltado { position: absolute; font-size: 0; line-height: 0; }
  html:root[data-diseno] .modo .paso.saltado .paso-n { outline: 1.5px dashed var(--tinta-3); outline-offset: 2px; }
  /* el paso: su tarjeta mide lo que lleva (sin el hueco del 60 % de la pantalla); el botón justo debajo, a lo ancho */
  html:root[data-diseno] .modo .paso-centro { min-height: 0; padding: 16px 14px; }
  html:root[data-diseno] .modo .paso-titulo h2 { font: 700 20px/24px var(--f-ui); letter-spacing: 0; }
  html:root[data-diseno="selah"] .modo .paso-titulo h2 { font: 800 24px/26px var(--f-titulo); }
  html:root[data-diseno] .modo .paso-titulo :is(.cuenta, .pista) { font-size: 13px; line-height: 18px; }
  html:root[data-diseno] .modo .paso-pie { margin-top: 14px; }
  html:root[data-diseno] .modo .paso-pie > .detalle { font-size: 13px; line-height: 18px; }
  html:root[data-diseno] .modo .paso-pie .boton { min-height: 52px; }
  /* las fichas de la asistencia: «Sin marcar» en una línea; la foto de 52 */
  html:root[data-diseno] .modo .tile-estado { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px; font-size: 12.5px; }
  html:root[data-diseno] .modo .tile-nombre { font-size: 15px; line-height: 19px; overflow-wrap: anywhere; }
  /* los textos: un campo de unas seis líneas que crece con lo escrito */
  html:root[data-diseno] .modo .texto-paso { min-height: 168px; font-size: 16px; line-height: 23px; }
  html:root[data-diseno] .modo .paso-anterior { font-size: 15px; }
  html:root[data-diseno] .modo .paso-anterior small { font-size: 13px; }
  /* terminar: el título del paso, no un título gigante; «Terminar la clase» a lo ancho */
  html:root[data-diseno] .modo .terminar { gap: 14px; }
  html:root[data-diseno] .modo .terminar > .boton { width: 100%; min-height: 52px; justify-content: center; }
  html:root[data-diseno] .modo .resumen-paso { min-height: 52px; font-size: 15px; }
  /* las notas por alumno: filas a lo ancho */
  html:root[data-diseno] .modo .presentes h2 { font: 700 var(--tel-seccion)/var(--tel-lh-seccion) var(--f-ui); }

  /* ═════ 4 · Mis alumnos: filas de dos o tres líneas, foto de 40; el grupo como título de sección ═════ */
  html:root[data-diseno] .vista-alumnos:not(.vista-alumnos-todos) .mini-titulo > span { font: 700 var(--tel-seccion)/var(--tel-lh-seccion) var(--f-ui); letter-spacing: 0; }
  html:root[data-diseno] .vista-alumnos:not(.vista-alumnos-todos) .mini-titulo small { font-size: 13px; }
  html:root[data-diseno] .vista-alumnos:not(.vista-alumnos-todos) .alumno-fila { min-height: 64px; padding: 10px 12px; gap: 12px; }
  html:root[data-diseno] .vista-alumnos:not(.vista-alumnos-todos) .alumno-fila .avatar { width: 40px !important; height: 40px !important; font-size: 14px !important; }
  html:root[data-diseno] .vista-alumnos:not(.vista-alumnos-todos) .af-texto b { font-size: 15px; line-height: 20px; }
  html:root[data-diseno] .vista-alumnos:not(.vista-alumnos-todos) .af-texto > span { font-size: 13px; line-height: 18px; }
  html:root[data-diseno] .vista-alumnos:not(.vista-alumnos-todos) .columnas-alumnos { gap: 18px; }

  /* ═════ 5 · la ficha del alumno ═════ */
  html:root[data-diseno] .vista-ficha .fa-perfil > .fa-foto { width: 56px !important; height: 56px !important; }
  html:root[data-diseno] .vista-ficha .fa-perfil h1 { font-size: var(--t-titulo); line-height: var(--lh-titulo); }
  html:root[data-diseno] .vista-ficha .fa-clases-cab h2 { font: 700 var(--tel-seccion)/var(--tel-lh-seccion) var(--f-ui); letter-spacing: 0; }
  html:root[data-diseno] .vista-ficha :is(.fa-datos dd, .acudiente-nombre) { font-size: 15px; }
  html:root[data-diseno] .vista-ficha :is(.fa-datos dt, .acudiente-titulo) { font-size: 13px; }
  /* las cinco cifras: la elegida con su fondo dentro de la franja (en Selah el anillo salía por el borde) */
  html:root[data-diseno] .vista-ficha .contadores { padding: 4px; gap: 2px; overflow: hidden; }
  html:root[data-diseno] .vista-ficha .contador { min-height: 60px; border-radius: 12px; box-shadow: none; outline: 0; }
  html:root[data-diseno] .vista-ficha .contador b { font-size: 20px; line-height: 24px; }
  /* el historial: fecha (con el grupo) a la izquierda, el estado a la derecha, en la misma línea, en las dos apariencias */
  html:root[data-diseno] .vista-ficha .ca-cab > .ca-cuando { grid-column: 1; grid-row: 1; min-width: 0; text-align: left; }
  html:root[data-diseno] .vista-ficha .ca-cab > .ca-nota { grid-row: 2; }
  html:root[data-diseno] .vista-ficha .ca-cab > .ca-nota.vacia { display: none; }
  html:root[data-diseno] .vista-ficha .ca-fecha { font-size: 15px; }

  /* ═════ 6 · Factura: los cuatro meses con la misma medida; el mes en curso, con su cifra de 34 como mucho ═════ */
  html:root[data-diseno] .vista-factura .meses { gap: 10px; }
  html:root[data-diseno] .vista-factura .mes .mes-nombre h2 { font: 700 var(--tel-seccion)/var(--tel-lh-seccion) var(--f-ui); letter-spacing: 0; }
  html:root[data-diseno="selah"] .vista-factura .mes .mes-nombre h2 { font: 800 22px/24px var(--f-titulo); }
  html:root[data-diseno] .vista-factura .mes.compacto.est-futuro .mes-nombre h2 { font-weight: 500; }
  html:root[data-diseno] .vista-factura .mes .mes-estado { font-size: 13px; }
  html:root[data-diseno] .vista-factura .mes.foco { gap: 10px; padding: 16px 20px; } /* el mismo margen de 20 que los meses compactos (antes 16: «Octubre» 4 px a la izquierda de «Septiembre») */
  html:root[data-diseno] .vista-factura .mes.foco .mes-horas b { font-size: 34px; line-height: 36px; }
  html:root[data-diseno] .vista-factura .mes .mes-horas { font-size: 15px; }
  html:root[data-diseno] .vista-factura .mes-archivos li { font-size: 13px; }
}