main{position:relative}main.tx-unal-accesibilidad{position:absolute}main.tx-unal-accesibilidad .panel-content{padding:1em}

/* ============================================================
   MENÚ EN CASCADA — Dropdown hover para Plantilla UNAL
   Compatible con Bootstrap 3/4 + estructura nav navbar-nav
   ============================================================ */

/* Primer nivel: mostrar dropdown al hover */
.mainMenu .nav.navbar-nav > li.dropdown:hover > .dropdown-menu,
.navigation .nav.navbar-nav > li.dropdown:hover > .dropdown-menu {
    display: block;
    animation: fadeInDown 0.18s ease-in-out;
}

/* Segundo nivel (submenu) al hover */
.mainMenu .dropdown-menu li.dropdown-submenu:hover > .dropdown-menu,
.navigation .dropdown-menu li.dropdown-submenu:hover > .dropdown-menu {
    display: block;
    left: 100%;
    top: 0;
    animation: fadeInRight 0.15s ease-in-out;
}

/* Estilo del panel dropdown */
.mainMenu .dropdown-menu,
.navigation .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    min-width: 220px;
    background-color: #3a4f35;
    border: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    padding: 6px 0;
}

/* Ítem de segundo nivel */
.mainMenu .dropdown-menu .dropdown-item,
.navigation .dropdown-menu .dropdown-item {
    display: block;
    padding: 8px 18px;
    color: #e8f0e5 !important;
    font-size: 0.88rem;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s;
}

.mainMenu .dropdown-menu .dropdown-item:hover,
.navigation .dropdown-menu .dropdown-item:hover {
    background-color: rgba(255,255,255,0.12);
    color: #fff !important;
}

/* Submenu de tercer nivel */
.mainMenu .dropdown-submenu > .dropdown-menu,
.navigation .dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    border-radius: 0 4px 4px 4px;
}

/* ── Caret de dropdown (primer nivel) ── */
.navigation .nav.navbar-nav > li > a.dropdown-toggle::after,
.mainMenu .nav.navbar-nav > li > a.dropdown-toggle::after {
    display: inline-block;
    vertical-align: middle;
    content: '▾';
    border: none;
    margin-left: .3em;
    font-size: .85em;
    opacity: .7;
}

/* Flecha indicadora de submenu (segundo nivel) */
.mainMenu .dropdown-submenu > a::after,
.navigation .dropdown-submenu > a::after {
    content: ' ›';
    float: right;
    margin-left: 8px;
    opacity: 0.7;
}

/* Animaciones suaves */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Menú móvil: mostrar como lista expandida */
@media (max-width: 991px) {
    /* Todos los dropdowns ocultos por defecto - incluye menú móvil copiado */
    #container_mainmenu_mobil .dropdown-menu,
    #container_mainmenu_mobil .sub-menu,
    #container_mainmenu_mobil ul,
    .mainMenu .dropdown-menu,
    .mainMenu .sub-menu,
    .navigation .dropdown-menu,
    .navigation .sub-menu {
        position: static !important;
        box-shadow: none !important;
        border-left: 3px solid rgba(255,255,255,0.2);
        margin-left: 12px;
        display: none !important;
        background: rgba(0,0,0,0.2);
        float: none !important;
        width: auto !important;
    }
    
    /* Mostrar cuando el padre tiene clase .open */
    #container_mainmenu_mobil li.open > .dropdown-menu,
    #container_mainmenu_mobil li.open > .sub-menu,
    #container_mainmenu_mobil li.open > ul,
    .mainMenu li.open > .dropdown-menu,
    .mainMenu li.open > .sub-menu,
    .navigation li.open > .dropdown-menu,
    .navigation li.open > .sub-menu {
        display: block !important;
    }
    
    /* Dropdown items styling */
    #container_mainmenu_mobil .dropdown-menu li,
    #container_mainmenu_mobil .sub-menu li,
    #container_mainmenu_mobil ul li,
    .mainMenu .dropdown-menu li,
    .mainMenu .sub-menu li,
    .navigation .dropdown-menu li,
    .navigation .sub-menu li {
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    #container_mainmenu_mobil .dropdown-menu a,
    #container_mainmenu_mobil .sub-menu a,
    #container_mainmenu_mobil ul a,
    .mainMenu .dropdown-menu a,
    .mainMenu .sub-menu a,
    .navigation .dropdown-menu a,
    .navigation .sub-menu a {
        padding: 10px 20px !important;
        color: #e8f0e5 !important;
    }
    #container_mainmenu_mobil .dropdown-menu a:hover,
    #container_mainmenu_mobil .sub-menu a:hover,
    #container_mainmenu_mobil ul a:hover,
    .mainMenu .dropdown-menu a:hover,
    .mainMenu .sub-menu a:hover,
    .navigation .dropdown-menu a:hover,
    .navigation .sub-menu a:hover {
        background: rgba(255,255,255,0.1) !important;
    }
}

/* ============================================================
   MENÚ HORIZONTAL — Forzar layout correcto del nav principal
   ============================================================ */

/* El ul generado por wp_nav_menu debe ser horizontal */
#main_menu_container > ul.nav.navbar-nav,
.mainMenu > ul.nav.navbar-nav,
.navigation ul.nav.navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Cada li de primer nivel en línea */
#main_menu_container > ul.nav.navbar-nav > li,
.mainMenu > ul.nav.navbar-nav > li,
.navigation ul.nav.navbar-nav > li {
    position: relative;
    display: flex !important;
    align-items: center;
}

/* Link de primer nivel */
#main_menu_container ul.nav.navbar-nav > li > a,
.mainMenu ul.nav.navbar-nav > li > a,
.navigation ul.nav.navbar-nav > li > a {
    display: block;
    padding: 12px 14px;
    color: #e8f0e5;
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
    line-height: 1.2;
}

#main_menu_container ul.nav.navbar-nav > li > a:hover,
.mainMenu ul.nav.navbar-nav > li > a:hover,
.navigation ul.nav.navbar-nav > li > a:hover,
#main_menu_container ul.nav.navbar-nav > li.current-menu-item > a,
#main_menu_container ul.nav.navbar-nav > li.current-menu-ancestor > a {
    color: #fff;
    background-color: rgba(255,255,255,0.12);
}

/* ============================================================
   MENÚ CASCADA — Usando clases nativas WordPress + Bootstrap
   .sub-menu = clase nativa WP; .dropdown-menu = clase Bootstrap
   ============================================================ */

/* ── Contenedor principal: forzar fila horizontal ── */
.navigation .nav.navbar-nav,
#main_menu_container .nav.navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
    width: auto;
}

/* ── Li de primer nivel ── */
.navigation .nav.navbar-nav > li,
#main_menu_container .nav.navbar-nav > li {
    position: relative;
    display: block;
    float: none;
}

/* ── Ocultar sub-menu por defecto ── */
.navigation .nav.navbar-nav .sub-menu,
.navigation .nav.navbar-nav .dropdown-menu,
#main_menu_container .nav.navbar-nav .sub-menu,
#main_menu_container .nav.navbar-nav .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 99999;
    min-width: 220px;
    background: #3a4f35;
    list-style: none;
    padding: 6px 0;
    margin: 0;
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
    border-radius: 0 0 4px 4px;
}

/* ── Mostrar al hover ── */
.navigation .nav.navbar-nav > li:hover > .sub-menu,
.navigation .nav.navbar-nav > li:hover > .dropdown-menu,
#main_menu_container .nav.navbar-nav > li:hover > .sub-menu,
#main_menu_container .nav.navbar-nav > li:hover > .dropdown-menu {
    display: block !important;
}

/* ── Ítems de segundo y tercer nivel ── */
.navigation .nav.navbar-nav .sub-menu li,
.navigation .nav.navbar-nav .dropdown-menu li,
#main_menu_container .nav.navbar-nav .sub-menu li,
#main_menu_container .nav.navbar-nav .dropdown-menu li {
    position: relative;
    display: block;
    width: 100%;
}

.navigation .nav.navbar-nav .sub-menu a,
.navigation .nav.navbar-nav .dropdown-menu a,
#main_menu_container .nav.navbar-nav .sub-menu a,
#main_menu_container .nav.navbar-nav .dropdown-menu a {
    display: block;
    padding: 9px 18px;
    color: #e0ead8 !important;
    font-size: 0.86rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
}

.navigation .nav.navbar-nav .sub-menu a:hover,
.navigation .nav.navbar-nav .dropdown-menu a:hover,
#main_menu_container .nav.navbar-nav .sub-menu a:hover,
#main_menu_container .nav.navbar-nav .dropdown-menu a:hover {
    background: rgba(255,255,255,0.15);
    color: #fff !important;
}

/* ── Tercer nivel: aparece a la derecha ── */
.navigation .nav.navbar-nav .sub-menu .sub-menu,
.navigation .nav.navbar-nav .sub-menu .dropdown-menu,
#main_menu_container .nav.navbar-nav .sub-menu .sub-menu,
#main_menu_container .nav.navbar-nav .sub-menu .dropdown-menu {
    top: 0;
    left: 100%;
    border-radius: 0 4px 4px 4px;
}

.navigation .nav.navbar-nav .sub-menu li:hover > .sub-menu,
.navigation .nav.navbar-nav .sub-menu li:hover > .dropdown-menu,
#main_menu_container .nav.navbar-nav .sub-menu li:hover > .sub-menu,
#main_menu_container .nav.navbar-nav .sub-menu li:hover > .dropdown-menu {
    display: block !important;
}

/* ── Indicador de submenú (flecha) ── */
.navigation .nav.navbar-nav .sub-menu .menu-item-has-children > a::after,
#main_menu_container .nav.navbar-nav .sub-menu .menu-item-has-children > a::after {
    content: ' ›';
    float: right;
    margin-left: 8px;
    opacity: 0.6;
}

/* ============================================================
   MENÚ UNAL — Selectores de máxima especificidad
   Sobrescribe unal.css que no espera ul.nav.navbar-nav
   ============================================================ */

/* Forzar horizontal con máxima especificidad */
#unalTop #bs-navbar .mainMenu ul.nav.navbar-nav,
#unalTop .navigation .mainMenu ul.nav.navbar-nav {
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-flex-direction: row !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* Cada li en inline-block */
#unalTop #bs-navbar .mainMenu ul.nav.navbar-nav > li,
#unalTop .navigation .mainMenu ul.nav.navbar-nav > li {
    position: relative !important;
    display: block !important;
    float: none !important;
}

/* Links de primer nivel */
#unalTop .mainMenu ul.nav.navbar-nav > li > a,
#unalTop .mainMenu ul.nav.navbar-nav > li > .nav-link {
    display: block !important;
    padding: 10px 14px !important;
    color: #e8f0e5 !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: background 0.15s !important;
    line-height: 1.3 !important;
}

#unalTop .mainMenu ul.nav.navbar-nav > li:hover > a,
#unalTop .mainMenu ul.nav.navbar-nav > li > a:hover {
    background-color: rgba(255,255,255,0.15) !important;
    color: #fff !important;
}

/* Submenú oculto por defecto */
#unalTop .mainMenu ul.nav.navbar-nav .sub-menu,
#unalTop .mainMenu ul.nav.navbar-nav .dropdown-menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 99999 !important;
    min-width: 220px !important;
    background: #3a4f35 !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.3) !important;
    border-radius: 0 0 4px 4px !important;
}

/* Mostrar al hover */
#unalTop .mainMenu ul.nav.navbar-nav > li:hover > .sub-menu,
#unalTop .mainMenu ul.nav.navbar-nav > li:hover > .dropdown-menu,
#unalTop .mainMenu ul.nav.navbar-nav > li:focus-within > .sub-menu,
#unalTop .mainMenu ul.nav.navbar-nav > li:focus-within > .dropdown-menu {
    display: block !important;
}

/* Ítems de submenú */
#unalTop .mainMenu ul.nav.navbar-nav .sub-menu a,
#unalTop .mainMenu ul.nav.navbar-nav .dropdown-menu a {
    display: block !important;
    padding: 9px 18px !important;
    color: #e0ead8 !important;
    font-size: 0.83rem !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    background: transparent !important;
}

#unalTop .mainMenu ul.nav.navbar-nav .sub-menu a:hover,
#unalTop .mainMenu ul.nav.navbar-nav .dropdown-menu a:hover {
    background: rgba(255,255,255,0.15) !important;
    color: #fff !important;
}

/* Tercer nivel (hijo de submenú) */
#unalTop .mainMenu ul.nav.navbar-nav .sub-menu .sub-menu,
#unalTop .mainMenu ul.nav.navbar-nav .sub-menu .dropdown-menu {
    top: 0 !important;
    left: 100% !important;
    border-radius: 0 4px 4px 4px !important;
}

#unalTop .mainMenu ul.nav.navbar-nav .sub-menu li:hover > .sub-menu,
#unalTop .mainMenu ul.nav.navbar-nav .sub-menu li:hover > .dropdown-menu {
    display: block !important;
}