/* ============================================================================
   Navegación por secciones del menú lateral (acordeón) + botón "Secciones".
   Comprime el menú por sección; el usuario elige a cuál entrar y ve sus tabs.
   ============================================================================ */
.sb-secciones-btn {
  display: flex; align-items: center; gap: 7px;
  width: calc(100% - 16px); margin: 8px 8px 6px; padding: 8px 11px;
  background: rgba(245, 124, 0, .12); color: #f57c00;
  border: 1px solid rgba(245, 124, 0, .4); border-radius: 8px;
  font-weight: 700; font-size: 12px; letter-spacing: .02em; cursor: pointer;
  transition: background .18s, color .18s;
}
.sb-secciones-btn:hover { background: rgba(245, 124, 0, .22); }
.sb-secciones-btn.on { background: #f57c00; color: #fff; border-color: #f57c00; }
.sb-secciones-btn .sbsb-ico { font-size: 14px; line-height: 1; }

/* El encabezado de sección (.sbl) se vuelve un acordeón clicable */
.sbl.sbl-toggle {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none; border-radius: 6px;
  padding-right: 8px; transition: background .15s, color .15s;
}
.sbl.sbl-toggle:hover { background: rgba(255, 255, 255, .07); }
.sbl-chev { font-size: 9px; opacity: .65; transition: transform .2s; margin-left: 6px; }
.sbl.sbl-collapsed .sbl-chev { transform: rotate(-90deg); }
/* Sección abierta resaltada en naranja cuando el menú está comprimido */
.sb.sb-compact .sbl.sbl-open { color: #f57c00; }
.sb.sb-compact .sbl.sbl-toggle { background: rgba(255, 255, 255, .04); margin-bottom: 2px; }