.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  padding: var(--sp-4);
  position: fixed;
  top: 0; left: 0; bottom: 0;
}
.sidebar .logo { font-size: var(--fs-xl); font-weight: 700; color: var(--accent); margin-bottom: var(--sp-5); }
.sidebar .nav-item {
  display: block; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm); color: var(--text-dim);
}
.sidebar .nav-item.active { background: var(--accent-soft); color: var(--accent); }

.main { flex: 1; margin-left: var(--sidebar-w); }

.topbar {
  height: var(--topbar-h);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 var(--sp-5);
  background: var(--surface-glass);
  backdrop-filter: var(--blur);
  position: sticky; top: 0; z-index: 10;
}

.content { padding: var(--sp-5); max-width: calc(var(--content-max) + var(--sp-5) * 2); }
.page-head { margin-bottom: var(--sp-5); }
.page-head p { margin-top: var(--sp-1); }

@media (max-width: 760px) {
  .sidebar { display: none; }
  .main { margin-left: 0; }
}

/* Menu no topo: aparece so no celular (a sidebar some) */
.topbar { justify-content: space-between; gap: var(--sp-3); }
.topnav { display: none; gap: var(--sp-1); }
.topnav .nav-item { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); color: var(--text-dim); font-size: var(--fs-sm); }
.topnav .nav-item.active { background: var(--accent-soft); color: var(--accent); }
.sidebar .nav-item { margin-bottom: var(--sp-1); }
.sidebar .nav-item:hover { background: var(--surface); color: var(--text); }

@media (max-width: 760px) {
  .topbar strong { display: none; }
  .topnav { display: flex; }
}

.content.content-largo { max-width: calc(var(--content-largo) + var(--sp-5) * 2); }

/* Tela de acesso (senha) */
.tela-acesso { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-4); }
.caixa-acesso { width: 100%; max-width: 380px; }
.caixa-acesso .logo-acesso { font-size: var(--fs-2xl); font-weight: 700; color: var(--accent); }
.caixa-acesso > p { margin: var(--sp-1) 0 var(--sp-4); }
.sidebar .sair { position: absolute; bottom: var(--sp-4); left: var(--sp-4); right: var(--sp-4); }