Padrão de Espaçamento — Header Superior ↔ Conteúdo da Página

SSOT do espaçamento entre o header superior compartilhado (banner "Header de Novidades" + TopRightHeader com sino/online/logout) e o título/subtítulo de cada página de coordenador, diretor, gestão, especialista e administrador.

NÃO ALTERAR sem pedido explícito do usuário. Issue recorrente — já corrigido múltiplas vezes.

Localização canônica

Arquivo: src/App.tsx — bloco que renderiza highlightContent + <TopRightHeader /> dentro de flex-1 flex flex-col min-w-0 overflow-hidden.

<div className="flex items-center px-6 pb-2 flex-shrink-0">
  {highlightContent}
  <div className="ml-auto pl-4 flex-shrink-0 flex items-center gap-3">
    <TopRightHeader ... />
  </div>
</div>
<main className="... overflow-y-auto scrollbar-hidden px-6 pt-1 ..." />

Regras

Regra	Valor canônico	Por que
Alinhamento vertical da faixa	items-center	Alinha banner e TopRight na mesma linha. items-start desalinha o TopRight para baixo.
Padding inferior da faixa (pb-)	pb-2 (8px)	Metade do antigo pb-3.
Padding superior do <main> (pt-)	pt-1 (4px) para coordenador/especialista; pt-0 para gestão/administrador/diretor	Metade do antigo pt-3.
Gap total faixa ↔ título	12px	Era 24px antes deste padrão.
py-2 no wrapper do TopRight	REMOVIDO	Causava desalinhamento vertical com o banner.
Padding horizontal da faixa	px-6 (idêntico ao <main>)	Faixa e main devem ter o MESMO padding lateral.
Gap horizontal banner ↔ wrapper TopRight	pl-4 (16px) no wrapper do TopRight	Evita que o banner de novidades encoste no card do TopRight. Não usar gap-* no flex pai (afetaria também o ml-auto).
Scrollbar do <main>	OCULTA via scrollbar-hidden (utility em src/styles/globals.css)	Scroll continua funcional; sem scrollbar visível, sem gutter reservado, sem desalinhamento.
scrollbar-gutter: stable	PROIBIDO em qualquer lugar deste bloco	O gutter reservado é exatamente o que fazia o TopRight "vazar" ~15px à direita do conteúdo.

Auditoria (@audit frontend)

Ao auditar páginas com header superior compartilhado, verificar:

1. src/App.tsx — faixa: items-center px-6 pb-2 flex-shrink-0 (sem gap-*, sem scrollbarGutter, sem py-2 no wrapper TopRight).
2. <main>: overflow-y-auto scrollbar-hidden px-6 + pt-1 (ou pt-0 para perfis administrativos), nunca pt-3, nunca scrollbarGutter.
3. Bordas verticais: a borda direita do TopRightHeader deve coincidir pixel-a-pixel com a borda direita do conteúdo abaixo; a borda esquerda do banner de novidades com a borda esquerda do conteúdo. Wrapper do TopRight deve ter pl-4 (16px) para criar gap mínimo entre banner e card do TopRight.
4. Páginas internas (src/components/agenda, controle, mensagens, mural, resultados, inscricoes, olimpiadas, videos, calendario) não devem injetar mt-*/pt-*/px-* extra acima do <h1> — o espaçamento é responsabilidade do container externo.
5. Scroll do <main> deve funcionar (mouse wheel) sem mostrar scrollbar visível.

Histórico

• 2026-05-03 — Padrão estabelecido. Gap reduzido em 50%; alinhamento vertical do TopRight corrigido.
• 2026-05-03 — Largura horizontal: faixa px-4→px-6 (simétrico com <main>).
• 2026-05-03 — Vazamento à direita resolvido removendo scrollbar-gutter: stable (que reservava ~15px) e ocultando a scrollbar do <main> com a utility scrollbar-hidden.
• 2026-05-03 — Adicionado pl-4 (16px) no wrapper do TopRight para criar gap horizontal entre banner de novidades e card do TopRight (substitui regra anterior de "encostar").