/* ---------- gestão: barra de atalhos para as seções ---------- */
.gestao { --ga-alt: 52px; }
.gestao-atalhos {
  position: sticky; top: 0; z-index: 20;
  display: flex; gap: 6px; flex-wrap: nowrap; align-items: center;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  /* ocupa a largura do contêiner (encosta nas bordas do padding) e cobre o que passa por baixo */
  /* margem vertical zero: com margin-top negativa o sticky deixava uma faixa acima da barra
     mostrando o conteúdo que rolava (20/09) */
  margin: 0 -18px 14px; padding: 9px 18px;
  /* opaco: com 92% + blur o texto dos painéis vazava por baixo da barra ao rolar (20/09) */
  background: var(--fundo);
  border-bottom: 1px solid var(--borda);
}
.gestao-atalhos::-webkit-scrollbar { display: none; }
.gestao-atalhos[hidden] { display: none; }
.ga-chip {
  flex: 0 0 auto; white-space: nowrap;
  padding: 5px 12px; border-radius: 999px;
  font-size: 12.5px; line-height: 1.3; text-decoration: none;
  color: var(--texto-2); background: var(--fundo-2); border: 1px solid var(--borda);
  transition: background .15s, color .15s, border-color .15s;
}
.ga-chip:hover { background: var(--fundo-3); color: var(--texto); }
.ga-chip:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; border-radius: 999px; }
.ga-chip.ativo { background: var(--marca-fundo); color: var(--marca); border-color: var(--marca); font-weight: 600; }
.ga-chip[hidden] { display: none; }

/* a rolagem para abaixo da barra, não por baixo dela */
.gestao .painel, .gestao .cartoes { scroll-margin-top: calc(var(--ga-alt) + 10px); }
.gestao [tabindex="-1"]:focus { outline: none; }

@media (max-width: 760px) {
  .gestao-atalhos { margin: 0 -12px 12px; padding: 8px 12px; }
  .ga-chip { padding: 6px 12px; }   /* alvo de toque um pouco maior */
}
@media (prefers-reduced-motion: reduce) {
  .ga-chip { transition: none; }
}