/* Sidebar base (collapsed) - NO HOVER EXPANSION */
.sidebar {
    min-width: 60px;
    max-width: 60px;
    width: 60px;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    overflow-x: hidden;
    overflow-y: scroll; /* Scrollbar siempre presente para evitar saltos */
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh; /* Ocupa toda la altura de la ventana */
    padding-top: 60px; /* Reservar espacio para el botón de toggle */
    font-family: 'Segoe UI', 'Roboto', 'Arial', sans-serif;
    background: #212529;
    box-shadow: 2px 0 8px rgba(0,0,0,0.04);
    z-index: 2147481000; /* Por encima de headers y modales para flyouts */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(255,255,255,0.3) transparent; /* Firefox */
}

/* Personalizar scrollbar en Webkit (Chrome, Safari, Edge) */
.sidebar::-webkit-scrollbar {
    width: 6px; /* Hacer la scrollbar más delgada */
}

.sidebar::-webkit-scrollbar-track {
    background: transparent; /* Fondo transparente */
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.3); /* Color sutil para el thumb */
    border-radius: 3px;
    transition: background 0.2s ease;
}

.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.5); }

/* Expanded state activated by JS (.expanded) */
.sidebar.expanded {
    min-width: 250px;
    max-width: 250px;
    width: 250px;
    box-shadow: 2px 0 8px rgba(0,0,0,0.08);
    z-index: 2147481000; /* Mantener misma jerarquía en modo expandido */
    overflow-y: scroll;
}
/* Content hidden by default - only visible when expanded */
.sidebar .navbar-brand,
.sidebar .nav,
.sidebar .btn {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

/* Content only visible when explicitly expanded by button */
.sidebar.expanded .navbar-brand,
.sidebar.expanded .nav,
.sidebar.expanded .btn { 
    opacity: 1; 
    pointer-events: auto; 
}
/* Visible toggle button inside the sidebar */
.sidebar .sidebar-toggle {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #343a40;
    border: 1px solid #495057;
    border-radius: 8px;
    cursor: pointer;
    z-index: 201;
}
.sidebar .sidebar-toggle:hover { background: #3d4349; }
.sidebar.expanded .sidebar-toggle { background: #495057; }
/* Aplica el margen izquierdo a diferentes tipos de contenedores */
body { overflow-x: hidden; }

body > .container,
body > .main-content,
body > .container-fluid,
body > .content {
    margin-left: 60px;
    width: calc(100vw - 60px); /* Usar viewport width */
    max-width: calc(100vw - 60px);
    transition: margin-left 0.3s cubic-bezier(0.4,0,0.2,1), width 0.3s cubic-bezier(0.4,0,0.2,1);
    overflow-x: auto; /* Solo scroll interno si es necesario */
}

.sidebar.expanded ~ .container,
.sidebar.expanded ~ .main-content,
.sidebar.expanded ~ .container-fluid,
.sidebar.expanded ~ .content {
    margin-left: 250px;
    width: calc(100vw - 250px);
    max-width: calc(100vw - 250px);
}

/* Soporte para contenedores anidados */
.container,
.main-content,
.container-fluid,
.content {
    transition: margin-left 0.3s cubic-bezier(0.4,0,0.2,1), width 0.3s cubic-bezier(0.4,0,0.2,1);
    box-sizing: border-box;
}

/* En pantallas pequeñas, quitar márgenes */
@media (max-width: 768px) {
    body > .container,
    body > .main-content,
    body > .container-fluid,
    body > .content,
    .container,
    .main-content,
    .container-fluid,
    .content {
        margin-left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }
    .sidebar.expanded ~ .container,
    .sidebar.expanded ~ .main-content,
    .sidebar.expanded ~ .container-fluid,
    .sidebar.expanded ~ .content {
        margin-left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }
}
.sidebar .navbar-brand {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #fff !important;
    margin-top: 0; /* Espacio gestionado por padding-top del contenedor */
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #343a40;
    padding-bottom: 1rem;
    transition: color 0.2s;
}

.sidebar .nav {
    font-size: 1rem;
    font-weight: 400;
}

.sidebar .nav-item {
    width: 100%;
    margin-bottom: 0.25rem;
}

.sidebar .nav-link {
    color: #adb5bd;
    border-radius: 8px;
    margin: 0.125rem 0;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    word-wrap: break-word;
    /* Asegurar que el contenido no se superponga con la scrollbar */
    margin-right: 2px;
}

.sidebar .nav > .nav-item > .nav-link {
    background: #23272b;
    color: #ffcb05;
    font-weight: 600;
    display: flex;
    align-items: center;
    /* Para que la flecha esté centrada verticalmente */
}

.sidebar .nav > .nav-item > .nav-link.active,
.sidebar .nav > .nav-item > .nav-link:hover,
.sidebar .nav > .nav-item > .nav-link:focus {
    background: #343a40;
    color: #fff;
}

.sidebar .nav-link:hover,
.sidebar .nav-link:focus {
    background: #343a40;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.sidebar .nav-link.active {
    background: #495057;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.sidebar .nav-link.dropdown-toggle::after {
    float: none;
    margin-left: auto;
    color: #adb5bd;
    align-self: center;
    /* Centra la flecha verticalmente */
}

.sidebar .collapse .nav-link {
    background: transparent;
    color: #cfd8dc;
    font-weight: 500;
    padding-left: 2rem;
    transition: background 0.2s ease, color 0.2s ease;
}

.sidebar .collapse .nav-link.active,
.sidebar .collapse .nav-link:hover {
    background: #495057;
    color: #fff;
}

/* Transiciones suaves para los collapse */
.sidebar .collapse {
    transition: none !important; /* Deshabilitar transiciones de Bootstrap */
    overflow: hidden;
}

/* Reglas base SOLO para móvil - movidas dentro de media query abajo */

/* Mejorar la experiencia de hover */
.sidebar .nav-link.dropdown-toggle:hover {
    background: #343a40;
    color: #fff;
}

.sidebar .btn {
    font-size: 1rem;
    font-weight: 500;
    border-radius: 0.375rem;
    background: #343a40;
    color: #fff;
    border: none;
    transition: background 0.18s, color 0.18s;
}

.sidebar .btn:hover {
    background: #495057;
    color: #fff;
}

/* Prevenir interferencias de Bootstrap Collapse */
.sidebar .collapsing {
    transition: none !important;
    height: auto !important;
}

/* Asegurar que los dropdowns funcionen correctamente */
.sidebar .dropdown-toggle[aria-expanded="true"] {
    background: #343a40;
    color: #fff;
}

.sidebar .dropdown-toggle::after {
    transition: transform 0.2s ease;
}

.sidebar .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/* Deshabilitar transiciones automáticas de Bootstrap en la sidebar */
.sidebar .collapse {
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
}

.sidebar .collapse.collapsing {
    transition: none !important;
    -webkit-transition: none !important;
    height: auto !important;
}

/* Evitar comportamientos indeseados de Bootstrap */
.sidebar .dropdown-toggle::after {
    transition: none !important;
}

.sidebar .nav-link[data-bs-toggle] {
    pointer-events: auto !important;
}

.sidebar [data-bs-toggle="collapse"] {
    transition: none !important;
}

/* Optimizaciones para el contenido de la sidebar */
.sidebar .navbar-nav {
    width: 100%;
    /* Agregar padding derecho para compensar la scrollbar */
    padding-right: 8px;
    box-sizing: border-box;
}

.sidebar.expanded .navbar-nav {
    padding-right: 12px; /* Más espacio para la scrollbar en hover */
}

/* Toggle hitbox for click-based expansion */
.sidebar .toggle-hitbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    z-index: 201;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* Alternativa: Ocultar scrollbar pero mantener funcionalidad */
.sidebar.hide-scrollbar {
    /* Para Firefox */
    scrollbar-width: none;
    /* Para Internet Explorer y Edge */
    -ms-overflow-style: none;
}

/* Para Webkit (Chrome, Safari, Edge moderno) */
.sidebar.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Clase para activar scrollbar invisible */
.sidebar.hide-scrollbar {
    overflow-y: scroll;
    /* Agregar un poco de padding extra para compensar el área de scroll invisible */
    padding-right: 0;
}

/* ========== FLYOUT MENU (Desktop) - Submenús laterales ========== */
/* Solo en pantallas medianas y grandes (tablet landscape y desktop) */
@media (min-width: 992px) {
    /* IMPORTANTE: Permitir que los flyouts se vean fuera del sidebar */
    .sidebar {
        overflow-x: visible !important;
        overflow-y: auto !important; /* Cambiar de scroll a auto para permitir flyouts */
    }
    
    .sidebar .nav {
        overflow: visible !important;
    }
    
    /* Contenedor del submenú debe estar posicionado relativo */
    .sidebar .nav-item {
        position: relative;
        overflow: visible !important;
    }
    
    /* Submenús colapsables se convierten en flyout */
    .sidebar .collapse {
        position: absolute;
        left: 100%; /* Se abre a la derecha del menú principal */
        top: 0;
        min-width: 220px;
        background: #2c3136;
        border-radius: 0 8px 8px 0;
        box-shadow: 4px 0 12px rgba(0,0,0,0.15);
        margin-left: 0;
        padding: 0.5rem 0;
        overflow: visible !important; /* Permitir que el submenu proyecte su siguiente nivel */
        z-index: 2147481200; /* Z-index extremo para sobreponerse a headers fijos */
        /* Oculto por defecto */
        display: none !important;
        opacity: 0;
        transform: translateX(-10px);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
    
    /* Cuando el submenú está controlado por JS, permitir ajuste fino sin inline-styles */
    .sidebar .collapse[data-flyout-open] {
        z-index: 2147481200;
        left: calc(100% - 6px); /* pequeño traslape para evitar hueco visible */
    }
    
    .sidebar .collapse[data-flyout-open="nested"] {
        z-index: 2147481201;
        left: calc(100% - 10px); /* acercar aún más los flyouts anidados */
        background: #343a40;
    }
    
    /* Cuando el submenú está abierto */
    .sidebar .collapse.show {
        display: block !important;
        opacity: 1;
        transform: translateX(0);
    }
    
    /* Ajustar padding de enlaces dentro del flyout */
    .sidebar .collapse .nav-link {
        padding-left: 1rem;
        padding-right: 1rem;
        white-space: nowrap;
        background: transparent;
        border-radius: 6px;
        margin: 0.125rem 0.5rem;
    }
    
    /* Hover en enlaces del flyout */
    .sidebar .collapse .nav-link:hover,
    .sidebar .collapse .nav-link.active {
        background: #3d4349;
        color: #fff;
    }
    
    /* Submenús anidados (dropdown vertical en desktop) */
    .sidebar .collapse .collapse {
        position: static;
        margin-left: 0;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        padding-left: 0;
    }
    
    /* Enlaces de segundo nivel con indentación */
    .sidebar .collapse .collapse .nav-link {
        padding-left: 2.5rem;
        background: transparent;
    }
    
    .sidebar .collapse .collapse .nav-link:hover,
    .sidebar .collapse .collapse .nav-link.active {
        background: #3d4349;
        color: #fff;
    }

    /* Sombreado y contraste para submenús anidados (desktop) */
    .sidebar .collapse .collapse.show {
        background: linear-gradient(180deg, rgba(44,49,54,0.98), rgba(36,40,44,0.98));
        border-radius: 8px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.12) inset;
        padding: 0.5rem 0.5rem;
        margin: 0.25rem 0 0 0;
        display: block !important;
        transform: translateY(4px);
        transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
        opacity: 1;
    }

    /* Ajustes para enlaces dentro del submenú sombreado */
    .sidebar .collapse .collapse.show .nav-link {
        color: #e6eef2;
        padding: 0.6rem 1rem;
        margin: 0.125rem 0;
        border-radius: 6px;
    }

    .sidebar .collapse .collapse.show .nav-link:hover {
        background: rgba(255,255,255,0.04);
        color: #fff;
    }

    /* Flechas para toggles anidados: usar mismo diseño que los toggles de primer nivel
       (chevrón) y rotarlo hacia abajo cuando el submenú esté abierto */
    .sidebar .collapse .dropdown-toggle::after {
        content: "›";
        border: none;
        font-size: 1.2rem;
        font-weight: bold;
        margin-left: auto;
        color: #adb5bd;
        align-self: center;
        display: inline-block;
        transform: rotate(0deg); /* apunta a la derecha */
        transition: transform 0.15s ease, color 0.12s ease;
    }

    .sidebar .collapse .dropdown-toggle[aria-expanded="true"]::after {
        transform: rotate(90deg); /* apunta abajo */
        color: #fff;
    }

    /* Alinear correctamente el toggle anidado y su chevrón */
    .sidebar .collapse .dropdown-toggle {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0.75rem 1rem; /* coincide con .nav-link */
        box-sizing: border-box;
    }

    /* Asegurar que el chevrón esté exactamente centrado con el texto */
    .sidebar .collapse .dropdown-toggle::after {
        line-height: 1; /* evitar desplazamiento por line-height */
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Evitar que el hover cambie el tamaño: fijar peso y comportamiento */
    .sidebar .collapse .dropdown-toggle,
    .sidebar .collapse .nav-link {
        box-sizing: border-box;
        margin: 0; /* eliminar márgenes horizontales que expanden el contenedor */
        white-space: nowrap; /* evitar wrapping que fuerza ancho mayor */
        font-weight: 600; /* mantener peso consistente para evitar reflujo en hover */
    }

    .sidebar .collapse .dropdown-toggle:hover {
        font-weight: 600; /* sobrescribir regla global de hover */
    }

    /* Asegurar que la apariencia del hover sea solo color de fondo sin afectar layout */
    .sidebar .collapse .dropdown-toggle,
    .sidebar .collapse .nav-link {
        transition: background-color 0.12s ease, color 0.12s ease;
    }
    
    /* Indicador visual de que hay submenú */
    .sidebar .dropdown-toggle::after {
        content: "›";
        border: none;
        font-size: 1.2rem;
        font-weight: bold;
        margin-left: auto;
        transition: none;
    }
    
    /* En sidebar expandida, mejorar espaciado */
    .sidebar.expanded .collapse {
        min-width: 240px;
    }
}

/* ========== DROPDOWN VERTICAL (Mobile/Tablet) ========== */
/* En pantallas pequeñas, mantener comportamiento actual de dropdown vertical */
@media (max-width: 991px) {
    /* Control de visibilidad para móvil */
    .sidebar .collapse:not(.show) {
        display: none !important;
    }

    .sidebar .collapse.show {
        display: block !important;
    }
    
    /* Los submenús se abren hacia abajo normalmente */
    .sidebar .collapse {
        position: static;
        background: transparent;
        box-shadow: none;
        padding-left: 0;
    }
    
    .sidebar .collapse .nav-link {
        padding-left: 2rem;
    }
    
    .sidebar .collapse .collapse .nav-link {
        padding-left: 3rem;
    }
    
    /* Flecha hacia abajo en móvil */
    .sidebar .dropdown-toggle::after {
        content: "";
        display: inline-block;
        margin-left: auto;
        vertical-align: 0.255em;
        border-top: 0.3em solid;
        border-right: 0.3em solid transparent;
        border-bottom: 0;
        border-left: 0.3em solid transparent;
        transition: transform 0.2s ease;
    }
    
    .sidebar .dropdown-toggle[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }
}