/* ===========================================================================
   modalTheme.css — Comportamiento común de los modales con diseño propio
   (los marcados con la clase `app-modal`; ver bootstrap-reset.css).

   Bootstrap 3 deja la tarjeta del modal crecer todo lo que quiera y hace que
   sea la CAPA de atrás (.modal) la que se desplace. Con tarjetas grandes eso
   produce cuatro estorbos a la vez, y los cuatro se arreglan aquí:

     · La tarjeta se sale por abajo y el pie queda fuera de la vista.
     · Al aparecer la barra de desplazamiento de .modal, el diálogo (centrado
       con `margin: auto`) se corre hacia la izquierda: se ve descentrado.
     · La página de atrás sigue desplazándose por debajo del modal.
     · Y al bloquearla, si no se reserva el hueco de la barra, todo salta.

   Aplica de 320px a monitores: la tarjeta se acota al alto de la VENTANA y el
   reparto lo hace flexbox — cabecera y pie fijos, cuerpo elástico. Así no hay
   número mágico que recalcular por cada tamaño de pantalla.
   =========================================================================== */

/* ── 1. BLOQUEO DE LA PÁGINA DE ATRÁS ────────────────────────────────────────
   Bootstrap le pone `overflow: hidden` al <body>, pero en este sistema el
   <html> lleva `overflow-x: hidden` (style.css), y eso lo convierte a ÉL en el
   contenedor que desplaza la página. Resultado: el bloqueo del <body> no hace
   nada y el fondo se sigue moviendo. Se traslada el bloqueo al <html>.

   `scrollbar-gutter: stable` reserva el hueco de la barra siempre, de modo que
   al bloquear no cambia el ancho útil y la página no da el salto lateral.
   Si el navegador no entiende `:has()`, simplemente se queda el
   comportamiento de hoy: nada empeora.                                       */
html {
    scrollbar-gutter: stable;
}

html:has(> body.modal-open) {
    overflow: hidden;
}

/* ── 2. LA TARJETA NO PASA DEL ALTO DE LA VENTANA ───────────────────────────
   Los 60px son los dos márgenes del diálogo. Al acotar la tarjeta, .modal ya
   no necesita desplazarse: se acabó la barra que descentraba el diálogo.     */
.app-modal .modal-dialog {
    margin: 30px auto;
}

.app-modal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 60px);
}

/* Cabecera, barras de herramientas y pie mantienen su alto natural. */
.app-modal .modal-content > * {
    flex: 0 0 auto;
}

/* El cuerpo es lo único elástico y lo único que se desplaza. Cada módulo llama
   distinto a su caja de cuerpo, así que van todas nombradas; un modal nuevo
   que use `.modal-body` ya queda cubierto.
   `min-height: 0` es imprescindible: sin él un hijo flex no se deja encoger
   por debajo de su contenido y la tarjeta se volvería a salir. */
.app-modal .modal-content > .modal-body,
.app-modal .modal-content > .cc-modal-body,
.app-modal .modal-content > .to-modal-body,
.app-modal .modal-content > .ccp-body,
.app-modal .modal-content > .opc-modal-body,
.app-modal .modal-content > .per-imp-body,
.app-modal .modal-content > .rc-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── 3. PANTALLAS BAJAS ──────────────────────────────────────────────────────
   Una laptop de 1366×768 deja poco más de 600px de alto útil. Ahí 30px de
   margen arriba y abajo son 10% de la pantalla regalados. */
@media (max-height: 720px) {
    .app-modal .modal-dialog { margin: 14px auto; }
    .app-modal .modal-content { max-height: calc(100vh - 28px); }
}

/* ── 4. MÓVIL Y TABLET VERTICAL ──────────────────────────────────────────────
   El ancho lo resuelve responsiveMovil.css (diálogo a lo ancho de la pantalla
   menos su margen); aquí sólo se acompaña el alto con ese mismo margen. */
@media (max-width: 767px) {
    .app-modal .modal-dialog { margin: 10px; }
    .app-modal .modal-content { max-height: calc(100vh - 20px); }
}