/* ==========================================================================
   Menú lateral EMCO
   Jerarquía visual entre los ítems de primer nivel y los de submenú.
   Se carga como plugin "CustomCSS" desde config/adminlte.php.
   Colores tomados del logo institucional (public/imagenes/logo.png):
   azul #03328A y verde #52B011.
   ========================================================================== */

:root {
    --emco-azul: #03328a;
    --emco-azul-claro: #0a4bb8;
    --emco-verde: #52b011;
    --emco-verde-claro: #6cc42a;
}

/* --- Encabezados de sección ("ADMINISTRACIÓN") ---------------------------- */

.main-sidebar .nav-sidebar > .nav-header {
    margin-top: .9rem;
    padding: .95rem 1rem .4rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: #8b95a3;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.main-sidebar .nav-sidebar > .nav-header:first-child {
    margin-top: 0;
    border-top: 0;
}

/* --- Nivel 1: ítems del menú --------------------------------------------- */

.main-sidebar .nav-sidebar > .nav-item {
    margin-bottom: 0;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link {
    position: relative;
    padding: .62rem .9rem .62rem .85rem;
    border-radius: 0;
    border-left: 3px solid transparent;
    color: #dde2e8;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.35;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link > .nav-icon {
    width: 1.6rem;
    margin-right: .35rem;
    font-size: 1.05rem;
    text-align: center;
}

/* Solo los padres con submenú necesitan sitio para la flecha. */
.main-sidebar .nav-sidebar > .nav-item.has-treeview > .nav-link {
    padding-right: 2.1rem;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link:hover {
    background-color: rgba(255, 255, 255, .07);
    color: #fff;
}

/* Padre desplegado: se lee como "abierto", nunca como "seleccionado". */
.main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link,
.main-sidebar .nav-sidebar > .nav-item.menu-is-opening > .nav-link,
.main-sidebar .nav-sidebar > .nav-item.has-treeview > .nav-link.active,
.main-sidebar .nav-sidebar > .nav-item.has-treeview > .nav-link.active:hover {
    background-color: rgba(255, 255, 255, .05);
    border-left-color: rgba(255, 255, 255, .22);
    color: #fff;
    box-shadow: none;
}

/* El padre que contiene la página abierta se marca con el verde EMCO. */
.main-sidebar .nav-sidebar > .nav-item.has-treeview > .nav-link.active,
.main-sidebar .nav-sidebar > .nav-item.has-treeview > .nav-link.active:hover {
    border-left-color: var(--emco-verde);
}

/* --- Flecha del desplegable ---------------------------------------------- */

.main-sidebar .nav-sidebar .nav-link > p > .right {
    position: absolute;
    top: 50%;
    right: .95rem;
    margin-top: 0;
    font-size: .8rem;
    opacity: .5;
    transform: translateY(-50%) rotate(0deg);
    transition: transform .3s ease, opacity .2s ease;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link:hover > p > .right {
    opacity: .85;
}

.main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link > p > .right,
.main-sidebar .nav-sidebar > .nav-item.menu-is-opening > .nav-link > p > .right {
    opacity: .85;
    transform: translateY(-50%) rotate(-90deg);
}

/* --- Bloque de submenú ---------------------------------------------------- */

.main-sidebar .nav-sidebar .nav-treeview {
    position: relative;
    padding: .2rem 0 .3rem;
    background-color: rgba(0, 0, 0, .26);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05),
                inset 0 -1px 0 rgba(0, 0, 0, .3);
}

/* Riel vertical que agrupa los hijos bajo su padre. */
.main-sidebar .nav-sidebar .nav-treeview::before {
    content: "";
    position: absolute;
    top: .3rem;
    bottom: .4rem;
    left: 1.55rem;
    width: 2px;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, .16);
}

/* --- Nivel 2: ítems del submenú ------------------------------------------ */

.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link {
    position: relative;
    padding: .42rem 1rem .42rem 2.65rem;
    border-radius: 0;
    color: #a7b0bd;
    font-size: .855rem;
    font-weight: 400;
    line-height: 1.35;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link > .nav-icon {
    width: 1.15rem;
    margin-right: .45rem;
    font-size: .82rem;
    text-align: center;
    opacity: .8;
}

/* Conector corto entre el riel y cada hijo. */
.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 1.55rem;
    width: .62rem;
    height: 2px;
    margin-top: -1px;
    background-color: rgba(255, 255, 255, .16);
}

.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link:hover {
    background-color: rgba(255, 255, 255, .06);
    color: #fff;
}

.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link:hover::before {
    background-color: rgba(255, 255, 255, .38);
}

/* --- Estado activo (la página que se está viendo) ------------------------- */

.main-sidebar .nav-sidebar > .nav-item:not(.has-treeview) > .nav-link.active,
.main-sidebar .nav-sidebar > .nav-item:not(.has-treeview) > .nav-link.active:hover {
    background: linear-gradient(90deg, var(--emco-azul) 0%, var(--emco-azul-claro) 100%);
    border-left-color: var(--emco-verde);
    color: #fff;
    font-weight: 600;
}

.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link.active,
.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link.active:hover {
    background: linear-gradient(90deg, var(--emco-azul) 0%, var(--emco-azul-claro) 100%);
    box-shadow: inset 3px 0 0 var(--emco-verde);
    color: #fff;
    font-weight: 600;
}

.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link.active > .nav-icon {
    opacity: 1;
}

.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link.active::before {
    background-color: var(--emco-verde-claro);
}

/* --- Accesibilidad: foco visible con teclado ----------------------------- */

.main-sidebar .nav-sidebar .nav-link:focus-visible {
    outline: 2px solid var(--emco-verde-claro);
    outline-offset: -2px;
}

/* --- Sidebar colapsado (modo iconos) ------------------------------------- */
/* Se devuelve la sangría y las guías a su sitio para no descuadrar los
   iconos cuando la barra está reducida y no se está pasando por encima. */

@media (min-width: 992px) {
    .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar > .nav-item > .nav-link,
    .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-treeview > .nav-item > .nav-link {
        padding-left: .85rem;
        padding-right: .85rem;
        border-left-width: 0;
        box-shadow: none;
    }

    .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-treeview {
        padding: 0;
        background-color: transparent;
        box-shadow: none;
    }

    .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-treeview::before,
    .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-treeview > .nav-item > .nav-link::before {
        display: none;
    }

    /* Con la barra reducida los iconos de ambos niveles deben ocupar lo mismo
       para que queden en la misma columna. */
    .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-treeview > .nav-item > .nav-link > .nav-icon {
        width: 1.6rem;
        margin-right: .35rem;
        font-size: 1.05rem;
        opacity: 1;
    }

    /* El marcador verde se dibuja por dentro para no desplazar los iconos. */
    .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar > .nav-item.has-treeview > .nav-link.active,
    .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar > .nav-item:not(.has-treeview) > .nav-link.active,
    .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
        box-shadow: inset 3px 0 0 var(--emco-verde);
    }

    .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar > .nav-header {
        margin-top: 0;
        padding: .5rem 1rem;
        border-top: 0;
    }
}