/* O menu de topo, igual nos tres modulos.
 *
 * Depende SO de `tokens.css`: tudo que o menu precisa esta escopado em
 * `.topo`, inclusive os botoes. Isso e o que permite a tela do Metas usar este
 * arquivo sem herdar junto as regras de `base.css` -- que mexem em `body`,
 * `table` e `button` globais e brigariam com o Tailwind de la.
 *
 * Antes havia tres menus diferentes: pilula no Oportunidades, link cru no
 * Financeiro, Tailwind no Metas. Alem de feio, escondia uma falta de verdade --
 * o Financeiro nao tinha botao Sair em tela nenhuma.
 */

.topo {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  background: Canvas;
  z-index: 5;
}

/* A marca leva ao Inicio: e o caminho de volta para trocar de modulo. */
.topo .marca-sistema {
  font-weight: 600;
  margin-right: 12px;
  text-decoration: none;
  color: inherit;
}

.topo a.item {
  padding: 6px 12px;
  border-radius: 999px;
  text-decoration: none;
  font-size: .9rem;
  color: var(--texto-fraco);
}
.topo a.item:hover { background: var(--fundo-suave); color: inherit; }
.topo a.item[aria-current="page"] { background: var(--ok); color: #fff; }

/* Separador entre a navegacao do modulo e a da empresa escolhida (Financeiro). */
.topo .divisor { color: var(--texto-fraco); margin: 0 4px; }

.topo .direita { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topo .ambiente {
  border: 1px solid var(--atencao); background: var(--atencao-fundo);
  color: var(--atencao); border-radius: 999px; padding: 2px 10px;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
}
.topo .quem { font-size: .8rem; color: var(--texto-fraco); }

/* Escopado em `.topo` de proposito: assim o menu se veste sozinho, tanto na
   pagina Jinja (que tem `button` global verde) quanto na tela React (onde o
   preflight do Tailwind zera o botao). */
.topo button {
  font: inherit;
  font-size: .8rem;
  padding: 3px 10px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: none;
  color: inherit;
  cursor: pointer;
}
.topo button:hover { background: var(--fundo-suave); }
.topo button.ligado { border-color: var(--atencao); color: var(--atencao); background: var(--atencao-fundo); }
.topo #tema { padding: 3px 9px; font-size: .95rem; line-height: 1.2; }
.topo form { margin: 0; }