/**
 * AscensorDocs — Navegación tipo iPod
 */

.nav-selector { display:flex; flex-direction:column; height:100%; overflow:hidden; }

.nav-selector__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    background: var(--color-bg-elevated);
}
.nav-selector__level-label {
    font-size: var(--text-xs); font-weight: var(--weight-bold);
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--color-text-muted); font-family: var(--font-mono);
}
.nav-selector__back {
    display: flex; align-items: center; gap: var(--space-1);
    font-size: var(--text-sm); color: var(--color-accent);
    cursor: pointer; padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm); transition: background var(--transition-fast);
}
.nav-selector__back:hover { background: var(--color-accent-glow); }
.nav-selector__back svg   { width:13px; height:13px; }

.nav-selector__search {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border-light);
    flex-shrink: 0;
    background: var(--color-bg-elevated);
}
.nav-selector__search input {
    font-size: var(--text-sm);
    background: var(--color-bg-input);
    border-color: var(--color-border);
}

.nav-selector__list { flex:1; overflow-y:auto; padding: var(--space-1) 0; }

/* Item */
.nav-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background var(--transition-fast);
    animation: slideIn 180ms ease backwards;
}
.nav-item:hover                         { background: var(--color-bg-hover); }
.nav-item--active                       { background: var(--color-accent-glow); border-left-color: var(--color-accent); }

.nav-item__content  { display:flex; align-items:center; gap:var(--space-3); min-width:0; }

.nav-item__icon {
    width: 30px; height: 30px;
    background: var(--color-bg-input);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: var(--text-xs); font-weight: var(--weight-bold);
    font-family: var(--font-mono);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    transition: all var(--transition-fast);
}
.nav-item--active .nav-item__icon,
.nav-item:hover   .nav-item__icon {
    border-color: var(--color-accent-dim);
    color: var(--color-accent);
    background: var(--color-accent-glow);
}

.nav-item__name {
    font-size: var(--text-sm); font-weight: var(--weight-medium);
    color: var(--color-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-item__meta { font-size: var(--text-xs); color: var(--color-text-muted); font-family: var(--font-mono); margin-top:1px; }

.nav-item__arrow {
    color: var(--color-text-muted); flex-shrink:0;
    transition: transform var(--transition-fast), color var(--transition-fast);
}
.nav-item:hover   .nav-item__arrow,
.nav-item--active .nav-item__arrow { color: var(--color-accent); transform: translateX(2px); }

.nav-item__count {
    font-size: var(--text-xs); font-family: var(--font-mono);
    background: var(--color-bg-input); border: 1px solid var(--color-border);
    color: var(--color-text-muted); padding: 1px var(--space-2);
    border-radius: var(--radius-full); flex-shrink:0;
}

.nav-section-label {
    padding: var(--space-3) var(--space-4) var(--space-1);
    font-size: var(--text-xs); font-weight: var(--weight-bold);
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--color-text-muted); font-family: var(--font-mono);
}

/* Empty / loading */
.nav-empty {
    display: flex; flex-direction:column; align-items:center;
    justify-content:center; padding: var(--space-12) var(--space-6);
    text-align:center; gap: var(--space-3);
}
.nav-empty__icon {
    width:44px; height:44px; background:var(--color-bg-input);
    border:1px solid var(--color-border); border-radius:var(--radius-lg);
    display:flex; align-items:center; justify-content:center;
    color: var(--color-text-muted);
}
.nav-empty__text { font-size:var(--text-sm); color:var(--color-text-muted); }

.nav-loading { display:flex; align-items:center; justify-content:center; padding:var(--space-8); }
.nav-loading__spinner {
    width:18px; height:18px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: var(--radius-full);
    animation: spin 600ms linear infinite;
}

/* Stagger */
.nav-item:nth-child(1)  { animation-delay:   0ms; }
.nav-item:nth-child(2)  { animation-delay:  25ms; }
.nav-item:nth-child(3)  { animation-delay:  50ms; }
.nav-item:nth-child(4)  { animation-delay:  75ms; }
.nav-item:nth-child(5)  { animation-delay: 100ms; }
.nav-item:nth-child(6)  { animation-delay: 125ms; }
.nav-item:nth-child(n+7){ animation-delay: 150ms; }