/* 16 oct · tel-horario.css · teléfono rediseñado (docs/TELEFONO-16OCT.md). Solo reglas dentro de @media (max-width: 760px). */
/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   Horario en el teléfono como AGENDA (horario.js · pintarAgenda): profesor, Supervisión, Recepción › Asistencias y
   Administración › Horario. Nada de la rejilla de columnas por instrumento: dos filas de mandos (modo y vista · días o
   fechas de la semana y «Filtros»), una línea con la fecha y la cuenta, y la agenda que se desplaza: secciones por hora
   con su cabecera pegajosa pequeña y una tarjeta a lo ancho por clase, con los colores de asistencia del escritorio.
   Las dos apariencias: lo común con los tokens de las dos; lo propio de Selah con :root[data-diseno="selah"].
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* ── la vista: una columna de alto fijo; lo que se desplaza es la agenda (los mandos quedan arriba) ── */
  html:root[data-diseno] .contenido > .vista.vista-horario.tel-agenda {
    display: flex; flex-direction: column; gap: 0; height: 100%; min-height: 0; overflow: hidden;
    padding-bottom: 0; grid-template-columns: none; grid-template-rows: none;
  }
  .tel-agenda > * { flex: none; min-width: 0; }

  /* ── mandos: dos filas ── */
  .tel-agenda .ag-mandos { display: flex; flex-direction: column; gap: 8px; }
  .tel-agenda .ag-fila { display: flex; align-items: center; gap: 8px; min-width: 0; }
  html:root[data-diseno] .tel-agenda .ag-seg { flex: 1 1 auto; min-width: 0; display: flex; height: 44px; padding: 3px; }
  html:root[data-diseno] .tel-agenda .ag-seg button {
    flex: 1 1 0; min-width: 0; height: 38px; min-height: 38px; padding: 0 6px; justify-content: center;
    font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* el botón del segmento mide 38 px de alto dentro de su pista de 44: la zona del toque llega a la pista entera */
  html:root[data-diseno] .tel-agenda .ag-seg button { position: relative; }
  html:root[data-diseno] .tel-agenda .ag-seg button::after { content: ''; position: absolute; top: -3px; bottom: -3px; left: 0; right: 0; }
  html:root[data-diseno] .tel-agenda .ag-seg.ag-seg-iconos { flex: none; }
  html:root[data-diseno] .tel-agenda .ag-seg.ag-seg-iconos button { flex: none; width: 44px; padding: 0; }
  html:root[data-diseno] .tel-agenda .ag-seg.ag-seg-iconos button .ic { width: 20px; height: 20px; }

  .tel-agenda .ag-boton {
    flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--linea); border-radius: 50%; background: var(--sup); color: var(--tinta-2);
    font: 700 18px/1 var(--f-ui); box-shadow: var(--s-1);
  }
  .tel-agenda .ag-boton .ic { width: 20px; height: 20px; }
  .tel-agenda .ag-boton:disabled { opacity: .4; box-shadow: none; }
  .tel-agenda .ag-filtros { margin-left: auto; }
  .tel-agenda .ag-filtros.con-filtro { border-color: var(--acento); color: var(--acento-texto); background: var(--acento-suave); }
  .tel-agenda .ag-flecha { border-color: transparent; background: transparent; box-shadow: none; }

  /* días o fechas: una fila de botones que se desliza con imán solo si no cabe */
  .tel-agenda .ag-semana { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 2px; }
  .tel-agenda .ag-tira {
    flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  /* centrada si cabe; si no, desde el primer botón (los márgenes automáticos no recortan el comienzo, como justify-content) */
  .tel-agenda .ag-semana .ag-tira { gap: 4px; }
  .tel-agenda .ag-semana .ag-tira > :first-child { margin-left: auto; }
  .tel-agenda .ag-semana .ag-tira > :last-child { margin-right: auto; }
  .tel-agenda .ag-tira::-webkit-scrollbar { display: none; }
  .tel-agenda .ag-chip {
    flex: 1 0 auto; scroll-snap-align: center; min-width: 44px; height: 44px; padding: 0 14px; border: 1px solid var(--linea);
    border-radius: var(--r-pildora); background: var(--sup); color: var(--tinta-2); font: 600 15px/1 var(--f-ui); white-space: nowrap;
  }
  .tel-agenda .ag-chip.activo { border-color: var(--acento); background: var(--acento); color: #fff; }
  .tel-agenda .ag-fecha { flex: none; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 46px; padding: 0; border-radius: 14px; }
  .tel-agenda .ag-fecha small { font: 600 12px/14px var(--f-ui); color: inherit; opacity: .8; }
  .tel-agenda .ag-fecha b { font: 700 17px/18px var(--f-ui); }
  .tel-agenda .ag-fecha.hoy::after { content: ''; position: absolute; bottom: 3px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--acento); }
  .tel-agenda .ag-fecha.hoy.activo::after { background: #fff; }
  .tel-agenda .ag-unico { flex: 1 1 auto; min-width: 0; margin: 0; font: 700 17px/22px var(--f-ui); color: var(--tinta); }

  /* la línea: la fecha y la cuenta, en gris */
  .tel-agenda .ag-linea { margin: 10px 0 0; font: 500 13px/18px var(--f-ui); color: var(--tinta-2); }
  .tel-agenda .ag-linea-fecha { margin-right: 6px; font-weight: 700; color: var(--tinta); }
  .tel-agenda .ag-linea-fecha::first-letter { text-transform: uppercase; }
  .tel-agenda .ag-linea .hc-cuenta { font: inherit; color: inherit; white-space: normal; }
  .tel-agenda .ag-linea .hc-cuenta b { color: var(--tinta); }
  .tel-agenda .ag-linea :is(.ag-parte, .ag-linea-fecha) { white-space: nowrap; }

  /* ── la agenda: lo que se desplaza; llega a los bordes de la pantalla (las sombras de las tarjetas no se cortan) ── */
  .tel-agenda > .agenda {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch;
    margin: 6px calc(-1 * var(--marco-lado)) 0; padding: 0 var(--marco-lado) calc(var(--tabbar) + var(--seg-abajo) + 20px + var(--ag-pie, 0px));
  }
  .tel-agenda > .agenda > .vacio-grande, .tel-agenda > .agenda > .vacio { margin-top: 24px; }
  .tel-agenda .ag-dia + .ag-dia { margin-top: 18px; }
  .tel-agenda .ag-dia-t { margin: 10px 0 0; font: 700 17px/22px var(--f-ui); color: var(--tinta); }
  .tel-agenda .ag-hora-t {
    position: sticky; top: 0; z-index: 3; display: flex; align-items: baseline; gap: 8px;
    margin: 0 calc(-1 * var(--marco-lado)); padding: 8px var(--marco-lado) 6px;
    background: var(--fondo); box-shadow: 0 1px 0 var(--linea);
    font: 700 15px/20px var(--f-ui); color: var(--tinta); font-variant-numeric: tabular-nums;
  }
  .tel-agenda .ag-hora-t small { font: 500 13px/18px var(--f-ui); color: var(--tinta-3); }
  /* la hora en curso (hoy): la hora en azul con su punto */
  .tel-agenda .ag-hora.ahora .ag-hora-t > span { color: var(--acento-texto); }
  .tel-agenda .ag-hora.ahora .ag-hora-t > span::before { content: ''; display: inline-block; width: 8px; height: 8px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--acento); vertical-align: middle; }

  /* ── la tarjeta de una clase ── */
  .tel-agenda .ag-clase {
    position: relative; margin: 0 0 10px; padding: 8px 10px 8px 12px; border: 1px solid var(--linea); border-radius: var(--r-xl);
    background: var(--sup); box-shadow: var(--s-1); color: var(--tinta);
  }
  .tel-agenda .ag-clase[role="button"], .tel-agenda .ag-clase.abrible { cursor: pointer; }
  .tel-agenda .ag-clase.mia { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento), var(--s-1); }
  .tel-agenda .ag-cab { display: flex; align-items: center; gap: 8px; min-height: 44px; }
  .tel-agenda .ag-cab-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
  .tel-agenda .ag-titulo { font: 700 17px/22px var(--f-ui); color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .tel-agenda .ag-prof { font: 500 13px/18px var(--f-ui); color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .tel-agenda .ag-prof.sin { color: var(--tinta-4); }
  /* Administración: el profesor es un botón (cambiarlo, con su confirmación) */
  html:root[data-diseno] .tel-agenda .ag-cab .bl-prof {
    display: inline-flex; align-items: center; height: 32px; min-height: 32px; min-width: 44px; margin: 2px 0 0 -8px; padding: 0 8px; max-width: 100%;
    border-radius: var(--r-pildora); font: 500 13px/18px var(--f-ui); color: var(--acento-texto); position: relative;
  }
  html:root[data-diseno] .tel-agenda .ag-cab .bl-prof::after { content: ''; position: absolute; top: -6px; bottom: -6px; left: 0; right: 0; }
  html:root[data-diseno] .tel-agenda .ag-cab .bl-prof span { overflow: hidden; text-overflow: ellipsis; }
  .tel-agenda .ag-n { flex: none; font: 600 13px/18px var(--f-ui); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
  /* con el botón del profesor debajo del título (Administración), la cifra en la línea del título */
  .tel-agenda .ag-cab:has(.bl-prof) { align-items: flex-start; }
  .tel-agenda .ag-cab:has(.bl-prof) > .ag-n { line-height: 22px; padding-top: 1px; }
  .tel-agenda .ag-candado { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; margin-left: 0; color: var(--ok); }
  .tel-agenda .ag-candado .ic { width: 16px; height: 16px; }
  .tel-agenda .ag-menu { margin-right: -4px; border-color: transparent; background: transparent; box-shadow: none; color: var(--tinta-2); }
  .tel-agenda .ag-ir { flex: none; width: 18px; height: 18px; color: var(--tinta-3); }
  .tel-agenda .ag-nota { margin: 0 0 4px; font: 500 13px/18px var(--f-ui); color: var(--tinta-3); }

  /* alumnos: una lista compacta (foto de 32, nombre en una línea, el estado a la derecha) */
  .tel-agenda .ag-alumnos { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 2px; }
  html:root[data-diseno] .tel-agenda .ag-al {
    position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 -4px; padding: 5px 8px 5px 4px;
    border: 1px solid transparent; border-radius: 12px; background: transparent; box-shadow: none; outline: 0;
    font: 500 15px/20px var(--f-ui); color: var(--tinta); cursor: pointer; opacity: 1; filter: none;
  }
  html:root[data-diseno] .tel-agenda .ag-al::after { content: none; }
  html:root[data-diseno] .tel-agenda .ag-al:not([role="button"]) { cursor: default; }
  html:root[data-diseno] .tel-agenda .ag-al .avatar { flex: none; width: 32px !important; height: 32px !important; font-size: 12px !important; margin: 0; }
  .tel-agenda .ag-al-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
  html:root[data-diseno] .tel-agenda .ag-al .bl-nom { display: block; min-width: 0; margin: 0; font: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html:root[data-diseno] .tel-agenda .ag-al .bl-nom::before { content: none; }
  .tel-agenda .ag-al-det { font: 500 12px/16px var(--f-ui); color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html:root[data-diseno] .tel-agenda .ag-al .bl-edad { flex: none; margin: 0; padding: 0; font: 500 13px/18px var(--f-ui); color: var(--tinta-3); }
  .tel-agenda .ag-al .bl-marcas:empty { display: none; }
  .tel-agenda .ag-al-est { flex: none; display: inline-flex; align-items: center; gap: 4px; }
  html:root[data-diseno] .tel-agenda :is(.bl-falta, .bl-repetido, .bl-baja, .ag-otra) {
    display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pildora); font: 700 12px/22px var(--f-ui); white-space: nowrap;
  }
  .tel-agenda .ag-otra { background: var(--sup); color: var(--presente-texto); box-shadow: inset 0 0 0 1px var(--presente-borde); }
  .tel-agenda .ag-check { display: inline-grid; place-items: center; width: 24px; height: 24px; color: var(--presente-texto); }
  .tel-agenda .ag-check .ic { width: 20px; height: 20px; stroke-width: 2.4; }
  html:root[data-diseno] .tel-agenda .ag-al-menu { width: 44px; height: 44px; margin: -6px -8px -6px 0; border: 0; background: transparent; box-shadow: none; color: var(--tinta-2); }

  /* asistencia, en todas las áreas y las dos apariencias (17 oct · asistencias · colores; antes, profesor con ✓ verde y la
     palabra «ausente» en rojo): presente = ficha azul con ✓ azul · ausente = ficha gris con la palabra «ausente» en gris.
     El rojo es solo de la clase sin tomar (abajo) y, en Recepción, del ausente sin motivo. Tokens --presente-* /
     --ausente-* (base.css y selah.css); dentro de la ficha teñida, el gris de segundo plano pasa a --asis-tinta. */
  html:root[data-diseno] .tel-agenda .ag-al.presente { background: var(--presente-tinte); border-color: var(--presente-borde); --tinta-2: var(--asis-tinta); --tinta-3: var(--asis-tinta); }
  html:root[data-diseno] .tel-agenda .ag-al.ausente { background: var(--ausente-tinte); border-color: var(--ausente-borde); --tinta-2: var(--asis-tinta); --tinta-3: var(--asis-tinta); }
  html:root[data-diseno] .tel-agenda .ag-al.ausente .bl-falta { background: var(--sup); color: var(--ausente-texto); box-shadow: inset 0 0 0 1px var(--ausente-borde); }
  html:root[data-diseno="selah"] .tel-agenda .ag-al.ausente .bl-falta { background: var(--ficha-base); }
  html:root[data-diseno] .tel-agenda .ag-al.otro { border-style: dashed; border-color: var(--presente); }
  html:root[data-diseno] .tel-agenda .ag-al.no-vigente .avatar { filter: grayscale(1); opacity: .7; }
  html:root[data-diseno] .tel-agenda .bl-repetido { background: var(--aviso-fondo); color: var(--aviso-texto); }
  html:root[data-diseno] .tel-agenda .bl-baja { background: var(--sup-3); color: var(--tinta-2); }

  /* Recepción (15 oct B · zona B): presente azul · ausente con motivo gris (los mismos de arriba) · sin motivo rojo ·
     «No contestó» ámbar punteado */
  html:root[data-diseno] .tel-agenda.recepcion .ag-al.ausente.motivo-falta { background: var(--peligro-fondo); border-color: var(--peligro); box-shadow: inset 0 0 0 1px var(--peligro); }
  html:root[data-diseno] .tel-agenda.recepcion .ag-al.ausente.motivo-falta .bl-falta { background: var(--peligro); color: #fff; box-shadow: none; }
  html:root[data-diseno] .tel-agenda.recepcion .ag-al.ausente.motivo-nc { background: var(--aviso-fondo); border: 1.5px dashed var(--aviso); }
  html:root[data-diseno] .tel-agenda.recepcion .ag-al.ausente.motivo-nc .bl-falta { background: var(--sup); color: var(--aviso-texto); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aviso) 50%, transparent); }
  html:root[data-diseno="selah"] .tel-agenda.recepcion .ag-al.ausente.motivo-falta { background: color-mix(in srgb, var(--peligro) 16%, var(--ficha-base)); }
  html:root[data-diseno="selah"] .tel-agenda.recepcion .ag-al.ausente.motivo-nc { background: var(--sin-motivo-tinte); border-color: var(--sin-motivo); }
  html:root[data-diseno="selah"] .tel-agenda.recepcion .ag-al.ausente.motivo-nc .bl-falta { color: var(--sin-motivo-texto); }
  .tel-agenda.recepcion .marca-motivo { display: none; } /* la píldora «ausente» roja ya lo dice */

  /* clase sin asistencia: roja si ya pasó, ámbar si es hoy, gris si viene; sin clase creada: punteada */
  .tel-agenda .ag-clase.sin-asistencia.vencida { --tinta-3: var(--tinta-2); background: var(--alerta-tinte); border-color: var(--alerta-borde); box-shadow: 0 0 0 1px color-mix(in srgb, var(--peligro) 30%, transparent), var(--s-1); }
  .tel-agenda .ag-clase.sin-asistencia.hoy { background: var(--aviso-fondo); border-color: var(--aviso); }
  .tel-agenda .ag-clase.sin-asistencia.futura { background: var(--sup-2); border-style: dashed; border-color: var(--linea-2); box-shadow: none; }
  .tel-agenda .ag-clase.sin-registro { background: transparent; border: 1.5px dashed var(--linea-2); box-shadow: none; }
  .tel-agenda .ag-clase.validado { border-color: color-mix(in srgb, var(--ok) 40%, var(--linea)); }
  .tel-agenda .ag-alerta { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font: 700 14px/20px var(--f-ui); color: var(--tinta-3); }
  .tel-agenda .ag-alerta .ic { width: 16px; height: 16px; }
  .tel-agenda .sin-asistencia.vencida .ag-alerta { color: var(--peligro-texto); }
  .tel-agenda .sin-asistencia.hoy .ag-alerta { color: var(--aviso-texto); }
  html:root[data-diseno] .tel-agenda .ag-pasar { display: flex; width: 100%; height: 44px; min-height: 44px; margin: 0 0 4px; justify-content: center; gap: 6px; font-size: 15px; }

  /* registros: la tarjeta entera con el color de su registro */
  .tel-agenda .ag-registro { --rg: var(--linea-2); --rg-fondo: var(--sup-2); --rg-texto: var(--tinta-3); border-color: color-mix(in srgb, var(--rg) 60%, transparent); background: var(--rg-fondo); }
  .tel-agenda .ag-registro[data-registro-estado="completo"] { --rg: var(--ok); --rg-fondo: var(--ok-fondo); --rg-texto: var(--ok-texto); }
  .tel-agenda .ag-registro[data-registro-estado="validado"] { --rg: var(--acento); --rg-fondo: var(--acento-suave); --rg-texto: var(--acento-texto); }
  .tel-agenda .ag-registro[data-registro-estado="incompleto"] { --rg: var(--aviso); --rg-fondo: var(--aviso-fondo); --rg-texto: var(--aviso-texto); }
  .tel-agenda .ag-registro[data-registro-estado="sin-hacer"] { --tinta-3: var(--tinta-2); --rg: var(--peligro); --rg-fondo: var(--alerta-tinte); --rg-texto: var(--peligro-texto); border-color: var(--alerta-borde); box-shadow: 0 0 0 1px color-mix(in srgb, var(--peligro) 30%, transparent), var(--s-1); }
  .tel-agenda .ag-registro[data-registro-estado="por-venir"] { box-shadow: none; }
  .tel-agenda .ag-reg-estado { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font: 700 14px/20px var(--f-ui); color: var(--rg-texto); }
  .tel-agenda .ag-reg-estado .ic { width: 16px; height: 16px; }
  .tel-agenda .ag-reg-asis { margin: 6px 0 2px; font: 500 13px/18px var(--f-ui); color: var(--tinta-2); }
  html:root[data-diseno] .tel-agenda .bl-reg-faltas { display: flex; flex-wrap: wrap; gap: 6px; }
  html:root[data-diseno] .tel-agenda .bl-reg-faltas .cf-casilla { height: 24px; padding: 0 8px; font-size: 12px; line-height: 22px; }

  /* Administración › Horario: las marcas de las capas sobre la fila (las mismas del escritorio) */
  html:root[data-diseno] .tel-agenda .ag-al.movido { border-style: dashed; border-color: var(--acento); background: var(--acento-suave); }
  html:root[data-diseno] .tel-agenda .ag-al.otroins:not(.movido) { box-shadow: inset 3px 0 0 var(--aviso); }
  html:root[data-diseno] .tel-agenda .ag-al:is(.pn-todo, .f-venc) { background: var(--peligro-fondo); border-color: color-mix(in srgb, var(--peligro) 40%, transparent); }
  html:root[data-diseno] .tel-agenda .ag-al:is(.pn-algo, .f-porc, .f-debe) { background: var(--aviso-fondo); border-color: color-mix(in srgb, var(--aviso) 50%, transparent); }
  html:root[data-diseno] .tel-agenda .ag-al:is(.pn-todo, .f-venc) .ag-al-det { color: var(--peligro-texto); }
  html:root[data-diseno] .tel-agenda .ag-al:is(.pn-algo, .f-porc, .f-debe) .ag-al-det { color: var(--aviso-texto); }
  html:root[data-diseno] .tel-agenda .ag-al.fuera { border-color: var(--aviso); }
  html:root[data-diseno] .tel-agenda .ag-al.sindato { border-style: dashed; border-color: var(--linea-2); }
  .tel-agenda .ag-al .bl-marcas { display: inline-flex; align-items: center; gap: 4px; flex: none; }
  .tel-agenda .ag-al .bl-saldo { display: none; }
  .tel-agenda .ag-al .pn-check { width: 16px; height: 16px; color: var(--ok); }
  .tel-agenda .ag-salen { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
  .tel-agenda .ag-sale { display: flex; gap: 6px; min-width: 0; margin: 0; padding: 6px 8px; border: 1px dashed var(--acento); border-radius: 12px; font: 500 13px/18px var(--f-ui); color: var(--tinta-3); }
  .tel-agenda .ag-sale .bl-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tel-agenda .ag-sale-a { flex: none; color: var(--acento-texto); }
  .tel-agenda .ag-clase.vacia { padding-bottom: 4px; }

  /* la bandeja «Cambios pendientes» (Administración): fija encima de las pestañas (movil.css), en dos filas: el título con su
     cifra y, debajo, deshacer y rehacer, «Deshacer todo» y «Aplicar» a lo ancho; la lista abierta se desliza dentro */
  html:root[data-diseno] .tel-agenda > .bandeja-cambios { z-index: 30; left: 12px; right: 12px; border-radius: var(--r-xl); }
  /* Selah: el vidrio de la bandeja dejaba leer las tarjetas de debajo; en el teléfono va casi opaca */
  html:root[data-diseno="selah"] .tel-agenda > .bandeja-cambios { background: color-mix(in srgb, var(--sup) 96%, transparent); }
  html:root[data-diseno] .tel-agenda > .bandeja-cambios .bc-cab { flex-wrap: wrap; row-gap: 6px; padding: 6px 10px 10px; }
  html:root[data-diseno] .tel-agenda > .bandeja-cambios:not(.pend) .bc-cab { padding-bottom: 6px; }
  html:root[data-diseno] .tel-agenda > .bandeja-cambios .bc-toggle { height: 44px; font-size: 15px; }
  html:root[data-diseno] .tel-agenda > .bandeja-cambios .bc-n { font-size: 12px; }
  html:root[data-diseno] .tel-agenda > .bandeja-cambios .bc-resumen { font-size: 13px; }
  html:root[data-diseno] .tel-agenda > .bandeja-cambios .bc-acciones { flex: 1 1 100%; flex-wrap: wrap; gap: 8px; }
  html:root[data-diseno] .tel-agenda > .bandeja-cambios .bc-acciones .boton { height: 44px; min-height: 44px; font-size: 14px; }
  html:root[data-diseno] .tel-agenda > .bandeja-cambios .bc-paso { width: 44px; font-size: 18px; }
  html:root[data-diseno] .tel-agenda > .bandeja-cambios [data-accion="deshacer-todo"] { flex: 1 1 auto; justify-content: center; }
  html:root[data-diseno] .tel-agenda > .bandeja-cambios :is([data-accion="aplicar"], .bc-airtable) { flex: 1 1 100%; justify-content: center; }
  html:root[data-diseno] .tel-agenda > .bandeja-cambios .bc-airtable { order: -1; white-space: normal; }
  html:root[data-diseno] .tel-agenda > .bandeja-cambios .bc-cuerpo { max-height: 34dvh; }
  html:root[data-diseno] .tel-agenda > .bandeja-cambios .bc-des { min-height: 44px; padding: 0 10px; font-size: 14px; }

  /* ── la hoja «Filtros y leyenda» y la sopa (popovers: hoja desde abajo de movil.css) ── */
  .popover.popover-tel { padding-top: 26px !important; }
  .popover-tel .ag-hoja { display: flex; flex-direction: column; gap: 14px; }
  .popover-tel .ag-hoja-t { margin: 0; font: 700 17px/22px var(--f-ui); color: var(--tinta); }
  .popover-tel .ag-hoja-fila {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid var(--linea);
    border-radius: var(--r-l); background: var(--sup); font: 600 15px/20px var(--f-ui); color: var(--tinta); text-align: left;
  }
  html:root[data-diseno] .popover-tel .ag-hoja-fila { justify-content: flex-start; }
  .popover-tel .ag-hoja-fila > span:not(.ic) { flex: 1 1 auto; text-align: left; }
  .popover-tel .ag-hoja-fila .ic { flex: none; width: 20px; height: 20px; color: var(--tinta-3); }
  /* la leyenda, en una lista que se lee (sin cortes: en el teléfono no hay línea de 12 px) */
  .popover-tel .ag-hoja-ley { display: flex; flex-direction: column; gap: 10px; }
  .popover-tel .ag-hoja-ley .hc-leyenda { display: flex; flex-wrap: wrap; gap: 8px 14px; overflow: visible; white-space: normal; font: 500 14px/20px var(--f-ui); color: var(--tinta-2); }
  .popover-tel .ag-hoja-ley .ley-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 14px; }
  .popover-tel .ag-hoja-ley :is(.bl-falta, .bl-repetido, .bl-baja) { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pildora); font: 700 12px/22px var(--f-ui); }
  .popover-tel .ag-hoja-ley .ley-nota { font-size: 13px; white-space: normal; }
  .popover-tel .hc-ocultos, .popover-tel .hc-plegadas { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; width: 100%; padding: 0 12px; border-radius: var(--r-l); font: 500 14px/20px var(--f-ui); }
  .popover-tel .hc-ocultos span { font-weight: 700; color: var(--acento-texto); }
  /* capas, Estados y Más (Administración): una fila por capa, de 48 px */
  .popover-tel .horario-capas { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  html:root[data-diseno] .popover-tel .horario-capas .capas { display: flex; flex-direction: column; gap: 6px; height: auto; padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .popover-tel .horario-capas .capas-ic { display: none; }
  html:root[data-diseno] .popover-tel .horario-capas .capa {
    display: flex; align-items: center; gap: 10px; width: 100%; height: 48px; min-height: 48px; padding: 0 12px; border: 1px solid var(--linea);
    border-radius: var(--r-l); background: var(--sup); font: 600 15px/20px var(--f-ui); color: var(--tinta); cursor: pointer;
  }
  html:root[data-diseno] .popover-tel .horario-capas .capa > span:not(.ic) { display: inline !important; }
  html:root[data-diseno] .popover-tel .horario-capas .capa .ic { display: inline-grid !important; width: 20px; height: 20px; color: var(--tinta-3); }
  html:root[data-diseno] .popover-tel .horario-capas .capa.activa { border-color: var(--acento); background: var(--acento-suave); color: var(--acento-texto); }
  html:root[data-diseno] .popover-tel .horario-capas .capa.activa .ic { color: var(--acento-texto); }
  html:root[data-diseno] .popover-tel .horario-capas > .boton {
    display: flex; width: 100%; height: 48px; min-height: 48px; justify-content: flex-start; gap: 10px; padding: 0 12px; font-size: 15px;
  }
  html:root[data-diseno] .popover-tel .horario-capas > .boton > span:not(.ic) { display: inline !important; flex: 1 1 auto; text-align: left; }
  html:root[data-diseno] .popover-tel .horario-capas > .boton .ic { display: inline-grid !important; width: 20px; height: 20px; color: var(--tinta-3); }
  html:root[data-diseno] .popover-tel .horario-capas > .boton { border: 1px solid var(--linea); border-radius: var(--r-l); background: var(--sup); color: var(--tinta); font-weight: 600; box-shadow: none; }
  /* mandos de la capa (Filtros de Pendientes, mes y Saldos de Finanzas, Todo el día) */
  .popover-tel .hp-mandos, .popover-tel .hc-fin-mandos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 100%; }
  html:root[data-diseno] .popover-tel :is(.hp-filtros, .hp-restablecer, .hc-qb, .boton-todo-dia) { height: 44px; min-height: 44px; padding: 0 14px; font-size: 14px; }
  .popover-tel .hp-resumen { font: 500 13px/18px var(--f-ui); color: var(--tinta-2); white-space: normal; }
  html:root[data-diseno] .popover-tel .hc-mes { height: 44px; min-height: 44px; font-size: 16px; }
  .popover-tel .hc-qb-dice { font: 500 13px/18px var(--f-ui); color: var(--tinta-3); }
  html:root[data-diseno] .popover-tel .hp-panel { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 12px; }
  html:root[data-diseno] .popover-tel :is(.hp-cat-t, .hp-item) { height: 44px; min-height: 44px; font-size: 14px; }
  html:root[data-diseno] .popover-tel .hp-item { padding: 0 12px; }
  html:root[data-diseno] .popover-tel .hp-items { gap: 6px; }
  /* Relaciones: la lista de familias, a lo ancho */
  html:root[data-diseno] .popover-tel .hc-rel { margin: 0; }
  html:root[data-diseno] .popover-tel .hc-rel > summary { min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 14px; }
  html:root[data-diseno] .popover-tel .hc-rel-cuerpo { display: flex; flex-direction: column; gap: 12px; }
  html:root[data-diseno] .popover-tel .hc-ir { min-height: 44px; font-size: 14px; }

  /* la sopa en su hoja: buscador de 16 px, filas de 48 */
  html:root[data-diseno] .popover-tel-sopa .sopa {
    position: static; display: flex; flex-direction: column; gap: 10px; width: auto; max-width: none; height: auto; max-height: none; margin: 0; padding: 0;
    border: 0; border-radius: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none;
  }
  html:root[data-diseno] .popover-tel-sopa .sopa-cab { display: flex; align-items: center; gap: 8px; padding: 0; }
  html:root[data-diseno] .popover-tel-sopa .sopa-cab h2 { margin: 0; font: 700 17px/22px var(--f-ui); }
  html:root[data-diseno] .popover-tel-sopa .sopa-cab .boton-icono { width: 44px; height: 44px; margin-left: auto; }
  html:root[data-diseno] .popover-tel-sopa .sopa-busqueda { height: auto; min-height: 46px; }
  html:root[data-diseno] .popover-tel-sopa .sopa-buscar { height: 44px; min-height: 44px; font-size: 16px; }
  html:root[data-diseno] .popover-tel-sopa .sopa-ayuda { margin: 0; font: 500 13px/18px var(--f-ui); color: var(--tinta-3); }
  html:root[data-diseno] .popover-tel-sopa .sopa-lista { max-height: none; overflow: visible; padding: 0; }
  html:root[data-diseno] .popover-tel-sopa .sopa-alumno { min-height: 48px; padding: 6px 8px; gap: 10px; }
  html:root[data-diseno] .popover-tel-sopa .sopa-alumno .sa-texto b { font-size: 15px; }
  html:root[data-diseno] .popover-tel-sopa .sopa-alumno .sa-texto small { font-size: 12px; }
  html:root[data-diseno] .popover-tel-sopa .sopa-seccion { font-size: 13px; }
  html:root[data-diseno] .popover-tel-sopa :is(.sopa-filtro, .sopa-inst, .sopa-solo) { min-height: 44px; font-size: 14px; }
  html:root[data-diseno] .popover-tel-sopa .sopa-inst { font-size: 16px; }

  /* los menús de grupos y clases (Mover a…, profesor del grupo, Cambiar de clase, Asistencia nueva): una columna, una fila
     por grupo; la lista entera se desliza dentro de la hoja */
  html:root[data-diseno] .menu:is(.menu-prof, .menu-mover, .menu-destinos) { display: block; grid-template-columns: none; max-width: none; }
  html:root[data-diseno] .menu:is(.menu-prof, .menu-mover, .menu-destinos) .menu-item { width: 100%; }
  html:root[data-diseno] .menu:is(.menu-prof, .menu-mover, .menu-destinos) .menu-item span { white-space: normal; text-align: left; }
}
@media (max-width: 760px) {
  /* el calendario de fechas con clases (hoja): días de 44 px */
  html:root[data-diseno] .popover-tel-calendario .cal-rejilla { row-gap: 2px; }
  html:root[data-diseno] .popover-tel-calendario .cal-dia { height: 44px; min-height: 44px; font-size: 15px; }
  html:root[data-diseno] .popover-tel-calendario .cal-sem { font-size: 12px; }
}