.home__top-bar {
    background-color: #05bac1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%; /* Asegúrate de que ocupe todo el ancho */
    position: fixed; /* Fijar en la parte superior */
    top: 0; /* Alinear al top */
    z-index: 1000; /* Asegúrate de que esté por encima del contenido */
    transition: margin-left 0.3s ease; /* Transición suave */
}

    .home__top-bar.active {
        margin-left: 250px; /* Desplazar el top bar cuando el sidebar está activo */
    }


.home__top-bar-text {
    margin-left: 20px; /* Espacio entre el botón y el texto */
    text-align: center; /* Asegúrate de que el texto esté centrado */
    flex-grow: 1; /* Permite que el texto ocupe el espacio disponible */
}

.home__content {
    margin-left: 0; /* Cambia a 0 por defecto */
    transition: margin-left 0.3s ease; /* Transición suave al abrir/cerrar el sidebar */
    padding-top: 4.4rem;
}

    .home__content.active {
        margin-left: 250px; /* Espacio para el sidebar cuando está activo */
    }


.home__toggle {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    margin-right: 32rem;
}

.home__sidebar {
    background-color: #054c64;
    color: white;
    width: 250px;
    height: 100vh;
    position: fixed;
    transition: transform 0.3s ease;
    padding: 20px; /* Espaciado interno */
    z-index: 1000;
    top: 0;
}

.custom__active {
    transform: translateX(0%) !important;
}

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

.home__logo {
    height: 50px;
}

.home__nav {
    margin-top: 20px;
    height: 88vh;
    overflow: auto;
}

.home__list {
    list-style: none;
    padding: 0;
}

.home__item {
    margin: .25rem 0;
    position: relative;
}

.home__link {
    color: white;
    text-decoration: none;
    padding: 10px; /* Espaciado */
    display: flex; /* Para alinear ícono y texto */
    justify-content: space-between; /* Espacio entre texto y flecha */
    align-items: center; /* Centrar verticalmente */
    transition: background-color 0.3s; /* Transición suave */
}

    .home__link:hover {
        border-bottom: 5px solid #297b91;
        color: white; /* Color de texto al pasar el mouse */
    }

.home__submenu {
    list-style: none;
    padding: 1px;
    margin: 0;
    display: none; /* Ocultar submenús por defecto */
    background: #145c75;
}

.home__submenu-item {
    border-bottom: 1px solid #f0f8ff30;
    padding-bottom: .5rem;
    padding-top: .5rem;
}

    .home__submenu-item:hover {
        background-color: #297b91; /* Cambiar color al pasar el mouse */
    }

.home__submenu-link {
    color: white;
    text-decoration: none !important;
    padding-left: 20px; /* Indentación para submenús */
    display: block; /* Área clickeable */
    transition: background-color 0.3s; /* Transición suave */
}

    .home__submenu-link:hover {
        color: white;
    }

.home__submenu.nivel-2 {
    background: #145c75;
    padding-left: 10px;
}

.home__submenu.nivel-3 {
    background: #1a6d8c;
    padding-left: 20px;
}

.home__submenu.nivel-4 {
    background: #2180a3;
    padding-left: 30px;
}

.nivel-2 .home__submenu-link { 
    font-weight: 500; 
    margin-bottom: 4px;
}
.nivel-3 .home__submenu-link { 
    font-style: italic; 

}
.nivel-4 .home__submenu-link { 
    text-decoration: underline; 

}

.home__icon {
    cursor: pointer;
    transition: transform 0.10s ease;
}
.home__icon:hover {
    transform: rotate(90deg);
}

@media (min-width: 768px) {
    .home__sidebar {
        transform: translateX(-100%);
    }
    
    /*.home__toggle {
        display: none;*/ /* Ocultar botón en pantallas grandes */
    /*}*/
}

@media (max-width: 1000px) {
    .home__sidebar {
        transform: translateX(-100%); /* Ocultar sidebar en pantallas pequeñas */
        top: 7rem; /* Ajustar según la altura del top bar */
    }

    .home__content {
        margin-left: 0; /* Sin margen para el sidebar */
        transition: margin-left 0.3s ease; /* Transición suave */
        padding-top: 7rem; /* Espacio para el top bar */
    }

    .home__top-bar {
        margin-left: 0 !important;
        height: 8rem !important;
    }

    .home__toggle {
        display: block; /* Mostrar botón en pantallas pequeñas */
        margin: 0;
    }

    .home__nav {
        height: 70vh;
        overflow: auto;
    }
}