/* assets/css/desktop_menu.css */

/* Estilos para el menú de escritorio colapsable (tipo Windows) */
.desktop-collapsible-menu {
    position: absolute;
    top: 68px; /* Ajusta esto según la altura de tu barra superior fija + un poco de espacio */
    left: 16px; /* Alineado con el botón de inicio */
    background-color: #212936; /* Fondo más oscuro para la barra del menú colapsable */
    border: 1px solid #4A5568; /* border-gray-700 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow-md */
    padding: 0.5rem; /* p-2 */
    z-index: 60; /* Asegura que esté por encima del contenido principal, pero debajo de modales muy altos */
    min-width: 220px; /* Ancho mínimo para que se vean los textos */
    display: flex; /* Para que los ítems se apilen verticalmente */
    flex-direction: column; /* Para apilar verticalmente */
    gap: 0.25rem; /* space-y-1 entre los ítems */
}

/* Estilo para los ítems individuales del menú de escritorio */
.desktop-menu-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem; /* py-3 px-4 */
    border-radius: 0.375rem; /* rounded-md */
    text-decoration: none;
    font-weight: 500; /* font-medium */
    transition: background-color 0.2s ease, color 0.2s ease;
    color: #E2E8F0; /* text-gray-200 */
    text-align: left; /* Alineación del texto a la izquierda */
}

.desktop-menu-item:hover {
    background-color: #00BFFF; /* Color del logo (favicon) */
    color: #FFFFFF; /* hover:text-white */
}

/* Estilo para el elemento activo del menú de escritorio */
.desktop-menu-item.desktop-nav-active {
    background-color: #4A5568; /* hover:bg-gray-700 */
    color: #FFFFFF; /* Color de texto blanco */
    font-weight: 600; /* font-semibold */
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000; /* Sombreado más fuerte para destacar */
}

/* Estilo para el icono dentro del elemento activo del menú de escritorio */
.desktop-menu-item.desktop-nav-active i {
    color: #FFFFFF; /* Color de icono blanco */
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000; /* Sombreado más fuerte para destacar */
}


/* Ocultar el menú colapsable en pantallas pequeñas */
@media (max-width: 1023px) { /* breakpoint 'lg' */
    .desktop-collapsible-menu {
        display: none !important;
    }
}