/* ============================================================
   SIDEBAR.CSS

   ============================================================ */

.sidebar{
  position: sticky;
  top: 0;
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: linear-gradient(190deg, #274063 0%, #0d1b2e 100%);
  border-right: none;
  padding: 22px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  height: 100vh;
  box-shadow: var(--shadow-lg);
}

/* ---------- Marca ---------- */
.sidebar-brand{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 14px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: 4px;
}

.brand-mark{
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #80aad3, #3f6593);
  color: var(--accent-contrast);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .02em;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.brand-mark:has(img){
  background: #ffffff;
}

.brand-mark img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
}

.brand-text{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: #eaf1fb;
  line-height: 1.3;
}

/* ---------- Grupos ---------- */
.nav-group-label{
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(234,241,251,.4);
  padding: 0 10px;
  margin-bottom: 8px;
}

.nav-list{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-link{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(234,241,251,.72);
  transition: background var(--transition), color var(--transition);
}

.nav-link .dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(234,241,251,.35);
  flex-shrink: 0;
  transition: background var(--transition);
}

.nav-link:hover{
  background: rgba(255,255,255,.08);
  color: #ffffff;
}

.nav-link:hover .dot{
  background: #c0e6fd;
}

.nav-link.active{
  background: linear-gradient(135deg, #3f6593, #1b3554);
  color: var(--accent-contrast);
  font-weight: 600;
  box-shadow: var(--shadow-md);
}

.nav-link.active .dot{
  background: var(--accent-contrast);
}

.menu-toggle {
    display: none;
    background: transparent;
    border: none;
    font-size: 26px;
    cursor: pointer;
    padding: 8px;
    line-height: 1;
    border-radius: var(--radius-sm);
    transition: background var(--transition);
    flex-shrink: 0;
}

.menu-toggle:hover {
    background: var(--surface-alt);
}

@media (max-width: 768px) {

    .menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--ink);
    }

    .topbar-title {
        gap: 4px;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: -280px;
        width: 260px;
        height: 100vh;
        z-index: 1000;
        box-shadow: var(--shadow-lg);
        transition: transform .3s ease;
        transform: translateX(0);
    }

    .sidebar.open {
        transform: translateX(280px);
    }

}