/* =========================================================================
 * Mental Health Intake — Viewport base utilities.
 *
 * Punto único de las utilidades transversales de la vista adaptativa.
 * TODAS las reglas de este archivo viven bajo `body.mhi-modo-movil`, la
 * clase que `viewport.js` aplica y retira según la regla booleana
 * `window.innerHeight > window.innerWidth`.
 *
 * Este archivo NO contiene reglas específicas de componente. Cada
 * superficie del plugin (formulario, historial, manager, modal, admin)
 * añade sus propias reglas de reorganización bajo el mismo selector en
 * su propia hoja de estilos. Aquí solo viven las utilidades compartidas
 * que cualquiera puede consumir mediante atributos `data-mhi-*`:
 *
 *   - Prevención global de scroll horizontal en el body.
 *   - Ajuste base de medios y contenedores anchos (img, video, iframe,
 *     table, pre) para que nunca excedan el ancho del viewport.
 *   - Utilidades de apilado para contenedores flex/grid.
 *   - Utilidades de ancho completo para elementos sueltos.
 *   - Utilidades de forzado de display y de wrap.
 *
 * v1.0.0 — F1.2 de la hoja de ruta de adaptabilidad.
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * 1. Prevención global de scroll horizontal en el body.
 * ---------------------------------------------------------------------- */

body.mhi-modo-movil {
    overflow-x: hidden;
    max-width: 100vw;
}

/* -------------------------------------------------------------------------
 * 2. Medios y contenedores anchos nunca exceden el viewport.
 *
 * Aplica a los elementos que con más frecuencia producen scroll
 * horizontal cuando el viewport es vertical: imágenes, videos, iframes,
 * tablas y bloques <pre>. No modifica su semántica ni su contenido, solo
 * garantiza que no desborden el ancho del viewport.
 * ---------------------------------------------------------------------- */

body.mhi-modo-movil img,
body.mhi-modo-movil video,
body.mhi-modo-movil iframe,
body.mhi-modo-movil table,
body.mhi-modo-movil pre {
    max-width: 100%;
    box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * 3. Utilidades de apilado para contenedores flex/grid.
 *
 * Aplicar `data-mhi-stack` a cualquier contenedor flex/grid cuyos hijos
 * deban apilarse verticalmente a ancho completo en vista móvil. La regla
 * no afecta la vista de escritorio.
 * ---------------------------------------------------------------------- */

body.mhi-modo-movil [data-mhi-stack] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

body.mhi-modo-movil [data-mhi-stack] > * {
    width: 100%;
    max-width: 100%;
}

/* -------------------------------------------------------------------------
 * 4. Utilidades de ancho completo.
 *
 * `data-mhi-full-width` fuerza el 100% del ancho en vista móvil.
 * `data-mhi-full-width-block` fuerza además display: block.
 * ---------------------------------------------------------------------- */

body.mhi-modo-movil [data-mhi-full-width] {
    width: 100% !important;
    max-width: 100% !important;
}

body.mhi-modo-movil [data-mhi-full-width-block] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* -------------------------------------------------------------------------
 * 5. Utilidades de wrap y de control de overflow.
 *
 * `data-mhi-wrap` permite que un contenedor flex envuelva sus hijos
 * cuando no caben en una fila.
 * `data-mhi-no-overflow` protege un contenedor puntual contra scroll
 * horizontal; útil cuando un hijo ancho debe ajustarse al contenedor.
 * ---------------------------------------------------------------------- */

body.mhi-modo-movil [data-mhi-wrap] {
    flex-wrap: wrap !important;
}

body.mhi-modo-movil [data-mhi-no-overflow] {
    overflow-x: hidden !important;
    min-width: 0;
}

/* -------------------------------------------------------------------------
 * 6. Utilidad de padding compacto para contenedores con padding excesivo.
 * ---------------------------------------------------------------------- */

body.mhi-modo-movil [data-mhi-compact] {
    padding: 8px !important;
}

/* -------------------------------------------------------------------------
 * 7. Reducción de motion bajo preferencia del usuario.
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    body.mhi-modo-movil [data-mhi-stack],
    body.mhi-modo-movil [data-mhi-full-width],
    body.mhi-modo-movil [data-mhi-full-width-block] {
        transition: none !important;
        animation: none !important;
    }
}