/* ===========================================================================
   responsiveMovil.css
   Ajustes móviles TRANSVERSALES: lo que se descuadra igual en todos los
   módulos y no tiene sentido repetir vista por vista.

   Compañero de responsiveTablas.css (que resuelve el desplazamiento
   horizontal de las tablas). Aquí van el modal, los desbordes de contenido
   y los dos componentes de terceros que traen «float» de escritorio.

   Se carga DESPUÉS del tema y de appShell.css → capa de correcciones.
   Cada módulo sigue siendo dueño de su propio tramo responsivo; esto es solo
   el piso común.
   =========================================================================== */

@media (max-width: 767px) {

    /* ── MODAL ──────────────────────────────────────────────────────────────
       Bootstrap 3 le deja al diálogo 10px de margen en móvil, pero NO lo
       centra (margin:10px, sin «auto»). Cualquier vista que además le fije un
       ancho en porcentaje —92%, 94%, 96%— lo deja pegado al borde izquierdo
       con un hueco desigual a la derecha, y en pantallas muy angostas asomando
       por fuera. Aquí el diálogo vuelve a medir la pantalla menos su margen.
       Lleva !important porque casi todos esos anchos se fijan por id.        */
    .modal-dialog {
        width: auto !important;
        max-width: none !important;
        margin: 10px !important;
    }

    /* ── DESBORDES ──────────────────────────────────────────────────────────
       Nada dentro de una vista o de un modal debe empujar la página a lo
       ancho: la imagen se ajusta y el bloque preformateado se desplaza solo. */
    #window img,
    .modal-content img {
        max-width: 100%;
        height: auto;
    }

    #window pre,
    .modal-content pre {
        overflow-x: auto;
    }

    /* Select2 v3 calcula el ancho del desplegable a partir del campo. Si el
       campo vive dentro de una tabla desplazada en horizontal, el panel se
       abre fuera de la pantalla. */
    .select2-drop {
        max-width: calc(100vw - 16px);
    }

    /* ── DATATABLES ─────────────────────────────────────────────────────────
       El buscador, el «Mostrar N» y el paginador flotan a los lados: en un
       teléfono se montan uno sobre otro. En columna, cada uno a lo ancho.    */
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length {
        float: none;
        text-align: left;
    }

    .dataTables_wrapper .dataTables_filter input {
        margin-left: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .dataTables_wrapper .dataTables_paginate,
    .dataTables_wrapper .dataTables_info {
        float: none;
        text-align: center;
    }
}