/* =====================================================================
   Cuaderno del Maestro · capa MÓVIL y PWA
   Fichero NUEVO (04-10-2026). Se carga DESPUÉS de estilos.css:
   no reescribe nada, solo añade y corrige.
     1. Cimientos (área segura, sin desbordes, sin zoom automático)
     2. Navegación (barra superior, cinta de secciones, cajón lateral)
     3. Vistas (una columna, tablas con desplazamiento, botones de pulgar)
     4. Diálogos a pantalla completa (nueva sesión de aula)
     5. Instalar en el escritorio (PWA)
     6. Impresión
   ===================================================================== */

/* ---------------------------------------------------------------
   1. CIMIENTOS
   --------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video, table, pre, iframe { max-width: 100%; }
img, video { height: auto; }
body { overscroll-behavior-y: contain; }

/* Piezas que solo existen en pantalla pequeña */
.btn-menu { display: none; }
.cinta { display: none; }
.velo { display: none; }
.oculto { display: none !important; }

/* La pista de la foto y el avatar de la ficha se pueden pulsar:
   abren el mismo selector de imagen que el botón (movil.js) */
.pista-foto { cursor: pointer; }
.pista-foto:active { transform: translateY(1px); }
.avatar-grande.puede-foto { cursor: pointer; }

/* Títulos de grupo del menú (Mi día · Alumnado y PT · Familias y equipo …) */
.menu-grupo {
  grid-column: 1 / -1;
  margin: 12px 4px 2px;
  padding: 0 2px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.menu-grupo:first-child { margin-top: 2px; }

/* ---------------------------------------------------------------
   5. INSTALAR EN EL ESCRITORIO — acceso directo (móvil y escritorio)
   --------------------------------------------------------------- */
.instalar-flotante {
  position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 70; display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 10px 17px; border: 1px solid var(--primario-osc, #5a49ad);
  border-radius: 999px; background: var(--primario, #7d6ad4); color: #fff;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: 0 10px 26px rgba(60, 50, 120, .28);
}
.instalar-flotante .mi { font-size: 21px; }
.instalar-flotante:active { transform: translateY(1px); }
.instalar-flotante.hecho { background: var(--superficie, #fff); color: var(--texto, #2c2740); }
.instalar-flotante.escondido { opacity: 0; transform: translateY(16px); pointer-events: none; }
.instalar-flotante { transition: opacity .25s ease, transform .25s ease; }
.instalar-flotante .corto { display: none; }

.tarjeta-instalar .pasos { margin: 8px 0 0; padding-left: 20px; font-size: 13px; line-height: 1.5; }
.tarjeta-instalar .pasos li { margin: 4px 0; }
.tarjeta-instalar .btn { margin-top: 12px; }

/* ---------------------------------------------------------------
   2 + 3 + 4. PANTALLA PEQUEÑA (móvil y tableta en vertical)
   --------------------------------------------------------------- */
@media (max-width: 899px) {

  /* ---------- 1. cimientos ---------- */
  html, body { overflow-x: hidden; }
  .app { grid-template-columns: 1fr; height: 100dvh; min-height: 100dvh; }
  .principal { width: 100%; max-width: 100%; }
  .vista {
    padding: 14px 12px calc(96px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
  }
  .vista, .principal, .tarjeta, dialog .cuerpo, .fila-campos > *, [class*="rejilla"] > * { min-width: 0; }
  /* 16 px evita que iOS haga zoom al tocar un campo */
  input, select, textarea { font-size: 16px; max-width: 100%; }
  .buscador { min-width: 0; flex: 1 1 100%; }
  /* el botón de instalar, más corto en el móvil para no tapar el contenido */
  .instalar-flotante { padding: 10px 15px; font-size: 13.5px; }
  .instalar-flotante .largo { display: none; }
  .instalar-flotante .corto { display: inline; }
  .carga-web .cw-caja { max-width: 92vw; padding: 22px 20px; }
  .tostada { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); max-width: 92vw; text-align: center; }

  /* objetivos de pulgar */
  .btn, .btn.chico, a.btn, button.btn { min-height: 44px; }
  .btn.icono, .btn.icono.chico { min-width: 44px; min-height: 44px; }
  .btn.chico { padding: 8px 13px; }
  .acciones .btn, .fila-botones .btn, dialog .piedialogo .btn { flex: 1 1 auto; }
  .pestanas { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pestanas button, .chips button { flex: 0 0 auto; min-height: 42px; }

  /* ---------- 2. navegación ---------- */

  /* 2.1 el menú lateral se convierte en cajón deslizante */
  .lateral {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 60;
    width: min(87vw, 340px); max-width: 100%;
    display: flex; flex-direction: column;
    transform: translateX(-104%);
    transition: transform .22s ease;
    box-shadow: 8px 0 30px rgba(40, 32, 70, .26);
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    will-change: transform;
  }
  .app.menu-abierto .lateral { transform: none; }
  .velo {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(28, 22, 48, .46);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .app.menu-abierto .velo { opacity: 1; pointer-events: auto; }
  .menu { grid-template-columns: 1fr 1fr; }
  .menu .teja { min-height: 84px; }
  .menu-grupo { display: block; grid-column: 1 / -1; margin: 10px 2px 2px; }
  .pie-lateral { position: sticky; bottom: 0; }

  /* 2.2 barra superior: se reparte en dos filas */
  .barra {
    position: sticky; top: 0; z-index: 45;
    flex-wrap: wrap; gap: 8px 10px;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 6px;
  }
  .barra h2 { font-size: 17.5px; line-height: 1.2; }
  .barra .sub { font-size: 11.5px; }
  .barra > div:first-child { flex: 1 1 auto; min-width: 0; }
  .barra .relleno { display: none; }
  .btn-menu {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 46px; width: 46px; height: 46px; border-radius: 13px;
    border: 1px solid var(--borde); background: var(--superficie-2); color: var(--texto);
    cursor: pointer;
  }
  .btn-menu .mi { font-size: 25px; }
  .insignias {
    order: 3; width: 100%; flex-wrap: nowrap; gap: 6px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .insignias::-webkit-scrollbar { display: none; }
  .insignia { flex: 0 0 auto; font-size: 11.5px; }
  .acciones { order: 4; width: 100%; flex-wrap: wrap; gap: 8px; }

  /* 2.3 cinta de secciones (menú superior deslizable) */
  .cinta {
    display: flex; order: 5; width: 100%; gap: 8px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: 2px 0 6px;
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
  }
  .cinta::-webkit-scrollbar { display: none; }
  .cinta .chip-sec {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
    min-height: 42px; padding: 8px 15px; border-radius: 999px;
    border: 1px solid var(--borde); background: var(--superficie);
    color: var(--texto); font: inherit; font-size: 13.5px; white-space: nowrap; cursor: pointer;
  }
  .cinta .chip-sec .mi { font-size: 19px; color: var(--primario-osc); }
  .cinta .chip-sec.activa {
    background: var(--primario); border-color: var(--primario); color: #fff;
    box-shadow: 0 6px 16px rgba(60, 50, 120, .22);
  }
  .cinta .chip-sec.activa .mi { color: #fff; }

  /* ---------- 3. vistas ---------- */
  /* cualquier rejilla (del CSS o escrita en línea) pasa a una columna */
  .rejilla, .rejilla.c2, .rejilla.c3, .rejilla.c4,
  [class*="rejilla"], [class*="rejillas"],
  .fila-campos, .opciones-alumnos, .lista-alumnos, .meses, .tejas-grandes,
  .ag-sem, .metricas, .leyenda, .cruz, .rejilla-sesion {
    grid-template-columns: 1fr !important;
  }
  .vista [style*="grid-template-columns"], dialog [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  .rejilla-sesion { display: block; }
  .col-sesion + .col-sesion { margin-top: 16px; }
  .tarjeta { padding: 14px; border-radius: 14px; }
  .fila-campos { gap: 10px; }
  .campo { margin-bottom: 12px; }
  .texto-largo { overflow-wrap: anywhere; }

  /* cabecera de la FICHA DEL ALUMNO: el nombre no se puede aplastar
     (iba a 0 px y el texto se salía encima de la pista) */
  .ficha-arriba { flex-wrap: wrap; gap: 12px 14px; }
  .ficha-arriba .avatar-grande { flex: 0 0 auto; }
  .ficha-texto { flex: 1 1 170px; min-width: 0; }
  .ficha-texto h3 { overflow-wrap: anywhere; }
  /* la pista de la foto baja a su propia fila y ocupa todo el ancho */
  .pista-foto { flex: 1 1 100%; max-width: 100%; }
  .pista-foto .mi { font-size: 26px; }
  .pista-foto b { white-space: nowrap; }

  /* tablas: se desplazan de lado en vez de aplastarse */
  .tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -12px; padding: 0 12px 6px; }
  .tabla-scroll > table.tabla { width: max-content; min-width: 100%; }
  .tabla-scroll th, .tabla-scroll td { padding: 8px 9px; font-size: 12.5px; overflow-wrap: anywhere; }
  .tabla-scroll table.tabla-cruz, .tabla-scroll table.cruz, .tabla-scroll table.horario { min-width: 620px; }
  .tabla-scroll td .acciones-celda { flex-wrap: nowrap; }

  /* ---------- 4. diálogos: hoja a pantalla completa ---------- */
  dialog, dialog.grande {
    width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
    margin: 0; border-radius: 0; inset: 0;
  }
  dialog[open], dialog.grande[open] { display: flex; flex-direction: column; }
  dialog .cab {
    position: sticky; top: 0; z-index: 3; flex: 0 0 auto; gap: 8px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px;
  }
  dialog .cab h3 { font-size: 15.5px; }
  dialog .cab #dlgIcono { font-size: 22px; }
  dialog .cuerpo {
    flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 12px 20px;
  }
  dialog .piedialogo {
    position: sticky; bottom: 0; z-index: 3; flex: 0 0 auto;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
  }
  dialog .piedialogo .btn { min-height: 50px; font-size: 15px; }

  /* formulario de la sesión de aula: todo a lo ancho y con sitio para escribir */
  dialog.grande .fila-campos { grid-template-columns: 1fr !important; }
  dialog.grande .rejilla-sesion { display: block; }
  dialog.grande .opciones-alumnos { grid-template-columns: 1fr !important; max-height: none; }
  dialog.grande .campo textarea, dialog.grande .campo textarea.alto,
  dialog.grande .campo textarea.alto-medio { min-height: 132px; }
  .opcion-alumno {
    display: flex; align-items: center; gap: 10px;
    min-height: 50px; padding: 10px 12px; font-size: 15px;
  }
  .opcion-alumno input[type="checkbox"], .casilla input[type="checkbox"] {
    width: 22px; height: 22px; flex: 0 0 22px; margin: 0;
  }
  .fila-botones { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
  .ayuda { font-size: 12.5px; }
}

/* Tableta apaisada y portátil pequeño: dos columnas en el formulario de sesión */
@media (min-width: 700px) and (max-width: 999px) {
  dialog.grande .fila-campos { grid-template-columns: 1fr 1fr !important; }
}

/* Pantalla grande: la cinta de secciones no hace falta (ya está el menú lateral) */
@media (min-width: 900px) {
  .cinta, .btn-menu, .velo { display: none !important; }
  .menu-grupo { display: block; grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------
   6. IMPRESIÓN
   --------------------------------------------------------------- */
@media print {
  .cinta, .btn-menu, .velo, .instalar-flotante, .menu-grupo { display: none !important; }
  .tabla-scroll { overflow: visible !important; margin: 0 !important; padding: 0 !important; }
  .tabla-scroll > table.tabla { width: 100% !important; min-width: 0 !important; }
}