/* ═══════════════════════════════════════════════════════════════════════
   Sidebar izquierda · tema nexus (mismo lenguaje que el portal de acceso)
   Solo afecta a #app-sidebar; el resto de la plataforma sigue en claro.
   ═══════════════════════════════════════════════════════════════════════ */

#app-sidebar {
  --sb-nx-bg: #0A1428;
  --sb-nx-bg-2: #0F1F3A;
  --sb-nx-soft: #132648;
  --sb-nx-line: #1E2F52;
  --sb-nx-ink: #FFFFFF;
  --sb-nx-muted: #A3B8D9;
  --sb-nx-dim: #5F7396;
  --sb-nx-green: #7CFF4D;
  --sb-nx-teal: #14E9C8;
  --sb-nx-danger: #FF4D6E;
  --sb-nx-grid: rgba(20, 233, 200, 0.05);
  --sb-nx-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  background-color: var(--sb-nx-bg) !important;
  background-image:
    linear-gradient(to right, var(--sb-nx-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--sb-nx-grid) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 0%, rgba(124, 255, 77, 0.07) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 100%, rgba(20, 233, 200, 0.08) 0%, transparent 45%) !important;
  background-size: 32px 32px, 32px 32px, 100% 100%, 100% 100% !important;
  border-right: 1px solid var(--sb-nx-line) !important;
  color: var(--sb-nx-ink) !important;
  box-shadow: inset -1px 0 0 rgba(20, 233, 200, 0.06);
}

/* Filo superior degradado, igual que la tarjeta del portal */
#app-sidebar .sb-head {
  position: relative;
  border-bottom: 1px solid var(--sb-nx-line) !important;
}

#app-sidebar .sb-head::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--sb-nx-green) 30%, var(--sb-nx-teal) 70%, transparent);
  opacity: 0.85;
}

/* ── Marca ───────────────────────────────────────────────────────────── */
#app-sidebar .sb-mark {
  background: rgba(124, 255, 77, 0.12) !important;
  border: 1px solid rgba(124, 255, 77, 0.28);
  border-radius: 0.6rem !important;
  color: var(--sb-nx-green) !important;
  box-shadow: 0 0 20px -6px rgba(124, 255, 77, 0.45);
  font-weight: 700 !important;
}

#app-sidebar .sb-brand-copy strong {
  color: var(--sb-nx-ink) !important;
  letter-spacing: -0.01em;
}

#app-sidebar .sb-brand-copy small {
  font-family: var(--sb-nx-mono);
  font-size: 0.5rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--sb-nx-dim) !important;
}

#app-sidebar .sb-collapse {
  border: 1px solid var(--sb-nx-line) !important;
  background: rgba(10, 20, 40, 0.7) !important;
  color: var(--sb-nx-muted) !important;
}

#app-sidebar .sb-collapse:hover {
  border-color: rgba(20, 233, 200, 0.5) !important;
  color: var(--sb-nx-teal) !important;
}

/* ── Selector de organización ────────────────────────────────────────── */
#app-sidebar .sb-org {
  border: 1px solid var(--sb-nx-line) !important;
  background: rgba(10, 20, 40, 0.65) !important;
  border-radius: 0.5rem !important;
  transition: border-color 0.15s ease;
}

#app-sidebar .sb-org:hover {
  border-color: rgba(20, 233, 200, 0.45) !important;
}

#app-sidebar .sb-org-code {
  background: rgba(20, 233, 200, 0.1) !important;
  color: var(--sb-nx-teal) !important;
  font-family: var(--sb-nx-mono) !important;
  border-radius: 0.3rem !important;
}

#app-sidebar .sb-org select,
#app-sidebar #global-org-select {
  color: var(--sb-nx-ink) !important;
}

#app-sidebar #global-org-select option {
  background: #0F1F3A;
  color: #FFFFFF;
}

#app-sidebar .sb-org-logo {
  border-color: var(--sb-nx-line) !important;
  background: rgba(10, 20, 40, 0.65) !important;
  color: var(--sb-nx-muted) !important;
}

/* ── Navegación ──────────────────────────────────────────────────────── */
#app-sidebar .sb-nav.nav,
#app-sidebar #app-primary-nav {
  scrollbar-color: #1E2F52 transparent;
}

#app-sidebar .nav-group-label {
  font-family: var(--sb-nx-mono) !important;
  font-size: 0.55rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  color: var(--sb-nx-dim) !important;
}

#app-sidebar .nav-group.is-active .nav-group-label {
  color: var(--sb-nx-teal) !important;
}

#app-sidebar .nav-btn {
  color: var(--sb-nx-muted) !important;
  border-radius: 0.5rem !important;
  transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

#app-sidebar .nav-btn::before {
  color: var(--sb-nx-dim);
  transition: color 0.14s ease;
}

#app-sidebar .nav-btn:hover {
  background: rgba(20, 233, 200, 0.08) !important;
  color: var(--sb-nx-ink) !important;
}

#app-sidebar .nav-btn:hover::before {
  color: var(--sb-nx-teal);
}

#app-sidebar .nav-btn.active,
#app-sidebar .nav-btn.active:hover {
  background: rgba(124, 255, 77, 0.1) !important;
  color: var(--sb-nx-ink) !important;
  box-shadow:
    inset 3px 0 0 var(--sb-nx-green),
    0 0 18px -8px rgba(124, 255, 77, 0.6) !important;
}

#app-sidebar .nav-btn.active::before {
  color: var(--sb-nx-green);
}

#app-sidebar .nav-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(20, 233, 200, 0.45) !important;
}

#app-sidebar .nav-btn .nav-badge {
  background: var(--sb-nx-danger) !important;
  color: #200610 !important;
  font-weight: 700 !important;
}

/* ── Pie: usuario ────────────────────────────────────────────────────── */
#app-sidebar .sb-foot {
  border-top: 1px solid var(--sb-nx-line) !important;
}

#app-sidebar .sb-user > summary {
  border-radius: 0.5rem;
}

#app-sidebar .sb-user > summary:hover {
  background: rgba(20, 233, 200, 0.08) !important;
}

#app-sidebar .ux-user-avatar {
  background: linear-gradient(180deg, #8DFF66 0%, var(--sb-nx-green) 100%) !important;
  color: #07120A !important;
  box-shadow: 0 0 18px -6px rgba(124, 255, 77, 0.6) !important;
}

#app-sidebar .sb-user-meta strong {
  color: var(--sb-nx-ink) !important;
}

#app-sidebar .rbac-role-badge {
  color: var(--sb-nx-dim) !important;
  font-family: var(--sb-nx-mono) !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.1em;
  text-transform: uppercase !important;
}

#app-sidebar .sb-user-caret {
  color: var(--sb-nx-dim) !important;
}

/* Panel emergente del usuario: se mantiene en el mismo tono que la tarjeta */
#app-sidebar .sb-user-panel {
  background: linear-gradient(180deg, var(--sb-nx-soft) 0%, var(--sb-nx-bg-2) 100%) !important;
  border: 1px solid var(--sb-nx-line) !important;
  color: var(--sb-nx-ink) !important;
  box-shadow: 0 20px 44px rgba(2, 8, 23, 0.6) !important;
}

#app-sidebar .sb-user-panel strong,
#app-sidebar .sb-user-panel .ux-user-name {
  color: var(--sb-nx-ink) !important;
}

#app-sidebar .sb-user-panel .ux-user-email,
#app-sidebar .sb-user-panel .hint,
#app-sidebar .sb-user-panel small {
  color: var(--sb-nx-muted) !important;
}

#app-sidebar .sb-user-panel .btn,
#app-sidebar .sb-user-panel button {
  border: 1px solid var(--sb-nx-line) !important;
  background: rgba(10, 20, 40, 0.6) !important;
  color: var(--sb-nx-muted) !important;
  box-shadow: none !important;
}

#app-sidebar .sb-user-panel .btn:hover,
#app-sidebar .sb-user-panel button:hover {
  border-color: rgba(20, 233, 200, 0.5) !important;
  color: var(--sb-nx-ink) !important;
}

#app-sidebar .sb-user-panel .btn-primary {
  border: none !important;
  background: linear-gradient(180deg, #8DFF66 0%, var(--sb-nx-green) 100%) !important;
  color: #07120A !important;
}

/* ── Colapsado ───────────────────────────────────────────────────────── */
/* La regla base fija `font: ... !important`, así que el `font-size: 0`
   del modo colapsado nunca ganaba y los rótulos se desbordaban. */
body.sidebar-collapsed #app-sidebar .nav-btn {
  justify-content: center !important;
  gap: 0 !important;
  font-size: 0 !important;
  padding: 0.45rem 0 !important;
  overflow: hidden;
}

body.sidebar-collapsed #app-sidebar .nav-btn::before {
  font-size: 0.95rem;
  width: auto;
}

body.sidebar-collapsed #app-sidebar .nav-btn .nav-badge {
  position: absolute;
  top: 2px;
  right: 6px;
  margin: 0;
  padding: 0 0.25rem;
  font-size: 0.55rem !important;
  line-height: 1.4;
}

body.sidebar-collapsed #app-sidebar .nav-group {
  border-top-color: var(--sb-nx-line) !important;
}

body.sidebar-collapsed #app-sidebar .sb-org::after {
  color: var(--sb-nx-teal) !important;
  font-family: var(--sb-nx-mono) !important;
}

@media (prefers-reduced-motion: reduce) {
  #app-sidebar .nav-btn,
  #app-sidebar .sb-org { transition: none !important; }
}