/* ============================================================
   SIDEBAR ACCORDION — Secciones colapsables del menú lateral
   ============================================================
   Convierte cada .nav-section en botón clickeable que toggle
   el .nav-group siguiente. Estado persistente en localStorage.
   ============================================================ */

/* Nav sections como botones clickeables */
.nav-section.nav-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  padding: 12px 16px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted, #6B6B6B);
  user-select: none;
  transition: color 0.15s ease, background 0.15s ease;
}

.nav-section.nav-section-toggle:hover {
  color: var(--accent-primary, #1B3A2E);
  background: var(--bg-warm, #F5F0E6);
}

/* Flecha indicadora */
.nav-section.nav-section-toggle::after {
  content: "▾";
  font-size: 11px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  margin-left: 6px;
}

.nav-section.nav-section-toggle.collapsed::after {
  transform: rotate(-90deg);
}

/* El grupo se oculta cuando la sección está colapsada.
 *
 * BUG-002 FIX (2026-06-05): NO usar `overflow: hidden` por default.
 * Cuando el grupo está expandido necesita `overflow: visible` para
 * que el `<nav>` padre pueda medir su scrollHeight real y activar
 * su propio overflow:auto. Sin esto, los nav-groups clipean su
 * contenido internamente y el nav padre "cree" que no hay overflow.
 *
 * `overflow: hidden` se aplica SOLO en el estado colapsado, que es
 * cuando max-height: 0 lo necesita para no mostrar nada.
 */
.nav-group {
  transition: max-height 0.25s ease-out, opacity 0.2s ease;
  max-height: 1500px;
  opacity: 1;
  /* overflow por default: visible (heredado) */
}

.nav-section.collapsed + .nav-group {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden; /* Solo aquí — para el clipping de la animación de cierre */
}

/* Que no haya separación extra arriba del primer grupo */
.nav-group > .nav-btn:first-child {
  margin-top: 2px;
}

/* Mejor jerarquía visual: indentar ligeramente los nav-btn dentro del grupo */
.nav-group .nav-btn {
  padding-left: 18px;
}