/* ==========================================================================
   ESTRUCTURA BASE Y FOOTER AL FINAL
   ========================================================================== */
html, body {
    height: 100%;
    margin: 0;
}

body {
    background: #f0f2f5;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 143.5px;
}

main.new_foot_header_main-scroller {
    flex: 1 0 auto;
    max-width: 1000px;
    margin: 40px auto;
    padding: 40px;
    background: white;
    font-family: sans-serif;
    line-height: 1.8;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    width: 100%;
    box-sizing: border-box;
}

#footer-cloned {
    flex-shrink: 0;
}

/* ==========================================================================
   BARRA SUPERIOR GRIS (#707070)
   ========================================================================== */
#top-header-bar {
    background: #f2f2f2;
    height: 33.5px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1010;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
}

    #top-header-bar .new_foot_header_container {
        max-width: 1080px;
        margin: 0 auto;
        width: 100%;
        display: flex;
        align-items: center;
    }

.new_foot_header_top-bar-content {
    padding-left: 388px; /* Alineación logos(242) + nav-padding(146) */
    display: flex;
    align-items: center;
    width: 100%;
}

.new_foot_header_top-social-wrapper {
    display: flex;
    gap: 15px;
    align-items: center;
    border-right: 1px solid #ccc;
    padding-right: 15px;
    margin-right: 15px;
}

.new_foot_header_top-icon {
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: opacity 0.2s; /* CORREGIDO: de 0.new_foot_header_2s a 0.2s */
}

    .new_foot_header_top-icon:hover {
        opacity: 0.5;
    }

    .new_foot_header_top-icon::before {
        font-family: 'ETmodules' !important;
        color: #707070 !important;
        font-size: 14px;
        speak: none;
        -webkit-font-smoothing: antialiased;
    }

.new_foot_header_fb::before {
    content: "\e093";
}

.new_foot_header_tw::before {
    content: "\e094";
}

.new_foot_header_ig::before {
    content: "\e09a";
}

.new_foot_header_rss::before {
    content: "\e09e";
}

/* ==========================================================================
   BARRA SUPERIOR GRIS - CORRECCIÓN DEFINITIVA MULTIBROWSER
   ========================================================================== */

.new_foot_header_top-text-menu {
    display: flex !important;
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 33.5px;
    align-items: center; /* Centra el texto verticalmente */
}

    /* ESTA REGLA ES LA MÁS IMPORTANTE */
    .new_foot_header_top-text-menu > li {
        position: relative !important; /* Ancla para el submenú */
        display: flex !important;
        align-items: center;
        height: 100%; /* Ocupa los 33.5px */
    }

    .new_foot_header_top-text-menu li a {
        color: #707070;
        text-decoration: none;
        font-family: sans-serif;
        font-size: 11px;
        font-weight: 600;
        text-transform: capitalize;
        white-space: nowrap;
        display: flex;
        align-items: center;
    }

/* SUBMENÚ */
.new_foot_header_top-submenu {
    display: none;
    position: absolute;
    top: 100%; /* Se pega al fondo del LI padre */
    left: 0; /* Se alinea al borde izquierdo del texto padre */
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    list-style: none;
    padding: 10px 0 !important;
    min-width: 260px;
    z-index: 1020;
    margin: 0;
}

/* Mostrar al pasar el mouse */
.new_foot_header_top-text-menu li:hover > .new_foot_header_top-submenu {
    display: block !important;
}

/* Ajuste para el último menú (Transparencia) para que no se salga de la pantalla */
.new_foot_header_top-text-menu li:last-child .new_foot_header_top-submenu {
    left: auto !important;
    right: 0 !important;
}

/* Estilos internos de los items del submenú */
.new_foot_header_top-submenu li {
    display: block !important;
    width: 100%;
    height: auto !important; /* Resetea el alto del padre */
}

    .new_foot_header_top-submenu li a {
        padding: 8px 20px !important;
        display: block !important;
        font-size: 11px;
        color: #707070;
        font-weight: normal;
        white-space: normal; /* Permite varias líneas si el texto es muy largo */
    }

/* Icono de flecha */
.new_foot_header_has-sub::after {
    content: "\33";
    font-family: 'ETmodules';
    font-size: 10px;
    margin-left: 5px;
    color: #707070;
}

/* ==========================================================================
   HEADER PRINCIPAL (CON EFECTO SHRINK ANIMADO)
   ========================================================================== */
#main-header {
    top: 33.5px !important;
    position: fixed;
    background: #fff;
    width: 100%;
    z-index: 1000;
    height: 110px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
    transition: all 0.4s ease-in-out; /* CORREGIDO: de 0.new_foot_header_4s a 0.4s */
}

.new_foot_header_et_menu_container {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 110px;
    max-width: 1080px;
    margin: 0 auto;
    transition: all 0.4s ease-in-out; /* CORREGIDO: de 0.new_foot_header_4s a 0.4s */
}

.new_foot_header_logo_container {
    display: flex !important;
    align-items: center !important;
    width: 242px !important;
    height: 100%;
    flex-shrink: 0;
}

    .new_foot_header_logo_container img {
        transition: all 0.4s ease-in-out; /* CORREGIDO: de 0.new_foot_header_4s a 0.4s */
        height: 101px;
        width: auto;
    }

#et-top-navigation {
    display: flex !important;
    align-items: center !important;
    padding-left: 146px !important;
    height: 100%;
    flex-grow: 1;
}

#top-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
}

    #top-menu li {
        padding-right: 12px !important;
    }

        #top-menu li a {
            font-size: 13px !important;
            white-space: nowrap !important;
        }

/* Estado shrink al hacer scroll */
#main-header.new_foot_header_shrink {
    height: 33.5px !important;
}

    #main-header.new_foot_header_shrink .new_foot_header_et_menu_container {
        height: 33.5px !important;
    }

    #main-header.new_foot_header_shrink .new_foot_header_logo_container img {
        height: 28px !important;
    }

/* ==========================================================================
   FOOTER (REDES SOCIALES)
   ========================================================================== */
.new_foot_header_et_pb_social_media_follow {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    gap: 8px;
    padding: 0;
    list-style: none;
}

    .new_foot_header_et_pb_social_media_follow li {
        margin: 0 !important;
        display: inline-block !important;
    }

        .new_foot_header_et_pb_social_media_follow li a.new_foot_header_icon {
            width: 32px !important;
            height: 32px !important;
            display: flex !important;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            position: relative;
            text-decoration: none;
        }

.new_foot_header_et-social-facebook a {
    background-color: #3b5998 !important;
}

.new_foot_header_et-social-twitter a {
    background-color: #000000 !important;
}

.new_foot_header_et-social-youtube a {
    background-color: #a82400 !important;
}

.new_foot_header_et-social-instagram a {
    background-color: #ea3c5a !important;
}

.new_foot_header_et-social-flikr a {
    background-color: #ff0084 !important;
}

.new_foot_header_et_pb_social_media_follow li a::before {
    font-family: 'ETmodules' !important;
    color: #fff !important;
    font-size: 16px;
    speak: none;
}

.new_foot_header_et-social-facebook a::before {
    content: "\e093";
}

.new_foot_header_et-social-twitter a::before {
    content: "\e094";
}

.new_foot_header_et-social-youtube a::before {
    content: "\e0a3";
}

.new_foot_header_et-social-instagram a::before {
    content: "\e09a";
}

.new_foot_header_et-social-flikr a::before {
    content: "\e0a6";
}

.new_foot_header_et_pb_social_media_follow_network_name {
    display: none !important;
}

/* 1. Aseguramos que el alto total sea del 100% de la pantalla */
html, body {
    height: 100%;
    margin: 0;
}

/* 2. Convertimos el body en un contenedor Flex */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ocupa al menos el alto de la pantalla */
}

/* 3. El contenedor del contenido debe crecer para ocupar el espacio sobrante */
/* Esto es lo que empuja el footer hacia abajo */
.container.body-content {
    flex: 1 0 auto;
}

/* 4. El header y el footer no deben encogerse */
#header-cloned,
#footer-cloned {
    flex-shrink: 0;
}

/* Estilo para el botón hamburguesa */
.navbar-toggler {
    border: 1px solid #ddd !important;
    padding: 5px 10px;
}

/* Evitar que el menu de bootstrap móvil se vea transparente */
#navbarNav {
    background: #ffffff;
    z-index: 9999;
    padding-left: 15px;
    padding-right: 15px;
}

/* Ajuste del shrink en móvil */
#main-header.new_foot_header_shrink {
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Corregir margen de la lista en modo bootstrap */
.navbar-nav .nav-link {
    color: #333 !important;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
}

/* El header debe tener posición fija o relativa para que el menu colapsable no flote */
#main-header {
    position: fixed;
    top: 35px; /* Ajustar según el alto del top-header-bar */
    width: 100%;
    z-index: 1000;
}
/* ==========================================================================
   1. ESTILOS COMUNES PARA MÓVIL Y TABLET (Pantallas < 992px)
   ========================================================================== */
@media (max-width: 991px) {
    /* Ocultar barra gris en móviles y tablets */
    #top-header-bar {
        display: none !important;
    }

    /* Espacio superior para que el contenido no quede debajo del header fijo */
    body {
        padding-top: 75px !important;
    }

    /* Header fijo arriba del todo */
    #main-header {
        top: 0 !important;
        height: 75px !important;
        position: fixed !important;
        z-index: 9999 !important;
        display: flex !important;
        align-items: center !important;
        background-color: #fff !important;
    }

        /* --- SOLUCIÓN DEFINITIVA AL SCROLL (SHRINK) EN MÓVIL/TABLET --- */
        #main-header.new_foot_header_shrink {
            height: 75px !important;
            top: 0 !important;
        }

            #main-header.new_foot_header_shrink .mobile-header-wrapper {
                height: 75px !important;
            }

            /* Targeteamos cada logo por su atributo src o clase para mantener su tamaño original */
            /* Altura para el logo MOP al hacer scroll */
            #main-header.new_foot_header_shrink .navbar-brand img[alt="MOP"] {
                height: 45px !important;
            }

            /* Altura para el logo CNA al hacer scroll (Evitamos que se agrande) */
            #main-header.new_foot_header_shrink .navbar-brand img[alt="CNA"] {
                height: 35px !important;
            }

    /* Forzar que el menú colapsable esté CERRADO por defecto */
    .collapse:not(.show) {
        display: none !important;
    }

    .navbar-collapse {
        position: absolute;
        top: 75px;
        left: 0;
        width: 100%;
        background: white;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        z-index: 1000;
    }

    .mobile-header-wrapper {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        height: 75px;
        width: 100%;
    }

    .navbar-brand img {
        object-fit: contain;
    }
}


/* ==========================================================================
   2. ESTILOS ESPECÍFICOS PARA TABLET/IPAD (768px a 991px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991px) {
    /* Asegurar que el botón de hamburguesa no flote demasiado a la derecha en iPad */
    .mobile-header-wrapper {
        max-width: 100%;
        padding: 0 30px !important;
    }
}

/* ==========================================================================
   3. ESTILOS PARA ESCRITORIO (>= 992px)
   ========================================================================== */
@media (min-width: 992px) {
    body {
        padding-top: 143.5px !important;
    }

    #top-header-bar {
        display: flex !important;
        top: 0 !important;
        position: fixed !important;
        z-index: 1010; /* Asegura estar sobre el header */
    }

    #main-header {
        top: 33.5px !important;
        position: fixed !important;
        height: 110px !important;
        z-index: 1000;
        transition: all 0.4s ease-in-out;
    }

    /* En escritorio aseguramos que no se aplique nada de los menús colapsables */
    .navbar-collapse {
        display: block !important;
        position: static !important;
        box-shadow: none !important;
    }

    /* EFECTO SHRINK SOLO EN ESCRITORIO */
    #main-header.new_foot_header_shrink {
        height: 33.5px !important;
        top: 0 !important; /* Sube para tapar la barra gris al encogerse */
    }

        #main-header.new_foot_header_shrink .new_foot_header_et_menu_container {
            height: 33.5px !important;
        }

        #main-header.new_foot_header_shrink .new_foot_header_logo_container img {
            height: 28px !important;
        }
}