/* ============================================================================
   MODALES — LAYOUT BASE DE TODO EL SISTEMA
   ============================================================================
   Bootstrap 4 centra en alto solo los diálogos marcados con
   `.modal-dialog-centered`; el resto queda pegado al borde superior con el
   margin de 1.75rem. En vez de agregar esa clase a mano en cada template (son
   ~50 modales, y los que se agreguen después volverían a nacer descentrados),
   se aplica acá el mismo mecanismo sobre `.modal-dialog`, así TODO modal del
   sistema queda centrado vertical y horizontalmente.

   Se carga después de Bootstrap (adminlte.min.css) y antes del CSS de cada
   pantalla, para que una vista pueda pisarlo si necesita otro layout.
   ============================================================================ */

/* El diálogo pasa a ser un flex container tan alto como el hueco disponible
   —descontando su propio margin, que es lo que resta el calc()— y alinea el
   contenido al centro. */
.modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
    max-height: calc(100% - 1rem);
}

/* El contenido nunca pasa de la ventana: sin este techo, un modal más alto que la
   pantalla se salía del viewport y había que scrollear dos veces —primero el
   contenedor `.modal` para mover el diálogo y después el cuerpo—. Con el techo, el
   cuerpo es el único que scrollea y el header y el pie quedan siempre a la vista
   (es lo que hace `.modal-dialog-scrollable` de Bootstrap; acá vale para TODO modal
   del sistema, sin agregar la clase en cada template).
   El techo va en `vh` y no en `%` porque un `max-height` porcentual no resuelve
   contra un padre de alto automático —el `<form>` que envuelve al contenido—. */
.modal-content {
    max-height: calc(100vh - 1rem);
    overflow: hidden;
}

@media (min-width: 576px) {
    .modal-dialog {
        min-height: calc(100% - 3.5rem);
        max-height: calc(100% - 3.5rem);
    }

    .modal-content { max-height: calc(100vh - 3.5rem); }
}

/* El cuerpo es el que absorbe el recorte: se encoge dentro del `.modal-content`
   (que Bootstrap ya declara flex column) y scrollea su propio contenido. */
.modal-body { overflow-y: auto; }

/* Bootstrap asume que el hijo directo del diálogo es `.modal-content`, que trae
   `width: 100%`. Cuando en el medio hay un `<form>` u otro envoltorio —patrón
   de todo modal que envía por AJAX— ese pasa a ser el flex item, se encoge al
   ancho de su contenido y el diálogo nunca llega a su `max-width`. Que el
   envoltorio ocupe el ancho completo. */
.modal-dialog > * { width: 100%; }

/* Bootstrap 4 le cuelga a `.modal-dialog-centered` un `::before` de
   `height: calc(100vh - 3.5rem)` como fallback de flexbox para navegadores
   viejos. Mide contra la ventana entera ignorando el padding del `.modal`
   (ej. el que reserva el navbar en `.modal-woker`), así que fuerza un alto de
   más y aparece un scroll fantasma en modales que entran holgados. Bootstrap 5
   lo eliminó por lo mismo; acá el `min-height` de arriba ya resuelve el
   centrado en todos los navegadores que soportamos. */
.modal-dialog-centered::before { content: none; }