/* ===== Sidebar encapsulado ===== */
.sidebar{
  width:270px; flex-shrink:0; padding:22px 18px;
  background:linear-gradient(180deg,var(--bg-2) 0%, var(--bg) 100%);
  border-right:1px solid var(--border);
  position:sticky; top:0; height:100vh; transition:width .18s ease;
}
.brand{ display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 0 6px; }
.brand-logo{ height:20px; width:auto; display:block }
.nav{ margin-top:12px; display:flex; flex-direction:column; gap:6px; }
.nav li{ list-style:none }
.nav a{
  text-decoration:none; color:var(--muted); padding:10px 12px; border-radius:12px;
  display:flex; align-items:center; gap:10px; transition:.15s ease; border:1px solid transparent;
}
.nav a:hover{
  color:var(--text); transform:translateX(2px);
  background:linear-gradient(90deg, color-mix(in srgb, var(--card) 80%, transparent), color-mix(in srgb, var(--bg-2) 90%, transparent));
  border-color:var(--border); box-shadow:0 6px 18px -6px #0004;
}
.nav a.active{
  color:var(--text);
  background:linear-gradient(90deg, color-mix(in srgb, var(--brand) 18%, transparent), color-mix(in srgb, var(--brand-2) 18%, transparent));
  border-color:var(--ring); box-shadow:0 0 0 4px var(--ring);
}
.nav .icon{ min-width:22px; text-align:center; color:var(--muted) }
.label{ white-space:nowrap; overflow:hidden }

/* Colapsado */
.sidebar.collapsed{ width:78px }
.sidebar.collapsed .label{ display:none }
.sidebar.collapsed .nav a{ justify-content:center; gap:0 }
.sidebar.collapsed .nav .icon{ color:var(--text) }