/*
//  ESTILOS DEL MENU NAV 
//
//  Archivo : Estilos_Manu_Nav.css
//  Autor   : Arturo Belleza E.
//			  Consultor, Analista, Programador de Sistemas Escritorio/Web
//	Inicio  : 01/10/2022
//	Función : Elabora el Diseño del Sistema de Menu en el Proyecto 
*/


.logo{
    display: inline-block;
    margin-top: 14px;
    line-height: 25px;
}

.logo-Bienvenido {
    margin-top: -10px;
    line-height: 1.5rem;
}


.logo-titulo{
    font-size: 1.2rem;
}


.logo-sub-titulo{
    font-size: 1rem;
    color:aquamarine;
}


.logo-usuario-personal {
    color: yellow;
}


.ico-empresa {
    background: url(../ico/FbnMenu.ico) no-repeat;
    padding: 42px 45px;
    /* padding: 38px 45px; 
    padding: 29px 36px;
    margin-left: 25px;
    margin-right: 10px;
    margin-top: 10px; */
 }


.header {
    position: absolute;
    display: block;
    background-color: var(--Menu-Nav-Fondo);
    height: var(--Menu-Nav-height);
    width: 100%;
    margin: 0 0;
}


.nav {
    justify-content: space-between;
    height: var(--Menu-Nav-height);
    line-height: var(--Menu-Nav-height);
    color: var(--Menu-Nav-Letra);

    /* Max Ancho, Hace Que el Nav */
    /* se ponga al medio          */
    max-width: 992px;
    margin: 0 auto;
}


.nav-menu-barra {
    top: var(--Menu-Nav-height);
    position: relative;
    background: var(--Menu-Nav-Fondo-Opciones);
}


.nav-menu {
    display: flex;
    list-style: none;
    font-size: var(--Menu-FontSize);
    background: var(--Menu-Nav-Fondo-Opciones);
    height: var(--Menu-Nav-height-opciones);
    line-height: var(--Menu-Nav-height-opciones);

    max-width: 850px;
    margin: 0 auto;
}


.nav-menu-item {
    top: var(--Menu-Nav-height);
    font-size: var(--Menu-FontSize);
    margin: 0 auto;
    width: max-content;
}


.nav-menu-link {
    color: var(--Menu-Nav-Letra);
    text-decoration: none;
    padding: 13px 15px;
    border-radius: 5px;
    margin: 0 auto;
}


.nav-menu-link:hover,
.nav-menu-link-active {
    background-color: var(--Menu-Nav-Letra);
    color: var(--Menu-Nav-Letra-hover); 
    transition: all 0.7s; 
}


.nav-menu li:hover > ul {
    display: block;
} 


.nav-menu li ul::before{
    /* GENERA UNA FLECHITA QUE INDICA SUB-MENU */
    content: '';
    width: 0;
    height: 0;
    border-right: 10px solid transparent; 
    border-left: 10px solid transparent;
    border-bottom: 8px solid white;
    position: absolute;
    margin-top: -20px;
    margin-left: 1px;
}


.nav-menu-toggle{
    color: white;
    background: none;
    border:none;
    font-size: 30px;
    padding: 0 20px;
    line-height: var(--Menu-Nav-height-movil);
    cursor: pointer;

    /* APAGADO MODO INCIAL */
    display: none;
}


.nav-menu-sub-menu{
    top: var(--Menu-Nav-inicio-SubMenu);
    padding: 10px;
    position: absolute;
    display: block;
    border: 1px solid darkgray; 
    border-radius: 5px;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.5);
    background: whitesmoke;

    /* MOSTRAR EN PRIMER PLANO */
    /* ENCIMA DE TODO          */
    z-index: 100;

    /* NO MOSTRAR */
    display: none;
    transition: all 0.7s; 
}


.nav-menu-sub-menu-item {
    list-style: none;
    padding: 10px 10px;
    line-height: 15px;
}


.nav-menu-sub-menu-link {
    text-decoration: none;
    color: black;
}


.nav-menu-sub-menu-link:hover {
    color: var(--Menu-Nav-Fondo);
    font-weight: bold;
}

/*                                */
/* SOLO PARA DISPOSITIVOS MOVILES */
/*                                */
@media (max-width: 768px){


    body{
        padding-top: var(--Menu-Nav-inicio-body);
    }


    .header{
        height: var(--Menu-Nav-height-movil);
    }


    .logo{
        font-size: 25px;
        padding: 0 20px;
        line-height: var(--Menu-Nav-height-movil);
    }
    
    
    .nav-menu {
        flex-direction: column;
        position: absolute;
        top: var(--Menu-Nav-height-movil);
        width: 100%;
        left: 0;
        padding: 20px 0;
        align-items: center;
        background-color: var(--Menu-Nav-fondo-movil);
        font-size: 50px;

        height: var(--Menu-Nav-ventana-movil);   /* Tamaño Ventana Menu */
        overflow-y: auto;                        /* Activa barra scroll */
        
        left: 100%; 
        transition: left 0.7s;
    } 


    .nav-menu-item {

        line-height: var(--Menu-Nav-height-movil);
    }


    .nav-menu-link:hover, 
    .nav-menu-link-active {
        background: none;
        color: var( --Menu-Nav-letra-hover-movil); 
    }


    .nav-menu-toggle{
        display: block;
    }


    .nav-menu-visible{
        left: 0px;
    }

}