/* Estilos personalizados para elementos activos del sidebar */

/* Estilo para elementos del menú activos */
nav .app-nav .main-nav > li.no-sub.active > a {
    background-color: rgba(var(--primary), 1) !important;
    color: rgba(var(--white), 1) !important;
    font-weight: 500;
    transition: var(--app-transition);
}

/* Estilo para iconos SVG cuando el elemento está activo */
nav .app-nav .main-nav > li.no-sub.active > a svg {
    color: rgba(var(--white), 1) !important;
}

/* Estilo para iconos con clase de phosphor cuando el elemento está activo */
nav .app-nav .main-nav > li.no-sub.active > a i {
    color: rgba(var(--white), 1) !important;
}

/* Estilo para spans dentro de elementos activos */
nav .app-nav .main-nav > li.no-sub.active > a span {
    color: rgba(var(--white), 1) !important;
}

/* Hover effect para elementos activos */
nav .app-nav .main-nav > li.no-sub.active > a:hover {
    background-color: rgba(var(--primary), 0.8) !important;
}