/* 16 oct · tel-base.css · teléfono rediseñado (docs/TELEFONO-16OCT.md). Solo reglas dentro de @media (max-width: 760px). */
/* Zona Base: escala de letra común, barra de arriba con el título de la pantalla, hojas desde abajo (diálogos y paneles de
   componentes.js), Perfil, la elección Entrar · Formación, la burbuja de la Formación, la entrada del sitio y Ajustes.
   Vale para las dos apariencias: cada selector empieza por html:root[data-diseno] (por encima de :root[data-diseno="selah"]
   de las hojas de Selah, que se cargan antes). El escritorio (> 760 px) no cambia. */

@media (max-width: 760px) {
  /* ═════ 1 · escala de letra: título de pantalla 22/700 · sección 17/700 · texto 15 · secundario 13 · nunca menos de 12 ═════ */
  html:root[data-diseno] { --t-titulo: 22px; --lh-titulo: 26px; --tel-seccion: 17px; --tel-lh-seccion: 22px; }

  /* ═════ 2 · barra de arriba: flecha · quién (foto y nombre) · título de la pantalla · sonido y Ajustes ═════
     El título (portal.js · observarTitulo) aparece cuando el título grande sale por arriba; entonces el nombre de quien
     entró se recoge y queda su foto (el mismo botón para volver a Perfil). */
  html:root[data-diseno] .barra { grid-template-columns: auto auto minmax(0, 1fr) auto; column-gap: 2px; }
  html:root[data-diseno] .barra > .boton-atras { grid-column: 1; }
  html:root[data-diseno] .barra > .tarjeta-yo { grid-column: 2; max-width: 46vw; }
  html:root[data-diseno] .barra > .barra-titulo {
    grid-column: 3; min-width: 0; margin: 0; padding: 0 4px;
    font: 700 var(--tel-seccion)/var(--tel-lh-seccion) var(--f-ui); color: var(--tinta); letter-spacing: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    opacity: 0; transform: translateY(4px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  html:root[data-diseno] .barra.con-titulo > .barra-titulo { opacity: 1; transform: none; }
  html:root[data-diseno] .barra.con-titulo > .tarjeta-yo { width: 44px; padding: 6px; justify-content: center; }
  html:root[data-diseno] .barra.con-titulo .yo-texto { display: none; }
  html:root[data-diseno] .barra > .barra-derecha { grid-column: 4; }
  html:root[data-diseno] .yo-nombre { font: 600 var(--tel-seccion)/var(--tel-lh-seccion) var(--f-ui); }

  /* ═════ 3 · hojas desde abajo: confirmaciones (confirmar, confirmarGrande, salir de la clase) y paneles ═════
     Como los menús y los popovers (movil.css § 10): a lo ancho, pegadas abajo, con asa, botones apilados de 48 px. */
  html:root[data-diseno] .velo:has(> :is(.dialogo, .panel)) {
    display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch;
    padding: calc(12px + var(--seg-arriba)) 0 0;
  }
  html:root[data-diseno] .velo > .dialogo {
    position: relative; width: 100%; max-width: none; max-height: 100%; margin: 0;
    gap: 14px; padding: 28px 16px calc(16px + var(--seg-abajo));
    border: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: 0 -8px 32px rgba(16, 24, 40, .14);
    animation: hoja-sube var(--dur) var(--ease);
  }
  html:root[data-diseno] .velo > :is(.dialogo, .panel)::before {
    content: ''; position: absolute; top: 8px; left: 50%; width: 36px; height: 5px; border-radius: 3px;
    background: var(--linea-2); transform: translateX(-50%);
  }
  html:root[data-diseno] .velo > .dialogo .dialogo-cab { gap: 12px; align-items: center; margin: 0; padding: 0; background: transparent; box-shadow: none; }
  html:root[data-diseno] .velo > .dialogo .dialogo-cab h2 { font: 700 var(--tel-seccion)/var(--tel-lh-seccion) var(--f-ui); letter-spacing: 0; }
  html:root[data-diseno] .velo > .dialogo .dialogo-texto { padding-left: 0; font-size: 15px; line-height: 21px; }
  html:root[data-diseno] .velo > .dialogo .dialogo-botones { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 8px; margin-top: 4px; }
  html:root[data-diseno] .velo > .dialogo .dialogo-botones > .espacio { display: none; }
  html:root[data-diseno] .velo > .dialogo .dialogo-botones .boton { width: 100%; min-height: 48px; justify-content: center; margin: 0; }
  /* salir de la clase con texto sin guardar: «Guardar y salir» arriba (al pulgar, abajo del todo), «Salir sin guardar» al final */
  html:root[data-diseno] .velo > .dialogo-salir .dialogo-botones .salir-sin-guardar { order: -1; }
  /* los paneles (Datos de Airtable y los laterales del escritorio): a pantalla completa desde abajo, con su cabecera y el
     cuerpo que se desliza (un panel lateral de 640 px no tiene «lado» en el teléfono) */
  html:root[data-diseno] .velo.velo-lateral { background: var(--velo); }
  html:root[data-diseno] .velo > .panel {
    position: relative; width: 100%; height: 100%; max-height: none; border: 0; border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding-bottom: var(--seg-abajo); animation: hoja-sube var(--dur) var(--ease);
  }
  html:root[data-diseno] .velo > .panel .panel-cab { padding-top: 22px; }
  html:root[data-diseno] .panel-titulo h2 { font: 700 var(--tel-seccion)/var(--tel-lh-seccion) var(--f-ui); }

  /* hojas de menú y popover (movil.css § 10): el título de la hoja como sección; Ajustes con su título de sección */
  html:root[data-diseno] .menu .menu-cab b, html:root[data-diseno] .ajustes-titulo { font: 700 var(--tel-seccion)/var(--tel-lh-seccion) var(--f-ui); color: var(--tinta); }
  html:root[data-diseno] .menu .menu-item { font-size: 15px; }
  html:root[data-diseno] .popover-ajustes .ajustes { gap: 6px; }
  html:root[data-diseno] .popover-ajustes .ajustes-fila { min-height: 48px; }

  /* ═════ 4 · Perfil y la elección Entrar · Formación ═════ */
  html:root[data-diseno] .perfil-cab { gap: 12px; align-items: center; }
  html:root[data-diseno] .perfil-cab > .logo, html:root[data-diseno] .perfil-cab > svg { width: 26px !important; height: 40px !important; }
  html:root[data-diseno] .perfil-cab h1 { font-size: var(--t-titulo); line-height: var(--lh-titulo); }
  html:root[data-diseno] .perfil-cab .sub { font-size: 13px; line-height: 18px; }
  html:root[data-diseno] .estante-titulo { font-size: 15px; }
  html:root[data-diseno] .eleccion .perfil-cab .avatar { width: 44px !important; height: 44px !important; font-size: 16px !important; }
  /* las dos tarjetas: filas compactas (ícono, nombre y una línea gris), sin el hueco de 132 px de alto */
  html:root[data-diseno] .eleccion-botones { gap: 10px; }
  html:root[data-diseno] .eleccion-boton.portal-tarjeta { min-height: 72px; padding: 14px 16px 14px 14px; align-items: center; }
  html:root[data-diseno] .eleccion-boton .pt-texto { gap: 2px; }
  html:root[data-diseno] .eleccion-boton .pt-texto b { font: 700 var(--tel-seccion)/var(--tel-lh-seccion) var(--f-ui); }
  html:root[data-diseno] .eleccion-boton .pt-texto small { font-size: 13px; line-height: 18px; }
  html:root[data-diseno] .eleccion-pie .boton { min-height: 44px; }

  /* ═════ 5 · la burbuja de la Formación: «Volver al paso anterior» como flecha de 48 px y el paso siguiente a lo ancho ═════
     Los dos nombres largos partían en dos líneas cada botón. El nombre de la flecha sigue para los lectores (letra 0). */
  html:root[data-diseno] .fm-burbuja { gap: 6px; padding: 14px 14px 10px; }
  html:root[data-diseno] .fm-accion { font: 700 var(--tel-seccion)/var(--tel-lh-seccion) var(--f-ui); letter-spacing: 0; }
  html:root[data-diseno] .fm-hecho { font-size: 15px; line-height: 21px; }
  html:root[data-diseno] .fm-pista { font-size: 13px; line-height: 17px; align-items: flex-start; }
  html:root[data-diseno] .fm-pista .ic { margin-top: 2px; flex: none; }
  html:root[data-diseno] .fm-botones { grid-template-columns: 48px minmax(0, 1fr); gap: 8px; margin-top: 4px; }
  html:root[data-diseno] .fm-botones .fm-anterior { width: 48px; min-width: 48px; min-height: 48px; padding: 0; gap: 0; justify-content: center; }
  html:root[data-diseno] .fm-botones .fm-anterior > span:not(.ic) { font-size: 0; line-height: 0; }
  html:root[data-diseno] .fm-botones .fm-siguiente { min-height: 48px; white-space: nowrap; font-size: 15px; }
  html:root[data-diseno] .fm-botones .fm-salir { min-height: 44px; font-size: 15px; }

  /* ═════ 6 · entrada del sitio: la tarjeta arriba (no al centro), al alcance con el teclado abierto ═════ */
  html:root[data-diseno] body[data-pantalla="conexion"] .pantalla-centro:has(> form.entrada-web) { align-content: start; padding-top: 12px; }
  html:root[data-diseno] form.entrada-web { padding: 24px 18px 20px; }
  html:root[data-diseno] form.entrada-web > .logo, html:root[data-diseno] form.entrada-web > svg { width: 30px !important; height: 46px !important; }
  html:root[data-diseno] form.entrada-web h1 { font-size: var(--t-titulo); line-height: var(--lh-titulo); }
  html:root[data-diseno] form.entrada-web .conexion-etiqueta { font-size: 13px; }

  /* ═════ 7 · la franja de la hora y la batería (zona segura de arriba) en las pantallas sin barra ═════
     Perfil, la elección, la entrada y el modo clase se desplazan enteros: sin esta franja, el título y las fichas pasaban
     por debajo de la hora del iPhone. Un velo del color del fondo, con desenfoque, del alto de la zona segura (0 sin muesca).
     Con la Formación, su franja oscura ya ocupa ese sitio. */
  html:root[data-diseno] body:is([data-pantalla="perfil"], [data-pantalla="eleccion"], [data-pantalla="conexion"]):not(.en-formacion)::before,
  html:root[data-diseno] body:not(.en-formacion):has(.modo)::before {
    content: ''; position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: var(--seg-arriba); pointer-events: none;
    background: color-mix(in srgb, var(--fondo) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }

  /* ═════ 8 · hojas opacas en Selah: el vidrio al 96 % dejaba ver lo de detrás (el botón azul de la clase se leía como una
     caja clara detrás del título de «¿Guardar la tarea antes de salir?») ═════ */
  html:root[data-diseno="selah"] .velo > :is(.dialogo, .panel) { background: var(--sup); -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* ═════ 9 · Perfil en el sitio: el pie de la cuenta en filas (antes «Volver al / sitio» y «Sali / r» partidos en dos) ═════ */
  html:root[data-diseno] .web-cuenta { gap: 12px; }
  html:root[data-diseno] .web-otras { gap: 8px; }
  html:root[data-diseno] .web-otras-titulo { flex: 1 0 100%; margin: 0; font-size: 13px; }
  html:root[data-diseno] .web-otra { min-height: 44px; padding: 0 14px; font-size: 13px; }
  html:root[data-diseno] .web-sesion { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 0; }
  html:root[data-diseno] .web-sesion > .web-correo { grid-column: 1 / -1; font-size: 13px; overflow-wrap: anywhere; }
  html:root[data-diseno] .web-sesion > :is(.web-volver, .web-salir) { justify-content: center; min-height: 44px; white-space: nowrap; font-size: 15px; }

  /* ═════ 10 · Ajustes › Datos de Airtable (hoja a pantalla completa) ═════ */
  /* los dos pliegues: el nombre arriba y su línea gris debajo (antes «Otros avisos / (7)» y «Detalle por / grupo» partidos) */
  html:root[data-diseno] .datos-pliegue > summary {
    display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 10px; row-gap: 0; align-items: center;
    width: 100%; min-height: 48px; margin-left: 0; padding: 6px 4px; box-sizing: border-box;
  }
  html:root[data-diseno] .datos-pliegue > summary > small { grid-column: 2; }
  /* con el dedo, el gris de «pasar por encima» se quedaba pegado al pliegue después de tocarlo */
  html:root[data-diseno]:not(.puntero-quieto) .datos-pliegue > summary:hover { background: transparent; }
  /* el resumen: un día por línea */
  html:root[data-diseno] .datos-resumen { display: grid; gap: 2px; }
  html:root[data-diseno] .datos-resumen .datos-dia { flex: none; }
  /* el detalle por grupo: de tabla de cinco columnas (cortada a la derecha) a una fila por grupo, con el nombre de cada
     columna delante de su dato */
  html:root[data-diseno] .panel-datos .tabla-marco { overflow: visible; border: 0; box-shadow: none; background: transparent; }
  html:root[data-diseno] .tabla-datos, html:root[data-diseno] .tabla-datos :is(tbody, tr, td, th) { display: block; width: auto; }
  html:root[data-diseno] .tabla-datos { font-size: 13px; line-height: 18px; }
  html:root[data-diseno] .tabla-datos thead { display: none; }
  html:root[data-diseno] .tabla-datos .tabla-seccion th { position: static; padding: 14px 0 6px; background: transparent; border: 0; font: 700 15px/20px var(--f-ui); color: var(--tinta); }
  html:root[data-diseno] .tabla-datos .tabla-seccion .datos-seccion-n { font-weight: 400; font-size: 13px; color: var(--tinta-3); }
  html:root[data-diseno] .tabla-datos tr:not(.tabla-seccion) { display: grid; gap: 3px; padding: 10px 0; border-top: 1px solid var(--linea); }
  html:root[data-diseno] .tabla-datos td { padding: 0; border: 0; white-space: normal; }
  html:root[data-diseno] .tabla-datos td:first-child { font-size: 15px; line-height: 20px; }
  html:root[data-diseno] .tabla-datos td:not(:first-child) { display: grid; grid-template-columns: 116px minmax(0, 1fr); column-gap: 8px; }
  html:root[data-diseno] .tabla-datos td:not(:first-child) > * { grid-column: 2; }
  html:root[data-diseno] .tabla-datos td:not(:first-child)::before { grid-column: 1; grid-row: 1 / span 2; color: var(--tinta-3); }
  html:root[data-diseno] .tabla-datos td:nth-child(2)::before { content: 'Origen del día'; }
  html:root[data-diseno] .tabla-datos td:nth-child(3)::before { content: 'Origen de la hora'; }
  html:root[data-diseno] .tabla-datos td:nth-child(4)::before { content: 'Alumnos'; }
  html:root[data-diseno] .tabla-datos td:nth-child(5)::before { content: 'Profesor'; }
  html:root[data-diseno] .tabla-datos td.datos-num { display: flex; gap: 0; }
  html:root[data-diseno] .tabla-datos td.datos-num::before { flex: none; width: 124px; }
  html:root[data-diseno] .tabla-datos small { display: block; }
  html:root[data-diseno] .tabla-datos td.datos-num small { display: inline; }

  /* ═════ 11 · la burbuja de la Formación como hoja pegada abajo (formacion.js · hojaEnTelefono): cuando caería sobre las
     pestañas, va a lo ancho y las tapa enteras (antes sus rótulos asomaban por debajo de la burbuja) ═════ */
  html:root[data-diseno] .fm-burbuja[data-lado="hoja"] {
    width: 100%; border-width: 1px 0 0; border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding: 16px 16px calc(10px + var(--seg-abajo)); box-shadow: 0 -12px 32px rgba(16, 24, 40, .16);
  }
  html:root[data-diseno="selah"] .fm-burbuja[data-lado="hoja"] { border-radius: 22px 22px 0 0; }
  html:root[data-diseno] .fm-burbuja[data-lado="hoja"] .fm-pico { display: none; }

  /* ═════ 17 oct · Android 360 px: la barra de cinco pestañas (Supervisión) dejaba 66 px a cada rótulo y «Pendientes»
     (67 px a 12 px) salía «Pendient…»: por debajo de 370 px, la pestaña cede su relleno lateral y el espaciado de letra ═════ */
  @media (max-width: 370px) {
    html:root[data-diseno] .pestanas .pestana { padding-inline: 0; letter-spacing: 0; }
  }
}