/* ===========================================
   NAVIGATION.CSS - Sidebar Universal
   Lydent - Sistema de Navegación Unificado
   =========================================== */

/* ===== SIDEBAR UNIVERSAL ===== */
.sidebar-universal {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-universal-width, 280px);
    height: 100vh;
    background: var(--bg-white);
    border-right: 1px solid var(--border-color);
    z-index: var(--z-sidebar, 300);
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-universal.open {
    transform: translateX(0);
}

/* ===== SIDEBAR OVERLAY ===== */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-sidebar-overlay, 250);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

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

/* ===== SIDEBAR HEADER ===== */
.sidebar-header {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: #ffffff;
}

.sidebar-header .sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.sidebar-header .sidebar-logo img {
    max-width: 140px;
    height: auto;
}

.sidebar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    border-radius: var(--radius);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.25rem;
    transition: var(--transition-fast);
}

.sidebar-close:hover,
.sidebar-close:focus-visible {
    background: var(--vevi-green-light);
    color: var(--vevi-green);
}

/* ===== SIDEBAR CONTENT (Scrollable) ===== */
.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md) 0;
}

/* ===== SECCIONES DE APPS ===== */
.sidebar-section {
    padding: 0 var(--space-md);
    margin-bottom: var(--space-md);
}

.sidebar-section-title {
    display: block;
    padding: var(--space-sm) var(--space-md);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.sidebar-divider {
    height: 1px;
    background: var(--border-light);
    margin: var(--space-md) var(--space-md);
}

/* ===== ITEMS DE NAVEGACION ===== */
.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    color: var(--text-dark);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: var(--radius);
    margin: 0 var(--space-sm);
    min-height: var(--touch-min);
    transition: var(--transition-fast);
}

.sidebar-nav-item:hover,
.sidebar-nav-item:focus-visible {
    background: var(--vevi-green-light);
    color: var(--vevi-green);
}

.sidebar-nav-item.active {
    background: var(--vevi-green);
    color: white;
}

.sidebar-nav-item.active:hover {
    background: var(--vevi-green-dark);
    color: white;
}

.sidebar-nav-item i {
    width: 20px;
    text-align: center;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Subitems (indentados) */
.sidebar-nav-item.subitem {
    padding-left: calc(var(--space-lg) + 20px + var(--space-md));
    font-size: 0.875rem;
    min-height: 40px;
}

/* ===== GRUPOS COLAPSABLES (Nav v3) ===== */
.sidebar-nav-group {
    margin: 0 var(--space-sm);
    margin-bottom: var(--space-xs);
}

.sidebar-nav-group-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    color: var(--text-dark);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: var(--radius);
    min-height: var(--touch-min);
    cursor: pointer;
    transition: var(--transition-fast);
    user-select: none;
}

.sidebar-nav-group-header:hover,
.sidebar-nav-group-header:focus-visible {
    background: var(--vevi-green-light);
    color: var(--vevi-green);
}

.sidebar-nav-group.active > .sidebar-nav-group-header {
    background: var(--vevi-green);
    color: white;
}

.sidebar-nav-group.active > .sidebar-nav-group-header:hover {
    background: var(--vevi-green-dark);
}

.sidebar-nav-group-header i.fa-icon {
    width: 20px;
    text-align: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.sidebar-nav-group-header .chevron {
    margin-left: auto;
    font-size: 0.75rem;
    transition: transform var(--transition-fast);
    opacity: 0.7;
}

.sidebar-nav-group.expanded > .sidebar-nav-group-header .chevron {
    transform: rotate(90deg);
}

/* Contenedor de subitems del grupo */
.sidebar-nav-group-items {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-out;
}

.sidebar-nav-group.expanded > .sidebar-nav-group-items {
    max-height: 500px; /* Suficiente para mostrar todos los items */
    transition: max-height 0.35s ease-in;
}

/* Subitems dentro del grupo */
.sidebar-nav-group-items .sidebar-nav-subitem {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    padding-left: 2.75rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 400;
    border-radius: var(--radius);
    min-height: 36px;
    margin: 0 var(--space-xs);
    transition: var(--transition-fast);
}

.sidebar-nav-group-items .sidebar-nav-subitem:hover,
.sidebar-nav-group-items .sidebar-nav-subitem:focus-visible {
    background: var(--vevi-green-light);
    color: var(--vevi-green);
}

.sidebar-nav-group-items .sidebar-nav-subitem.active {
    background: var(--vevi-green-light);
    color: var(--vevi-green);
    font-weight: 500;
}

.sidebar-nav-group-items .sidebar-nav-subitem i {
    width: 16px;
    text-align: center;
    font-size: 0.75rem;
    flex-shrink: 0;
    opacity: 0.8;
}

/* Badge de notificación en grupo */
.sidebar-nav-group-header .badge {
    background: var(--vevi-green);
    color: white;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: 10px;
    margin-left: auto;
    margin-right: var(--space-sm);
}

.sidebar-nav-group.active > .sidebar-nav-group-header .badge {
    background: white;
    color: var(--vevi-green);
}

/* ===== PIN TOGGLE (Solo PC) ===== */
.sidebar-footer {
    padding: var(--space-md);
    border-top: 1px solid var(--border-light);
    flex-shrink: 0;
    display: none; /* Oculto por defecto, visible solo en PC */
}

.pin-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: var(--transition-fast);
}

.pin-toggle:hover,
.pin-toggle:focus-visible {
    background: var(--vevi-green-light);
    border-color: var(--vevi-green);
    color: var(--vevi-green);
}

.pin-toggle.pinned {
    background: var(--vevi-green);
    border-color: var(--vevi-green);
    color: white;
}

.pin-toggle i {
    font-size: 0.875rem;
}

/* ===== ACTION BAR (Gestiontaller) ===== */
.action-bar {
    display: flex;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-light);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-shrink: 0;
}

.action-bar::-webkit-scrollbar {
    display: none;
}

.action-bar-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-dark);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    min-height: 40px;
    transition: var(--transition-fast);
    flex-shrink: 0;
}

.action-bar-item:hover,
.action-bar-item:focus-visible {
    background: var(--vevi-green-light);
    border-color: var(--vevi-green);
    color: var(--vevi-green);
}

.action-bar-item.active {
    background: var(--vevi-green);
    border-color: var(--vevi-green);
    color: white;
}

.action-bar-item i {
    font-size: 1rem;
}

/* Texto oculto en movil pequeno */
.action-bar-item .action-text {
    display: none;
}

/* ===== TOP BAR MODIFICADO (Contexto) ===== */
.top-bar-context {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.top-bar-context .context-separator {
    color: var(--text-muted);
}

.top-bar-context .context-app {
    color: var(--vevi-green);
    font-weight: 600;
}

.top-bar-context .context-section {
    color: var(--text-dark);
    font-weight: 500;
}

/* ===== CONTENIDO CON SIDEBAR PINNED ===== */
/* Las reglas de pinned mode estan en la seccion body.nav-v2-enabled.sidebar-pinned */

/* ===== RESPONSIVE: TABLET (576px+) ===== */
@media (min-width: 576px) {
    .action-bar-item .action-text {
        display: inline;
    }

    .action-bar {
        padding: var(--space-sm) var(--space-lg);
        gap: var(--space-sm);
    }
}

/* ===== RESPONSIVE: TABLET (768px+) ===== */
@media (min-width: 768px) {
    .sidebar-universal {
        width: var(--sidebar-universal-width, 280px);
    }

    .action-bar {
        justify-content: flex-start;
        overflow-x: visible;
    }

    .action-bar-item {
        padding: var(--space-sm) var(--space-lg);
    }
}

/* ===== RESPONSIVE: PC (1024px+) ===== */
@media (min-width: 1024px) {
    /* Mostrar boton de pin */
    .sidebar-footer {
        display: block;
    }

    /* Hamburger siempre visible en nueva navegacion */
    .nav-v2 .hamburger-btn {
        display: flex;
    }

    .action-bar {
        padding: var(--space-sm) var(--space-xl);
    }
}

/* ===== FEATURE FLAG: nav-v2-enabled ===== */
/* Esta clase se agrega al body para activar la nueva navegacion */

body.nav-v2-enabled .main-tabs {
    display: none;
}

body.nav-v2-enabled .hamburger-btn {
    display: flex;
}

/* Cuando el sidebar esta pinned en PC */
body.nav-v2-enabled.sidebar-pinned .sidebar-universal {
    transform: translateX(0);
    box-shadow: none;
}

body.nav-v2-enabled.sidebar-pinned .sidebar-overlay {
    display: none;
}

body.nav-v2-enabled.sidebar-pinned .app-layout {
    margin-left: var(--sidebar-universal-width, 280px);
    transition: margin-left var(--transition-base);
}

/* ===== WIZARD RESPONSIVE ===== */
/* Solucion para el wizard de 7 pasos */
.wizard-steps {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: var(--space-xs);
    padding: var(--space-sm);
}

.wizard-steps::-webkit-scrollbar {
    display: none;
}

.wizard-step {
    scroll-snap-align: center;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: var(--space-sm);
    background: var(--bg-light);
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    transition: var(--transition-fast);
}

.wizard-step.active {
    background: var(--vevi-green);
    border-color: var(--vevi-green);
    color: white;
}

.wizard-step.completed {
    background: var(--vevi-green-light);
    border-color: var(--vevi-green);
    color: var(--vevi-green);
}

.wizard-step .step-text {
    display: none;
    margin-left: var(--space-sm);
}

/* Tablet: mostrar texto abreviado */
@media (min-width: 768px) {
    .wizard-step {
        min-width: auto;
        padding: var(--space-sm) var(--space-md);
    }

    .wizard-step .step-text {
        display: inline;
    }
}

/* Desktop: texto completo */
@media (min-width: 1024px) {
    .wizard-step {
        padding: var(--space-sm) var(--space-lg);
    }
}

/* ===== ANIMACIONES ===== */
@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes fadeInOverlay {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}