/* Móvil y tableta: nada de zoom, nada desplazado, nada fuera de la pantalla.
   Va la última de todas las hojas a propósito: varias reglas móviles de styles.css
   quedaban anuladas por system.css, que se carga después, y así volvían los fallos. */

/* 1. Campos a 16 px en pantallas táctiles. Con menos, iOS amplía la página al tocarlos
      y la deja ampliada y desplazada. El !important es deliberado: hay más de veinte
      reglas de campos repartidas por las hojas y ninguna debe poder bajar de 16 px. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  select,
  textarea { font-size: 16px !important; }
}

/* 2. Ventanas en pantallas táctiles: con una abierta, la página de detrás no se mueve, y la
      ventana queda dentro de la parte visible (sin el teclado), medida por viewport.js.
      En escritorio no se toca: quitar la barra de scroll movería la página 17 px. */
@media (pointer: coarse) {
  html:has(dialog.modal[open]),
  html:has(dialog.news-dialog[open]) { overflow: hidden; }
  .modal[open],
  .news-dialog[open] {
    top: var(--vv-top, 0px);
    bottom: calc(100% - var(--vv-top, 0px) - var(--vv-height, 100%));
    max-height: min(820px, calc(var(--vv-height, 100dvh) - 16px));
  }
}

@media (max-width: 760px) {
  /* Hoja inferior pegada al borde inferior visible: si sale el teclado, sube con él. */
  .modal[open] {
    top: auto;
    bottom: calc(100% - var(--vv-top, 0px) - var(--vv-height, 100%));
    max-height: calc(var(--vv-height, 100dvh) - max(16px, env(safe-area-inset-top)));
    /* La zona de la barra de inicio la ocupan los botones fijos, no una franja vacía. */
    padding-bottom: 0;
  }
  /* Los botones de la ventana se ven siempre, aunque el contenido sea largo. Sin márgenes
     negativos: en algunas ventanas van dentro de otro bloque y descuadraban. */
  .modal .modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding-block: 12px calc(12px + env(safe-area-inset-bottom));
    background: var(--glass-surface-strong, var(--ap-glass-3));
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    box-shadow: 0 -1px 0 var(--ap-line);
  }
}

/* Corregir a mano: la incidencia y el párrafo original, plegables (en el móvil empiezan plegados). */
.review-fold > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--ap-accent);
  font-weight: var(--ap-weight-strong);
  cursor: pointer;
}
.review-fold[open] > summary { margin-bottom: var(--ap-space-3); }
.review-fold > .review-context + .review-context { margin-top: var(--ap-space-3); }
@media (min-width: 761px) {
  .review-fold > summary { display: none; }
}

/* Avisos (toast) como popover: la hoja de estilo del navegador los centra y los recuadra;
   se deshace para que sigan donde estaban (abajo a la derecha, o a lo ancho en el móvil). */
.toast[popover] { width: auto; height: auto; margin: 0; top: auto; overflow: visible; }
@media (min-width: 761px) { .toast[popover] { left: auto; } }
@media (pointer: coarse) {
  /* Por encima del teclado: el borde inferior es el de la parte visible. */
  .toast { bottom: calc(100% - var(--vv-top, 0px) - var(--vv-height, 100%) + max(12px, env(safe-area-inset-bottom))); }
}

/* Lista de horas del calendario abierta hacia arriba cuando abajo no cabe (viewport: placeCalendarTimeList). */
.cal-time-list.up { top: auto; bottom: calc(100% + 4px); }

/* 3. La hoja de Bloop al corregir no queda bajo la barra de inicio del iPhone. */
.bloop-coach { bottom: max(22px, calc(env(safe-area-inset-bottom) + 12px)); }

/* 4. Barra superior: la altura que usan las piezas pegadas arriba es la real.
      Sin el selector de espacio, de 761 a 980 px la barra es de una fila. */
@media (min-width: 761px) and (max-width: 980px) {
  :root, :root[data-theme] { --topbar-height: calc(64px + env(safe-area-inset-top)); }
}
/* Móvil en horizontal: una sola fila, como estaba previsto; con dos se comía un tercio de la pantalla. */
@media (max-width: 980px) and (orientation: landscape) and (max-height: 560px) {
  :root, :root[data-theme] { --topbar-height: calc(60px + env(safe-area-inset-top)); }
  .topbar { grid-template-rows: auto; row-gap: 0; }
}

/* 5. Menú lateral en móvil y tableta (estrechas, o táctiles bajas; el escritorio no cambia): las secciones van arriba y el pie (Cuenta,
      Sugerencias, Fondo, Modo) es una sola fila de iconos; así todo se ve sin deslizar el menú.
      Los textos siguen ahí para lectores de pantalla y como «title». */
@media (max-width: 980px), (pointer: coarse) and (max-height: 900px) {
  /* Las secciones (Calendario… Calificaciones) van antes que la lista de espacios, que puede ser larga. */
  .sidebar-scroll > .primary-nav { order: -2; }
  .sidebar-scroll > .tools-nav { order: -1; }
  .sidebar-footer { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Sin sesión el hueco de la cuenta está vacío: tres iconos, sin columna sobrante. */
  .sidebar-footer:has(> .sidebar-account:empty) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sidebar-footer > .sidebar-account:empty { display: none; }
  .sidebar-footer > .theme-row,
  .sidebar-account .motor-user-chip { display: flex; justify-content: center; min-height: 44px; padding-inline: 0; }
  .sidebar-account .motor-user-dot { width: 22px; height: 22px; }
  .sidebar-account .motor-user-name,
  .sidebar-account .motor-user-label,
  .sidebar-footer > .theme-row > span:first-child > span,
  .sidebar-footer > .theme-row > .switch {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* 6. Eligiendo el párrafo que se corrige (hoja de Bloop abierta), en el móvil la barra de formato
      se oculta: no se usa en ese paso y, con ella, en un iPhone SE solo quedaban ~90 px de apuntes. */
@media (max-width: 760px), (max-height: 560px) {
  body:has([data-bloop-coach]) .editor-command-bar :is(.editor-format-tools, .editor-detail-tools) { display: none; }
}

/* 7. Barra superior en tableta horizontal y escritorio: la columna de Atrás/Adelante medía 60 px
      y los dos botones 82–90 px, así que «Ir adelante» quedaba debajo del buscador. */
@media (min-width: 981px) {
  .topbar { grid-template-columns: max-content minmax(0, 1fr) max-content; }
  .app-shell.sidebar-collapsed .topbar { grid-template-columns: 44px max-content minmax(0, 1fr) max-content; }
}

/* 8. Móvil en horizontal (unos 390 px de alto): las secciones del menú en dos columnas para que
      quepan sin deslizar. */
@media (max-width: 980px) and (orientation: landscape) and (max-height: 560px) {
  .sidebar-scroll > :is(.primary-nav, .tools-nav) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 9. Teclado abierto (lo marca viewport.js): los botones de la ventana dejan de ir fijos abajo.
      Con ~390 px visibles, Enviar y Cancelar tapaban el campo en el que se escribe. */
@media (max-width: 760px) {
  :root[data-keyboard="open"] .modal .modal-actions { position: static; }
}

/* 10. Pantalla de apuntes en táctil: anclada a la zona visible que mide viewport.js (posición y
       alto). Medido en un iPad real: la página mide 100vh y lo visible es más bajo (barras de
       Safari), así que el navegador la deja desplazada aunque no tenga scroll, y con el teclado
       lo visible empieza más abajo. Siguiendo el flujo de la página, la pantalla quedaba cortada
       por arriba y con un hueco abajo hasta que se hacía zoom. */
@media screen and (pointer: coarse) {
  body:is([data-route="document"], [data-route="summary"]) .app-shell {
    position: fixed;
    top: var(--vv-top, 0px);
    right: 0;
    left: 0;
    height: var(--vv-height, 100dvh);
  }
}

/* 11. Escribiendo en el móvil (teclado abierto): de la barra de formato queda solo el primer
       grupo (negrita, cursiva, subrayado, color). Con todos, sobre el teclado solo cabían
       ~135 px de apuntes; así caben ~215. Enlaces, listas, sangrías y zoom vuelven al cerrarlo. */
@media (max-width: 760px) {
  :root[data-keyboard="open"] body:is([data-route="document"], [data-route="summary"]) .editor-command-bar .editor-detail-tools > :not(:first-child) { display: none; }
}