@charset "UTF-8";
/* ============================================================================
Gravium — gravita-app.css
Camada de REBRANDING do aplicativo (app.html, login.html, margin-bi.html,
margin-risk.html, velocity.html, catalog-coverage.html,
conciliacao-contabil.html, historico-precos.html).
COMO USAR
---------
Incluir SEMPRE DEPOIS de /css/styles.css:
Nenhuma linha de styles.css e' editada. Esta camada vence apenas por
ordem de origem (mesma especificidade, arquivo posterior).
O QUE FAZ
---------
1. Redefine os tokens de cor de styles.css para a paleta do Brand Book.
2. Define --mono (ver nota "MONO" abaixo).
3. Aplica a tipografia da marca: Poppins em titulos e corpo (institucional
e' a referencia; Brand Book §05 desatualizado por decisao do dono).
4. Corrige os hexadecimais de marca cravados a mao em styles.css
(o token sozinho nao os alcanca).
O QUE NAO FAZ — DELIBERADAMENTE
-------------------------------
* NAO inverte o tema padrao. O app continua abrindo em DARK (app.js:48).
O Brand Book define branco como fundo padrao da marca, mas essa troca e'
decisao pendente do usuario. Esta camada e' testada nos DOIS temas.
* NAO toca em --erp-topnav-h nem --erp-modulebar-h. Esses dois tokens sao
redefinidos dentro de @media em styles.css (linhas 1561, 1679-1680,
1861-1862). Como este arquivo carrega depois, um :root aqui venceria as
media queries e quebraria a altura do cabecalho no mobile. So tokens de
COR sao redefinidos.
* NAO redefine as cores semanticas do dominio financeiro
(--success/--positive verde, --danger/--negative vermelho,
--warning ambar). Lucro, prejuizo e alerta sao convencao do dominio;
troca-los por azul destruiria a leitura do produto. Ver bloco SEMANTICAS.
============================================================================ */
@import url('/css/gravita-brand.css');
/* ============================================================================
1. TOKENS — TEMA ESCURO (padrao do app)
============================================================================
Hierarquia de profundidade preservada, do mais fundo ao mais alto:
bg < sidebar < surface < surface-2 < border
Era: #0A0E1A < #0D1324 < #141B2D < #1A2540 (border #1E2D4A)
============================================================================ */
:root {
/* --- Superficies ---------------------------------------------------- */
--bg: #050B18; /* Navy Espacial — token oficial */
--sidebar: #08162F; /* derivado no eixo navy->nebulosa (~25%) */
--surface: #0B2246; /* Azul Nebulosa — token oficial */
--surface-2: #102950; /* derivado nebulosa->linha-escura (~50%) */
--border: #16305A; /* Linha Escura — token oficial */
/* --- Marca ---------------------------------------------------------- */
--accent: #2E90FF; /* Azul Orbita — token oficial */
--accent-dim: #0A61D0; /* Azul Profundo — token oficial */
--accent-glow: rgba(46,144,255,0.15);
/* Token NOVO. styles.css cravava #3B82F6 e #7AB5FB a mao nos :hover.
Centralizado aqui para que o hover acompanhe o tema. */
--accent-hover: #63ADFF; /* Azul Suave — token oficial */
/* --- Texto ---------------------------------------------------------- */
--text: #E9EFF8; /* Texto Claro — token oficial */
--text-muted: #6A7E9E; /* Cinza Orbita — token oficial (~4.5:1) */
--text-dim: #9DB0CC; /* clareamento do Cinza Orbita (~7:1) */
/* --- Sombra --------------------------------------------------------- */
--shadow: 0 4px 24px rgba(5,11,24,0.55);
/* --- MONO ----------------------------------------------------------- */
/* NOTA DE AUDITORIA: o briefing dizia que styles.css referencia
var(--mono) 5x sem nunca definir. Verificado no servidor: styles.css
NAO contem a string "mono" em lugar nenhum. Os 5 usos de var(--mono)
estao em api-docs.html (linhas 72,73,87,94,106) e AQUELA pagina ja
define --mono localmente na linha 16. Ou seja: o bug latente descrito
nao existe hoje. O token e' definido aqui mesmo assim, como rede de
seguranca global e ponto unico de verdade para codigo/valores fixos. */
--mono: var(--gv-mono);
/* --- Barra ERP (nav-preview-top, ligada por padrao em app.html) ------ */
--erp-warm-graphite: #0B2246; /* era #162035 (grafite) */
--erp-module-dark: #050B18; /* era #151b22 (grafite) */
--erp-menu-panel: rgba(11,34,70,.98); /* era rgba(16,22,42,.98) */
--erp-gold: #2E90FF; /* era #4F9CF9 */
/* ==========================================================================
SEMANTICAS — INTENCIONALMENTE INALTERADAS NO TEMA ESCURO
--------------------------------------------------------------------------
--success #10B981 --positive #22C55E --warning #F59E0B
--danger #EF4444 --negative #EF4444
Ficam exatamente como estao em styles.css:22-26. O Brand Book nao as
redefine e elas carregam significado financeiro, nao de marca.
========================================================================== */
}
/* ============================================================================
2. TOKENS — TEMA CLARO (body.theme-light)
============================================================================ */
body.theme-light {
--bg: #F5F7FB; /* Nevoa — token oficial */
--surface: #FFFFFF; /* Branco Estelar — token oficial */
--surface-2: #EDF1F7; /* derivado nevoa->linha-clara */
--border: #E1E7F0; /* Linha Clara — token oficial */
/* Azul Orbita puro sobre branco da so 2,9:1 — reprovaria em texto e
bordas de foco. No claro o papel de "accent" fica com o Azul Profundo
(5,6:1 sobre branco) e o hover escurece em vez de clarear. */
--accent: #0A61D0; /* Azul Profundo — token oficial */
--accent-dim: #084BA3; /* escurecimento do Azul Profundo */
--accent-hover:#084BA3;
--accent-glow: rgba(10,97,208,0.10);
--text: #0A1426; /* Texto Escuro — token oficial */
/* Cinza Orbita puro sobre branco da 3,6:1. --text-muted aparece 19x em
rotulos e valores: escurecido para 4,9:1 (AA). O Cinza Orbita exato
fica em --text-dim, que carrega informacao menos critica. */
--text-muted: #55688A;
--text-dim: #6A7E9E; /* Cinza Orbita — token oficial */
--shadow: 0 4px 24px rgba(10,20,38,0.10);
}
/* ============================================================================
3. TIPOGRAFIA
============================================================================
Poppins em TUDO — titulos e corpo.
DECISAO DO DONO (20/08/2026): o Brand Book §05 (Federo em titulos) esta
DESATUALIZADO. A referencia de identidade e o site institucional, que usa
Poppins nos titulos com peso 600 e espacamento negativo. O Federo continua
auto-hospedado em /fonts/ e acessivel via var(--gv-display) caso a decisao
seja revertida, mas nenhuma tela deve usa-lo.
============================================================================ */
body {
font-family: var(--gv-body);
}
h1, h2, h3, h4, h5, h6,
.sidebar-brand-text,
.topbar-title,
.card-title,
.erp-mega-kicker {
font-family: var(--gv-body);
font-weight: 600;
letter-spacing: -.015em;
}
/* Numeros alinhados em coluna. Poppins usa figuras proporcionais por padrao,
o que faz valores monetarios "dancarem" na vertical em tabelas e KPIs. */
table td, table th,
.stat-value, .kpi-value, .metric-value {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* ============================================================================
4. HEXADECIMAIS DE MARCA CRAVADOS A MAO EM styles.css
============================================================================
Estes nao sao alcancaveis por token. Cada regra abaixo repete o seletor
original com a MESMA especificidade e vence so por ordem de arquivo.
O numero da linha citado e' a origem em styles.css.
============================================================================ */
/* styles.css:78 — a:hover { color: #7AB5FB } */
a:hover { color: var(--accent-hover); }
/* styles.css:218 — .btn-primary:hover { background:#3B82F6; box-shadow rgba(79,156,249,.4) }
O transform: translateY(-1px) do original e' preservado: so as duas
declaracoes de cor sao sobrescritas, o resto continua valendo. */
.btn-primary:hover {
background: var(--accent-hover);
box-shadow: 0 4px 12px rgba(46,144,255,0.35);
}
/* styles.css:1177 — .sync-btn:hover { background:#3B82F6 } */
.sync-btn:hover { background: var(--accent-hover); }
/* styles.css:1354 — .toast-info usava #1E3A5F/#BFDBFE (familia azul, nao
semantica). .toast-success e .toast-error NAO sao tocados: sao semanticos. */
.toast-info { background: #0B2246; color: var(--gv-azul-suave); }
/* --- styles.css:51-61 — sidebar escura forcada dentro do tema claro ------
Sao 11 overrides que mantem a sidebar escura mesmo no tema claro. O padrao
e' mantido (a sidebar continua escura no claro), so o navy muda para o
oficial: #0D1324 -> #050B18. */
body.theme-light .sidebar { background: var(--gv-navy); }
/* --- Navegacao ERP: styles.css:593, 630, 949 ----------------------------- */
.erp-module-btn:hover,
.erp-module-btn:focus,
.erp-nav-module.open > .erp-module-btn,
.erp-nav-module.active > .erp-module-btn {
border-bottom-color: var(--accent);
}
.erp-mega-kicker { color: var(--accent); }
body.nav-preview-top .topbar.erp-module-bar .erp-module-btn:hover,
body.nav-preview-top .topbar.erp-module-bar .erp-module-btn:focus,
body.nav-preview-top .topbar.erp-module-bar .erp-nav-module.open > .erp-module-btn,
body.nav-preview-top .topbar.erp-module-bar .erp-nav-module.active > .erp-module-btn {
background: rgba(46,144,255,.10);
border-bottom-color: var(--accent);
}
/* styles.css:936 — cinza neutro #374151 na barra branca de modulos.
Trocado por um cinza de mesma luminosidade, porem com vies navy (9:1). */
body.nav-preview-top .topbar.erp-module-bar .erp-module-btn { color: #33455F; }
/* styles.css:758-765 — #0f172a (slate-900) na barra superior clara */
body.nav-preview-top.theme-light .topbar,
body.nav-preview-top .topbar { color: var(--gv-txt-escuro); }
body.nav-preview-top .topbar-title { color: var(--gv-txt-escuro); }
/* styles.css:770 — prefixo "Gravium / " */
body.nav-preview-top .topbar-title::before { color: var(--gv-cinza); }
/* styles.css:781-785 — busca global; o original usa !important, entao a
sobrescrita precisa de !important + ordem posterior. */
body.nav-preview-top #global-search {
background: var(--gv-nevoa) !important;
border-color: var(--gv-linha-clara) !important;
color: var(--gv-txt-escuro) !important;
}
/* styles.css:53 — o texto da marca na sidebar do tema claro fica cravado no
cinza antigo #E2E8F0; a regra de fundo ja e' coberta acima (linha ~192),
esta cobre so o texto. */
body.theme-light .sidebar-brand-text { color: var(--gv-txt-claro); }
/* ============================================================================
WORDMARK INTERNO — alinhado ao institucional (dono, 20/08/2026)
============================================================================
A referencia e' o .brand__wmtext da landing: Poppins leve com tracking largo
relativo (.34em). styles.css usa peso 800 com 3px fixos — e' esse contraste
que fazia o GRAVIUM de dentro parecer outra marca. Precisa vir DEPOIS do
bloco de titulos desta camada, que poe .sidebar-brand-text em 600. */
.sidebar-brand-text,
.erp-topnav-brand,
.erp-topnav-brand span,
.login-logo-text {
font-family: var(--gv-body);
font-weight: 400;
letter-spacing: .3em;
}
/* SVGs de marca antigos com o accent velho #4F9CF9 cravado em ATRIBUTO
(app.html, login.html e as 6 paginas-modulo). Atributo de apresentacao
perde para CSS, entao estas duas regras recolorem todos de uma vez, em
qualquer pagina que carregue esta camada — sem editar HTML nenhum. */
svg [stroke="#4F9CF9"] { stroke: var(--gv-orbita); }
svg [fill="#4F9CF9"] { fill: var(--gv-orbita); }
/* WORDMARK OFICIAL GRAVIUM EM VETOR (rebrand de 21/08/2026) — o lettering do
Brand Book Gravium (GraviumWordmark.dc.html) e' SVG com stroke em
currentColor: herda a cor do contexto e escala sem perder o traco.
Substitui o PNG do Gravium na sidebar, na barra de modulos e no login.
Brand Book: largura minima do lockup 140px — por isso 20px de altura
(viewBox 725x100 -> ~145px de largura). */
.gv-wm-img { height: 20px; width: auto; display: block; color: var(--gv-txt-claro); }
.erp-topnav-brand .gv-wm-img { height: 20px; }
.gv-wm-img--login { height: 30px; margin: 12px auto 0; }
/* WORDMARK SVG x REGRAS GENERICAS DO styles.css (28/08/2026).
styles.css dimensiona TODO svg da marca: .sidebar-brand svg{32px},
.erp-topnav-brand svg{38px}, .login-logo svg{48px}. Enquanto o wordmark era
nada acontecia; virando