/* ====================================
   RESPONSIVE.CSS
   IESJ Futurista Tropical
   ==================================== */

/* === TABLET (768px - 1024px) === */
@media (max-width: 1024px) {
    body.iesj-modern h1 { font-size: 40px; }
    body.iesj-modern h2 { font-size: 30px; }

    body.iesj-modern #header #main_menu ul.avia-menu > li > a {
        font-size: 12px !important;
        padding: 8px 10px !important;
        letter-spacing: 0.4px !important;
    }

    body.iesj-modern .iesj-watermark-section::before {
        width: 350px !important;
        height: 350px !important;
    }
}

/* === MÓVIL GRANDE (480px - 768px) === */
@media (max-width: 768px) {
    body.iesj-modern {
        font-size: 15px;
    }

    body.iesj-modern h1 { font-size: 30px; }
    body.iesj-modern h2 { font-size: 24px; }
    body.iesj-modern h3 { font-size: 20px; }

    body.iesj-modern #header {
        padding: 8px 0 !important;
    }

    /* ===== OCULTAR MENÚ NATIVO DE ENFOLD (respaldo) ===== */
    body.iesj-modern #header [id*="burger"],
    body.iesj-modern #header [class*="burger"],
    body.iesj-modern #header [class*="hamburger"],
    body.iesj-modern #header nav,
    body.iesj-modern #header #main_menu,
    body.iesj-modern #header .av-logo-container ~ *,
    body.iesj-modern #av-burger-menu-main,
    body.iesj-modern #av_mobile_menu_toggle,
    body.iesj-modern .av-burger-overlay {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        width: 0 !important;
        position: absolute !important;
        left: -9999px !important;
    }

    /* Botones */
    body.iesj-modern .avia-button,
    body.iesj-modern button:not(.menu-item):where(:not(#iesj-joseito-launcher):not(#iesj-joseito-callout-close)) {
        font-size: 12px !important;
        padding: 12px 22px !important;
    }

    /* Tarjetas */
    body.iesj-modern .av-masonry-entry:hover {
        transform: translateY(-3px) !important;
    }

    /* Slider caption */
    body.iesj-modern .slideshow_caption {
        padding: 16px 20px !important;
    }
}

/* === MÓVIL PEQUEÑO (< 480px) === */
@media (max-width: 480px) {
    body.iesj-modern h1 { font-size: 26px; }
    body.iesj-modern h2 { font-size: 20px; }

    body.iesj-modern .avia-button,
    body.iesj-modern button:not(.menu-item):where(:not(#iesj-joseito-launcher):not(#iesj-joseito-callout-close)) {
        display: block;
        width: 100%;
        text-align: center;
    }

    /* Deshabilitar algunas animaciones pesadas en móvil */
    body.iesj-modern .avia-section.dark::before,
    body.iesj-modern .avia-section.dark::after {
        display: none;
    }
}

/* === PANTALLAS GRANDES (> 1600px) === */
@media (min-width: 1600px) {
    body.iesj-modern .iesj-watermark-section::before {
        width: 650px !important;
        height: 650px !important;
    }
}

/* === MÓVIL: FORZAR VISIBILIDAD DEL CONTENIDO DE INICIO === */
@media (max-width: 768px) {
    /* Forzar que el contenido principal sea visible */
    body.home #main .entry-content,
    body.home #main .entry-content-wrapper,
    body.home #main .template-page,
    body.home #main article,
    body.home .iesj-hero-wrap,
    body.home .iesj-home-layout,
    body.home .iesj-muro-section {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
    }
    /* El hero mantiene su altura fija */
    body.home .iesj-hero-wrap {
        overflow: hidden !important;
        height: 350px !important;
    }
    /* Layout en móvil: una sola columna */
    .iesj-home-layout {
        display: flex !important;
        flex-direction: column !important;
        padding: 16px !important;
        gap: 24px !important;
    }
    /* Sidebar va al final en móvil */
    .iesj-sidebar {
        order: 2;
    }
    .iesj-muro-section {
        order: 1;
        padding: 24px 12px !important;
    }
}

/* === SIDEBAR IESJ EN PÁGINAS INTERNAS ===
   El filtro the_content envuelve TODO en .iesj-page-with-sidebar
   con .iesj-page-main + .iesj-sidebar-wrapper como hijos directos.
   ============================================= */

/* Layout grid 2 columnas, auto-contenido — no toca Enfold */
.iesj-page-with-sidebar {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 40px;
    align-items: start;
    margin: 0 auto;
    width: 100%;
}

.iesj-page-with-sidebar > .iesj-page-main {
    min-width: 0; /* evita desborde por contenido largo */
}

.iesj-page-with-sidebar > .iesj-sidebar-wrapper {
    width: 100%;
    margin: 0;
}

.iesj-page-with-sidebar > .iesj-sidebar-wrapper .iesj-sidebar {
    width: 100%;
    margin: 0;
}

/* Ocultar el sidebar nativo de Enfold en páginas/posts singulares
   (no en home). Usa los selectores reales de Enfold. */
body.iesj-modern.page:not(.home) .sidebar.sidebar_right,
body.iesj-modern.page:not(.home) .sidebar.sidebar_left,
body.iesj-modern.page:not(.home) .sidebar.units,
body.iesj-modern.page:not(.home) aside.sidebar,
body.iesj-modern.single .sidebar.sidebar_right,
body.iesj-modern.single .sidebar.sidebar_left,
body.iesj-modern.single .sidebar.units,
body.iesj-modern.single aside.sidebar {
    display: none !important;
}

/* Forzar el contenido principal a ancho completo cuando ocultamos el sidebar de Enfold */
body.iesj-modern.page:not(.home) .av-content-small,
body.iesj-modern.single .av-content-small,
body.iesj-modern.page:not(.home) .template-page.content,
body.iesj-modern.single .template-page.content {
    width: 100% !important;
    margin-right: 0 !important;
    border-right: none !important;
}

/* Responsive: tablet — apilar en una columna */
@media (max-width: 1024px) {
    .iesj-page-with-sidebar {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* Responsive: móvil */
@media (max-width: 768px) {
    .iesj-page-with-sidebar > .iesj-sidebar-wrapper .iesj-sidebar {
        padding: 20px 16px !important;
    }

    /* Tablas con scroll horizontal en móvil */
    body.iesj-modern .iesj-page-main table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Doc-header: reducir padding en móvil */
    body.iesj-modern .iesj-doc-header {
        padding: 24px 20px 20px !important;
    }

    /* Cards de directivos: 2 columnas en móvil */
    .iesj-dir-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }
}

/* === PRINT === */
@media print {
    body.iesj-modern * {
        animation: none !important;
        transition: none !important;
        box-shadow: none !important;
    }

    body.iesj-modern .iesj-watermark-section::before,
    body.iesj-modern .iesj-watermark-section::after,
    body.iesj-modern #header,
    body.iesj-modern footer {
        display: none;
    }
}