/*
 * nav.css — Navbar y sidebar
 * Estilo: blanco, limpio, minimalista
 */

/* ─── Top bar ─────────────────────────────────────────────────────────── */
.nav-topbar {
  background: #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
  padding: 0 24px;
  height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.nav-topbar__left {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Botón menú en topbar */
.nav-topbar__menu-btn {
  background: #124E91 !important;
  border: none;
  border-radius: 6px;
  color: #ffffff;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  flex-shrink: 0;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(18, 78, 145, 0.2);
  /* Anula el position:fixed del .hamburger base */
  position: static !important;
  top: auto !important;
  margin-left: 0 !important;
}
.nav-topbar .nav-topbar__menu-btn.hamburger {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  min-height: 40px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0 !important;
}
.nav-topbar .nav-topbar__menu-btn.hamburger.is-closed::before,
.nav-topbar .nav-topbar__menu-btn.hamburger.is-closed:hover::before,
.nav-topbar .nav-topbar__menu-btn.hamburger.is-open::before,
.nav-topbar .nav-topbar__menu-btn.hamburger.is-open:hover::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
}
.nav-topbar .nav-topbar__menu-btn.hamburger i {
  display: block;
  margin: 0;
  line-height: 1;
}
.nav-topbar__menu-btn:hover,
.nav-topbar__menu-btn:focus {
  background: #0E3E7A !important;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(18, 78, 145, 0.3);
  outline: none;
}

.nav-topbar__brand {
  color: #0F172A;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-topbar__brand i { color: #2563EB; font-size: 1rem; }
.nav-topbar__brand:hover { color: #2563EB; text-decoration: none; }

.nav-topbar__user {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: .85rem;
}

.nav-topbar__user-name {
  color: #475569;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.nav-topbar__user-name i {
  color: #94A3B8;
  font-size: .9rem;
}

.nav-topbar__logout {
  color: #64748B;
  font-size: .85rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 5px;
  transition: all .15s;
}
.nav-topbar__logout:hover {
  color: #DC2626;
  background: #FEF2F2;
  text-decoration: none;
}

/* ─── Sidebar ─────────────────────────────────────────────────────────── */
#sidebar-wrapper {
  background: #0E171E;
  z-index: 1040;
}
#sidebar-wrapper .sidebar-brand span {
  color: #F8FAFC;
  font-weight: 600;
  font-size: .875rem;
  letter-spacing: .01em;
}
#sidebar-wrapper .nav.sidebar-nav > li > a {
  color: #94A3B8;
  font-size: .85rem;
  padding: 9px 20px;
  display: block;
  transition: background .12s, color .12s;
  border-radius: 4px;
  margin: 1px 6px;
}
#sidebar-wrapper .nav.sidebar-nav > li > a:hover,
#sidebar-wrapper .nav.sidebar-nav > li.active > a {
  color: #F8FAFC;
  background: rgba(255,255,255,.07);
  text-decoration: none;
}
#sidebar-wrapper .nav.sidebar-nav ul li a {
  color: #94A3B8;
  font-size: .8rem;
  padding: 7px 14px 7px 36px;
  display: block;
  transition: color .12s;
}
#sidebar-wrapper .nav.sidebar-nav ul li a:hover {
  color: #F8FAFC;
  text-decoration: none;
}

/* ─── Sub-nav / breadcrumb visual ────────────────────────────────────── */
.nav-section-bar {
  background: var(--ds-surface);
  padding: 8px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .8rem;
  color: var(--ds-text-muted);
  border-bottom: 1px solid var(--ds-border);
}
.nav-section-bar a { color: var(--ds-text-muted); text-decoration: none; }
.nav-section-bar a:hover { color: var(--ds-text); }
.nav-section-bar .active { color: var(--ds-text); font-weight: 600; }