/* Ajustes del ERP para pantallas pequeñas. Se carga en TODAS las páginas
 * (`adminlte/lib/_styles.html`), así que lo que hay aquí vale para todo.
 *
 * ------------------------------------------------------------------------
 * MODALES A PANTALLA COMPLETA EN EL TELÉFONO
 * ------------------------------------------------------------------------
 * En un monitor, un modal centrado con la página detrás dice «esto es un
 * paso aparte, y lo de detrás sigue ahí». En un teléfono ese margen no
 * comunica nada: son 16 px de página en gris a cada lado y, a cambio, el
 * contenido —que es lo que se ha venido a hacer— se queda sin sitio.
 *
 * Bootstrap 4 no trae `modal-fullscreen` (llegó en la 5), así que se hace
 * aquí. A partir de 768 px el modal vuelve a ser el de siempre.
 *
 * Se aplica a todos los modales del ERP a propósito: la alternativa era que
 * cada pantalla decidiera por su cuenta y acabáramos con teléfonos donde
 * unos modales aprovechan la pantalla y otros no.
 */

/* Un modal centrado, centrado de verdad.
 *
 * Al abrir uno, Bootstrap compensa el ancho de la barra de desplazamiento
 * metiendo un `padding-right` INLINE al `body` (para que la página de detrás no
 * dé un salto) y también al `.modal`. Ese segundo es el que estorba: desplaza
 * el diálogo unos 15 px a la izquierda, así que un modal «centrado» acaba con
 * 143 px de margen a un lado y 158 al otro.
 *
 * Se quita solo el del `.modal` —el del `body` se queda y sigue evitando el
 * salto—. Hace falta `!important` porque el otro es un estilo inline puesto
 * por JS, y no hay forma de ganarle por especificidad.
 */
.modal { padding-right: 0 !important; }

@media (max-width: 767.98px) {

    /* En el teléfono la barra no ocupa nada, así que el relleno del body
       tampoco pinta: sin quitarlo, el modal se queda en 375 px de 390. */
    body.modal-open { padding-right: 0 !important; }

    .modal-dialog {
        margin: 0;
        max-width: 100%;
        width: 100%;
        min-height: 100%;
    }

    /* `modal-dialog-centered` centra con flex y una altura mínima calculada;
       a pantalla completa ya no hay nada que centrar, y si se deja puesto el
       contenido queda flotando en medio con huecos arriba y abajo. */
    .modal-dialog.modal-dialog-centered { min-height: 100%; }

    .modal-content {
        min-height: 100vh;
        border: 0;
        border-radius: 0;
    }

    /* El cuerpo se lleva el espacio sobrante y desplaza solo él: la cabecera
       (de qué documento es) y el pie (los botones) se quedan a la vista, que
       es justo lo que hace falta con el teclado abierto. */
    .modal-dialog-scrollable .modal-content { max-height: 100vh; }

    .modal-content > .modal-body {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Los botones del pie, en columna y grandes: en el móvil se pulsan con el
       pulgar y en fila salen estrechos. */
    .modal-footer > .btn { flex: 1 1 auto; }
}

/* ------------------------------------------------ el toque que se perdía
 *
 * Al cerrar un modal, Bootstrap lo desvanece: durante la transición sigue
 * siendo `display:block` y su fondo también, así que **se comen el primer
 * toque** de lo que haya debajo. Medido con `elementFromPoint`: 300 ms después
 * de pulsar «Cerrar», lo que hay encima de la tarjeta de un pedido sigue
 * siendo el pie del modal.
 *
 * En preparación de pedidos se abren y cierran documentos uno detrás de otro
 * toda la mañana, y el efecto en una tableta es «este trasto va a rachas»:
 * tocas, no pasa nada, vuelves a tocar. Lo cazó una prueba de uso midiendo el
 * patrón — fallaba esperando 1 s y no esperando 2, y un toque en zona vacía lo
 * arreglaba.
 *
 * Mientras no esté abierto del todo (`.show`), no recibe toques. La animación
 * se conserva; lo que se quita es que estorbe. */
.modal:not(.show),
.modal-backdrop:not(.show) {
    pointer-events: none;
}