/* =======================================================
   NB VOD MENU - Estilos Híbridos (Escritorio + Móvil)
   ======================================================= */

/* --- 1. ESTILOS COMPARTIDOS --- */
#navigation .nb-vod-menu > a {
    display: flex;
    align-items: center;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
}
#navigation .nb-vod-menu > a i {
    margin-right: 7px;
    font-size: 16px;
    display: block;
}

/* =======================================================
   VISTA ESCRITORIO (Pantallas grandes > 992px)
   ======================================================= */
@media (min-width: 992px) {
    #navigation .nb-vod-menu {
        position: relative;
        float: left;
        height: 100%; 
        display: flex;
        align-items: center;
    }

    #navigation .nb-vod-menu > a {
        height: auto;
        padding: 10px 20px !important;
        color: #ff7a00 !important;
        line-height: normal !important;
    }

    #navigation .nb-vod-menu:hover > a {
        background-color: rgba(255,255,255,0.05);
        color: #ff9933 !important;
        border-radius: 4px;
    }

    #navigation .nb-vod-menu .submenu {
        display: none;
        position: absolute; 
        top: 100%;
        left: 0;
        z-index: 9999;
        background: #fff;
        min-width: 200px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        border-top: 2px solid #ff7a00;
        padding: 5px 0;
        list-style: none;
        margin: 0;
    }

    #navigation .nb-vod-menu:hover .submenu { 
        display: block !important; 
    }

    #navigation .nb-vod-menu .submenu li a {
        display: block; 
        padding: 10px 20px; 
        color: #333 !important; 
        text-decoration: none; 
        font-size: 14px;
        white-space: nowrap; 
    }
    #navigation .nb-vod-menu .submenu li a:hover { 
        background: #007bff; 
        color: #fff !important; 
    }
}

/* =======================================================
   VISTA MÓVIL (Pantallas pequeñas < 991px)
   ======================================================= */
@media (max-width: 991px) {
    #navigation .nb-vod-menu {
        float: none;
        display: block;
        width: 100%;
        height: auto;
        border-top: 1px solid rgba(0,0,0,0.05);
    }

    #navigation .nb-vod-menu > a {
        padding: 12px 20px;
        color: #333 !important; 
        width: 100%;
        font-weight: 600;
        position: relative;
    }
    
    #navigation .nb-vod-menu > a i {
        color: #ff7a00;
    }

    /* --- CORRECCIÓN FINAL: USAR SOLO LA FLECHA DEL TEMA --- */
    #navigation .nb-vod-menu > a .arrow-down {
        margin-left: auto; 
        
        /* 1. Visibilidad Forzada: Para que no desaparezca */
        display: inline-block !important; 
        visibility: visible !important;
        opacity: 1 !important;
        
        /* 2. Limpieza: Quitamos mis bordes para borrar la "segunda flecha" */
        border: none !important;
        width: auto !important;
        height: auto !important;

        /* 3. Estática: Quitamos rotación para que siempre apunte abajo */
        transform: none !important;
    }
    
    /* Solo cambiamos el color al estar activo, sin rotar */
    #navigation .nb-vod-menu.active > a .arrow-down {
        color: #ff7a00 !important;
    }

    /* Submenú */
    #navigation .nb-vod-menu .submenu {
        display: none; 
        position: static; 
        width: 100%;
        background: #f9f9f9; 
        box-shadow: none;
        border: none;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    #navigation .nb-vod-menu .submenu li a {
        padding: 10px 20px 10px 45px; 
        color: #555 !important;
        display: block;
        font-size: 13px;
    }
    
    #navigation .nb-vod-menu.active > a {
        color: #ff7a00 !important;
        background: rgba(255, 122, 0, 0.05);
    }
}