/* Cabeçalho comum do app de Marketing (ver topo.js): o trilho com as áreas,
   o sino das solicitações e o menu do celular. Mesmo desenho do site da AMF. */

/* O trilho só aparece depois de o topo.js medir se ele cabe na linha — sem
   isso, no celular ele piscaria inteiro antes de virar botão de menu. */
.topo-nav{display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;background:var(--mist,#F3F4F6);visibility:hidden;}
.topo-nav.pronto{visibility:visible;}
.topo-nav a{padding:8px 13px;border-radius:999px;color:var(--text-dim,#3a4150);font-size:14px;font-weight:500;line-height:1.2;
  text-decoration:none;white-space:nowrap;transition:color .2s ease,background-color .2s ease,box-shadow .2s ease;}
.topo-nav a:hover{color:var(--text,#1B1E22);background:var(--card,#fff);}
.topo-nav a[aria-current="page"]{color:var(--text,#1B1E22);background:var(--card,#fff);font-weight:600;
  box-shadow:0 1px 2px rgba(16,24,40,.08),inset 0 0 0 1px var(--ring,#E1E4EA);}

.sino{position:relative;flex:none;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--brand,var(--brand));color:var(--on-brand,#fff);text-decoration:none;
  box-shadow:0 8px 18px -8px rgba(var(--brand-rgb),.6);
  transition:transform .28s cubic-bezier(.2,.85,.25,1),background-color .25s ease;}
.sino:hover{background:var(--brand-600,var(--brand-600));transform:translateY(-2px);}
.sino .ponto{display:none;position:absolute;top:7px;right:8px;width:10px;height:10px;border-radius:50%;
  background:#4ade80;box-shadow:0 0 0 2px var(--brand,var(--brand));}
.sino.tem .ponto{display:block;}

.topo-menu-btn{display:none;flex:none;place-items:center;width:44px;height:44px;border:0;border-radius:14px;
  background:var(--mist,#F3F4F6);color:var(--text,#1B1E22);cursor:pointer;transition:background-color .2s ease;}
.topo-menu-btn:hover{background:var(--ring,#E7E9EE);}
header.topo-compacto .topo-nav{display:none;}
header.topo-compacto .topo-menu-btn{display:inline-grid;}

/* Celular: selo, menu e sino ficam na primeira linha; os botões da própria
   tela (Painel do Gestor, modos…) descem inteiros para a de baixo. */
@media (max-width:720px){
  header.topo-compacto > .spacer{order:1;}
  header.topo-compacto > .sino{order:2;}
  header.topo-compacto > .nav, header.topo-compacto > .modo-seg, header.topo-compacto > .mode-switch{order:3;}
  header.topo-compacto:has(> .nav, > .modo-seg, > .mode-switch)::after{content:"";order:2;flex-basis:100%;height:0;}
}

.topo-menu{display:flex;flex-direction:column;gap:2px;margin-top:12px;padding:8px;border-radius:20px;background:var(--card,#fff);
  box-shadow:0 10px 22px -8px rgba(16,24,40,.12),0 0 0 1px rgba(16,24,40,.06);}
.topo-menu[hidden]{display:none;}
.topo-menu a{padding:11px 14px;border-radius:12px;color:var(--text,#1B1E22);font-size:15px;font-weight:500;text-decoration:none;}
.topo-menu a:hover{background:var(--mist,#F3F4F6);}
.topo-menu a[aria-current="page"]{background:var(--brand-50,var(--brand-50));color:var(--brand-600,var(--brand-600));font-weight:600;}

.topo-nav a:focus-visible,.topo-menu a:focus-visible,.sino:focus-visible,.topo-menu-btn:focus-visible{
  outline:none;box-shadow:0 0 0 3px rgba(var(--brand-rgb),.35);}

@media (prefers-reduced-motion: reduce){
  .sino,.topo-nav a{transition:none;}
  .sino:hover{transform:none;}
}

/* O botao de tema: mesma peca do botao de menu, ao lado do sino. */
.topo-tema{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;border:0;border-radius:14px;
  background:var(--mist,#F3F4F6);color:var(--text,#1B1E22);cursor:pointer;
  transition:background-color .2s ease,color .2s ease;}
.topo-tema:hover{background:var(--ring,#E7E9EE);}
.topo-tema:focus-visible{outline:none;box-shadow:0 0 0 3px var(--brand-50,rgba(var(--brand-rgb),.35));}
@media (prefers-reduced-motion: reduce){ .topo-tema{transition:none;} }