/* ==========================================================================
   COMPONENT: DESKTOP SIDEBAR (ZERO-TAILWIND EDITION)
   Arquitectura: Aislamiento estricto para Capa 5 (COMPRESIÓN VERTICAL).
   Dependencia estricta: hub-tokens.css
   ========================================================================== */

.nz-desktop-sidebar {
    display: none;
    width: 240px;
    /* 🚀 FIX: Restamos los 60px del Master Header para que no se hunda */
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px);
    border-right: 1px solid var(--hub-border);
    background-color: var(--hub-bg-sidebar);
    padding: 20px 24px;
    flex-direction: column;
    flex-shrink: 0;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    
    /* 🚀 FIX: Anclaje exacto debajo del Master Header (60px) */
    position: sticky;
    top: 60px;
}

/* Breakpoint nativo: Layout activation */
@media (min-width: 768px) {
    .nz-desktop-sidebar { display: flex; }
}

.nz-sidebar-top { flex-grow: 1; display: flex; flex-direction: column; }

.nz-sidebar-label {
    font-size: 7px;
    opacity: 0.3;
    /* 🚀 FIX: Compresión de margen (24px -> 16px) */
    margin-bottom: 16px;
    letter-spacing: 0.3em;
    font-family: var(--hub-font-mono, monospace);
    text-transform: uppercase;
    color: var(--hub-text-main);
}

.nz-sidebar-nav { 
    display: flex; 
    flex-direction: column; 
    gap: 4px; 
    /* 🚀 FIX: Compresión de margen (32px -> 20px) */
    margin-bottom: 20px;
}

/* Enlaces de Navegación */
.nz-nav-item {
    display: flex;
    align-items: center;
    /* 🚀 FIX: Compresión de padding interno (12px -> 10px) */
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    text-decoration: none;
    color: var(--hub-text-main);
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}

.nz-nav-item:hover, 
.nz-nav-item.is-active {
    color: var(--hub-text-main);
    opacity: 1;
}

.nz-nav-item:not(.is-active) { opacity: 0.5; }

.nz-nav-num {
    font-family: var(--hub-font-mono, monospace);
    font-size: 8px;
    width: 25px;
    opacity: 0.4;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.nz-nav-item:hover .nz-nav-num,
.nz-nav-item.is-active .nz-nav-num {
    opacity: 1;
    color: var(--hub-accent);
}

.nz-nav-text {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* El Red Dot (Badge inteligente conectado al CQRS) */
.nz-nav-badge {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
    animation: nz-pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes nz-pulse-dot {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

/* Comandos de Nodo (Visual Editor) */
.nz-sidebar-node-commands { margin-top: auto; }
.nz-sidebar-node-commands .nz-sidebar-label { margin-bottom: 12px; }

.nz-nav-btn-outline {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border: 1px solid var(--hub-accent);
    color: var(--hub-accent);
    background: transparent;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nz-nav-btn-outline:hover {
    background-color: var(--hub-accent);
    color: #000;
}

.nz-nav-btn-text {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-family: var(--hub-font-mono, monospace);
}

/* Área Inferior: Perfil & Sesión */
.nz-sidebar-bottom {
    /* 🚀 FIX: Compresión para elevar el bloque inferior (32px -> 20px) */
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--hub-border);
}

.nz-sidebar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    /* 🚀 FIX: Compresión (16px -> 12px) */
    margin-bottom: 12px;
    overflow: hidden;
    cursor: default;
}

.nz-user-avatar {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: 1px solid var(--hub-border);
    padding: 1px;
    box-sizing: border-box;
    background-color: var(--hub-bg-card);
}

.nz-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.nz-sidebar-user:hover .nz-user-avatar img {
    filter: grayscale(0%);
}

.nz-user-name {
    font-size: 9px;
    font-weight: 900;
    color: var(--hub-text-main);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    font-family: var(--hub-font-mono, monospace);
    letter-spacing: 0.05em;
}

.nz-logout-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: #ef4444;
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.2);
    padding: 8px 12px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.nz-logout-btn:hover { 
    background-color: rgba(239, 68, 68, 0.1); 
    border-color: rgba(239, 68, 68, 0.4);
}

.nz-logout-text {
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-family: var(--hub-font-mono, monospace);
}