/*
 * ══════════════════════════════════════════════════════════════════════════════
 *  LAS VENTANAS EN EL MÓVIL                                           (06/10/2026)
 * ──────────────────────────────────────────────────────────────────────────────
 *  Almudena no podía pedir una cita médica «por horas»: al elegirlo, la ventana crecía más que
 *  la pantalla y «Enviar solicitud» quedaba debajo de la barra de abajo (la de Fichar), sin forma
 *  de llegar hasta él. Pasaba en todas las ventanas de la app, por dos cosas a la vez:
 *    · se pintan dentro del contenido, que va en una capa (z-10) por debajo de la barra (z-30),
 *      así que la barra las tapa aunque ellas digan z-50;
 *    · y dentro de ellas no se podía bajar.
 *
 *  Sólo donde existe esa barra (por debajo de 1024 px de ancho):
 *    1 · mientras haya una ventana abierta, la barra de abajo no se ve;
 *    2 · si la ventana no cabe, se baja dentro de ella; si cabe, sigue centrada.
 *
 *  Va en un fichero aparte, enlazado desde index.html, para poder publicarlo sin recompilar la
 *  app: el 06/10 había cambios de otras sesiones en web/src sin publicar desde el 21/09.
 * ══════════════════════════════════════════════════════════════════════════════
 */
@media (max-width: 1023.98px) {
  /* 1 · La barra de abajo se aparta mientras hay una ventana abierta. */
  body:has(.fixed.inset-0.z-50) nav.fixed.bottom-0 { visibility: hidden; }

  /* 2 · Las ventanas de siempre (fondo + tarjeta «relative»): se puede bajar dentro. */
  .fixed.inset-0.z-50.flex {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    align-items: flex-start;
    padding-top: max(1rem, env(safe-area-inset-top, 0px));
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  }
  /* Centrada si cabe; arriba del todo (y se baja) si no cabe. */
  .fixed.inset-0.z-50.flex > .relative { margin-top: auto; margin-bottom: auto; }
  /* El fondo oscuro se queda quieto mientras se baja, y sigue cerrando al tocarlo. */
  .fixed.inset-0.z-50.flex > .absolute.inset-0 { position: fixed; }

  /* Las tres ventanas montadas con «grid»: lo mismo. */
  .fixed.inset-0.z-50.grid { overflow-y: auto; -webkit-overflow-scrolling: touch; align-items: start; }
  .fixed.inset-0.z-50.grid > * { margin-top: auto; margin-bottom: auto; }
}

/* Un navegador que no sepa apartar la barra (sin «:has»): sitio de sobra abajo para que el
   último botón pueda subir por encima de ella. */
@supports not selector(:has(*)) {
  @media (max-width: 1023.98px) {
    .fixed.inset-0.z-50.flex, .fixed.inset-0.z-50.grid { padding-bottom: 7rem; }
  }
}