/* ==========================================================================
   Custom Sidebar / Menu styling
   Mejora visual del menú lateral y persistencia del estado activo.
   El estado activo se calcula en el servidor (clases .active / .show) para
   que el submenú NO se cierre en cada recarga de página.
   ========================================================================== */

:root {
    --sidebar-bg: #3b45b9;
    --sidebar-bg-dark: #333a96;
    --sidebar-active: #ffffff;
    --sidebar-active-bg: rgba(255, 255, 255, 0.14);
    --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --sidebar-text: rgba(255, 255, 255, 0.78);
}

/* Fondo del menú lateral con un leve degradado */
.sidenav-menu {
    background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-dark) 100%) !important;
}

/* Texto e iconos del menú */
.sidenav-menu .side-nav-link,
.sidenav-menu .side-nav-link .menu-text,
.sidenav-menu .side-nav-link .menu-icon i {
    color: var(--sidebar-text) !important;
    transition: color .15s ease, background-color .15s ease;
}

.sidenav-menu .side-nav-title {
    color: rgba(255, 255, 255, 0.45) !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: 11px;
}

/* Item del menú: bordes suaves y separación */
.sidenav-menu .side-nav-item {
    margin: 2px 8px;
}

.sidenav-menu .side-nav-link {
    border-radius: 8px;
    padding: 9px 12px;
}

/* Hover */
.sidenav-menu .side-nav-link:hover {
    background-color: var(--sidebar-hover-bg);
}

.sidenav-menu .side-nav-link:hover .menu-text,
.sidenav-menu .side-nav-link:hover .menu-icon i {
    color: var(--sidebar-active) !important;
}

/* ---- Estado ACTIVO (calculado en servidor) ---- */
.sidenav-menu .side-nav-item.active > .side-nav-link,
.sidenav-menu .side-nav-link.active {
    background-color: var(--sidebar-active-bg);
    position: relative;
}

.sidenav-menu .side-nav-item.active > .side-nav-link .menu-text,
.sidenav-menu .side-nav-item.active > .side-nav-link .menu-icon i,
.sidenav-menu .side-nav-link.active .menu-text,
.sidenav-menu .side-nav-link.active .menu-icon i {
    color: var(--sidebar-active) !important;
    font-weight: 600;
}

/* Indicador lateral del item activo */
.sidenav-menu .side-nav-item.active > .side-nav-link::before,
.sidenav-menu .side-nav-link.active::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    height: 60%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background-color: #ffffff;
}

/* Submenú */
.sidenav-menu .sub-menu .side-nav-link {
    padding-left: 46px;
    font-size: 13px;
}

.sidenav-menu .sub-menu .side-nav-link.active {
    background-color: var(--sidebar-active-bg);
}

/* Flecha del menú con submenús: rota suavemente al abrir */
.sidenav-menu .menu-arrow {
    transition: transform .2s ease;
}

.sidenav-menu .side-nav-link[aria-expanded="true"] .menu-arrow {
    transform: rotate(90deg);
}

/* Quitar transición de "salto" del collapse en la carga inicial */
.sidenav-menu .collapse.show {
    visibility: visible;
}

/* ---- Bloque de usuario en el sidebar ---- */
.sidebar-user-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}

.sidebar-user-name h4,
.sidebar-user-name h6 {
    color: #fff !important;
}

.sidebar-user-name h6 {
    color: rgba(255, 255, 255, 0.65) !important;
    font-weight: 400;
}

/* ---- Empresa en el topbar ---- */
.topbar-empresa {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.topbar-empresa .empresa-label {
    font-size: 11px;
    color: var(--bs-secondary-color, #8a92a6);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.topbar-empresa .empresa-nombre {
    font-size: 15px;
    font-weight: 600;
    color: var(--bs-emphasis-color, #313a46);
}

/* Avatar de iniciales en el topbar */
.topbar-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sidebar-bg);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}