/* =========================
   Sidebar + Topbar (Artycla)
   ========================= */

/* Sidebar */
.sidebar{
  width: var(--sidebar-w);
  background: #f1f3f4; /* estilo Drive */
  border-right: 1px solid var(--border);
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;

  /* ✅ evita que el footer “se salga” si el contenido crece */
  overflow: hidden;
}

/* ✅ permite scroll interno SOLO si hace falta */
.side-nav{
  padding: 10px 10px 0 10px;
  display:flex;
  flex-direction:column;
  gap:6px;

  overflow:auto;
}

.sidebar-header{
  padding:18px 16px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand-mark{
  width:44px;height:44px;
  border-radius: 14px;
  background: #e7eaee;
  display:grid;
  place-items:center;
  font-weight:800;
  color:#2f3b2b;
}

.brand-name{ font-weight:800; line-height:1.1; }
.brand-sub{ color: var(--muted); font-size:13px; margin-top:2px; }

.sidebar-close{
  border:1px solid var(--border);
  background:#fff;
  border-radius: 12px;
  width:42px;height:42px;
  display:grid;
  place-items:center;
  cursor:pointer;
}

.nav-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 12px 12px;
  border-radius: 14px;
  color:#111827;
  text-decoration:none;
  border:1px solid transparent;
}

.nav-item .material-symbols-outlined{
  font-size:22px;
  color:#4b5563;
}

.nav-item:hover{
  background:#ffffff;
  border-color: var(--border);
}

/* ✅ IMPORTANTE:
   Antes era .active; ahora tu HTML usa .is-active.
   Pintamos ambos para que quede “como antes”. */
.nav-item.active,
.nav-item.is-active,
.nav-item[aria-current="page"]{
  background: var(--olive-100);
  border-color: rgba(127,143,89,.35);
  position:relative;
}

.nav-item.active::before,
.nav-item.is-active::before,
.nav-item[aria-current="page"]::before{
  content:"";
  position:absolute;
  left:-10px;
  width:4px;
  height:60%;
  border-radius: 999px;
  background: var(--olive);
  top:50%;
  transform:translateY(-50%);
}

.nav-item.active .material-symbols-outlined,
.nav-item.is-active .material-symbols-outlined,
.nav-item[aria-current="page"] .material-symbols-outlined{
  color:#2f3b2b;
}

.nav-item-danger{
  margin-top:10px;
  background: #f1e6e6;
  border-color: rgba(180,35,24,.20);
}
.nav-item-danger:hover{
  background: #fff;
}

.who{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 14px;
  box-shadow: 0 6px 18px rgba(17,24,39,.05);
}

.who-label{ color:var(--muted); font-size:12px; }
.who-name{ font-weight:800; margin-top:4px; }
.who-role{ color:var(--muted); font-size:13px; margin-top:2px; }

/* Topbar */
.topbar{
  height: var(--topbar-h);
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 18px;
  position:sticky;
  top:0;
  z-index:10;
}

.sidebar-open{
  border:1px solid var(--border);
  background:#fff;
  border-radius: 14px;
  width:44px;height:44px;
  display:grid;
  place-items:center;
  cursor:pointer;
}

.topbar-title{
  font-weight:800;
  font-size:18px;
}

.topbar-right{
  color: var(--muted);
  font-weight:600;
}

/* Mobile sidebar behavior */
@media (max-width: 980px){
  .sidebar{
    position:fixed;
    left:0;
    top:0;
    transform: translateX(-110%);
    transition: transform .22s ease;
    z-index: 100;
    box-shadow: 0 30px 60px rgba(0,0,0,.18);
  }

  body.sidebar-opened .sidebar{
    transform: translateX(0);
  }
}

@media (min-width: 981px){
  .sidebar-close{ display:none; }
}