section.navigator{
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    transition: all 0.3s ease;
    z-index: 99999999;
}
section.navigator.scrolled{
    /* background-color: red; */
    background-color: #fff;
}
header {
    width: 100%;
    max-width: 1366px;
    height: 78px;

    margin-inline: auto;
    padding: 1rem 0;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;

    font-size: .938rem;
    font-weight: 450;
}

header .item{
    display: flex;
    height: 100%;
    max-height: 100%;
    gap: 2rem;
    align-items: center;
}
header .item .logo{
    display: flex;
    align-items: center;
}
.logotipo{
    height: 2.325rem;
    box-sizing: border-box;
}
header .item .nav-row{
    height: 100%;
    display: flex;
    align-items: center;
}
nav ul{
    list-style: none;
    height: 100%;
}
.nav-row ul{
    display: flex;
}
.nav-row ul li{
    height: 100%;
}
.nav-row ul li:hover{
    cursor: pointer;
}

.li-btn {
    height: 100%;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    padding: 0 8px;
    color: #000;
}
.li-btn:hover{
    /* color: rgb(40, 158, 40); */
    color: var(--green-c);
}

.li-btn span {
    position: relative;
}

.li-btn span::after {
    content: "";
    position: absolute;

    left: 0;
    bottom: -3px;

    width: 100%;
    height: 1px;
    background-color: currentColor;

    opacity: 0;
    transform: translateY(4px);

    transition:
        opacity 180ms ease,
        transform 180ms ease;
}
.li-btn.activo{
    color: var(--green-c);
}
.li-btn:hover span::after,
.li-btn.activo span::after {
    opacity: 1;
    transform: translateY(0);
    
}

.li-btn svg {
    width: 0.938rem;
    height: 0.938rem;
    flex-shrink: 0;
    transition: transform 180ms ease;
}

.li-btn.activo svg {
    transform: rotate(180deg);
}

.menu-panel{
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    
    padding-top: 78px;

    background-color: #fff;
    
    z-index: 900000;

    overflow-y: auto;

    opacity: 0;
    visibility: hidden;

    
    transition:
        transform .8s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.5s ease,
        visibility 0s linear 1s;
    
    
    display: flex;
    align-items: center;
    /* transform:
        translateY(
            calc(-100% - 78px)
        ); */

    transform: translateY(-100%);

    opacity: 1;
    visibility:visible;
    transform: translateY(0%);
}

.menu-panel.activo{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);

    transition:
        transform .8s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.5s ease,
        visibility 0s;
}

.menu-overlay{
    width: 100%;
    height: 100%;
    position: fixed;
    
    inset: 0;
    
    background-color: rgb(0 0 0 / 25%);
    
    z-index: 90000;

    overflow-y: auto;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    

    transition:
        opacity .3s ease;
}

.menu-overlay.activo {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.menu-panel .item{
    width: 100%;
    max-width: 1366px;
    margin-inline: auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-size: .938rem;
    font-weight: 450;
    display: none;
}
.menu-panel .item.activo{
    display: flex;
}

header .session{
    display: flex;
    height: 100%;
}
header .session button{
    height: 100%;
    display: inline-flex;
    align-items: center;
    /* gap: 0.35rem; */
    cursor: pointer;
    padding: 0 8px;
    color: #000;
}
header .session button a{
    text-decoration: none;
}
header .session button a,
header .session button a:visited,
header .session button a:hover{
    color: inherit;
}

.session-btn {
    height: 100%;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    padding: 0 8px;
    color: #000;
}
.session-btn:hover{
    /* color: rgb(40, 158, 40); */
    color: var(--green-c);
}

.session-btn .user-icon {
    /* background: red; */
    display: flex;
    height: 100%;
    max-height: 100%;
    width: 1.5rem;
    align-items: center;
}
.session-btn .user-icon svg{
    width: 100%;
    height: 100%;
    fill: initial;
}
.session-btn:hover .user-icon svg{
    fill: var(--green-c);
}
.session-btn span {
    position: relative;
}

.session-btn span::after {
    content: "";
    position: absolute;

    left: 0;
    bottom: -3px;

    width: 100%;
    height: 1px;
    background-color: currentColor;

    opacity: 0;
    transform: translateY(4px);

    transition:
        opacity 180ms ease,
        transform 180ms ease;
}
.session-btn.activo{
    color: var(--green-c);
}
.session-btn.activo .user-icon .user-noimage-icon{
    fill: var(--green-c);
}
.session-btn:hover span::after,
.session-btn.activo span::after {
    opacity: 1;
    transform: translateY(0);
    
}

.session-btn svg {
    width: 0.938rem;
    height: 0.938rem;
    flex-shrink: 0;
    transition: transform 180ms ease;
}

.session-btn.activo svg.control-scroll-arrow {
    transform: rotate(180deg);
}

/* MENU DESPLEGABLE DENTRO DE USUARIO - Desktop */
.session-desplegable-desktop{
    position: relative;
}
.user-session-menu{
    width: 220px;

    background: #fff;
    border: 1px solid var(--gray-i);
    border-radius: 8px;

    position: absolute;
    right: 0;
    margin-top: 2.5rem;

    box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.1);

    padding: .75rem;

    display: flex;
    flex-direction: column;
    gap: .625rem;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-6px);

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .3s cubic-bezier(.16, 1, .3, 1);
}


.user-session-menu.activo{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}

.user-session-menu div{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.user-session-menu .user-session-data span.user-session-nombre{
    font-size: .825rem;
    font-weight: 500;
    /* color: var(--green-c); */
}
.user-session-menu .user-session-data span.user-session-rol{
    font-size: .75rem;
    font-weight: 400;
    color: var(--gray-f);
}
.user-session-menu button.navigate{
    width: 100%;
    height: initial;
    inline-flex: initial;
    font-family: inherit;
    border-radius: 4px;
    outline: none;
    border: 1px solid transparent;
    background-color: transparent;
    cursor: pointer;
    padding: .4rem .5rem;
    display: flex;
    transition: all .3s ease;
    color: var(--gray-f);
    font-weight: 500;
}
.user-session-menu button.navigate .modulo-button{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: .625rem;
}
.user-session-menu button.navigate .modulo-button .icon{
    width: 1.125rem;
    height: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.user-session-menu button.navigate .modulo-button .icon svg{
    fill: currentColor;
    height: 100%;
    width: auto;
}
.user-session-menu button.navigate:hover{
    border: 1px solid var(--gray-j);
    background-color: var(--gray-j);
    color: var(--black-a);
}
.user-session-menu button.navigate:active{
    border: 1px solid var(--gray-i);
    background-color: var(--gray-i);
    color: var(--black-a);
}

.user-session-menu .line{
    width: 100%;
    border-bottom: 1px solid var(--gray-j);
}

header.header-mobile{
    height: 60px;
    max-width: initial;
    padding-left: 1rem;
    padding-right: 1rem;
    transition: all .3s ease;
}

/* scroll */
.navigator.scrolled header.header-mobile{
    /* background-color: red; */


    /* background-color: var(--green-c); */
}
.navigator.scrolled header .header-mobile-content .header-mobile-item svg{
    /* fill: #fff; */
}

.header-mobile-content{
    width: 100%;
    height: 90%;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


.header-mobile-content .header-mobile-item{
    height: 100%;

    display: flex;
    align-items: center;

}


/* dejo los elementos laterales por encima del logo */
.header-mobile-content .header-mobile-item:first-child,
.header-mobile-content .header-mobile-item:last-child{
    position: relative;
    z-index: 2;
}


/* centro el logo respecto de todo el header */
.header-mobile-content .header-mobile-item:nth-child(2){
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 1;
}


.header-mobile-content .header-mobile-item button,
.header-mobile-content .header-mobile-item a{
    height: 100%;

    outline: none;
    border: none;

    cursor: pointer;

    background: transparent;

    color: var(--green-a);
    transition: all .3s ease;

}


.header-mobile-content .header-mobile-item a{
    font-size: 100%;
}


.header-mobile-content .header-mobile-item button svg,
.header-mobile-content .header-mobile-item a svg{
    height: 100%;
    width: auto;
    display: flex;
    align-items: center;
    
    fill: var(--black-b);
    /* fill: rgba(0, 0, 0, 0.65); */
    
}
.header-mobile-content .header-mobile-item button:hover svg,
.header-mobile-content .header-mobile-item a:hover svg{
    fill: var(--black-a);
}
.header-mobile-content .header-mobile-item button svg.hamburgermenuicon{
    height: 80%;
}


.header-mobile-content .header-mobile-item a.header-mobile-logo svg{
    fill: #58863b;
    /* scrolled */
    fill: var(--green-c);
}


/* usuario logueado */
.header-mobile-content .header-mobile-item button.loggediconbutton svg{
    /* fill: var(--green-c); */
}


/* MENÚES NAV Y USER */
/* capa general de los menus mobile */
.mobile-ui-layer{
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100dvh;

    /* correcion */
    height: 100%;

    z-index: 99999999;

    pointer-events: none;
}


/* overlay */
.mobile-overlay{
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, .1);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}


/* base de ambos menus */
.mobile-menu{
    position: absolute;
    top: 0;

    width: 80%;
    max-width: 320px;
    height: 100dvh;

    background-color: #fff;

    overflow-y: auto;
    overscroll-behavior: contain;

    pointer-events: auto;

    transition:
        transform .4s cubic-bezier(.16, 1, .3, 1);

    will-change: transform;

    box-shadow: 6px 0 24px rgba(0, 0, 0, .1);
    
}


/* menu de navegacion izquierdo */
.mobile-menu-nav{
    left: 0;

    transform: translateX(-100%);

    box-shadow:
        4px 0 12px rgba(0, 0, 0, .12);
    
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}


/* menu de sesion derecho */
.mobile-menu-session{
    right: 0;

    transform: translateX(100%);

    box-shadow:
        -4px 0 12px rgba(0, 0, 0, .12);

    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}


/* habilitar capa cuando alguno de los dos menus esta abierto */
.mobile-ui-layer.nav-activo,
.mobile-ui-layer.session-activo{
    pointer-events: auto;
}


/* show overlay */
.mobile-ui-layer.nav-activo .mobile-overlay,
.mobile-ui-layer.session-activo .mobile-overlay{
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}


/* desplazamiento del menu izquierdo */
.mobile-ui-layer.nav-activo .mobile-menu-nav{
    transform: translateX(0);
}


/* desplazamiento del menu  hacia adentro */
.mobile-ui-layer.session-activo .mobile-menu-session{
    transform: translateX(0);
}


/* scrollblock por menu abierto */
body.menu-mobile-abierto{
    overflow: hidden;
}

/* botones de close */
.mobile-menu .closeMobileMenu{
    width: 1.25rem;
    height: 1.25rem;
    /* background: red; */
    outline: none;
    border: none;
    margin: 1rem;
    position: absolute;
    display: center;
    align-items: center;
    justify-content: center;
    background: transparent;
    cursor: pointer;
}
.mobile-menu .closeMobileMenu svg{
    opacity: 0.5;
}
.mobile-menu .closeMobileMenu:hover svg{
    opacity: 0.6;
}
.mobile-menu .closeMobileMenu:active svg{
    opacity: 0.8;
}
.mobile-menu.mobile-menu-nav .closeMobileMenu{
    top: 0;
    right: 0;
}
.mobile-menu.mobile-menu-session .closeMobileMenu{
    top: 0;
    left: 0;
}

/* botoneras dentro de menu */
.mobile-menu div{
    width: 100%;
}

.mobile-menu .imagotipo-menu-nav{
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: start;
}
.mobile-menu .imagotipo-menu-nav svg{
    width: 12rem;
    /* background: red; */
    fill: var(--green-c);
}

.mobile-menu .line{
    border-bottom: 1px solid var(--gray-j);
}
.mobile-menu .links-menu-nav{
    width: 100%;
    /* background: blue; */
    overflow-y: auto;
}
.mobile-menu .links-menu-nav div{
    width: 100%;
    /* background: blue; */
    cursor: pointer;
    
}
.mobile-menu .links-menu-nav div a{
    width: 100%;
    padding: 1rem 1.5rem;
    text-decoration: none;
    /* background-color: gainsboro; */
    display: flex;
    color: var(--green-a);
    
}
.mobile-menu .links-menu-nav div a:hover{
    background: var(--gray-j);
}
.mobile-menu .links-menu-nav div a:active{
    color: var(--green-c);
}

/* botones session */
.mobile-menu-session .session-data-panel{
    width: 100%;
    padding-top: 4rem;
    /* background: red; */
}

.mobile-menu-session .session-data-panel .user-logged-data{
    display: flex;
    flex-direction: row;
    gap: .625rem;
    align-items: center;
    justify-self: start;
    padding: .75rem; 

}
.mobile-menu-session .session-data-panel .user-logged-data .user-session-icon{
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: .5rem;
}
.mobile-menu-session .session-data-panel .user-logged-data .user-session-icon svg {
    fill: currentColor;
    height: 100%;
    width: auto;
}

.mobile-menu-session .session-data-panel .user-session-text{
    display: flex;
    flex-direction: column;
}

.mobile-menu-session .session-data-panel .user-logged-data .user-session-text span.user-session-nombre{
    /* font-size: .825rem; */
    font-weight: 500;
    /* color: var(--green-c); */
}

.mobile-menu-session .session-data-panel .user-logged-data .user-session-text span.user-session-rol{
    font-size: .825rem;
    font-weight: 400;
    color: var(--gray-f);
}
.mobile-menu-session .button-functions{
    width: 100%;
    /* background-color: red; */
    padding: .75rem;
}
.mobile-menu-session .button-functions button{
    width: 100%;
    height: initial;
    inline-flex: initial;
    font-family: inherit;
    border-radius: 4px;
    outline: none;
    border: 1px solid transparent;
    background-color: transparent;
    cursor: pointer;
    padding: .4rem .5rem;
    display: flex;
    transition: all .3s ease;
    color: var(--gray-f);
    /* font-weight: 500; */
}
.mobile-menu-session .button-functions button:hover {
    border: 1px solid var(--gray-j);
    background-color: var(--gray-j);
    color: var(--black-a);
}
.mobile-menu-session .button-functions button:active {
    border: 1px solid var(--gray-i);
    background-color: var(--gray-i);
    color: var(--black-a);
}
.mobile-menu-session .button-functions button .button-session{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    font-size: 1rem;
    text-decoration: none;
    color: inherit;
    gap: .625rem;
}
.mobile-menu-session .button-functions button .button-session .icon{
    /* background: green; */
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mobile-menu-session .button-functions button .button-session .icon svg {
    fill: currentColor;
    height: 100%;
    width: auto;
}
/* v3.2 - alterno únicamente el tipo de header */
.header-desktop{
    display: flex;
}

.header-mobile{
    display: none;
}

/* @media screen and (max-width: 1024px){
    .header-desktop{
        display: none;
    }

    .header-mobile{
        display: flex;
    }
} */

/* notebook pequeño / tablet horizontal */
@media screen and (max-width: 1080px){
    .header-desktop{
        display: none;
    }

    .header-mobile{
        display: flex;
    }
}