/* ============================================================================
   Modales usables en celular
   ============================================================================
   PROBLEMA (reportado 2026-08-30 desde el celular, en Artículos/Servicios):
   el formulario no hacía scroll y los botones del pie —Cerrar, Limpiar, Guardar
   Cambios— quedaban por debajo de la pantalla, inalcanzables. El formulario se
   podía llenar pero no guardar.

   POR QUÉ PASA
   Bootstrap 4 hace scroll del `.modal` entero, no del cuerpo. En un móvil, con
   un formulario largo y el teclado abierto reduciendo el viewport, ese scroll no
   alcanza y el pie se sale de la pantalla. La solución de Bootstrap es la clase
   `modal-dialog-scrollable`, pero de ~90 modales del sistema solo 4 la usan.

   QUÉ HACE ESTA HOJA
   Le da a TODOS los modales el comportamiento de `modal-dialog-scrollable` en
   pantallas pequeñas: la caja se limita a la altura visible, el cuerpo scrollea
   y la cabecera y el pie quedan fijos. Así los botones están siempre a la vista,
   que es el criterio de UX del proyecto.

   POR QUÉ APLICA EN TODOS LOS ANCHOS
   Primero se acotó a <=767px, pero en un teléfono real NO funcionó: si el navegador
   tiene activo "sitio de escritorio" informa ~980px de ancho y la media query no
   entra, así que el arreglo simplemente no existía justo donde hacía falta. El alto
   disponible es la restricción real, no el ancho, y `max-height` solo actúa cuando
   el contenido no cabe: en una pantalla holgada estas reglas no cambian nada.

   El riesgo que motivaba acotarlo —desplegables de bootstrap-select/select2
   recortados por el cuerpo scrollable— quedó cerrado aparte: en `vistas/foot.php`
   se les fija `container: 'body'` / `dropdownParent: body` una sola vez, así que
   flotan por encima del modal en lugar de recortarse dentro.

   EL WRAPPER `<form>`
   Varios modales meten un `<form>` entre `.modal-content` y la cabecera/cuerpo/pie
   (Artículo, Sucursal…). Eso corta la cadena flex y `modal-dialog-scrollable` deja
   de funcionar, así que el `<form>` también se declara flex. Es la misma corrección
   que ya vivía suelta en Sucursal.php; aquí queda para todos.
   ========================================================================= */

/* Sin media query a propósito: ver la nota de arriba. */

/* La caja nunca más alta que la pantalla. El margen de Bootstrap en móvil
   es .5rem arriba y abajo.

   OJO CON `vh` EN MÓVILES: Chrome y Safari de celular calculan `100vh` con la
   barra de direcciones OCULTA, así que vale 60-120 px MÁS que el alto realmente
   visible — y el pie queda justo debajo del borde. `dvh` (dynamic viewport
   height) sí sigue al alto visible. Se declaran las dos: los navegadores que no
   entienden `dvh` descartan la segunda y se quedan con `vh`.
   Un emulador de escritorio no reproduce esto: ahí `100vh` es exacto. */
.modal-dialog {
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - 1rem);
    display: flex;
    flex-direction: column;
}

/* Bootstrap cambia el margen del diálogo en 576px: .5rem abajo de ese ancho y
   1.75rem a partir de ahí. La resta del `max-height` tiene que espejar ESE margen,
   o el diálogo cabe pero empieza más abajo y el pie se sale igual — pasaba por 11px
   en escritorio con la resta de 1rem. */
@media (min-width: 576px) {
    .modal-dialog {
        max-height: calc(100vh - 3.5rem);
        max-height: calc(100dvh - 3.5rem);
    }
}

.modal-content {
    max-height: 100%;
    overflow: hidden;
}

/* El <form> intermedio, cuando existe, hereda la cadena flex. */
.modal-content > form {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 100%;
    min-height: 0;      /* sin esto, un hijo flex no se deja encoger */
}

/* Solo el cuerpo scrollea; cabecera y pie quedan anclados. */
.modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;   /* inercia en iOS */
    min-height: 0;
}

/* Los botones del pie se envuelven en vez de salirse por el costado: con
   cuatro (Cerrar, Limpiar, Guardar, Guardar Cambios) no caben en una línea
   de 360 px. */
.modal-footer {
    flex-wrap: wrap;
    gap: .25rem;
}