/* contenedor principal (menu + contenido lado derecho) */
.principal-container{
    width: 100%;
    display: flex;
}

/* contenido principal lado derecho contenedor principal */
.content-container{
    width: 80%;
    margin-left: 20%;
    padding: 2rem;
}

/* contenedor menu lateral */
.menu-container{
    width: 20%;
    position: fixed;
    margin: 2rem 0;
    display: flex;
    flex-direction: column;
    background: var(--color-cian) !important;
    border-radius: 0 2rem 2rem 0;
    box-shadow: 2px 2px 2px 2px #00000040;
    overflow-y: scroll;
    overflow-x: visible;
}

.fix-position-hidden-menu{
    width: 100%;
    min-height: 75vh;
    display: flex;
    margin-left: 0;
}

/* ajustes por res de pantalla */
@media (max-width: 1680px) {
    .menu-container{
        width: 25%;
    }
    .content-container{
        width: 75%;
        margin-left: 25%;
    }
}

@media (max-width: 1440px) {
    .menu-container{
        width: 30%;
    }
    .content-container{
        width: 70%;
        margin-left: 30%;
    }
}

@media (max-width: 1024px) {
    .principal-container{
        min-height: fit-content;
    }

    .menu-container{
        display: none;
    }
    .content-container{
        width: 100%;
        height: 100%;
        padding: 1rem;
        margin-left: 0;
    }
}

/* titulo seccion contenido */
.content-title{
    text-align: center;
    font-size: 2.5rem !important;
    padding: 1rem 0 3rem 0;
    font-weight: 600;
}

/* MENU LATERAL */
.titulo-menu{
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--color-white-bold);
}

/* linea separador entre secciones del menu lateral */
.line-separator{
    width: 80%;
    margin: 0 auto;
    height: 2px;
    background: var(--color-white-bold);
}

/* menu secciones */

/* p:menu */

.menu-lateral .ui-menu,
.menu-lateral .ui-panelmenu{
    padding: 1rem;
    margin: 0   ;
    border: none !important;
    background: transparent;
}

/* items del menu */
.menu-lateral .ui-menu .ui-menu-list .ui-menuitem{
    padding: .1rem 0;
}

/* hover item container (icono + text) */
.menu-lateral .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link.ui-state-hover{
    background: var(--color-cian-hover);
    border-radius: 2rem;
}

.menu-lateral .ui-menu-list .ui-menuitem .ui-menuitem-outline{
    outline: none !important;
}

/* iconos items menu */
.menu-lateral .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link .ui-menuitem-icon,
.menu-lateral .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link.ui-state-hover .ui-menuitem-icon {
    font-size: 1.25rem;
    color: var(--color-white-bold);
}

/* texto items menu  */
.menu-lateral .ui-menu .ui-menuitem-text{
    font-size: 1.1rem;
    line-height: 1.4;
    text-transform: capitalize;
    color: var(--color-white-bold) !important;
}

/* flecha menu */
.menu-lateral .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link .ui-icon-triangle-1-e:last-child{
    font-size: 1.5rem;
    color: var(--color-white-bold);
    flex: 1;
    text-align: right;
    padding-right: .5rem;
}

/* submenu desplegable */
.menu-lateral .ui-menu .ui-menu-list .ui-menu-child{
    background: var(--color-cian);
    border-radius: .5rem;
    border: none !important;
    z-index: 9999 !important;
}

/* p:panelMenu */

/* title y flecha submenu container */
.menu-lateral .ui-panelmenu .ui-panelmenu-header,
.menu-lateral .ui-panelmenu .ui-panelmenu-header.ui-menuitem-outline,
.menu-lateral .ui-panelmenu .ui-panelmenu-header.ui-state-active,
.menu-lateral .ui-panelmenu .ui-panelmenu-header.ui-state-active.ui-menuitem-outline {
    background: var(--color-cian);
    border: none !important;
}

/* title y flecha submenu container */
.menu-lateral .ui-panelmenu .ui-panelmenu-header.ui-state-hover,
.menu-lateral .ui-panelmenu .ui-panelmenu-header.ui-state-active:hover{
    background: var(--color-cian-hover);
    border: none;
    border-radius: 2rem;
}

/* icono flecha desplegable */
.menu-lateral .ui-panelmenu .ui-panelmenu-header .ui-icon{
    color: var(--color-white-bold) !important;
}

/* text submenu */
.menu-lateral .ui-panelmenu .ui-panelmenu-header a{
    font-size: 1.1rem;
    line-height: 1.4;
    text-transform: capitalize;
    color: var(--color-white-bold) !important;
    font-weight: normal;
}

/* contenedor de items del submenu desplegado */
.menu-lateral .ui-panelmenu .ui-panelmenu-content{
    background: var(--color-cian) !important;
    border: none !important;
}

/* item del submenu desplegado */
.menu-lateral .ui-panelmenu .ui-panelmenu-content .ui-menuitem{
    padding: .1rem 0 .1rem 1.5rem;
}

/* texto item del submenu desplegado */
.menu-lateral .ui-panelmenu .ui-panelmenu-content .ui-menuitem-link{
    font-size: 1.1rem;
    line-height: 1.4;
    text-transform: capitalize;
    color: var(--color-white-bold) !important;
    font-weight: normal;
}

.menu-lateral .ui-panelmenu .ui-panelmenu-content .ui-menuitem-link.ui-state-hover{
    background: var(--color-cian-hover);
    border: none;
    border-radius: 2rem;
    color: var(--color-white-bold) !important;
}

.menu-lateral .ui-panelmenu .ui-panelmenu-content .ui-menuitem-link.ui-state-hover .ui-menuitem-text,
.menu-lateral .ui-panelmenu .ui-panelmenu-content .ui-menuitem-link.ui-state-hover .ui-menuitem-icon{
    color: var(--color-white-bold);
}

/* menu scrolling */

/* Solo funciona para Firefox */
@-moz-document url-prefix()  {
    .menu-container {
        scrollbar-width: thin;
        scrollbar-color: var(--color-light-grey);
    }
}

/* chromium */

/* Estilo del fondo de la barra de desplazamiento */
.menu-container::-webkit-scrollbar {
    width: .75rem;
    border-radius: 0 1rem 1rem 0;
}

/* Estilo del track (pista) de la barra de desplazamiento */
.menu-container::-webkit-scrollbar-track {
    border-radius: 0 .5rem .5rem 0 !important;
    background: transparent; /* Color de fondo de la pista */
    margin: 2rem 0;
}

/* Estilo del thumb (el bloque que se mueve dentro de la barra) */
.menu-container::-webkit-scrollbar-thumb {
    background-color: var(--color-light-grey); /* Color del bloque */
    border-radius: 1rem; /* Bordes redondeados */
}