/* ============================================================================
TOPBAR — FONTE UNICA da barra superior publica.
----------------------------------------------------------------------------
Consumida por:
- Sistema: verificar-documento, verificar-rastreabilidade, aprovacao-orcamento,
termos-de-servico, politica-de-privacidade ( direto deste arquivo)
- Site institucional (www): COPIA MECANICA feita na publicacao pelo
gerar-paginas.js. NAO editar a copia — editar AQUI.
----------------------------------------------------------------------------
Existiam DUAS implementacoes (.ao-header no sistema e .topo no site) mantidas em
sincronia na mao. Divergiram varias vezes (cor, fonte, altura, comportamento
responsivo). Este arquivo existe pra isso ser impossivel.
Depende de --primary (cor da marca). O sistema injeta via COLOR_TAG/branding;
o site define no proprio :root.
O nome da marca aceita
(sistema) ou .ao-marca-nome (site) — o site nao pode
ter um segundo
por causa de SEO. O resto do markup e identico.
============================================================================ */
/* Mantém a largura útil da janela estável ao navegar entre páginas curtas e longas.
Sem essa reserva, a barra de rolagem entra/sai e desloca a página inteira. */
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) {
html { overflow-y: scroll; }
}
.ao-header, .ao-header * { box-sizing: border-box; }
.ao-header-inner, .ao-logo-area, .ao-logo-area > div, .ao-nav { margin: 0; padding-block: 0; }
.ao-header {
/* Fonte local: evita o menu mudar de largura quando a fonte web termina de carregar. */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
font-size: 16px;
line-height: 1.65;
background: color-mix(in srgb, var(--primary, #10b981) 18%, #0b0f14);
/* Cor de texto propria: a barra e escura, e o texto herdado do body de cada
pagina era escuro (site #0f172a, sistema #1a1a2e). Qualquer texto solto aqui
sairia invisivel, e o cabecalho mudava conforme a pagina que o hospeda. */
color: rgba(255, 255, 255, 0.92);
padding: 0;
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
position: relative;
overflow: hidden;
border-bottom: 1px solid color-mix(in srgb, var(--primary, #10b981) 14%, transparent);
}
/* Orb effect (mesmo da sidebar) */
.ao-header::before {
content: '';
position: absolute;
width: 400px;
height: 400px;
background: radial-gradient(circle, color-mix(in srgb, var(--primary, #10b981) 18%, transparent), transparent 70%);
top: -200px;
left: -100px;
animation: headerOrb1 8s ease-in-out infinite alternate;
pointer-events: none;
z-index: 0;
}
.ao-header::after {
content: '';
position: absolute;
width: 300px;
height: 300px;
background: radial-gradient(circle, color-mix(in srgb, var(--primary, #10b981) 12%, transparent), transparent 70%);
top: -100px;
right: -80px;
animation: headerOrb2 10s ease-in-out infinite alternate;
pointer-events: none;
z-index: 0;
}
@keyframes headerOrb1 {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(30px, 20px) scale(1.1); }
}
@keyframes headerOrb2 {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(-20px, 15px) scale(1.15); }
}
.ao-header-inner {
max-width: 1200px;
margin: 0 auto;
padding: 18px 24px;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 1;
}
.ao-logo-area {
display: flex;
align-items: center;
gap: 14px;
color: inherit;
text-decoration: none;
}
.ao-logo-area:link,
.ao-logo-area:visited,
.ao-logo-area:hover,
.ao-logo-area:active {
color: inherit;
text-decoration: none;
}
.ao-logo {
width: 52px;
height: 52px;
min-width: 52px;
object-fit: contain;
border-radius: var(--radius-sm, 4px);
filter: drop-shadow(0 0 12px color-mix(in srgb, var(--primary, #10b981) 24%, transparent));
}
.ao-logo-area h1 {
font-size: 22px;
font-weight: 700;
background: linear-gradient(135deg, #c8cfd4 30%, color-mix(in srgb, var(--primary, #10b981) 55%, #ffffff));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.1;
letter-spacing: 3px;
}
.ao-logo-area span {
font-size: 7.5px;
letter-spacing: 2px;
text-transform: uppercase;
white-space: nowrap;
line-height: 1;
background: linear-gradient(
90deg,
rgba(255,255,255,0.4) 0%,
rgba(255,255,255,0.4) 45%,
rgba(255,255,255,0.95) 50%,
rgba(255,255,255,0.4) 55%,
rgba(255,255,255,0.4) 100%
);
background-size: 300% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: aoSubtitleGlow 14s ease-in-out infinite;
}
@keyframes aoSubtitleGlow {
0% { background-position: 100% center; }
29%, 100% { background-position: 0% center; }
}
.ao-logo-area > div {
display: flex;
flex-direction: column;
align-items: center;
}
.ao-header-badge {
display: flex;
align-items: center;
gap: 6px;
/* O selo nao pode espremer nem quebrar linha: dentro do .ao-header-acoes (min-width:0)
ele encolhia e o texto ia pra 2 ou 3 linhas, levando a barra de 89 pra 93 e 113px.
Quem cede espaco e a nav, que rola na horizontal. */
flex-shrink: 0;
white-space: nowrap;
background: color-mix(in srgb, var(--primary, #10b981) 16%, transparent);
color: color-mix(in srgb, var(--primary, #10b981) 68%, #ffffff);
padding: 8px 16px;
border-radius: var(--radius-lg, 20px);
font-size: 12px;
font-weight: 500;
border: 1px solid color-mix(in srgb, var(--primary, #10b981) 26%, transparent);
}
.ao-header-badge i { font-size: 14px; }
/* Ações do topo das páginas públicas: nav da topbar única + seletor de idioma */
.ao-header-acoes {
display: flex;
align-items: center;
gap: 16px;
/* SEM wrap: o cabeçalho fica SEMPRE numa linha só (89px em qualquer largura), igual
ao do site. Com wrap, entre 860 e 1152px a nav + o seletor de idioma pulavam de
linha e a barra ia a 123px; abaixo de 860 a nav ganhava linha própria e chegava a
187px — cada tela com uma altura diferente. min-width:0 deixa a nav encolher e rolar. */
flex-wrap: nowrap;
min-width: 0;
justify-content: flex-end;
}
.ao-logo-area { flex-shrink: 0; } /* a marca nunca comprime */
/* Topbar ÚNICA: mesma nav do site institucional, aqui nas páginas públicas do sistema.
Links claros na barra escura (mesmo padrão do site). Some quando não há site (branding.js). */
.ao-nav {
display: flex;
align-items: center;
gap: 2px;
/* Rola na horizontal em QUALQUER largura, em vez de quebrar linha — é o que mantém
a barra com a mesma altura em telas estreitas. */
flex-wrap: nowrap;
min-width: 0;
overflow-x: auto;
scrollbar-width: none;
}
.ao-nav::-webkit-scrollbar { display: none; }
.ao-nav a { flex: 0 0 auto; }
.ao-nav[hidden] { display: none !important; }
.ao-nav a {
padding: 8px 13px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
line-height: 1.65;
white-space: nowrap;
text-decoration: none;
color: rgba(255, 255, 255, 0.82);
transition: background 0.2s ease, color 0.2s ease;
}
.ao-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.10); }
.ao-nav a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, 0.16); }
@media (max-width: 860px) {
/* Em tela estreita a nav segue numa linha só, rolando no dedo — o cabeçalho NÃO
quebra em linhas (era o que fazia a altura variar de tela pra tela). */
.ao-nav { -webkit-overflow-scrolling: touch; }
}
/* Botão quadrado só-ícone, ao lado do seletor de idioma (à direita). */
.ao-voltar-site {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex-shrink: 0;
border-radius: 8px;
text-decoration: none;
color: rgba(255,255,255,0.85);
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.22);
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ao-voltar-site:hover {
background: rgba(255,255,255,0.2);
border-color: rgba(255,255,255,0.4);
color: #fff;
}
.ao-voltar-site i { font-size: 19px; }
.ao-voltar-site span { display: none; } /* só o ícone (quadradinho) */
.ao-voltar-site[hidden] { display: none !important; }
/* Nome da marca: