/* Estilos básicos para el sidebar (móvil) */
#sidebar {
    width: 250px;
    height: 100vh;
    background-color: #ffffff;
    color: #333;
    position: fixed;
    top: 0;
    left: 0;
    margin-top: 60px;
    transform: translateX(-100%); /* Oculto inicialmente en móvil */
    transition: transform 0.3s ease;
    padding: 15px;
    z-index: 9999;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    border-right: 1px solid #e5e5e5;
    overflow-y: auto; /* Permite scroll vertical si el contenido es demasiado largo */
    overflow-x: visible; /* Permite que el submenú se vea correctamente */
}

/* Barra de scroll más estilizada */
#sidebar::-webkit-scrollbar {
    width: 6px;
}

#sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

/* Sidebar visible (cuando se activa en móvil) */
#sidebar.visible {
    transform: translateX(0); /* Muestra el sidebar */
}

/* Estilos para la lista de navegación */
#sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Estilos para los enlaces del sidebar */
#sidebar ul li a {
    text-decoration: none;
    font-size: 16px;
    color: #333;
    padding: 10px;
    display: block;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Estilo de hover para los enlaces en móvil */
#sidebar ul li a:hover {
    background-color: #f0f0f0;
    color: #007bff;
}

/* Estilos para los iconos */
#sidebar ul li a i {
    margin-right: 10px;
    color: #666;
}

/* Submenús en móvil (ocultos por defecto) */
.sidebar-submenu {
    list-style: none;
    padding-left: 20px; /* Añadir un poco de sangría para submenús */
    display: none; /* Ocultar submenús inicialmente */
    background-color: #f9f9f9; /* Fondo más claro para distinguir submenús */
}

/* Mostrar el submenú cuando el padre tiene la clase 'open' */
.sidebar-list.open .sidebar-submenu {
    display: block; /* Mostrar el submenú */
}

/* Estilos para los enlaces de los submenús */
.sidebar-submenu li a {
    font-size: 14px; /* Tamaño de fuente más pequeño para submenús */
    color: #666;
    padding: 5px 20px; /* Añadir más espacio para identificar el nivel */
    display: block;
}

.sidebar-submenu li a:hover {
    color: #007bff; /* Color azul en hover */
}

/* Para el botón hamburger */
.hamburger {
    font-size: 30px;
    cursor: pointer;
    display: block;
    z-index: 1000;
    color: #333;
    transition: color 0.3s ease;
}

/* Cambia el color del botón hamburger en hover */
.hamburger:hover {
    color: #007bff;
}

/* ------------------------- */
/* Vista de escritorio (>1200px) */
/* ------------------------- */
@media (min-width: 1200px) {

    #liBuscador {
        display: none;
    }

    #sidebar {
        width: 100%; /* Ocupa todo el ancho de la pantalla */
        height: 45px; /* Fijo en la parte superior */
        position: fixed;
        top: 33px;
        left: 0;
        border-top: solid 1px #e5e5e5;
        border-bottom: solid 1px #e5e5e5;
        font-size: 10px;
        padding-top: 10px;
        background-color: #fff;
        color: #333;
        display: flex; /* Flex para distribuir el contenido horizontalmente */
        justify-content: space-around;
        align-items: center;
        box-shadow: none;
        transform: translateX(0); /* Sidebar siempre visible en escritorio */
        z-index: 150; /* Asegura que esté por encima del contenido */
        overflow: visible; /* Permite que el contenido del submenú desborde horizontalmente */
    }

    /* Estilos de los enlaces en vista de escritorio */
    #sidebar ul {
        display: flex; /* Distribuir horizontalmente los elementos */
        justify-content: space-around; /* Asegurar que haya espacio entre los enlaces principales */
        align-items: center;
        width: 100%;
        padding: 0;
    }

    .sidebar-list:hover .sidebar-submenu {
        display: block !important;
    }

    #sidebar ul li {
        margin: 0;
        position: relative; /* Necesario para que los submenús se posicionen correctamente */
    }

    #sidebar ul li a {
        padding: 10px 15px; /* Ajusta el espaciado para los enlaces */
        font-size: 14px;
        color: #333;
        display: flex; /* Alinear iconos y texto horizontalmente */
        align-items: center;
        text-decoration: none;
    }

    /* Cambiar color de los enlaces al pasar el ratón en escritorio */
    #sidebar ul li a:hover {
        color: #007bff; /* Color azul en hover */
        background-color: transparent; /* Sin fondo en hover en escritorio */
    }

    /* Estilos para los iconos dentro de los enlaces en escritorio */
    #sidebar ul li a i {
        margin-right: 8px; /* Espaciado entre el icono y el texto */
        font-size: 14px; /* Tamaño ajustado del icono */
        color: #333; /* Color del icono */
    }

    .sidebar-list {
        position: relative;
    }

    .sidebar-submenu {
        position: absolute;
        top: 40px; /* Ajusta esto para que el submenú esté justo debajo del elemento principal */
        left: 0;
        background-color: #ffffff;
        border: 1px solid #e5e5e5;
        display: none !important; /* Oculto por defecto, se muestra al hacer hover o clic */
        z-index: 1001;
        min-width: 200px; /* Ajusta el ancho mínimo */
        max-height: 300px; /* Limita la altura máxima */
        overflow-y: auto; /* Permite scroll si el contenido es demasiado largo */
        padding: 0px; /* Espacio interno para los elementos */
        white-space: nowrap; /* Evitar que el texto se corte */
    }

    /* Mostrar el submenú al hacer hover */
    .sidebar-list:hover .sidebar-submenu {
        display: block !important;
    }

    .sidebar-submenu li a {
        padding: 10px 20px; /* Añadir más espacio a los enlaces del submenú */
        white-space: nowrap; /* Evitar que el texto se corte */
        font-size: 14px; /* Ajustar el tamaño de la fuente */
        color: #666;
        display: block;
    }

    .sidebar-submenu li {
        margin-bottom: 5px; /* Espaciado entre los elementos del submenú */
    }
    
    .sidebar-submenu li a:hover {
        background-color: #f0f0f0; /* Efecto hover más claro */
        color: #007bff; /* Cambiar el color del texto en hover */
    }    

    /* Cambiar el color al pasar el ratón por el submenú en escritorio */
    .sidebar-submenu li a:hover {
        background-color: #e2f9ff;
        color: #007bff;
    }

    /* Elimina el botón hamburger en pantallas grandes */
    .hamburger {
        display: none;
    }
}