/* ============================================================
   responsive-global.css — Red de seguridad responsive Portal DRED
   Se carga DESPUÉS del resto de hojas de estilo de cada página.
   Objetivo: garantizar que ninguna página produzca scroll
   horizontal ni elementos desbordados en pantallas pequeñas,
   sin alterar el diseño en escritorio.
   ============================================================ */

/* --- 1. Evitar desbordamiento horizontal global --------------- */
html {
    overflow-x: hidden;
}
body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* --- 2. Medios fluidos ---------------------------------------- */
img,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
}
iframe,
embed,
object {
    max-width: 100%;
}

/* Vídeos e iframes embebidos (YouTube, Vimeo, Teams…) mantienen
   proporción 16:9 en móvil si el contenedor lo permite */
@media (max-width: 767.98px) {
    iframe[src*="youtube"],
    iframe[src*="vimeo"],
    iframe[src*="player"] {
        width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
    }
}

/* --- 3. Texto y elementos largos ------------------------------ */
h1, h2, h3, h4, h5, h6, p, a, li, td, th, span, label {
    overflow-wrap: break-word;
    word-wrap: break-word;
}
pre, code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
}

/* --- 4. Formularios ------------------------------------------- */
input,
select,
textarea,
button {
    max-width: 100%;
}
@media (max-width: 575.98px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="date"],
    select,
    textarea {
        width: 100%;
    }
    /* Evita el zoom automático de iOS al enfocar campos */
    input, select, textarea {
        font-size: 16px;
    }
}

/* --- 5. Tablas ------------------------------------------------ */
/* En pantallas pequeñas cualquier tabla ancha pasa a scroll
   horizontal interno en lugar de romper la página */
@media (max-width: 991.98px) {
    table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* --- 6. Contenedores y grids heredados ------------------------ */
@media (max-width: 767.98px) {
    /* Contenedores Bootstrap 3/4 antiguos con anchos fijos */
    .container {
        width: auto !important;
        max-width: 100% !important;
        padding-left: 15px;
        padding-right: 15px;
    }
    .row {
        margin-left: 0;
        margin-right: 0;
    }
    /* Elementos posicionados que se salen del borde derecho
       (blobs decorativos de los heros del área privada) */
    [class*="hero"] {
        overflow: hidden;
    }
}

/* --- 7. Utilidades comunes del portal ------------------------- */
@media (max-width: 767.98px) {
    /* Botoneras de los catálogos: apilar en columna */
    .fila_botones {
        gap: 16px !important;
    }
    .catalogo_boton {
        width: 100% !important;
        max-width: 320px;
    }
    /* Tarjetas de cursos y videopíldoras: centrar y limitar */
    .item_curso,
    .curso_item,
    .card {
        max-width: 100% !important;
    }
    /* Modales y cajas centradas con ancho fijo */
    .modal-dialog,
    .modal-content {
        max-width: calc(100vw - 24px) !important;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 420px) {
    /* Márgenes laterales más compactos en móviles estrechos */
    .selector-familias-wrap {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }
}