/* 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.
 */

/* A barra e azul RW4 nos dois temas: e a marca, nao o tema. O corpo tem
   1100px de largura, mas a barra vai de ponta a ponta da janela: a sombra de
   100vmax para cada lado pinta o que sobra, e o clip-path corta o excesso. */
.topo {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 8px 0;
  position: sticky;
  top: 0;
  background: var(--azul-rw4);
  color: #fff;
  box-shadow: 0 0 0 100vmax var(--azul-rw4);
  clip-path: inset(0 -100vmax);
  z-index: 5;
}
/* Na homologacao a barra fica vermelha: as telas sao iguais as da producao e
   so o selo era pouco para a pessoa notar onde esta. O selo so existe la. */
.topo:has(.ambiente) { background: #c94444; box-shadow: 0 0 0 100vmax #c94444; }
.topo:has(.ambiente) a.item[aria-current="page"] { color: #c94444; }

/* A marca leva ao Inicio: e o caminho de volta para trocar de modulo. */
.topo .marca-sistema {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  letter-spacing: .02em;
  margin-right: 10px;
  text-decoration: none;
  color: inherit;
}
.topo .marca-sistema img { height: 26px; width: auto; display: block; }

/* Padding e corpo um pouco menores que antes: com o logo, o menu do
   Oportunidades (8 itens) passava de 1100px e quebrava em duas linhas. */
.topo a.item {
  padding: 6px 10px;
  border-radius: 999px;
  text-decoration: none;
  font-size: .875rem;
  color: rgba(255, 255, 255, .78);
}
.topo a.item:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.topo a.item[aria-current="page"] { background: #fff; color: var(--azul-rw4); font-weight: 600; }

/* Separador entre a navegacao do modulo e a da empresa escolhida (Financeiro). */
.topo .divisor { color: rgba(255, 255, 255, .5); 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: rgba(255, 255, 255, .78); }

/* 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 rgba(255, 255, 255, .45);
  border-radius: 999px;
  background: none;
  color: inherit;
  cursor: pointer;
}
.topo button:hover { background: rgba(255, 255, 255, .12); }
.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; }