/* ================================================================
   MOBILE-FIX.CSS — Fix responsivo definitivo
   Resuelve el desborde horizontal en todos los módulos
   ================================================================ */

/* ── 1. CONTENCIÓN GLOBAL — nada se sale de la pantalla ── */
html {
    overflow-x: hidden;
}
body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* box-sizing solo en elementos seguros */
div, section, article, aside, header, footer, main, nav,
input, textarea, select, img, video {
    box-sizing: border-box;
}

/* Imágenes e iframes nunca desbordan */
img, video, iframe, embed, object {
    max-width: 100%;
}

/* ── 2. BARRAS DE BÚSQUEDA Y FILTROS — el problema más visible ── */
/* Buscador de biblioteca */
.bib-buscar-wrap {
    width: 100%;
    max-width: 580px;
}

@media (max-width: 600px) {
    .bib-buscar-wrap {
        flex-direction: column;
        gap: .5rem;
        padding: 0 1rem;
    }
    .bib-buscar-wrap input,
    .bib-buscar-wrap button {
        width: 100%;
        border-radius: var(--radio) !important;
    }

    /* Filtros de empleos */
    .emp-filtros {
        flex-direction: column;
    }
    .emp-filtros input,
    .emp-filtros select {
        width: 100% !important;
        min-width: unset !important;
    }

    /* Filtros genéricos con class filtros-bar */
    .filtros-bar {
        flex-direction: column !important;
        gap: .5rem !important;
    }
    .filtros-bar input,
    .filtros-bar select,
    .filtros-bar .btn {
        width: 100% !important;
        min-width: unset !important;
    }
    .filtros-bar form {
        flex-direction: column;
        width: 100%;
    }
    .filtros-bar form input,
    .filtros-bar form select {
        width: 100% !important;
    }
}

/* ── 3. LAYOUTS DE DOS COLUMNAS CON ANCHO FIJO ── */
/* Empleos: 1fr 260px */
.emp-layout {
    grid-template-columns: 1fr 260px;
}
@media (max-width: 860px) {
    .emp-layout {
        grid-template-columns: 1fr !important;
    }
    .emp-sidebar {
        position: static !important;
    }
}

/* Convocatorias: 1fr 320px */
@media (max-width: 900px) {
    .conv-layout {
        grid-template-columns: 1fr !important;
    }
}

/* Perfil: 320px 1fr */
@media (max-width: 768px) {
    .perfil-grid {
        grid-template-columns: 1fr !important;
    }
    .pub-grid {
        grid-template-columns: 1fr !important;
    }
    .edit-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Maestro archivos: 1fr 340px */
@media (max-width: 860px) {
    .page-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Maestro dashboard: 1fr 320px */
@media (max-width: 860px) {
    .dash-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Historias destacado: 1fr 300px */
@media (max-width: 860px) {
    .dest-layout {
        grid-template-columns: 1fr !important;
    }
}

/* Foro layout */
@media (max-width: 860px) {
    .foro-layout {
        grid-template-columns: 1fr !important;
    }
    .foro-sidebar {
        display: none !important;
    }
}

/* ── 4. EVENTO CARD — columna de 180px fija ── */
@media (max-width: 600px) {
    .evento-card {
        grid-template-columns: 1fr !important;
    }
    .evento-fecha-col {
        flex-direction: row;
        justify-content: center;
        gap: .6rem;
        padding: .8rem 1rem;
    }
    .evento-dia { font-size: 2rem; }
}

/* ── 5. GRIDS CON COLUMNAS FIJAS EN STYLE INLINE ── */
/* Los grids con style inline son el principal culpable del overflow */
@media (max-width: 700px) {
    /* Grid de 2 columnas inline */
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="grid-template-columns:1fr 1fr"],
    div[style*="grid-template-columns: 2fr 1fr"],
    div[style*="grid-template-columns:2fr 1fr"],
    div[style*="grid-template-columns: 1fr 2fr"],
    div[style*="grid-template-columns:1fr 2fr"] {
        grid-template-columns: 1fr !important;
    }
    /* Grid con sidebar de px fijo inline */
    div[style*="grid-template-columns: 1fr 320px"],
    div[style*="grid-template-columns:1fr 320px"],
    div[style*="grid-template-columns: 1fr 280px"],
    div[style*="grid-template-columns:1fr 280px"],
    div[style*="grid-template-columns: 1fr 340px"],
    div[style*="grid-template-columns:1fr 340px"],
    div[style*="grid-template-columns: 1fr 260px"],
    div[style*="grid-template-columns:1fr 260px"],
    div[style*="grid-template-columns: 1fr 300px"],
    div[style*="grid-template-columns:1fr 300px"],
    div[style*="grid-template-columns: 320px 1fr"],
    div[style*="grid-template-columns:320px 1fr"],
    div[style*="grid-template-columns: 280px 1fr"],
    div[style*="grid-template-columns:280px 1fr"],
    div[style*="grid-template-columns: 300px 1fr"],
    div[style*="grid-template-columns:300px 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ── 6. TABLA DE ALUMNOS — min-width: 750px ── */
@media (max-width: 768px) {
    .alumnos-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
    .alumnos-table {
        /* Permitir scroll horizontal solo en la tabla */
        min-width: 600px;
    }
    /* Wrapper para la tabla si no tiene el div contenedor */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
}

/* ── 7. BOTONES DE FILTROS INLINE QUE NO CABEN ── */
@media (max-width: 600px) {
    /* Grupos de botones de filtro */
    .orden-tabs {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: .3rem;
    }
    /* Chips de categoría */
    .categorias-filtro {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: .3rem;
    }
    .tipos-grid {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        padding-bottom: .3rem;
    }
}

/* ── 8. FORMULARIOS — filas de 2 columnas ── */
@media (max-width: 600px) {
    .form-row,
    .form-row-2,
    .form-row-3,
    .form-grid-2 {
        grid-template-columns: 1fr !important;
    }
    /* grid-2 dentro de formularios */
    .form-section .grid-2,
    .form-section .grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── 9. NIVELACIÓN — barra de búsqueda y filtros ── */
@media (max-width: 600px) {
    .nivel-hero {
        padding: 2rem 0;
    }
    .nivel-hero h1 {
        font-size: 1.4rem;
    }
    .seccion-label {
        flex-wrap: wrap;
        gap: .4rem;
    }
    .seccion-label > span {
        font-size: .78rem;
    }
    .modulos-grid {
        grid-template-columns: 1fr !important;
    }
    .modulo-meta {
        flex-wrap: wrap;
        gap: .4rem;
    }
}

/* ── 10. BIBLIOTECA MATERIA — acciones con min-width: 110px ── */
@media (max-width: 600px) {
    .recurso-card {
        flex-direction: column !important;
    }
    .recurso-acciones {
        min-width: unset !important;
        flex-direction: row !important;
        flex-wrap: wrap;
    }
    .recurso-acciones .btn {
        flex: 1;
        justify-content: center;
    }
}

/* ── 11. ADMIN — tablas y filtros ── */
@media (max-width: 768px) {
    .admin-nav-list {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .admin-nav-list::-webkit-scrollbar { display: none; }
}

@media (max-width: 600px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .accesos-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ── 12. CONVOCATORIAS — timer en móvil ── */
@media (max-width: 480px) {
    .conv-timer-bloque {
        min-width: 60px !important;
    }
    .conv-timer-num {
        font-size: 1.8rem !important;
        min-width: 60px !important;
    }
    .conv-timer-sep {
        font-size: 1.5rem;
    }
    .conv-hero-btns .btn-registro,
    .conv-hero-btns .btn-wsp {
        width: 100%;
        justify-content: center;
    }
}

/* ── 13. TEXTO LARGO QUE DESBORDA ── */
p, li, td, th, span, div,
.modulo-titulo, .emp-titulo,
.post-titulo, .conv-paso-titulo {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Excepciones: elementos que deben preservar nowrap */
.badge, .btn, .rol-badge,
.panel-nav-list a,
.admin-nav-list a {
    word-break: normal;
    overflow-wrap: normal;
}

/* ── 14. CONTAINER — padding mínimo en pantallas muy pequeñas ── */
@media (max-width: 380px) {
    .container,
    .container-sm {
        padding: 0 .75rem !important;
    }
}

/* ── 15. HISTORIAS / EGRESADOS ── */
@media (max-width: 600px) {
    .historias-grid,
    .dest-grid,
    .eg-grid {
        grid-template-columns: 1fr !important;
    }
    .historia-card {
        flex: 0 0 calc(100vw - 3rem);
    }
}

/* ── 16. MODAL — no desbordan en pantallas pequeñas ── */
@media (max-width: 600px) {
    .modal-box,
    .modal-contenido,
    [class*="modal"] > div {
        width: 95vw !important;
        max-width: 95vw !important;
        padding: 1.2rem !important;
        margin: 1rem auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

/* ── 17. HERO SECTIONS — padding en móvil ── */
@media (max-width: 480px) {
    .bib-hero,
    .emp-hero,
    .conv-hero,
    .nivel-hero,
    .panel-header {
        padding: 2rem 0 !important;
    }
}

/* ── 18. PANEL NAV (maestro/admin) — scroll horizontal ── */
.panel-nav-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.panel-nav-list::-webkit-scrollbar { display: none; }

/* ── 19. MAESTRO ALUMNOS — tabla con min-width fijo ── */
@media (max-width: 768px) {
    /* Forzar contenedor de tabla con scroll */
    .maestro-alumnos-tabla-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── 20. GRID-2 INLINE en vista maestro/index ── */
@media (max-width: 480px) {
    div[style*="grid-template-columns:1fr 1fr;gap:.8rem"],
    div[style*="grid-template-columns: 1fr 1fr; gap: .8rem"] {
        grid-template-columns: 1fr !important;
    }
}

/* ── FORO COMUNIDAD — fix directo ── */
@media (max-width: 700px) {
    /* Barra de filtros en columna */
    .filtros-bar {
        flex-direction: column !important;
        padding: .8rem !important;
    }
    /* El form: input y botón en fila, botón chico */
    .filtros-bar form {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: .5rem !important;
    }
    .filtros-bar input[type="text"] {
        flex: 1 !important;
        min-width: 0 !important;
        width: auto !important;
    }
    /* CRÍTICO: el botón buscar no se expande */
    .filtros-bar form button.btn,
    .filtros-bar form .btn {
        width: auto !important;
        min-width: unset !important;
        flex-shrink: 0 !important;
        padding: .5rem .9rem !important;
    }
    /* Tabs de orden: scroll horizontal */
    .orden-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        width: 100% !important;
        padding-bottom: 4px !important;
        scrollbar-width: none !important;
    }
    .orden-tabs::-webkit-scrollbar { display: none !important; }
    .orden-tab { flex-shrink: 0 !important; }
    /* Chips categorías: scroll horizontal */
    .cats-bar {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        width: 100% !important;
        padding-bottom: 4px !important;
        scrollbar-width: none !important;
    }
    .cats-bar::-webkit-scrollbar { display: none !important; }
    .cat-chip { flex-shrink: 0 !important; }
}