/* header.css — Header do app (§3.1): 64px, grid 3 colunas, border-bottom azul */

.app-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  padding: 0 32px; height: var(--header-h);
  background: var(--bg); border-bottom: 1px solid var(--brand-blue);
}
.app-header .header-brand { font-family: var(--ff-title); font-weight: 700; font-size: 16px; color: var(--brand-blue); letter-spacing: -.01em; }
.app-header .header-brand .brand-accent { color: var(--accent); }
.app-header .header-title {
  justify-self: center; font-family: var(--ff-mono); font-size: 12px;
  color: var(--fg-dim); text-transform: uppercase; letter-spacing: .08em;
}
.app-header .header-actions { justify-self: end; display: flex; gap: 14px; align-items: center; }
.app-header .header-user { font-size: 12px; color: var(--fg-dim); }
.app-header .header-user .header-user-papel {
  font-family: var(--ff-mono); font-size: 10px; color: var(--fg-faint);
  text-transform: uppercase; letter-spacing: .06em;
}

/* Sidebar do app (padrão do manual: 280px, surface, borda direita 1px) */
.app-sidebar {
  position: fixed; top: var(--header-h); left: 0; width: var(--sidebar-w);
  height: calc(100vh - var(--header-h));
  background: var(--surface); border-right: 1px solid var(--line);
  overflow-y: auto; padding: 24px 16px; z-index: 40;
}
.app-sidebar .sidebar-section { margin-bottom: 24px; }
.app-sidebar .sidebar-section h4 {
  font-family: var(--ff-mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em; color: var(--fg-faint);
  margin: 0 0 10px; padding-left: 12px;
}
.app-sidebar .nav-item {
  width: 100%; text-align: left; background: none; border: none;
  padding: 8px 12px; font-family: var(--ff-body); font-size: 13px; color: var(--fg-dim);
  border-radius: var(--radius); cursor: pointer; transition: all .15s;
}
.app-sidebar .nav-item:hover { color: var(--fg); background: var(--bg); }
/* Indicador de item ativo refinado (v0.3 item 4.6): barra à esquerda animada */
.app-sidebar .nav-item { position: relative; transition: color var(--dur-fast), background var(--dur-fast); }
.app-sidebar .nav-item::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; background: transparent; border-radius: 0 2px 2px 0;
  transition: background var(--dur-fast) var(--ease-out);
}
.app-sidebar .nav-item.active { color: var(--brand-blue); font-weight: 700; background: var(--bg); }
.app-sidebar .nav-item.active::before { background: var(--accent); }

/* NOTA: o shell de conteúdo (.app-main) é definido em layout.css.
   A regra duplicada que existia aqui foi removida na v0.3 — ela sobrescrevia
   o background var(--surface) do layout fluido. */