/* ==========================================================================
PRISMA · components/nav.css — NAVEGAÇÃO
--------------------------------------------------------------------------
Duas peças que aparecem em toda tela do ecossistema:
.topo-app a barra do topo: marca à esquerda, navegação no centro,
ações à direita. Vidro ancorado — gruda no topo e o
conteúdo rola por baixo.
.nav-flutuante a pílula de vidro com os destinos principais. Pode viver
dentro do topo (desktop) ou solta no rodapé (celular).
Estado atual vem de aria-current="page", nunca de classe.
========================================================================== */
.topo-app {
position: sticky; top: 0; z-index: 30;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--espaco-4);
padding: var(--espaco-3) var(--espaco-6);
background-color: var(--glass-tint-clear);
-webkit-backdrop-filter: blur(var(--glass-blur-clear)) saturate(140%);
backdrop-filter: blur(var(--glass-blur-clear)) saturate(140%);
border-bottom: 1px solid var(--border-subtle);
}
.topo-app > :last-child { display: flex; justify-content: flex-end; align-items: center; gap: var(--espaco-2); }
/* Marca: selo + nome. O selo é o único elemento com glow em repouso da barra. */
.marca { display: inline-flex; align-items: center; gap: var(--espaco-3); text-decoration: none; color: var(--text-primary); }
.marca-nome { font-size: 1.125rem; font-weight: 640; letter-spacing: -0.03em; }
.marca-selo {
width: 24px; height: 24px; flex: none;
border-radius: 8px;
background: linear-gradient(135deg, var(--accent-hover), var(--accent-primary) 58%, transparent 58%), var(--surface-3);
box-shadow: inset 0 0 0 1px var(--border-glass), var(--glow-subtle);
transform: rotate(-12deg);
}
/* --- A pílula ---------------------------------------------------------------- */
.nav-flutuante {
display: inline-flex; align-items: center; gap: var(--espaco-1);
padding: var(--espaco-1);
border-radius: var(--radius-full);
background-color: var(--glass-tint-liquid);
-webkit-backdrop-filter: blur(var(--glass-blur-liquid)) saturate(var(--glass-saturacao));
backdrop-filter: blur(var(--glass-blur-liquid)) saturate(var(--glass-saturacao));
box-shadow: inset 0 0 0 1px var(--border-glass), var(--elev-raised);
}
.nav-flutuante a, .nav-flutuante button {
display: inline-flex; align-items: center; gap: var(--espaco-2);
min-height: 36px; padding: 0 var(--espaco-4);
border-radius: var(--radius-full);
color: var(--text-secondary); font-size: var(--body-sm-size); font-weight: 500;
text-decoration: none; white-space: nowrap; cursor: pointer;
transition: background-color var(--motion-fast) var(--easing-standard), color var(--motion-fast) var(--easing-standard);
}
.nav-flutuante svg { width: 16px; height: 16px; flex: none; }
.nav-flutuante a:hover, .nav-flutuante button:hover { color: var(--text-primary); background: var(--surface-glass); }
.nav-flutuante [aria-current="page"] {
background: var(--surface-elevated);
color: var(--text-primary);
box-shadow: var(--elev-raised);
}
/* Destino externo: seta pequena depois do rótulo. */
.nav-flutuante a[target="_blank"]::after,
.nav-flutuante .externo::after { content: "↗"; font-size: 11px; opacity: .6; }
/* --- Busca compacta no topo ----------------------------------------------- */
.busca-topo {
display: inline-flex; align-items: center; gap: var(--espaco-2);
min-height: 36px; padding: 0 var(--espaco-2) 0 var(--espaco-3);
border-radius: var(--radius-full);
background: var(--surface-glass);
box-shadow: inset 0 0 0 1px var(--border-subtle);
color: var(--text-muted); font-size: var(--caption-size);
cursor: pointer;
}
.busca-topo svg { width: 16px; height: 16px; }
.busca-topo kbd { font-family: var(--fonte-mono); font-size: 10px; padding: 1px 5px; border-radius: 4px;
background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-subtle); }
/* ==========================================================================
CELULAR — a pílula desce para o polegar
Não é desktop encolhido: a navegação principal vai para o rodapé, onde a
mão está; o topo fica só com marca e uma ação.
========================================================================== */
@media (max-width: 760px) {
.topo-app { grid-template-columns: 1fr auto; padding-inline: var(--espaco-4); }
.topo-app > .nav-flutuante { display: none; }
.busca-topo span, .busca-topo kbd { display: none; }
.busca-topo { padding: 0; width: 36px; justify-content: center; }
.nav-flutuante--rodape {
display: inline-flex;
position: fixed; z-index: 40;
left: 50%; transform: translateX(-50%);
bottom: calc(var(--espaco-4) + env(safe-area-inset-bottom, 0px));
box-shadow: inset 0 0 0 1px var(--border-glass), var(--elev-overlay);
}
.nav-flutuante--rodape a, .nav-flutuante--rodape button {
flex-direction: column; gap: 2px;
min-height: var(--alvo-toque); min-width: 56px; padding: var(--espaco-1) var(--espaco-2);
font-size: 11px;
}
.nav-flutuante--rodape svg { width: 20px; height: 20px; }
/* O conteúdo precisa de respiro para não ficar sob a pílula. */
body:has(.nav-flutuante--rodape) { padding-bottom: 96px; }
}
@media (min-width: 761px) { .nav-flutuante--rodape { display: none; } }
/* ==========================================================================
BARRA FLUTUANTE — marca + navegação + ações numa pílula SÓ (D-014, da Home do PRISMA)
Vidro escuro frosted com blur de 30px (medido na Orbit): lê sobre foto, sobre a folha
clara e sobre o chão de ardósia sem trocar de cor. A .nav-flutuante de dentro perde o
próprio filtro — filtro sobre filtro turva o material.
O layout dá a posição por --barra-topo e --barra-margem (padrão 30px).
Em celular a navegação some daqui e desce para .nav-flutuante--rodape, onde está o polegar.
========================================================================== */
:root { --barra-topo: 30px; --barra-margem: 30px; } /* o layout da página sobrescreve */
.barra-flutuante.vidro {
position: fixed; z-index: 40;
top: var(--barra-topo); left: 50%;
width: min(1120px, calc(100% - 2 * var(--barra-margem)));
transform: translateX(-50%);
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--espaco-4);
padding: 6px 8px 6px var(--espaco-5);
background-color: var(--glass-tint-frosted);
-webkit-backdrop-filter: blur(30px) saturate(var(--glass-saturacao));
backdrop-filter: blur(30px) saturate(var(--glass-saturacao));
}
.barra-flutuante-nav.nav-flutuante {
background: none; box-shadow: none; padding: 0;
-webkit-backdrop-filter: none; backdrop-filter: none;
}
.barra-flutuante-nav.nav-flutuante [aria-current="page"] { background: var(--glass-on-destaque-hover); box-shadow: none; }
.barra-flutuante-acoes { display: flex; justify-content: flex-end; align-items: center; gap: var(--espaco-1); }
.barra-flutuante-acoes .avatar { margin-inline-start: var(--espaco-2); }
.barra-flutuante .marca-nome { font-weight: 560; letter-spacing: -0.02em; font-size: 1rem; }
/* D-022: entre 721 e 960 px a barra APERTA - colunas laterais do tamanho do conteudo e itens com menos respiro.
Com a Sora (mais larga que a Inter) o avatar saia da pilula em 804 px, a largura do painel da autora. */
@media (min-width: 721px) and (max-width: 960px) {
.barra-flutuante.vidro { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--espaco-2); padding-inline-start: var(--espaco-4); }
.barra-flutuante-nav.nav-flutuante { justify-self: center; gap: 0; }
.barra-flutuante-nav.nav-flutuante a { padding: 0 var(--espaco-3); }
}
@media (max-width: 720px) {
.barra-flutuante.vidro { grid-template-columns: 1fr auto; padding-inline-start: var(--espaco-4); }
.barra-flutuante-nav { display: none; }
}
/* --------------------------------------------------------------------------
MARCA COM O LOGO (19/09/2026 — logo do Codex, refinamento 03, em assets/marca/)
Use -escuro.svg sobre vidro escuro/ardósia e -claro.svg sobre painel claro. O desenho NÃO se mexe aqui:
só altura. Mínimo 22px (LEIA-ME da marca); o selo provisório (.marca-selo) continua existindo para o que
ainda não migrou.
-------------------------------------------------------------------------- */
.marca--logo { flex: none; }
.marca--logo img { display: block; height: 22px; width: auto; max-width: none; } /* max-width: none — logo NUNCA deforma quando a coluna aperta */
.marca--logo.marca--grande img { height: 28px; }
/* Logo por tema: ponha as DUAS assinaturas e o CSS mostra a certa.
-escuro.svg tem letra clara (para fundo escuro); -claro.svg tem letra escura (para fundo claro). */
.marca--logo .marca-logo--claro { display: none; }
[data-tema="prisma-light"] .marca--logo .marca-logo--escuro, [data-tema="n-conecta-legado"] .marca--logo .marca-logo--escuro { display: none; }
[data-tema="prisma-light"] .marca--logo .marca-logo--claro, [data-tema="n-conecta-legado"] .marca--logo .marca-logo--claro { display: block; }