/* sidebar.css */
.sidebar {
  width: var(--sidebar-w); background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex; flex-direction: column; flex-shrink: 0; overflow-y: auto;
}
.sidebar-logo {
  display:flex; align-items:center; gap:10px;
  padding:18px 16px 14px; border-bottom:1px solid var(--color-border-s);
  transition: background .12s;
}
.sidebar-logo:hover { background: var(--color-bg); }
.logo-icon {
  width:34px; height:34px; background:var(--color-accent); color:#fff;
  border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:700; flex-shrink:0; transition:background .2s;
}
.logo-name { font-size:14px; font-weight:600; color:var(--color-text); line-height:1.2; }
.logo-sub  { font-size:10px; color:var(--color-hint); margin-top:1px; }

/* Marca selector */
.marca-selector-wrap { padding:10px 14px 6px; border-bottom:1px solid var(--color-border-s); }
.marca-selector-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--color-hint); margin-bottom:5px; }
.marca-select {
  width:100%; padding:6px 9px; border:1px solid var(--color-border);
  border-radius:7px; font-size:12px; font-family:var(--font-main);
  color:var(--color-text); background:var(--color-bg); outline:none; cursor:pointer;
  transition: border .12s;
}
.marca-select:focus { border-color: var(--color-accent); }

/* Nav */
.sidebar-nav { flex:1; padding:10px 0; }
.nav-section { display:block; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--color-hint); padding:12px 16px 4px; }
.nav-item { display:flex; align-items:center; gap:9px; padding:8px 16px; font-size:13px; color:var(--color-muted); border-left:2px solid transparent; transition:all .12s; cursor:pointer; }
.nav-item:hover { background:var(--color-bg); color:var(--color-text); }
.nav-item.active { color:var(--color-accent); background:var(--color-accent-light); border-left-color:var(--color-accent); font-weight:500; }
.nav-icon { width:15px; height:15px; flex-shrink:0; opacity:.75; }
.nav-item.active .nav-icon, .nav-item:hover .nav-icon { opacity:1; }

/* Footer */
.sidebar-footer { border-top:1px solid var(--color-border-s); padding:12px 14px; }
.role-badge { display:flex; align-items:center; gap:9px; padding:9px 10px; background:var(--color-bg); border-radius:var(--radius-md); border:1px solid var(--color-border-s); margin-bottom:8px; }
.role-avatar { width:30px; height:30px; border-radius:50%; background:var(--color-accent); color:#fff; font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.role-name  { font-size:12px; font-weight:500; line-height:1.2; }
.role-label { font-size:10px; color:var(--color-hint); margin-top:1px; line-height:1.3; }
.btn-logout {
  width:100%; padding:7px; background:none; border:1px solid var(--color-border);
  border-radius:var(--radius-sm); font-size:12px; color:var(--color-muted);
  display:flex; align-items:center; justify-content:center; gap:6px;
  transition:all .12s; cursor:pointer;
}
.btn-logout:hover { background:var(--color-danger-bg); color:var(--color-danger); border-color:#F5B5B5; }

/* Logo upload widget (en ajustes) */
.logo-upload-widget { display:flex; flex-direction:column; }
.logo-preview { min-height:72px; background:var(--color-bg); border:1px dashed var(--color-border); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; padding:12px; }
.logo-placeholder-box { font-size:12px; color:var(--color-hint); }