/**
 * Sidebar en verde institucional (#008654) pisando el tema "dark-sidebar"
 * de Metronic (style.bundle.css), que es negro (#131313) con grises que no
 * se leen sobre el verde. Se cargan después del bundle: mismos selectores,
 * gana el orden. Tonos: activo #006940 (verde más oscuro), textos e iconos
 * en blanco con distintas opacidades.
 */

[data-kt-app-layout=dark-sidebar] .app-sidebar {
    background-color: #008654;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .app-sidebar-logo {
    border-bottom: 1px dashed rgba(255, 255, 255, .25);
}

/* Scrollbar del menú */
[data-kt-app-layout=dark-sidebar] .app-sidebar .hover-scroll-overlay-y:hover,
[data-kt-app-layout=dark-sidebar] .app-sidebar .scroll-y:hover {
    scrollbar-color: rgba(255, 255, 255, .35) transparent;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .hover-scroll-overlay-y:hover::-webkit-scrollbar-thumb,
[data-kt-app-layout=dark-sidebar] .app-sidebar .scroll-y:hover::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .35);
}

/* Encabezados de sección (SISTEMA, MÓDULO IA, ...) */
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu > .menu-item .menu-heading {
    color: rgba(255, 255, 255, .6) !important;
}

/* Ítems de primer nivel: texto, icono, bullet y flecha */
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu > .menu-item .menu-link,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu > .menu-item .menu-link .menu-title {
    color: #ffffff;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu > .menu-item .menu-link .menu-icon,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu > .menu-item .menu-link .menu-icon .svg-icon,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu > .menu-item .menu-link .menu-icon i {
    color: rgba(255, 255, 255, .85);
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu > .menu-item .menu-link .menu-bullet .bullet {
    background-color: rgba(255, 255, 255, .7);
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu > .menu-item .menu-link .menu-arrow:after {
    background-color: rgba(255, 255, 255, .75);
}

/* Subitems (dentro de acordeones) */
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu > .menu-item .menu-sub .menu-item .menu-link .menu-title {
    color: rgba(255, 255, 255, .8);
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu > .menu-item .menu-sub .menu-item .menu-link.active .menu-title {
    color: #ffffff;
}

/* Acordeón abierto / ítem "here": flecha e icono en blanco */
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu > .menu-item.here > .menu-link,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu > .menu-item.here > .menu-link .menu-title,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu > .menu-item.show > .menu-link,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu > .menu-item.show > .menu-link .menu-title {
    color: #ffffff;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu > .menu-item.here > .menu-link .menu-arrow:after,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu > .menu-item.show > .menu-link .menu-arrow:after {
    background-color: #ffffff;
}

/* Ítem activo: verde más oscuro en lugar del negro #1c1c21 */
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu > .menu-item .menu-link.active {
    background-color: #006940;
    color: #ffffff;
}

/* Hover: fondo sutil para que se note sobre el verde */
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu > .menu-item .menu-link:hover:not(.disabled):not(.active) {
    background-color: rgba(255, 255, 255, .08);
}