feat: sidebar con categorías colapsables (acordeón)

- Cada sección del menú se puede abrir/cerrar con clic
- Estado persiste en localStorage por categoría
- La sección con el link activo siempre se auto-expande
- Chevron rota al colapsar con transición suave
- CSS en styles.css actualizado para que sidebar-section sea clickeable

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

assets/css/styles.css

@@ -163,27 +163,27 @@ body {
 /* ── Etiquetas de categoría ───────────────────────────── */
 .sidebar-menu li.sidebar-section {
     border-bottom: none;
-    padding: 14px 18px 3px;
+    padding: 10px 16px 6px;
     font-size: 0.65rem;
     font-weight: 800;
     text-transform: uppercase;
-    letter-spacing: 0.14em;
-    color: rgba(255, 255, 255, 0.40);
-    pointer-events: none;
+    letter-spacing: 0.12em;
+    color: rgba(255, 255, 255, 0.55);
+    pointer-events: auto;
+    cursor: pointer;
     display: flex;
     align-items: center;
+    justify-content: space-between;
     gap: 5px;
     position: relative;
     z-index: 1;
+    border-radius: 6px;
+    margin: 4px 8px 0;
+    transition: background .15s, color .15s;
 }
-
-.sidebar-menu li.sidebar-section::after {
-    content: '';
-    flex: 1;
-    height: 1px;
-    background: rgba(255, 255, 255, 0.12);
-    margin-left: 4px;
-}
+.sidebar-menu li.sidebar-section:hover { color: rgba(255,255,255,.9); background: rgba(255,255,255,.07); }
+.sidebar-menu li.sidebar-section .sb-cat-label { display:flex; align-items:center; gap:4px; }
+.sidebar-menu li.sidebar-section::after { display: none; }
 
 /* ── Badge dentro de un item ──────────────────────────── */
 .sidebar-menu .nav-link .sidebar-badge {