{# Settings sidebar partial — shared by all /settings/* pages #}
<aside id="settings-sidebar" class="settings-sidebar">
  <div class="settings-sidebar-head">
    <a href="/dashboard" class="back-link">
      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="18" height="18">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
      </svg>
      <span>Volver</span>
    </a>
    <h2>Ajustes</h2>
  </div>
  <nav class="settings-nav">
    <a href="/settings/general" class="settings-nav-item {% if active_settings == 'general' %}active{% endif %}">
      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
      <span>General</span>
    </a>
    <a href="/settings/models" class="settings-nav-item {% if active_settings == 'models' %}active{% endif %}">
      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
      <span>Modelos & Providers</span>
    </a>
    <a href="/settings/tools" class="settings-nav-item {% if active_settings == 'tools' %}active{% endif %}">
      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"/></svg>
      <span>Tools</span>
    </a>
    <a href="/settings/channels" class="settings-nav-item {% if active_settings == 'channels' %}active{% endif %}">
      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.858 15.355-5.858 21.213 0"/></svg>
      <span>Canales</span>
    </a>
    <a href="/settings/outputs" class="settings-nav-item {% if active_settings == 'outputs' %}active{% endif %}">
      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
      <span>Outputs</span>
    </a>
    <a href="/settings/confirmations" class="settings-nav-item {% if active_settings == 'confirmations' %}active{% endif %}">
      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
      <span>Confirmaciones</span>
    </a>
    <a href="/settings/security" class="settings-nav-item {% if active_settings == 'security' %}active{% endif %}">
      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
      <span>Seguridad</span>
    </a>
  </nav>
</aside>

<style>
.settings-sidebar {
  width: 240px; flex-shrink: 0;
  background: var(--lumen-paper-2); border-right: 1px solid var(--lumen-line);
  display: flex; flex-direction: column; min-height: 100vh;
}
.settings-sidebar-head {
  padding: 20px; border-bottom: 1px solid var(--lumen-line);
}
.settings-sidebar-head h2 {
  font-size: 18px; font-weight: 700; margin-top: 12px;
}
.back-link {
  display: flex; align-items: center; gap: 6px;
  color: var(--lumen-mute); text-decoration: none; font-size: 13px;
}
.back-link:hover { color: var(--lumen-ink); }
.settings-nav { padding: 12px 0; }
.settings-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px; color: var(--lumen-ink-soft);
  text-decoration: none; font-size: 14px;
  border-left: 3px solid transparent;
  transition: all 0.15s;
}
.settings-nav-item:hover {
  background: rgba(0,0,0,0.03); color: var(--lumen-ink);
}
.settings-nav-item.active {
  background: rgba(0,0,0,0.04);
  color: var(--lumen-primary); font-weight: 500;
  border-left-color: var(--lumen-primary);
}
.settings-nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }

@media (max-width: 720px) {
  .settings-sidebar { width: 64px; min-height: auto; }
  .settings-sidebar-head { padding: 12px 8px; }
  .settings-sidebar-head h2 { display: none; }
  .settings-nav-item { padding: 10px; justify-content: center; }
  .settings-nav-item span { display: none; }
  .back-link span { display: none; }
}
</style>