/* ============================================
   SIDEBAR MENU - MENÚ LATERAL ANIMADO (GLASSMORPHISM)
   ============================================ */

/* Variables para el menú lateral */
:root {
    --sidebar-width: 300px;
    --sidebar-bg-light: rgba(255, 255, 255, 0.85);
    --sidebar-bg-dark: rgba(15, 23, 42, 0.85);
    --sidebar-backdrop-blur: 20px;
    --sidebar-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    --sidebar-transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    --hamburger-size: 44px;
    --hamburger-line-height: 2.5px;
    --hamburger-line-spacing: 6px;
    --overlay-bg: rgba(0, 0, 0, 0.4);
    --menu-gradient-light: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
    --menu-gradient-dark: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.4) 100%);
    --item-hover-bg: rgba(99, 102, 241, 0.15);
    --item-active-bg: linear-gradient(90deg, rgba(99, 102, 241, 0.2), rgba(99, 102, 241, 0.05));
    --item-border-radius: 16px;
}

/* ============================================
   BOTÓN HAMBURGUESA
   ============================================ */

.header-hamburger-trigger {
    display: flex;
    align-items: center;
    z-index: 100;
}

.header-hamburger-trigger.hidden {
    display: none;
}

.hamburger-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 2rem;
    height: 2rem;
    z-index: 1200;
    position: relative;
    transition: transform 0.3s ease;
}

/* Estilos para el texto del botón hamburguesa */
.hamburger-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color);
    margin-right: 0.8rem;
    white-space: nowrap;
}

.hidden-mobile {
    display: none;
}

/* Ajuste del botón cuando tiene texto (Desktop) */
@media (min-width: 768px) {
    .hidden-mobile {
        display: block;
    }

    .hamburger-btn {
        width: auto;
        height: auto;
        flex-direction: row;
        align-items: center;
        background: rgba(0, 0, 0, 0.05);
        /* Fondo sutil */
        padding: 0.5rem 1rem;
        border-radius: 20px;
    }

    .hamburger-btn .hamburger-line {
        margin-left: 0.5rem;
        /* Separar líneas del texto */
        width: 1.5rem;
        /* Líneas un poco más pequeñas */
    }

    /* Ajustar las líneas para que se apilen verticalmente dentro de un contenedor flex row?
       No, las líneas son spans directos. Necesitamos un wrapper para las líneas si queremos row.
       O podemos mantener flex-direction row y que las líneas sean un bloque.

       Mejor: Envolver las líneas en un div en el HTML o usar pseudo-elementos.
       Pero ya edité el HTML y puse spans directos.

       Solución: Si flex-direction es row, los spans se pondrán uno al lado del otro.
       Necesito que las líneas sigan apiladas verticalmente.

       Voy a cambiar el CSS para que .hamburger-btn sea flex row, pero las líneas
       necesitan estar en columna. Como no tengo wrapper, usaré un truco o
       mejor, editaré el HTML para poner un wrapper a las líneas si es necesario.

       Espera, el usuario dijo "el icono de menu hamburguesa ponga el texto".
       Lo más fácil es envolver las líneas en un div en el HTML.

       Voy a hacer un replace_file_content rápido al HTML de nuevo para envolver las líneas.
    */
}

.hamburger-btn:hover {
    background: rgba(99, 102, 241, 0.1);
}

/* Líneas del hamburguesa */
.hamburger-line {
    height: var(--hamburger-line-height);
    background: var(--text-color);
    border-radius: 2px;
    transition: var(--sidebar-transition);
    transform-origin: center;
}

/* Animación a X cuando está abierto */
.hamburger-btn.active .hamburger-line:nth-child(1) {
    transform: translateY(calc(var(--hamburger-line-height) + var(--hamburger-line-spacing))) rotate(45deg);
}

.hamburger-btn.active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger-btn.active .hamburger-line:nth-child(3) {
    transform: translateY(calc(-1 * (var(--hamburger-line-height) + var(--hamburger-line-spacing)))) rotate(-45deg);
}

/* ============================================
   OVERLAY DE FONDO
   ============================================ */

.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-bg);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: var(--sidebar-transition);
    z-index: 1100;
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   PANEL LATERAL (SIDEBAR) - GLASSMORPHISM
   ============================================ */

.sidebar-menu {
    position: fixed;
    top: 0;
    right: 0;
    /* Fijado a la derecha */
    left: auto;
    /* Anular izquierda */
    width: var(--sidebar-width);
    height: 100vh;
    /* Glassmorphism Background */
    background: var(--sidebar-bg-light);
    backdrop-filter: blur(var(--sidebar-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--sidebar-backdrop-blur));
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    /* Borde a la izquierda */
    border-right: none;

    box-shadow: var(--sidebar-shadow);
    transform: translateX(100%);
    /* Oculto a la derecha */
    transition: var(--sidebar-transition);
    z-index: 1150;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[data-theme="dark"] .sidebar-menu {
    background: var(--sidebar-bg-dark);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: none;
}

.sidebar-menu.active {
    transform: translateX(0);
}

/* Header del sidebar */
.sidebar-header {
    padding: 2rem 1.5rem;
    /* Usar colores configurables de la empresa */
    background: linear-gradient(135deg, var(--primary-color, #6366f1) 0%, var(--secondary-color, #8b5cf6) 100%);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-bottom-left-radius: 30px;
    box-shadow: 0 10px 30px -10px rgba(99, 102, 241, 0.5);
}

/* Efectos de fondo en header */
.sidebar-header::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    filter: blur(20px);
}

.sidebar-header::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 20px;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    filter: blur(15px);
}

.sidebar-header h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sidebar-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 1rem;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(4px);
}

.sidebar-close:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: rotate(90deg);
}

/* Navegación del sidebar */
.sidebar-nav {
    list-style: none;
    padding: 1.5rem 1rem;
    margin: 0;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-nav li {
    margin-bottom: 0.5rem;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    color: var(--text-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    border-radius: var(--item-border-radius);
    position: relative;
}

/* Iconos con fondo */
.sidebar-nav a i {
    font-size: 1.1rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 10px;
    color: var(--primary-color);
    transition: all 0.3s ease;
}

[data-theme="dark"] .sidebar-nav a i {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}

.sidebar-nav a:hover {
    background: var(--item-hover-bg);
    transform: translateX(5px);
}

.sidebar-nav a:hover i {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.sidebar-nav a.active {
    background: var(--item-active-bg);
    color: var(--primary-color);
}

.sidebar-nav a.active i {
    background: var(--primary-color);
    color: white;
}

/* Estilos para el estado de conexión en el menú */
.sidebar-info-item {
    padding: 0 0.5rem;
    margin-bottom: 1.5rem !important;
}

.sidebar-connection-status {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .sidebar-connection-status {
    background: rgba(30, 41, 59, 0.5);
    border-color: rgba(255, 255, 255, 0.05);
}

.sidebar-connection-status .status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ccc;
    box-shadow: 0 0 0 3px rgba(204, 204, 204, 0.2);
}

.sidebar-connection-status .status-dot.online {
    background-color: var(--success-color);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.sidebar-connection-status .status-dot.offline {
    background-color: var(--danger-color);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

/* Separador */
.sidebar-nav .sidebar-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.3), transparent);
    margin: 1rem 0;
}

/* Animaciones de entrada escalonadas */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.sidebar-menu.active .sidebar-nav li {
    animation: slideInRight 0.4s ease-out backwards;
}

.sidebar-menu.active .sidebar-nav li:nth-child(1) {
    animation-delay: 0.1s;
}

.sidebar-menu.active .sidebar-nav li:nth-child(2) {
    animation-delay: 0.15s;
}

.sidebar-menu.active .sidebar-nav li:nth-child(3) {
    animation-delay: 0.2s;
}

.sidebar-menu.active .sidebar-nav li:nth-child(4) {
    animation-delay: 0.25s;
}

.sidebar-menu.active .sidebar-nav li:nth-child(5) {
    animation-delay: 0.3s;
}

.sidebar-menu.active .sidebar-nav li:nth-child(6) {
    animation-delay: 0.35s;
}

/* Responsive */
@media (max-width: 480px) {
    :root {
        --sidebar-width: 85vw;
    }

    .sidebar-header {
        padding: 1.5rem;
    }
}

/* Utilidades */
body.sidebar-open {
    overflow: hidden;
}

.panel-container {
    position: relative;
}

.dashboard-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

/* ============================================
   SECCIONES COLAPSABLES DEL SIDEBAR
   ============================================ */

.sidebar-section {
    margin-bottom: 0.5rem;
}

.sidebar-section-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(99, 102, 241, 0.08);
    border: none;
    border-radius: var(--item-border-radius);
    color: var(--text-color);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}

.sidebar-section-trigger:hover {
    background: rgba(99, 102, 241, 0.15);
    transform: translateX(3px);
}

.sidebar-section-trigger i:first-child {
    font-size: 1.2rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 10px;
    color: white;
    transition: all 0.3s ease;
}

.sidebar-section-trigger span {
    flex: 1;
}

.sidebar-section-arrow {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
    color: var(--primary-color);
}

.sidebar-section.open .sidebar-section-arrow {
    transform: rotate(180deg);
}

.sidebar-section-content {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    opacity: 0;
}

.sidebar-section.open .sidebar-section-content {
    max-height: 500px;
    opacity: 1;
    margin-top: 0.5rem;
}

.sidebar-section-content li {
    margin-bottom: 0.25rem;
}

.sidebar-section-content a {
    padding: 0.85rem 1.25rem 0.85rem 3rem;
    font-size: 0.95rem;
}

.sidebar-section-content a i {
    width: 28px;
    height: 28px;
    font-size: 0.95rem;
}

/* Tema oscuro */
[data-theme="dark"] .sidebar-section-trigger {
    background: rgba(99, 102, 241, 0.12);
}

[data-theme="dark"] .sidebar-section-trigger:hover {
    background: rgba(99, 102, 241, 0.2);
}