/* 16 oct · tel-admin.css · teléfono rediseñado (docs/TELEFONO-16OCT.md). Solo reglas dentro de @media (max-width: 760px). */
/* Zona: Administración (Alumnos, Admisiones, Pendientes, ficha del alumno) y Finanzas (Generador, Emitidas, Saldos).
   Las dos apariencias: cada selector empieza por html:root[data-diseno] (por encima de las hojas de área y de las de
   Selah, que empiezan por :root[data-diseno="selah"]); lo propio de Selah, por html:root[data-diseno="selah"].
   Medidas: título de pantalla 22/700, sección 17/700, texto 15, secundario 13, nunca menos de 12; lo que se toca 44 px;
   margen lateral 16; tarjetas a lo ancho con 10 px entre ellas; hojas desde abajo con botones de 48 px.
   Marcado propio del teléfono (ramas enTel() de admin-tel.js): .kb-etapas y .kbt-mover (Admisiones), .fc-tel y
   .fc-volver (ficha), .tel-hoja (hojas de filtros y «Mover a…»), .pd-boton-filtros (Pendientes). */
@media (max-width: 760px) {
  /* ═════ 0 · cabecera común: título 22, cifra en gris 13, controles a lo ancho ═════ */
  html:root[data-diseno] :is(.vista-alumnos, .vista-admisiones, .vista-pendientes, .vista-fin) :is(.vista-cab, .adm-cab) h1 {
    font: 700 22px/28px var(--f-ui); letter-spacing: -.01em; color: var(--tinta);
  }
  html:root[data-diseno] :is(.vista-alumnos, .vista-admisiones, .vista-pendientes, .vista-fin) :is(.vista-cab, .adm-cab) :is(.adm-total, .sub) {
    font: 400 13px/18px var(--f-ui); color: var(--tinta-3);
  }
  html:root[data-diseno] .contenido > .vista:is(.vista-alumnos, .vista-admisiones, .vista-pendientes, .vista-fin) { gap: 12px; }
  html:root[data-diseno] :is(.vista-alumnos, .vista-admisiones, .vista-fin) .vista-cab { height: auto; min-height: 0; flex-wrap: wrap; row-gap: 10px; }
  html:root[data-diseno] :is(.vista-alumnos, .vista-admisiones, .vista-fin) .vista-cab-titulo {
    display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 10px; row-gap: 0; min-width: 0; flex: 1 1 100%;
  }
  html:root[data-diseno] :is(.vista-alumnos, .vista-admisiones) .vista-cab-acciones {
    flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; margin-left: 0;
  }
  html:root[data-diseno] :is(.vista-alumnos, .vista-admisiones, .vista-pendientes) .adm-buscador { min-width: 0; height: 44px; min-height: 44px; }
  html:root[data-diseno] :is(.vista-alumnos, .vista-admisiones, .vista-pendientes) .adm-buscar { width: 100%; min-width: 0; height: 44px; min-height: 44px; }
  /* conmutadores de dos (Kanban | Hoja, Por alumno | Por pendiente) a lo ancho, 44 px */
  html:root[data-diseno] :is(.vista-admisiones, .vista-pendientes) .adm-vistas {
    flex: 1 1 100%; display: grid; grid-template-columns: 1fr 1fr; min-height: 44px; width: 100%;
  }
  html:root[data-diseno] :is(.vista-admisiones, .vista-pendientes) .adm-vistas > button { justify-content: center; min-height: 44px; height: auto; font-size: 15px; }

  /* ═════ 1 · hojas desde abajo de esta zona (filtros, «Mover a…»): cabecera, cuerpo y pie de botones de 48 px ═════ */
  html:root[data-diseno] .popover.tel-hoja { display: flex; flex-direction: column; gap: 0; padding: 22px 16px calc(12px + var(--seg-abajo)) !important; }
  html:root[data-diseno] .tel-hoja .tel-hoja-cab { display: grid; gap: 2px; padding: 4px 4px 12px; }
  html:root[data-diseno] .tel-hoja .tel-hoja-titulo { font: 700 17px/24px var(--f-ui); color: var(--tinta); }
  html:root[data-diseno] .tel-hoja .tel-hoja-sub { font: 400 13px/18px var(--f-ui); color: var(--tinta-3); }
  html:root[data-diseno] .tel-hoja .tel-hoja-cuerpo { display: grid; gap: 12px; min-width: 0; }
  html:root[data-diseno] .tel-hoja .tel-hoja-pie {
    position: sticky; bottom: calc(-12px - var(--seg-abajo)); z-index: 1; display: flex; gap: 8px;
    margin: 14px -16px calc(-12px - var(--seg-abajo)); padding: 12px 16px calc(12px + var(--seg-abajo));
    background: var(--sup); border-top: 1px solid var(--linea);
  }
  html:root[data-diseno] .tel-hoja .tel-hoja-pie > .boton { flex: 1 1 0; min-width: 0; min-height: 48px; justify-content: center; font-size: 15px; }
  html:root[data-diseno] .tel-hoja .tel-hoja-pie > .boton[hidden] { display: none; }

  /* ═════ 2 · Alumnos: fichas compactas a lo ancho; filtros en su hoja ═════ */
  html:root[data-diseno] .vista-alumnos .vista-cab-acciones { flex-wrap: nowrap; }
  html:root[data-diseno] .vista-alumnos .adm-buscador { flex: 1 1 auto; width: auto; }
  html:root[data-diseno] .vista-alumnos .alu-boton-filtros { flex: none; width: 44px; height: 44px; min-height: 44px; }
  html:root[data-diseno] .vista-alumnos .alu-rejilla { gap: 10px; }
  html:root[data-diseno] .vista-alumnos .alu-tarjeta {
    grid-template-columns: 40px minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 8px; min-height: 64px; padding: 12px 14px; border-radius: 16px;
  }
  html:root[data-diseno] .vista-alumnos .alu-cara { width: 40px !important; height: 40px !important; font-size: 15px !important; align-self: start; }
  html:root[data-diseno] .vista-alumnos .alu-texto { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0; row-gap: 1px; }
  html:root[data-diseno] .vista-alumnos .alu-nombre { flex: 1 1 100%; font: 600 15px/20px var(--f-ui); letter-spacing: -.005em; }
  html:root[data-diseno] .vista-alumnos .alu-estado { flex: none; margin: 0; font: 500 13px/18px var(--f-ui); color: var(--tinta-3); }
  html:root[data-diseno] .vista-alumnos .alu-estado::after { content: '·'; margin: 0 6px; color: var(--tinta-4); }
  html:root[data-diseno] .vista-alumnos .alu-grupo { flex: 1 1 0; min-width: 0; margin: 0; font: 500 13px/18px var(--f-ui); color: var(--tinta-2); }
  html:root[data-diseno] .vista-alumnos .alu-mas { flex: 1 1 100%; font: 400 13px/18px var(--f-ui); color: var(--tinta-3); }
  html:root[data-diseno] .vista-alumnos .alu-faltas { grid-column: 2 / -1; flex-wrap: wrap; gap: 6px; }
  html:root[data-diseno] .vista-alumnos .alu-faltas .cf-casilla { font-size: 13px; }
  /* la hoja de filtros: el panel sin su caja, cada grupo con su nombre encima y píldoras de 44 px */
  html:root[data-diseno] .alu-hoja .alu-filtros { display: grid; gap: 16px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html:root[data-diseno] .alu-hoja .alu-filtro { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  html:root[data-diseno] .alu-hoja .alu-filtro-titulo { padding: 0; font: 600 13px/18px var(--f-ui); color: var(--tinta-3); }
  html:root[data-diseno] .alu-hoja .alu-chips { gap: 8px; }
  html:root[data-diseno] .alu-hoja .alu-chip { height: 44px; padding: 0 16px; font-size: 15px; }
  html:root[data-diseno] .alu-hoja .alu-separador { display: none; }
  html:root[data-diseno] .vista-alumnos .alu-resumen .alu-restablecer { min-height: 44px; }

  /* ═════ 3 · Admisiones ═════ */
  html:root[data-diseno] .vista-admisiones .adm-buscador { flex: 1 1 100%; width: 100%; }
  /* Por atender (Selah): la cabecera en una línea; tarjetas que se deslizan con imán: cara, nombre y etapa arriba,
     la acción a lo ancho debajo (nada apretado al lado del botón) */
  html:root[data-diseno] .vista-admisiones .hoy-cab { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; margin: 0; padding: 0; }
  html:root[data-diseno] .vista-admisiones .hoy-cab .voz { flex: none; font: 700 17px/24px var(--f-ui); font-style: normal; white-space: nowrap; }
  /* la línea gris de «Por atender» se parte en dos si no cabe (antes: «mayor espera prime…» cortado) */
  html:root[data-diseno] .vista-admisiones .hoy-sub { flex: 1 1 auto; min-width: 0; font: 400 13px/18px var(--f-ui); white-space: normal; overflow: visible; text-overflow: clip; text-align: left; }
  html:root[data-diseno] .vista-admisiones .hoy-chev { flex: none; }
  html:root[data-diseno] .vista-admisiones .hoy-tarjeta {
    display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 10px; padding: 12px 14px; border-radius: 16px;
  }
  html:root[data-diseno] .vista-admisiones .hoy-cara { width: 40px !important; height: 40px !important; font-size: 16px !important; }
  html:root[data-diseno] .vista-admisiones .hoy-texto { display: grid; gap: 1px; min-width: 0; }
  html:root[data-diseno] .vista-admisiones .hoy-nombre { font: 700 15px/20px var(--f-ui); letter-spacing: -.005em; }
  html:root[data-diseno] .vista-admisiones .hoy-meta { align-items: center; white-space: nowrap; font: 500 13px/18px var(--f-ui); }
  html:root[data-diseno] .vista-admisiones .hoy-meta > span:last-child { overflow: hidden; text-overflow: ellipsis; }
  html:root[data-diseno] .vista-admisiones .hoy-meta .punto-etapa { margin-top: 0; }
  html:root[data-diseno] .vista-admisiones .hoy-paso { display: none; } /* el paso ya es el botón */
  html:root[data-diseno] .vista-admisiones .hoy-accion { grid-column: 1 / -1; width: 100%; height: 44px; min-height: 44px; justify-content: center; font-size: 15px; }

  /* Kanban: la fila de etapas con su número (se desliza con imán) y, debajo, una etapa en tarjetas a lo ancho */
  html:root[data-diseno] .kb-tel-marco { display: grid; gap: 12px; min-width: 0; }
  html:root[data-diseno] .kb-etapas {
    display: flex; gap: 8px; min-width: 0; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain;
    margin: 0 calc(-1 * var(--marco-lado, 16px)); padding: 2px var(--marco-lado, 16px); scroll-padding-inline: var(--marco-lado, 16px);
  }
  html:root[data-diseno] .kb-etapas::-webkit-scrollbar { display: none; }
  html:root[data-diseno] .kb-etapa {
    flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; scroll-snap-align: start;
    border: 1px solid var(--linea-2); border-radius: var(--r-pildora); background: var(--sup); color: var(--tinta-2);
    font: 600 14px/1 var(--f-ui); white-space: nowrap; cursor: pointer;
  }
  html:root[data-diseno] .kb-etapa .kb-nombre {
    display: inline-flex; align-items: center; gap: 7px; height: auto; padding: 0; overflow: visible; border: 0; background: none; box-shadow: none;
    font: 600 14px/20px var(--f-ui); color: inherit;
  }
  html:root[data-diseno="selah"] .kb-etapa.activa .kb-nombre::before { box-shadow: 0 0 0 1.5px #fff; }
  html:root[data-diseno] .kb-etapa .kb-n {
    min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: inline-grid; place-items: center;
    font: 700 13px/1 var(--f-ui); font-variant-numeric: tabular-nums; color: var(--tinta-2); background: var(--sup-3);
  }
  html:root[data-diseno] .kb-etapa.activa { background: var(--acento); border-color: var(--acento); color: #fff; }
  html:root[data-diseno] .kb-etapa.activa .kb-n { color: var(--acento-texto); background: #fff; }
  html:root[data-diseno] .kb-etapa:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
  html:root[data-diseno] .kanban.kb-tel {
    display: block; overflow: visible; margin: 0; padding: 0; gap: 0; min-height: 0; height: auto; touch-action: pan-y;
    -webkit-mask-image: none; mask-image: none; scroll-snap-type: none;
  }
  html:root[data-diseno] .kanban.kb-tel > .kb-col { display: none; }
  html:root[data-diseno] .kanban.kb-tel > .kb-col.tel-visible {
    display: block; width: 100%; max-width: none; height: auto; min-height: 0; flex: none; margin: 0; padding: 0;
    background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html:root[data-diseno] .kanban.kb-tel .kb-cab { display: none; }
  html:root[data-diseno] .kanban.kb-tel .kb-lista {
    display: grid; gap: 10px; overflow: visible; max-height: none; height: auto; padding: 0; margin: 0; -webkit-mask-image: none; mask-image: none;
  }
  html:root[data-diseno] .kanban.kb-tel .kb-vacio { padding: 32px 16px; font-size: 15px; }
  /* la tarjeta: cara 40 · nombre e instrumento · «Mover a…» a la derecha; la etiqueta del paso debajo */
  html:root[data-diseno] .kanban.kb-tel .kb-tarjeta {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) 44px; align-items: center; column-gap: 12px; row-gap: 0;
    min-height: 64px; padding: 10px 6px 12px 14px; border-radius: 16px; cursor: pointer; touch-action: pan-y;
    background: var(--sup); border: 1px solid var(--linea); border-bottom: 1px solid var(--linea); box-shadow: var(--s-1);
  }
  html:root[data-diseno="selah"] .kanban.kb-tel .kb-tarjeta { background: var(--vidrio); border-color: var(--vidrio-borde); box-shadow: var(--vidrio-sombra); }
  html:root[data-diseno] .kanban.kb-tel .kb-tarjeta > .avatar { grid-column: 1; grid-row: 1; width: 40px !important; height: 40px !important; font-size: 14px !important; }
  html:root[data-diseno] .kanban.kb-tel .kbt-texto { grid-column: 2; grid-row: 1; align-self: center; display: grid; gap: 1px; justify-items: start; }
  html:root[data-diseno] .kanban.kb-tel .kbt-nombre { font: 600 15px/20px var(--f-ui); letter-spacing: -.005em; }
  html:root[data-diseno] .kanban.kb-tel .kbt-meta { font: 400 13px/18px var(--f-ui); color: var(--tinta-3); }
  html:root[data-diseno] .kanban.kb-tel .kbt-mover {
    grid-column: 3; grid-row: 1; justify-self: end; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
    border: 0; border-radius: 12px; background: transparent; color: var(--tinta-3); cursor: pointer;
  }
  html:root[data-diseno] .kanban.kb-tel .kbt-mover .ic { width: 20px; height: 20px; }
  html:root[data-diseno] .kanban.kb-tel .kbt-mover:active { background: var(--sup-3); }
  html:root[data-diseno] .kanban.kb-tel .kbt-paso {
    position: relative; grid-column: 2 / 4; grid-row: 2; justify-self: start; min-height: 32px; margin: 6px 0 0; padding: 6px 12px;
    align-items: center; white-space: normal; letter-spacing: 0; font: 600 13px/20px var(--f-ui); border-radius: 16px;
  }
  html:root[data-diseno] .kanban.kb-tel button.kbt-paso .ic { margin-top: 0; width: 14px; height: 14px; }
  /* zona de toque de 44 px alrededor de la etiqueta que se toca (abre el contacto o la ficha en su paso) */
  html:root[data-diseno] .kanban.kb-tel button.kbt-paso::after { content: ''; position: absolute; top: -6px; bottom: -6px; left: -4px; right: -4px; }
  html:root[data-diseno] .kanban.kb-tel .kbt-hoy { top: -9px; right: 52px; height: 18px; padding: 0 8px; font: 600 12px/18px var(--f-ui); }
  /* «Mover a…»: las etapas en filas de 52 px; la actual, apagada */
  html:root[data-diseno] .kb-mover .kb-mover-lista { display: grid; gap: 6px; }
  html:root[data-diseno] .kb-mover .kb-mover-op {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 14px;
    border: 1px solid var(--linea); border-radius: 14px; background: var(--sup); color: var(--tinta); cursor: pointer; text-align: left;
  }
  html:root[data-diseno] .kb-mover .kb-mover-op .kb-nombre { overflow: visible; font: 600 15px/20px var(--f-ui); color: var(--tinta); }
  html:root[data-diseno="selah"] .kb-mover .kb-mover-op .kb-nombre { height: 30px; }
  html:root[data-diseno] .kb-mover .kb-mover-op small { font: 400 13px/18px var(--f-ui); color: var(--tinta-3); white-space: nowrap; }
  html:root[data-diseno] .kb-mover .kb-mover-op:active:not(:disabled) { background: var(--acento-suave); border-color: var(--acento); }
  html:root[data-diseno] .kb-mover .kb-mover-op.actual { background: var(--sup-2); opacity: .7; cursor: default; }
  /* Hoja (lista agrupada por estado): las cabeceras de grupo se tocan (pliegan) con 44 px */
  html:root[data-diseno] .vista-admisiones .hj-tabla tr.hj-bloque { min-height: 44px; }
  html:root[data-diseno] .vista-admisiones .hj-plegar { min-height: 44px; height: auto; font-size: 15px; }
  html:root[data-diseno] .vista-admisiones .hj-plegar :is(.kb-nombre, small) { font-size: 13px; }
  /* preguntas de Admisiones y de la ficha (pasar de etapa, bloqueo, guardar antes de cerrar): hoja opaca (en Selah el
     vidrio dejaba ver lo de detrás) con los botones apilados a lo ancho, de 48 px; la acción principal cerca del pulgar */
  html:root[data-diseno] .pop.adm-pop:not(.en-linea) { max-width: none; background: var(--sup); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html:root[data-diseno] .pop.adm-pop:not(.en-linea) .pop-titulo { font: 700 17px/24px var(--f-ui); }
  html:root[data-diseno] .pop.adm-pop:not(.en-linea) .pop-texto { font: 400 15px/22px var(--f-ui); }
  html:root[data-diseno] .pop.adm-pop:not(.en-linea) .pop-lista { font: 400 15px/22px var(--f-ui); }
  html:root[data-diseno] .pop.adm-pop:not(.en-linea) .pop-botones { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
  html:root[data-diseno] .pop.adm-pop:not(.en-linea) .pop-botones > .espacio { display: none; }
  html:root[data-diseno] .pop.adm-pop:not(.en-linea) .pop-botones > .boton { width: 100%; min-height: 48px; height: auto; justify-content: center; font-size: 15px; }
  /* contacto del aspirante (hoja desde abajo): las dos opciones de 48 px */
  html:root[data-diseno] .popover-contacto .kbt-opcion { min-height: 48px; font-size: 15px; }
  html:root[data-diseno] .popover-contacto .kbt-linea { min-height: 44px; font-size: 15px; }
  html:root[data-diseno] .popover-contacto .kbt-contacto-tit { font: 700 17px/24px var(--f-ui); }

  /* ═════ 4 · ficha del alumno: una página entera, flecha de volver arriba a la izquierda, Guardar abajo ═════ */
  html:root[data-diseno] .ficha-velo { padding: 0; background: var(--fondo, var(--sup)); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html:root[data-diseno] .ficha-adm {
    width: 100%; height: 100dvh; min-height: 0; max-height: none; border: 0; border-radius: 0; box-shadow: none;
    padding-top: var(--seg-arriba); padding-left: var(--seg-izq); padding-right: var(--seg-der);
    font-size: 15px; line-height: 22px;
  }
  html:root[data-diseno] .ficha-adm .fc-cab { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 16px 6px 4px; }
  html:root[data-diseno] .ficha-adm .fc-cab [data-ficha="cerrar"] { position: static; flex: none; width: 44px; height: 44px; min-width: 44px; display: grid; place-items: center; }
  html:root[data-diseno] .ficha-adm .fc-cab [data-ficha="cerrar"] .ic { width: 22px; height: 22px; }
  html:root[data-diseno] .ficha-adm .fc-cab > .avatar { flex: none; width: 36px !important; height: 36px !important; font-size: 13px !important; }
  html:root[data-diseno] .ficha-adm .fc-quien { min-width: 0; flex: 1 1 auto; }
  html:root[data-diseno] .ficha-adm .fc-quien h2 { font: 700 17px/22px var(--f-ui); letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html:root[data-diseno] .ficha-adm .fc-sub { font: 400 13px/18px var(--f-ui); color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html:root[data-diseno] .ficha-adm .fc-sub .ic { width: 13px; height: 13px; }
  /* estado e instrumento (44 px) y «Pasar a …» */
  html:root[data-diseno] .ficha-adm .fc-barra { padding: 0 16px 10px; }
  html:root[data-diseno] .ficha-adm .fc-barra-fila > .fc-sel, html:root[data-diseno] .ficha-adm .fc-barra-fila select.fc-inst { height: 44px; min-height: 44px; }
  html:root[data-diseno] .ficha-adm .fc-barra-fila :is(.fc-inst-caja, .fc-inst-caja select) { min-height: 44px; }
  html:root[data-diseno] .ficha-adm .fc-barra-fila > .boton.fc-pasar { height: 44px; min-height: 44px; font-size: 15px; }
  html:root[data-diseno] .ficha-adm .fc-sel-valor { font-size: 15px; }
  /* etapas: una fila que se desliza, cada una con su nombre */
  html:root[data-diseno] .ficha-adm .fc-etapas {
    display: flex; flex-wrap: nowrap; gap: 0; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 0 8px;
  }
  html:root[data-diseno] .ficha-adm .fc-etapa { flex: none; min-height: 44px; padding: 0 10px; scroll-snap-align: start; font-size: 14px; }
  html:root[data-diseno] .ficha-adm .fc-etapa:not(.en-vista) .fc-etapa-nombre { display: inline; }
  html:root[data-diseno] .ficha-adm .fc-etapa-sep .ic { width: 12px; height: 12px; }
  /* pasos: una fila que se desliza con imán; el actual con su nombre, los demás con su número y su nombre corto */
  html:root[data-diseno] .ficha-adm .fc-pasos {
    flex: none; flex-direction: row; flex-wrap: nowrap; gap: 8px; padding: 8px 16px; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity; scrollbar-width: none; border-right: 0; border-bottom: 1px solid var(--linea);
  }
  html:root[data-diseno] .ficha-adm .fc-pasos::-webkit-scrollbar { display: none; }
  html:root[data-diseno] .ficha-adm .fc-paso { flex: none; width: auto; min-width: 44px; min-height: 44px; padding: 4px 14px 4px 6px; scroll-snap-align: start; align-items: center; }
  html:root[data-diseno] .ficha-adm .fc-paso .fc-paso-txt { display: grid; }
  html:root[data-diseno] .ficha-adm .fc-paso .fc-paso-res { display: none; }
  html:root[data-diseno] .ficha-adm .fc-paso-nombre { font: 600 14px/20px var(--f-ui); white-space: nowrap; }
  /* el editor: campos de 44 px, píldoras de 44 px */
  html:root[data-diseno] .ficha-adm :is(.fc-input, select.fc-input, .fc-campo input, .fc-campo select) { min-height: 44px; }
  html:root[data-diseno] .ficha-adm :is(.fc-chip, .fc-seg-op) { min-height: 44px; padding-inline: 14px; }
  html:root[data-diseno] .ficha-adm .fc-campo > :is(label, .fc-rotulo, span:first-child) { font-size: 13px; }
  /* el pie: «Guardar cambios» a lo ancho, al alcance del pulgar, sobre el indicador de inicio */
  html:root[data-diseno] .ficha-adm .fc-pie {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px calc(10px + var(--seg-abajo));
    border-top: 1px solid var(--linea); background: var(--sup);
  }
  html:root[data-diseno] .ficha-adm .fc-pie .fc-contador { flex: 1 1 100%; font: 400 13px/18px var(--f-ui); color: var(--tinta-3); }
  html:root[data-diseno] .ficha-adm .fc-pie .fc-contador:empty { display: none; }
  html:root[data-diseno] .ficha-adm .fc-pie > .espacio { display: none; }
  html:root[data-diseno] .ficha-adm .fc-pie > .boton { flex: 1 1 0; min-width: 0; min-height: 48px; justify-content: center; font-size: 15px; }
  html:root[data-diseno] .ficha-adm .fc-pie > .boton[hidden] { display: none; }
  html:root[data-diseno] .ficha-adm .fc-pie > [data-ficha="guardar"] { flex: 2 1 0; }

  /* ═════ 5 · Pendientes: cabecera compacta, filtros y Saldos en su hoja, filas de alumno con lo que falta tocable ═════ */
  html:root[data-diseno] .vista-pendientes .pd-cab { gap: 10px 8px; }
  html:root[data-diseno] .vista-pendientes .pd-cab :is(.pd-filtros, .pd-saldos, .pd-leyenda) { display: none; }
  /* «Filtros» sube a la línea del título (a la derecha); la búsqueda queda a lo ancho (antes, al lado de Filtros, su
     ejemplo se cortaba en «acudier») */
  html:root[data-diseno] .vista-pendientes .pd-cab h1 { order: 1; flex: 1 1 auto; align-self: center; }
  html:root[data-diseno] .vista-pendientes .pd-cab .adm-total { flex: 1 1 100%; order: 3; white-space: normal; margin-top: -6px; }
  html:root[data-diseno] .vista-pendientes .pd-cab .adm-vistas { order: 4; }
  html:root[data-diseno] .vista-pendientes .pd-cab .adm-buscador { order: 5; flex: 1 1 100%; width: 100%; }
  html:root[data-diseno] .vista-pendientes .pd-cab .pd-boton-filtros {
    order: 2; flex: none; align-self: center; position: relative; display: inline-flex; align-items: center; gap: 6px; height: 44px; min-height: 44px; padding: 0 14px; margin-left: auto; font-size: 15px;
  }
  html:root[data-diseno] .vista-pendientes .pd-boton-filtros .ic { width: 18px; height: 18px; }
  html:root[data-diseno] .pd-filtros-n {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font: 700 12px/20px var(--f-ui); text-align: center; color: #fff; background: var(--acento);
  }
  html:root[data-diseno] .pd-filtros-n[hidden] { display: none; }
  /* la hoja: los filtros como filas a lo ancho (nombre a la izquierda, número a la derecha) y Saldos con su interruptor */
  html:root[data-diseno] .pd-hoja-filtros .pd-filtros { display: grid; gap: 8px; }
  html:root[data-diseno] .pd-hoja-filtros .pd-cats { display: grid; gap: 8px; overflow: visible; margin: 0; padding: 0; -webkit-mask-image: none; mask-image: none; }
  html:root[data-diseno] .pd-hoja-filtros :is(.pd-cat, .pd-todos) {
    display: flex; align-items: center; gap: 10px; width: 100%; height: auto; min-height: 48px; padding: 0 14px; border-radius: 14px; font-size: 15px;
  }
  html:root[data-diseno] .pd-hoja-filtros :is(.pd-cat, .pd-todos) > span:not(.ic) { flex: 1 1 auto; text-align: left; }
  html:root[data-diseno] .pd-hoja-filtros :is(.pd-cat, .pd-todos) > b { font-size: 15px; }
  html:root[data-diseno] .pd-hoja-filtros .pd-leyenda { display: none; }
  html:root[data-diseno] .pd-hoja-filtros .pd-hoja-saldos { padding-top: 8px; border-top: 1px solid var(--linea); }
  html:root[data-diseno] .pd-hoja-filtros .pd-saldos {
    display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 0 14px; margin: 0; font-size: 15px;
  }
  /* filas: el nombre (44 px, abre lo de su alumno) y debajo lo que falta, cada palabra una píldora de 44 px */
  html:root[data-diseno] .vista-pendientes .pd-hoja .pdh-fila > .pdh-nombre { min-height: 44px; align-items: center; }
  html:root[data-diseno] .vista-pendientes .pdh-nombre b { font: 600 15px/20px var(--f-ui); }
  html:root[data-diseno] .vista-pendientes .pdh-nombre .pd-estado { font: 400 13px/18px var(--f-ui); }
  html:root[data-diseno] .vista-pendientes .pdh-fila > .pdh-c:is([data-estado="falta"], [data-estado="sin-campo"]) { min-height: 44px; padding: 0 14px; font-size: 14px; }
  html:root[data-diseno] .vista-pendientes .pd-clientes .pdc-cab { min-height: 48px; font-size: 15px; }
  html:root[data-diseno] .vista-pendientes .pdc-fila { min-height: 48px; }
  /* Por pendiente: cada alumno en una fila de 44 px */
  html:root[data-diseno] .vista-pendientes .pdg-fila { min-height: 44px; font-size: 15px; }
  html:root[data-diseno] .vista-pendientes .pd-grupo h3 { font: 700 15px/20px var(--f-ui); }
  html:root[data-diseno] .vista-pendientes .pd-franja-titulo { font: 700 17px/24px var(--f-ui); }

  /* ═════ 6 · Finanzas ═════ */
  html:root[data-diseno] .vista-fin small, html:root[data-diseno] .popover:is(.fi-popover, .fi-popover-nf) small { font-size: 12.5px; }
  /* hojas de Finanzas (nueva factura para una familia, alumnos que se añaden o se quitan): filas y campos de 44 px */
  html:root[data-diseno] .popover:is(.fi-popover, .fi-popover-nf) :is(input, select, .fi-opcion, .fi-pop-fila, .boton, button) { min-height: 44px; }
  html:root[data-diseno] .popover:is(.fi-popover, .fi-popover-nf) :is(input, .fi-opcion, .fi-pop-fila) { font-size: 15px; }
  html:root[data-diseno] .vista-fin .fi-cab { row-gap: 10px; }
  html:root[data-diseno] .vista-fin .fi-cab .vista-cab-acciones { flex: 1 1 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; min-width: 0; }
  /* 17 oct · Android 360 px: «Todas 38 · Por exportar 1 · Exportadas 37» pedía 338 px y ensanchaba la columna (el mes y el
     filtro salían 10 px por la derecha): la columna no pasa del ancho de la pantalla y, por debajo de 370 px, los tres
     botones ceden su relleno */
  html:root[data-diseno] .vista-fin .fi-filtro-emitidas { width: 100%; min-width: 0; }
  html:root[data-diseno] .vista-fin .fi-filtro-emitidas > button { flex: 1 1 auto; min-width: 0; }
  @media (max-width: 370px) {
    html:root[data-diseno] .vista-fin .fi-filtro-emitidas > button { padding-inline: 6px; }
  }
  html:root[data-diseno] .vista-fin .fi-cab .vista-cab-acciones:empty { display: none; }
  /* mes: flechas de 44 px a los lados del nombre */
  html:root[data-diseno] .vista-fin .fi-mes { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 44px; width: 100%; }
  html:root[data-diseno] .vista-fin .fi-mes > .boton-icono { width: 44px; height: 44px; min-width: 44px; flex: none; }
  /* el nombre del mes cede su ancho mínimo de escritorio (128 px): con «Mes en curso», la caja salía de la tarjeta */
  html:root[data-diseno] .vista-fin .fi-mes > b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: center; font: 600 15px/20px var(--f-ui); }
  /* «Mes en curso» baja a su propia línea dentro de la caja (al lado, el nombre del mes quedaba en «Noviembre 20…») */
  html:root[data-diseno] .vista-fin .fi-mes { height: auto; min-width: 0; max-width: 100%; flex-wrap: wrap; row-gap: 0; }
  html:root[data-diseno] .vista-fin .fi-mes .fi-mes-hoy {
    order: 3; flex: 1 1 100%; min-height: 44px; margin: 0; padding: 0 8px; border-top: 1px solid var(--linea); border-radius: 0; font-size: 15px; white-space: nowrap;
  }
  html:root[data-diseno] .vista-fin :is(.segmentado, .conmutador) > button { min-height: 44px; }
  /* Generador: los bloques uno debajo del otro, del ancho de la pantalla */
  html:root[data-diseno] .vista-fin .fg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: 100%; min-width: 0; margin: 0; padding: 0 0 8px; overflow: visible; }
  html:root[data-diseno] .vista-fin :is(.fg-izq, .fg-der, .fg-der-cuerpo) { overflow: visible; max-height: none; }
  /* cifras de la vista previa: 22 px, que caben las tres en una línea (el total con su importe entero) */
  html:root[data-diseno] .vista-fin :is(.fg-cifras, .fg-hecho-cifras) { display: flex; flex-wrap: wrap; gap: 8px 22px; }
  html:root[data-diseno] .vista-fin .fg-cifra b, html:root[data-diseno] .vista-fin .fg-cifra-total b, html:root[data-diseno] .vista-fin .fg-hecho-cifras .fg-cifra b { font-size: 22px; line-height: 28px; }
  html:root[data-diseno] .vista-fin .fi-cifra b { font-size: 17px; line-height: 24px; }
  html:root[data-diseno] .vista-fin .fi-cifras-sec .fi-cifra b { font-size: 17px; line-height: 24px; }
  html:root[data-diseno] .vista-fin :is(.fg-cifra, .fi-cifra) > :is(span, small) { font-size: 13px; }
  html:root[data-diseno] .vista-fin :is(.fg-izq, .fg-der) { width: auto; min-width: 0; max-width: 100%; margin: 0; }
  html:root[data-diseno] .vista-fin .fg-titulo { font: 700 17px/24px var(--f-ui); }
  html:root[data-diseno] .vista-fin :is(.fg-input, .fi-input) { min-height: 44px; }
  html:root[data-diseno] .vista-fin .fg-rotulo { font-size: 13px; }
  /* plegables y enlaces del generador: zona de toque de 44 px */
  html:root[data-diseno] .vista-fin summary { min-height: 44px; display: flex; align-items: center; }
  html:root[data-diseno] .vista-fin .fg-enlace { position: relative; min-height: 44px; display: inline-flex; align-items: center; }
  /* Saldos: la cifra protagonista a 34 px como mucho */
  html:root[data-diseno] .vista-fin .fi-por-cobrar b { font-size: 34px; line-height: 38px; letter-spacing: -.01em; }
  html:root[data-diseno] .vista-fin .fi-saldos small, html:root[data-diseno] .vista-fin .fi-deben-n, html:root[data-diseno] .vista-fin .fi-aldia summary small { font-size: 13px; }
  html:root[data-diseno] .vista-fin .fi-deben-cab h2 { font: 700 17px/24px var(--f-ui); }
  html:root[data-diseno] .vista-fin .fi-aldia summary { min-height: 44px; display: flex; align-items: center; }
  /* el mes ya facturado: su frase a 17 (sección), no a 20 */
  html:root[data-diseno] .vista-fin .fg-hecho-texto p { font: 700 17px/24px var(--f-ui); }
  html:root[data-diseno] .vista-fin .fg-hecho-texto small { font: 400 13px/18px var(--f-ui); }
  /* pie del Generador: «Vista previa» y «Generar facturas» apilados a lo ancho, de 48 px (antes no cabían lado a lado y
     el pie se salía de la tarjeta por la izquierda) */
  html:root[data-diseno] .vista-fin .fg-pie { display: block; padding: 12px 14px; }
  html:root[data-diseno] .vista-fin .fg-pie .fg-botones { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; width: 100%; }
  html:root[data-diseno] .vista-fin .fg-pie .fg-botones > .boton { width: 100%; min-width: 0; height: auto; min-height: 48px; justify-content: center; font-size: 15px; }
  /* Emitidas: una fila por línea de factura, sin cabecera de tabla: arriba el cliente y, a la derecha, el importe; debajo,
     en gris, el concepto y la fecha; «Por exportar» (si la fila lo está) en su línea. Un toque abre la edición, como hoy. */
  /* Emitidas y Saldos se desplazan con la página (una sola columna que se desliza, como el resto del teléfono): sin caja
     con desplazamiento propio dentro de la pantalla (la edición de una línea quedaba debajo de las pestañas) */
  html:root[data-diseno] .vista-fin :is(.fi-emitidas, .fi-saldos) { flex: none; min-height: 0; overflow: visible; }
  html:root[data-diseno] .vista-fin .fi-tabla { flex: none; max-height: none; overflow: clip; }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] { display: block; table-layout: auto; }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] tbody { display: block; }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] tr[data-qa="fi-fila-emitida"]:not(.fi-fila-edicion) {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; min-height: 60px; padding: 9px 0 10px;
    border-bottom: 1px solid var(--linea);
  }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] tr[data-qa="fi-fila-emitida"]:last-child { border-bottom: 0; }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] tr.fi-fila-tocable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] tr.fi-fila-tocable:active { background: var(--sup-2); }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] tr.fi-fila-tocable:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] tr:not(.fi-fila-edicion) > td {
    display: block; height: auto; min-width: 0; padding: 0 14px; border: 0; background: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] tr:not(.fi-fila-edicion) > td:nth-child(1),
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] tr:not(.fi-fila-edicion) > td:nth-child(7) { display: none; }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] tr:not(.fi-fila-edicion) > td:nth-child(2) { grid-column: 1; grid-row: 1; padding-right: 0; }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] tr:not(.fi-fila-edicion) > td:nth-child(3) { grid-column: 1; grid-row: 2; padding-right: 0; }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] tr:not(.fi-fila-edicion) > td:nth-child(4) { grid-column: 2; grid-row: 1; padding-left: 0; text-align: right; }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] tr:not(.fi-fila-edicion) > td:nth-child(5) { grid-column: 2; grid-row: 2; padding-left: 0; text-align: right; }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] tr:not(.fi-fila-edicion) > td:nth-child(6) { grid-column: 1 / -1; grid-row: 3; }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] tr:not(.fi-fila-edicion) > td:nth-child(6):not(:has(.chip)) { position: absolute; width: 1px; height: 1px; padding: 0; }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] tr:not(.fi-fila-edicion) > td:nth-child(6) .chip { margin-top: 6px; height: 24px; font-size: 12px; }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] .fi-cliente { font: 600 15px/22px var(--f-ui); color: var(--tinta); }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] td:nth-child(4) b { font: 600 15px/22px var(--f-ui); font-variant-numeric: tabular-nums; }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] .fi-concepto { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 13px/18px var(--f-ui); color: var(--tinta-3); }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] .fi-concepto > span { display: inline; }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] .fi-concepto .fi-desc { margin-left: 6px; }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] td:nth-child(5) { font: 400 13px/18px var(--f-ui); color: var(--tinta-3); }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] td:nth-child(5) .fi-vence { display: none; }
  /* la edición de una línea: el formulario a lo ancho (sin el número de factura en su columna) */
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] tr.fi-fila-edicion { display: block; }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] tr.fi-fila-edicion > td.fi-col-no { display: none; }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] tr.fi-fila-edicion > td.fi-ed-celda { display: block; height: auto; padding: 14px; border: 0; }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] .fi-ed-titulo b { font: 600 15px/22px var(--f-ui); }
  /* cantidad × precio en una línea, el importe debajo, fecha y vencimiento lado a lado, los botones a lo ancho */
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] .fi-ed-fila:has(.fi-ed-qte) {
    display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); align-items: end; gap: 12px 8px;
  }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] .fi-ed-fila:has(.fi-ed-qte) > * { width: auto; min-width: 0; margin: 0; }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] .fi-ed-fila:has(.fi-ed-qte) > .fi-por { align-self: end; height: 44px; line-height: 44px; text-align: center; }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] .fi-ed-fila:has(.fi-ed-qte) > .fi-ed-importe {
    grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 2px 0;
  }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] .fi-ed-importe .fi-monto-vivo { font: 600 15px/22px var(--f-ui); }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] .fi-ed-fila:has(.fi-ed-qte) > .fi-ed-fecha ~ .fi-ed-fecha { grid-column: 2 / -1; }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] .fi-ed-fila:has(.fi-ed-qte) > .fi-ed-acciones { grid-column: 1 / -1; padding-top: 4px; }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] .fi-ed-campo :is(input, .fi-input) { width: 100%; min-width: 0; min-height: 44px; font-size: 16px; }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] .fi-linea-botones { display: flex; gap: 8px; }
  html:root[data-diseno] [data-qa="fi-tabla-emitidas"] .fi-linea-botones > .boton { flex: 1 1 0; min-height: 48px; height: auto; justify-content: center; font-size: 15px; }
  /* ═════ 7 · paneles de Pendientes (editor, disponibilidades, cliente) como página entera ═════ */
  html:root[data-diseno] .velo.velo-lateral:is(.velo-editor-pend, .velo-dispo, .cx-velo) { padding: 0; place-items: stretch; }
  /* una página entera es opaca (en Selah el vidrio al 96 % dejaba ver la lista de detrás) */
  html:root[data-diseno] .panel.pd-panel.pd-tel {
    width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; box-shadow: none;
    padding: var(--seg-arriba) var(--seg-der) 0 var(--seg-izq);
    background: var(--sup); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  /* la rejilla de disponibilidades a su alto entero: el cuerpo de la página se desliza una sola vez (antes la rejilla
     quedaba encogida a la ventana y sus horas pasaban por debajo de «No disponible» y del resumen) */
  html:root[data-diseno] .panel.pd-tel > .panel-cuerpo { align-content: start; }
  html:root[data-diseno] .panel.pd-tel .dgr-cuerpo { align-self: start; height: auto; grid-template-rows: none; }
  html:root[data-diseno] .panel.pd-tel .dgr-scroll { min-height: auto; height: auto; overflow: visible; }
  html:root[data-diseno] .panel.pd-tel .dg-cab-dias { position: sticky; top: -12px; z-index: 2; }
  html:root[data-diseno] .panel.pd-tel .dg-no-fila { display: flex; flex-wrap: wrap; gap: 0 8px; padding-top: 8px; }
  html:root[data-diseno] .panel.pd-tel .dg-no-fila > .dg-no-rotulo { flex: 1 1 100%; }
  html:root[data-diseno] .panel.pd-tel .dg-no-fila > .dg-no { flex: 1 1 0; min-width: 0; height: 44px; font-size: 15px; }
  html:root[data-diseno] .panel.pd-tel .dg-no-fila > .dg-no::after { content: none; }
  html:root[data-diseno] .panel.pd-tel > .panel-cab { gap: 10px; min-height: 56px; padding: 6px 16px 6px 4px; }
  html:root[data-diseno] .panel.pd-tel .pd-volver { flex: none; width: 44px; height: 44px; min-width: 44px; display: grid; place-items: center; }
  html:root[data-diseno] .panel.pd-tel .pd-volver .ic { width: 22px; height: 22px; }
  html:root[data-diseno] .panel.pd-tel .panel-titulo h2 { font: 700 17px/22px var(--f-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html:root[data-diseno] .panel.pd-tel .panel-titulo p { font: 400 13px/18px var(--f-ui); }
  html:root[data-diseno] .panel.pd-tel > .panel-cuerpo { padding: 12px 16px 16px; }
  html:root[data-diseno] .panel.pd-tel > .dgr-pie {
    flex-wrap: wrap; gap: 8px; margin: 0; padding: 10px 16px calc(10px + var(--seg-abajo)); border-top: 1px solid var(--linea); background: var(--sup);
  }
  html:root[data-diseno] .panel.pd-tel > .dgr-pie > .espacio { display: none; }
  html:root[data-diseno] .panel.pd-tel > .dgr-pie > .dg-validadas { flex: 1 1 100%; min-height: 44px; }
  html:root[data-diseno] .panel.pd-tel > .dgr-pie > .dg-validadas[hidden] { display: none; }
  html:root[data-diseno] .panel.pd-tel > .dgr-pie > .boton { flex: 1 1 0; min-width: 0; min-height: 48px; justify-content: center; font-size: 15px; }
  html:root[data-diseno] .panel.pd-tel :is(.ep-item .boton, .cx-resultado, .cx-panel .boton, .cx-panel input) { min-height: 44px; }
  html:root[data-diseno] .panel.pd-tel :is(.ep-item input[type="checkbox"]) { width: 24px; height: 24px; }

  /* rejillas de disponibilidades (panel y ficha): medias horas de 44 px que se tocan; el dedo desliza la rejilla */
  html:root[data-diseno] :is(.dg-rejilla, .dp-rejilla) { touch-action: pan-y; }
  html:root[data-diseno] :is(.dg-celda, .dp-celda) { height: 44px; }
  html:root[data-diseno] :is(.dg-hora, .dp-hora) { height: 44px; line-height: 44px; font-size: 12px; }
  html:root[data-diseno] .dg-no-fila { align-items: center; padding-top: 8px; }
  html:root[data-diseno] .dg-no { position: relative; height: 32px; font-size: 13px; }
  html:root[data-diseno] .dg-no::after { content: ''; position: absolute; top: -6px; bottom: -6px; left: -4px; right: -4px; }
  html:root[data-diseno] .dg-no-rotulo { font-size: 12px; }
  html:root[data-diseno] .dg-resumen { font-size: 15px; }
  html:root[data-diseno] .dp-dia { height: auto; min-height: 44px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 6px 6px 8px 8px; }
  html:root[data-diseno] .dp-esquina { height: auto; }
  html:root[data-diseno] .dp-no { position: relative; right: auto; top: auto; opacity: 1; height: 32px; font-size: 12px; }
  html:root[data-diseno] .dp-no::after { content: ''; position: absolute; top: -6px; bottom: -6px; left: -4px; right: -4px; }
  html:root[data-diseno] .dp-celda[aria-pressed="true"].ini::after { top: 13px; font-size: 12px; }

  /* Pendientes › solo Disponibilidades: una lista de filas de 44 px (nombre y, a la derecha, los días marcados) */
  html:root[data-diseno] .vista-pendientes .pd-hoja.solo-dispo .pdh-fila {
    display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 2px 14px;
  }
  html:root[data-diseno] .vista-pendientes .pd-hoja.solo-dispo .pdh-fila > .pdh-nombre { flex: 1 1 auto; min-width: 0; min-height: 44px; }
  html:root[data-diseno] .vista-pendientes .pd-hoja.solo-dispo .pdh-nombre b { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html:root[data-diseno] .vista-pendientes .pd-hoja.solo-dispo .pdh-c.dispo {
    display: inline-flex; align-items: center; justify-content: flex-end; flex: 0 1 auto; min-height: 44px; min-width: 44px; height: auto; padding: 0 0 0 8px;
    background: none; color: var(--tinta-3); font: 400 13px/18px var(--f-ui); text-align: right;
  }
  html:root[data-diseno] .vista-pendientes .pd-hoja.solo-dispo .pdh-c.dispo::after { content: none; }
  html:root[data-diseno] .vista-pendientes .pdd-bloque.sin-franjas .pdd-lista { columns: 1; }
  html:root[data-diseno] .vista-pendientes .pdd-bloque.sin-franjas .pdh-c.dispo { display: none; }
  html:root[data-diseno] .vista-pendientes .pdd-titulo { min-height: 44px; height: auto; font: 700 15px/20px var(--f-ui); }
  /* texto solo para el lector de pantalla: invisible, pero nunca por debajo de 12 px */
  html:root[data-diseno] :is(.vista-pendientes, .vista-fin, .vista-alumnos, .vista-admisiones) .solo-lector { font-size: 12px; }
}


/* 17 oct noche · ficha de Admisiones · franja de contacto en el teléfono: nombre arriba; acudiente, teléfono con su WhatsApp
   y correo debajo, en varias líneas si hace falta (nada se corta); «Ver toda la información» a lo ancho. */
@media (max-width: 760px) {
  html:root[data-diseno] .ficha-adm:not(.ficha-perfil) .fc-cab.fc-contacto { flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; min-height: 0; padding: 6px 16px 12px 4px; }
  html:root[data-diseno] .ficha-adm:not(.ficha-perfil) .fc-cab.fc-contacto > .avatar { width: 40px !important; height: 40px !important; margin-top: 2px; }
  html:root[data-diseno] .ficha-adm:not(.ficha-perfil) .fc-cab.fc-contacto .fc-quien { flex: 1 1 0; display: grid; gap: 4px; padding-top: 10px; }
  html:root[data-diseno] .ficha-adm:not(.ficha-perfil) .fc-cab.fc-contacto .fc-quien h2 { font-size: 18px; line-height: 24px; white-space: normal; overflow-wrap: anywhere; }
  html:root[data-diseno] .ficha-adm:not(.ficha-perfil) .fc-sub.fc-datos { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; white-space: normal; overflow: visible; font: 400 15px/22px var(--f-ui); color: var(--tinta-2); }
  html:root[data-diseno] .ficha-adm:not(.ficha-perfil) .fc-datos > .fc-dato { min-height: 24px; }
  html:root[data-diseno] .ficha-adm:not(.ficha-perfil) .fc-datos > .fc-dato .ic { width: 15px; height: 15px; }
  html:root[data-diseno] .ficha-adm:not(.ficha-perfil) .fc-datos > .fc-dato .copiable { white-space: nowrap; }
  html:root[data-diseno] .ficha-adm:not(.ficha-perfil) .fc-datos > .fc-dato[data-qa="contacto-correo"] .copiable { white-space: normal; overflow-wrap: anywhere; }
  /* WhatsApp: el botón redondo de 44 px junto al número (su nombre queda para el lector de pantalla) */
  html:root[data-diseno] .ficha-adm:not(.ficha-perfil) .fc-datos > .fc-dato .boton.whatsapp { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; margin: -10px 0 -10px 6px; justify-content: center; gap: 0; }
  html:root[data-diseno] .ficha-adm:not(.ficha-perfil) .fc-datos > .fc-dato .boton.whatsapp > :not(.ic) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html:root[data-diseno] .ficha-adm:not(.ficha-perfil) .fc-datos > .fc-dato .boton.whatsapp .ic { width: 20px; height: 20px; }
  /* con toda la información abierta, la información ocupa todo lo de debajo de la franja (Estado y etapas vuelven al cerrarla) */
  html:root[data-diseno] .ficha-adm.info-abierta:not(.ficha-perfil) > :is(.fc-barra, .fc-etapas, .fc-cuerpo) { display: none; }
  html:root[data-diseno] .ficha-adm:not(.ficha-perfil) .fc-info-boton { flex: 1 1 100%; min-height: 44px; height: 44px; margin-left: 12px; justify-content: center; font-size: 15px; }
  html:root[data-diseno] .ficha-adm:not(.ficha-perfil) .fc-barra { padding: 10px 16px; }
  html:root[data-diseno] .ficha-adm .fc-info { padding: 14px 16px 18px; }
  html:root[data-diseno] .ficha-adm .fc-info-datos > div { font-size: 14px; line-height: 20px; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); min-height: 24px; }
  html:root[data-diseno] .ficha-adm .fc-info-grupo h4 { font-size: 15px; line-height: 22px; }
}