/* ========================================
   SIDEBAR RESPONSIVE OVERLAY BEHAVIOR
   ======================================== 
   
   Comportamiento:
   - El sidebar está visible en modo mini (solo iconos) en el borde izquierdo
   - Al pasar el mouse, se expande completamente mostrando todos los textos
   - El main-content NUNCA cambia de tamaño
*/

/* Área de hover invisible para activar sidebar */
.sidebar-hover-trigger {
    position: fixed;
    top: 0;
    left: 0;
    width: 80px;
    height: 100%;
    z-index: 905;
    background: transparent;
    pointer-events: none;
}

/* Backdrop para cuando el sidebar está abierto por click */
.sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 900;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-backdrop.show {
    display: block;
    opacity: 1;
}

/* ========================================
   REGLA PRINCIPAL: El main-content NUNCA
   se ve afectado por el sidebar
   ======================================== */
.sidebar + .main-content,
.main-content {
    margin-left: 0 !important;
    width: 100% !important;
    transition: none !important;
}

/* ========================================
   SIDEBAR COMO OVERLAY - Siempre fixed
   ======================================== */
.sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 910;
    transition: width 0.3s ease, box-shadow 0.3s ease !important;
}

/* Sidebar minimizado: visible pero pequeño (solo iconos) */
.sidebar.sidebar-mini {
    width: 4.8rem;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

/* ========================================
   HOVER: Expandir sidebar COMPLETO
   ======================================== */

/* Cuando hace hover, expandir a ancho completo */
.sidebar.sidebar-mini.sidebar-hover:hover {
    --sidebar-width: 260px;
    width: 260px !important;
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.2);
}

/* ========================================
   FORZAR MOSTRAR TEXTOS EN HOVER
   Sobrescribir las reglas de qompac-ui.css
   ======================================== */

/* Mostrar item-name */
.sidebar.sidebar-mini.sidebar-hover:hover .nav-item .nav-link .item-name {
    opacity: 1 !important;
    transform: translateX(0) scale(1) !important;
    display: inline-block !important;
    width: auto !important;
    visibility: visible !important;
}

/* Mostrar todos los spans excepto mini-icon */
.sidebar.sidebar-mini.sidebar-hover:hover .nav-item .nav-link:not(.static-item) span:not(.mini-icon):not(.sidenav-mini-icon) {
    opacity: 1 !important;
    transform: translateX(0) scale(1) !important;
    display: inline-block !important;
}

/* Ocultar mini icons */
.sidebar.sidebar-mini.sidebar-hover:hover .nav-item .nav-link span.sidenav-mini-icon,
.sidebar.sidebar-mini.sidebar-hover:hover .mini-icon {
    display: none !important;
    opacity: 0 !important;
}

/* Mostrar default-icon en items estáticos */
.sidebar.sidebar-mini.sidebar-hover:hover .nav-item .nav-link.static-item .default-icon {
    display: inline-block !important;
}

/* Ajustar padding de nav-links */
.sidebar.sidebar-mini.sidebar-hover:hover .nav-item .nav-link {
    padding: 0.625rem 1rem !important;
    justify-content: flex-start !important;
}

/* Mostrar iconos en submenús */
.sidebar.sidebar-mini.sidebar-hover:hover .nav-item .sub-nav .nav-item .icon {
    display: flex !important;
}

/* Padding para items estáticos */
.sidebar.sidebar-mini.sidebar-hover:hover .nav-item.static-item {
    padding-left: 0 !important;
    text-align: left !important;
}

.sidebar.sidebar-mini.sidebar-hover:hover .nav-item .nav-link.static-item {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ========================================
   LOGO EN HOVER - SOLO MOSTRAR UNO
   ======================================== */

/* 1. OCULTAR TODO dentro de logo-mini (el contenedor completo) */
.sidebar.sidebar-hover:hover .logo-main .logo-mini,
.sidebar.sidebar-hover:hover .logo-mini {
    display: none !important;
    visibility: hidden !important;
}

/* 2. OCULTAR el logo-mini-icon dentro de logo-normal */
.sidebar.sidebar-hover:hover .logo-main .logo-normal .logo-mini-icon,
.sidebar.sidebar-hover:hover .logo-mini-icon,
.sidebar.sidebar-hover:hover img.logo-mini-icon {
    display: none !important;
    visibility: hidden !important;
}

/* 3. MOSTRAR solo el logo-full correcto según el tema */

/* Tema LIGHT: mostrar logo light, ocultar dark */
html[data-bs-theme="light"] .sidebar.sidebar-hover:hover .logo-main .logo-normal .logo-full.theme-light-only,
[data-bs-theme="light"] .sidebar.sidebar-hover:hover .logo-full.theme-light-only {
    display: block !important;
    visibility: visible !important;
}

html[data-bs-theme="light"] .sidebar.sidebar-hover:hover .logo-full.theme-dark-only,
[data-bs-theme="light"] .sidebar.sidebar-hover:hover .logo-full.theme-dark-only {
    display: none !important;
}

/* Tema DARK: mostrar logo dark, ocultar light */
html[data-bs-theme="dark"] .sidebar.sidebar-hover:hover .logo-main .logo-normal .logo-full.theme-dark-only,
[data-bs-theme="dark"] .sidebar.sidebar-hover:hover .logo-full.theme-dark-only {
    display: block !important;
    visibility: visible !important;
}

html[data-bs-theme="dark"] .sidebar.sidebar-hover:hover .logo-full.theme-light-only,
[data-bs-theme="dark"] .sidebar.sidebar-hover:hover .logo-full.theme-light-only {
    display: none !important;
}

/* Logo title */
.sidebar.sidebar-hover:hover .navbar-brand .logo-title {
    transform: translateX(0) scale(1) !important;
    opacity: 1 !important;
}

/* ========================================
   HEADER Y TOGGLE EN HOVER
   ======================================== */
.sidebar.sidebar-mini.sidebar-hover:hover .sidebar-header {
    padding: 0.938rem 1rem !important;
    justify-content: space-between !important;
}

.sidebar.sidebar-mini.sidebar-hover:hover .sidebar-toggle {
    display: flex !important;
    opacity: 1 !important;
}

/* Mostrar flecha de submenús */
.sidebar.sidebar-mini.sidebar-hover:hover .right-icon {
    display: flex !important;
    opacity: 1 !important;
}

/* ========================================
   SIDEBAR ABIERTO POR CLICK (sin mini)
   ======================================== */
.sidebar:not(.sidebar-mini) {
    width: 260px !important;
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.2);
}

/* Bloquear scroll cuando está abierto por click */
body.sidebar-overlay-open {
    overflow: hidden;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 576px) {
    .sidebar.sidebar-mini.sidebar-hover:hover,
    .sidebar:not(.sidebar-mini) {
        width: 85vw !important;
        max-width: 260px !important;
    }
}

/* Transiciones */
.sidebar {
    transition: width 0.3s ease, box-shadow 0.3s ease !important;
}

.sidebar-backdrop {
    transition: opacity 0.3s ease;
}