/* ==========================================================================
PACINI UI — sistema visual único do Portal Grupo Pacini
--------------------------------------------------------------------------
Versão .... 2.8
Data ...... 02/09/2026
Substitui . pacini-tema.css 1.2
ONDE SE APLICA
portal.grupopacini.com.br Cadastro Central + acesso
nf.grupopacini.com.br Fiscal / NFS-e
central.grupopacini.com.br Pendências
financeiro.grupopacini.com.br Financeiro / BPO
inteligencia.grupopacini.com.br Relatórios / tributário (futuro)
NÃO se aplica a grupopacini.com.br (site institucional).
O QUE MUDOU DA 1.2 PARA A 2.0
· Menu lateral deixou de ser um bloco azul e passou a ser claro. O
marinho virou tinta e ação, não papel de parede.
· Toda página passa a ter o mesmo esqueleto: trilha, título,
descrição, ações, indicadores, controles, conteúdo, paginação.
· Botão ganhou quatro níveis declarados. Nenhuma tela inventa cor.
· Entraram modal, select, chip de filtro, alerta e trilha.
· Densidade virou opção: aperta a escala
inteira sem tocar em nenhuma regra.
2.1
· Menu lateral recolhível (224px / 68px), com tooltip no estreito,
monograma no lugar do letreiro e preferência lembrada no
navegador. A área principal se reajusta pelo flex.
2.2
· Grade de ERP: linha de ~35px, entrelinha 1,2, cabeçalho em 11px
com letter-spacing de .03em, recuo horizontal de 10px, colunas
coladas no conteúdo e a sobra da tela indo para o fim da linha.
· Hierarquia de cor na grade: razão social em --tinta, todo o resto
em --tinta-2, situação com a cor semântica.
2.3
· Linha em ~33px: o botão de ação da linha deixou de definir a
altura (era 28px contra 16px do texto).
· table-layout: fixed. A sobra de largura passa a ser repartida
entre todas as colunas em vez de empoçar numa só.
2.4
· Tela de acesso (seção 21), agora oficial: painel de marca à
esquerda em 40% e formulário em área clara à direita. A variante
centralizada foi descartada e removida do arquivo.
· O ambiente passa a se chamar Portal Grupo Pacini. Nomes de
módulo que se sustentam sozinhos (Cadastro Central, Fiscal /
NFS-e, Financeiro / BPO) não mudaram.
· .col-nome-2 para tabelas com duas colunas de nome.
2.5
· Painel de acesso reduzido a marca, nome, uma frase e o Paco.
Saíram a lista de módulos e o texto institucional.
· Mostrar/ocultar senha no formulário.
2.6
· Logo passa a usar a versão sem a assinatura da marca em tamanho
pequeno (acesso e menu lateral), e cresce um pouco. A assinatura
em 5px de altura era o que fazia o logo parecer apagado.
2.7
· Altura da linha declarada por --linha-controle (39px confortável,
31px compacto). Saiu a margem negativa no botão de ação: ele
agora é dimensionado para caber na conta, não espremido nela.
2.8
· Primeira aplicação real: Central de Regularidade Fiscal.
· .kpi-estado: indicador sem número ainda, com etiqueta neutra.
· .celula-corta: truncamento sem implicar que a coluna é de nome.
· .menu-movel + .overlay-lateral: a gaveta abaixo de 900px, que só
existia como regra de posição e não tinha como ser aberta.
2.9
· .col-origem: procedência do dado por extenso ("SITFIS · Receita
Federal"). Não cabia em .col-tipo, que foi medida para rótulo
curto ("Simples Nacional").
REGRA DE MANUTENÇÃO
Valor novo vira token aqui. Nenhum literal solto nas regras, e
nenhuma cor nova no CSS de sistema nenhum.
========================================================================== */
/* ==========================================================================
1. TOKENS
========================================================================== */
:root {
/* ---- Marinho: a cor principal. Tinta e ação, não preenchimento. ------ */
--marinho-900: #12163C; /* título de página, número de KPI */
--marinho-700: #22286E; /* marca, botão primário, item ativo */
--marinho-500: #363E93; /* hover do primário */
--marinho-100: #E4E8F5; /* linha selecionada, aba ativa */
--marinho-050: #F2F4FB; /* realce de apoio */
/* ---- Dourado: só destaque. Nunca área, nunca texto sobre branco. ---- */
--ouro: #F5D163;
--ouro-600: #C28200;
--ouro-tinta: #8A6100; /* dourado que passa em contraste sobre branco */
/* ---- Neutros com viés azulado: puxam para a marca sem virar azul. --- */
--papel: #FFFFFF;
--fundo: #F7F8FB;
--fundo-2: #FBFCFD;
--borda: #E5E8F0;
--borda-forte: #D3D8E5;
--fio: #EFF1F6;
--tinta: #171B2E;
--tinta-2: #59617A;
--tinta-3: #8A92A8;
/* ---- Semântica: vermelho só erro, verde só confirmação. ------------- */
--verde: #0E7A4C;
--verde-bg: #E8F6EF;
--verde-borda: #BFE5D3;
--vermelho: #BE2E46;
--vermelho-forte:#A62740; /* só o hover do botão de perigo sólido */
--vermelho-bg: #FDECEF;
--vermelho-borda:#F5CBD3;
--ambar: #A97400;
--ambar-bg: #FDF4E0;
--ambar-borda: #F0DCA8;
--foco: #1268DF;
--impressao: #BBBBBB; /* borda no papel, onde não há sombra */
/* ---- Tipografia ----------------------------------------------------- */
--fonte-titulo: Archivo, 'Segoe UI', Roboto, Arial, sans-serif;
--fonte-texto: 'Public Sans', 'Segoe UI', Roboto, Arial, sans-serif;
--fs-micro: 10.5px; /* rótulo caixa-alta fora da tabela */
--fs-mini: 11.5px; /* metadado, rodapé */
--fs-menor: 12.5px; /* controle: botão, chip, select, busca */
--fs-base: 13.5px; /* corpo */
/* ---- Grade. Separada do resto porque a tabela é onde se passa o dia
e é o único lugar em que 0,5px de diferença muda a leitura. ------- */
--fs-grade-nome: 13.5px; /* razão social: o dado que se procura */
--fs-grade: 12.5px; /* CNPJ, código, regime, data, situação */
--fs-grade-cab: 11px; /* cabeçalho da coluna */
--altura-grade: 1.2; /* apertado: a célula tem uma linha só */
--fs-medio: 15px; /* subtítulo de painel */
--fs-titulo: 22px; /* título de página */
--fs-numero: 27px; /* número de KPI */
--peso-normal: 400;
--peso-medio: 500;
--peso-forte: 600;
--peso-negrito:700;
--caixa-alta: .09em; /* rótulo caixa-alta fora da tabela */
--caixa-alta-grade: .03em; /* no cabeçalho da grade, .09em espalha demais */
/* ---- Espaço: escala de 4. Nada fora dela. --------------------------- */
--e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px;
--e5: 20px; --e6: 24px; --e7: 32px; --e8: 40px;
/* ---- Medidas de estrutura ------------------------------------------- */
--lateral-largura: 224px;
--lateral-recolhida: 68px;
--cabecalho-altura: 52px;
--pagina-recuo: var(--e6);
--coluna-estreita: 560px; /* formulário de campo único, ficha de conta */
--pagina-teto: 1560px; /* o conteúdo para de crescer e continua legível */
/* ---- Densidade. Trocada em bloco por . -------
A altura da linha é uma conta declarada, não um acaso:
recuo-y × 2 + --linha-controle + 1px de fio
--linha-controle é a altura do elemento mais alto que a célula pode
conter (o botão de ação da linha). Ele é dimensionado para caber na
conta, em vez de ser puxado para dentro dela por margem negativa —
assim a linha tem uma altura declarada, e não uma altura que
emerge de quem por acaso for maior.
Confortável: 7 + 24 + 7 + 1 = 39px
Compacto: 4 + 22 + 4 + 1 = 31px */
--linha-recuo-y: 7px;
--linha-controle: 24px;
--linha-recuo-x: 10px; /* era 16px: é daqui que vinha o "espalhado" */
--coluna-nome: 300px; /* a coluna de razão social não flutua com a tela */
--kpi-recuo: 13px var(--e5); /* era 16px 20px */
--bloco-vao: var(--e5); /* vão entre as faixas da página */
--raio-2: 6px;
--raio: 10px;
--raio-4: 14px;
--pilula: 999px;
--sombra-1: 0 1px 2px rgba(18, 22, 60, .04);
--sombra-2: 0 4px 16px rgba(18, 22, 60, .06);
--sombra-3: 0 18px 48px rgba(18, 22, 60, .16);
/* Dois valores que estavam repetidos à mão pelo arquivo. O anel aparecia
em quatro campos, em duas grafias diferentes do MESMO valor; o véu, em
duas camadas. Um lugar só para cada. */
--anel-foco: 0 0 0 3px rgba(18, 104, 223, .12);
--veu-overlay: rgba(18, 22, 60, .40);
--troca: .15s ease;
}
/* Modo compacto: mesma linguagem, mais registros por tela. Muda só o
grupo de densidade — nenhuma regra abaixo sabe que ele existe. */
body.compacto {
--linha-recuo-y: 4px;
--linha-controle: 22px;
--linha-recuo-x: var(--e2);
--kpi-recuo: 10px var(--e4);
--bloco-vao: var(--e4);
--pagina-recuo: var(--e5);
--fs-titulo: 19px;
--fs-numero: 23px;
}
/* ==========================================================================
2. BASE
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--fundo);
color: var(--tinta);
font-family: var(--fonte-texto);
font-size: var(--fs-base);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--fonte-titulo); letter-spacing: -.02em; }
p { margin: 0; }
button { font-family: inherit; }
/* Dígito sob dígito em tudo que se compara ou se confere. */
.num, .tabela td, .kpi-valor, .paginacao, .contador { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: var(--raio-2); }
/* Comando ou identificador citado no meio de uma frase. Monoespaçado do
sistema — nenhuma fonte extra é carregada por causa disto. */
code {
font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
font-size: .92em;
padding: 1px 5px;
border-radius: 4px;
background: var(--fio);
color: var(--tinta);
}
.apenas-leitor {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap; border: 0;
}
.ico { width: 16px; height: 16px; flex: none; stroke-width: 1.6; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* Barra de rolagem fina. Herdada do CSS legado, que já não existe: foi
trazida para cá antes do corte, para o app não perder a barra estreita
sem ninguém pedir. */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--fio); }
::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--tinta-3); }
/* ==========================================================================
3. CASCA
========================================================================== */
.aplicativo { display: flex; min-height: 100vh; }
/* ==========================================================================
4. MENU LATERAL — recolhível
Claro. O marinho aparece só na marca, no item ativo e no texto — é o
que impede o azul de tomar a tela.
Dois estados:
expandido 224px · símbolo + letreiro + nome do módulo + agrupamento
recolhido 68px · símbolo + ícone, nome em tooltip
A largura é um token e a casca é flex, então a área principal se
reajusta sozinha: nenhum cálculo em JS, nenhum recarregamento.
O estado mora em :root.sb-recolhida, gravado antes da primeira
pintura para a barra não aparecer na largura errada.
========================================================================== */
.lateral {
width: var(--lateral-largura);
flex: none;
display: flex;
flex-direction: column;
background: var(--papel);
border-right: 1px solid var(--borda);
position: sticky;
top: 0;
height: 100vh;
transition: width var(--troca);
}
:root.sb-recolhida { --lateral-largura: var(--lateral-recolhida); }
/* ---- Marca -----------------------------------------------------------
Duas imagens, não uma redimensionada: o letreiro em 68px viraria
borrão. No estreito fica o monograma, na proporção original. */
.lateral-marca {
height: var(--cabecalho-altura);
flex: none;
display: flex;
align-items: center;
padding: 0 var(--e5);
border-bottom: 1px solid var(--borda);
overflow: hidden;
}
/* Também a versão sem assinatura: em 118px a linha da marca some
igual. Ver a nota em .acesso-logo. */
.marca-completa { width: 134px; height: auto; display: block; }
.marca-simbolo { height: 26px; width: auto; display: none; }
:root.sb-recolhida .lateral-marca { padding: 0; justify-content: center; }
:root.sb-recolhida .marca-completa { display: none; }
:root.sb-recolhida .marca-simbolo { display: block; }
/* ---- Navegação -------------------------------------------------------- */
.lateral-nav {
flex: 1;
overflow-y: auto;
padding: var(--e4) var(--e3);
}
/* No estreito os sete itens cabem sem rolar, e overflow visível é o que
permite o tooltip sair da barra. */
:root.sb-recolhida .lateral-nav { overflow: visible; padding: var(--e3) var(--e2); }
.nav-grupo + .nav-grupo { margin-top: var(--e5); }
/* Sem o rótulo do grupo, o agrupamento passa a ser dito por um fio. */
:root.sb-recolhida .nav-grupo + .nav-grupo {
margin-top: var(--e3);
padding-top: var(--e3);
border-top: 1px solid var(--borda);
}
.nav-rotulo {
padding: 0 var(--e3) var(--e2);
font-size: var(--fs-micro);
font-weight: var(--peso-negrito);
letter-spacing: var(--caixa-alta);
text-transform: uppercase;
color: var(--tinta-3);
}
:root.sb-recolhida .nav-rotulo { display: none; }
.nav-item {
position: relative;
display: flex;
align-items: center;
gap: var(--e3);
padding: 8px var(--e3);
margin-bottom: 2px;
border-radius: var(--raio-2);
font-size: var(--fs-menor);
font-weight: var(--peso-medio);
color: var(--tinta-2);
cursor: pointer;
transition: background var(--troca), color var(--troca);
}
.nav-item .ico { color: var(--tinta-3); transition: color var(--troca); }
.nav-item:hover { background: var(--marinho-050); color: var(--tinta); }
.nav-item:hover .ico { color: var(--tinta-2); }
/* Ativo: pastilha marinho. Evidente de longe nos dois estados, e usa a
cor principal em dose pequena em vez de pintar a coluna inteira. */
.nav-item.ativo {
background: var(--marinho-700);
color: var(--papel);
font-weight: var(--peso-forte);
}
.nav-item.ativo .ico { color: var(--ouro); }
:root.sb-recolhida .nav-item { justify-content: center; gap: 0; padding: 9px 0; }
:root.sb-recolhida .nav-item .rotulo { display: none; }
/* ---- Contador --------------------------------------------------------- */
.nav-item .contador {
margin-left: auto;
min-width: 20px;
padding: 1px 6px;
border-radius: var(--pilula);
font-size: var(--fs-micro);
font-weight: var(--peso-negrito);
text-align: center;
background: var(--fio);
color: var(--tinta-2);
}
.nav-item.ativo .contador { background: rgba(255,255,255,.20); color: var(--papel); }
.nav-item .contador.alerta { background: var(--vermelho-bg); color: var(--vermelho); }
.nav-item.ativo .contador.alerta { background: var(--vermelho); color: var(--papel); }
/* No estreito o número não cabe: vira sinal sobre o ícone. O texto
continua no DOM, então o leitor de tela ainda anuncia a quantidade. */
:root.sb-recolhida .nav-item .contador {
position: absolute;
top: 5px; right: 12px;
min-width: 0; width: 7px; height: 7px;
padding: 0;
font-size: 0;
background: var(--tinta-3);
}
:root.sb-recolhida .nav-item .contador.alerta { background: var(--vermelho); }
:root.sb-recolhida .nav-item.ativo .contador { background: var(--papel); }
/* ---- Tooltip do modo recolhido ---------------------------------------
O texto vem de data-nome, então nome visível e nome do tooltip não
têm como sair de sincronia. Só existe no estado recolhido: no
expandido nem chega a ser gerado. */
:root.sb-recolhida .nav-item::after {
content: attr(data-nome);
position: absolute;
left: calc(100% + 10px);
top: 50%;
transform: translateY(-50%);
z-index: 60;
padding: 5px var(--e3);
border-radius: var(--raio-2);
background: var(--marinho-900);
color: var(--papel);
font-size: var(--fs-mini);
font-weight: var(--peso-medio);
white-space: nowrap;
box-shadow: var(--sombra-2);
opacity: 0;
pointer-events: none;
transition: opacity var(--troca);
}
:root.sb-recolhida .nav-item::before {
content: "";
position: absolute;
left: calc(100% + 3px);
top: 50%;
margin-top: -4px;
z-index: 60;
border: 4px solid transparent;
border-right-color: var(--marinho-900);
opacity: 0;
pointer-events: none;
transition: opacity var(--troca);
}
:root.sb-recolhida .nav-item:hover::after,
:root.sb-recolhida .nav-item:hover::before,
:root.sb-recolhida .nav-item:focus-visible::after,
:root.sb-recolhida .nav-item:focus-visible::before { opacity: 1; }
/* ---- Rodapé e botão de recolher --------------------------------------- */
.lateral-rodape {
flex: none;
padding: var(--e3);
border-top: 1px solid var(--borda);
}
:root.sb-recolhida .lateral-rodape { padding: var(--e2); }
/* Discreto de proposito: e' um controle de preferencia, nao navegacao.
Compete com os itens do menu se tiver o mesmo peso. Ganha contorno e
cor so' quando o cursor chega nele. */
.lateral-alternar {
width: 100%;
height: 26px;
margin-top: 2px;
display: flex;
align-items: center;
gap: var(--e3);
padding: 0 var(--e3);
border: 1px solid transparent;
border-radius: var(--raio-2);
background: none;
font-size: var(--fs-micro);
letter-spacing: .02em;
color: var(--tinta-3);
opacity: .75;
cursor: pointer;
transition: background var(--troca), color var(--troca),
border-color var(--troca), opacity var(--troca);
}
.lateral-alternar:hover {
background: var(--marinho-050);
color: var(--marinho-700);
border-color: var(--borda);
opacity: 1;
}
.lateral-alternar .ico { width: 12px; height: 12px; transition: transform var(--troca); }
:root.sb-recolhida .lateral-alternar { justify-content: center; gap: 0; padding: 0; }
:root.sb-recolhida .lateral-alternar .rotulo { display: none; }
:root.sb-recolhida .lateral-alternar .ico { transform: rotate(180deg); }
/* ==========================================================================
5. CABEÇALHO
Fino e quieto. O contexto da tela mora no cabeçalho da página, não aqui.
Aqui fica só o que vale para o sistema todo: competência e usuário.
========================================================================== */
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cabecalho {
height: var(--cabecalho-altura);
flex: none;
position: sticky;
top: 0;
z-index: 20;
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--e4);
padding: 0 var(--pagina-recuo);
background: var(--papel);
border-bottom: 1px solid var(--borda);
}
/* Seletor de competência: o controle mais usado de um sistema contábil
fica no topo, valendo para todas as telas. */
.competencia {
display: flex;
align-items: center;
gap: var(--e2);
padding: 5px var(--e3);
border: 1px solid var(--borda);
border-radius: var(--raio-2);
font-size: var(--fs-menor);
color: var(--tinta-2);
cursor: pointer;
transition: border-color var(--troca);
}
.competencia:hover { border-color: var(--borda-forte); }
.competencia b { color: var(--tinta); font-weight: var(--peso-forte); }
.usuario {
display: flex;
align-items: center;
gap: var(--e2);
padding-left: var(--e4);
border-left: 1px solid var(--borda);
font-size: var(--fs-menor);
color: var(--tinta-2);
}
/* Some antes do nome: numa tela estreita o e-mail empurra o botão Sair
para fora, e as iniciais já identificam quem está logado. */
.usuario-email { max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario .iniciais {
width: 26px; height: 26px;
display: grid; place-items: center;
border-radius: 50%;
background: var(--marinho-100);
color: var(--marinho-700);
font-size: var(--fs-mini);
font-weight: var(--peso-negrito);
}
/* ==========================================================================
6. ESQUELETO DA PÁGINA
Toda tela do sistema tem esta ordem. É o que faz sair de Clientes e
entrar em Pendências parecer troca de conteúdo, não de sistema.
========================================================================== */
.pagina {
flex: 1;
min-height: 0;
width: 100%;
max-width: var(--pagina-teto);
padding: var(--e6) var(--pagina-recuo) var(--e7);
display: flex;
flex-direction: column;
gap: var(--bloco-vao);
}
.pagina-cabecalho {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--e6);
flex-wrap: wrap;
}
.trilha {
display: flex;
align-items: center;
gap: var(--e2);
margin-bottom: 5px; /* era 8px: trilha, titulo e descricao formam um bloco só */
font-size: var(--fs-mini);
color: var(--tinta-3);
}
.trilha a:hover { color: var(--tinta-2); }
.trilha span[aria-current] { color: var(--tinta-2); font-weight: var(--peso-medio); }
.trilha .separador { color: var(--borda-forte); }
.pagina-titulo {
font-size: var(--fs-titulo);
font-weight: var(--peso-forte);
color: var(--marinho-900);
line-height: 1.2;
}
.pagina-descricao {
margin-top: 3px; /* era 4px */
max-width: 68ch;
font-size: var(--fs-menor);
color: var(--tinta-2);
}
.pagina-acoes { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
/* Contagem de registros ao lado das ações da página. Vive no cabeçalho e não
na tabela: é atributo do conjunto, não da grade. */
.contagem-registros {
font-size: var(--fs-menor);
color: var(--tinta-2);
padding: 0 var(--e2);
}
/* ==========================================================================
7. BOTÕES — quatro níveis, nenhum a mais
primário ação principal da tela (uma por tela)
secundário ações auxiliares
terciário ações de menor peso, sem moldura
perigo exclusão e cancelamento
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
gap: var(--e2);
height: 32px;
padding: 0 var(--e4);
border-radius: var(--raio-2);
border: 1px solid transparent;
font-size: var(--fs-menor);
font-weight: var(--peso-forte);
white-space: nowrap;
cursor: pointer;
transition: background var(--troca), border-color var(--troca), color var(--troca);
}
.btn .ico { width: 14px; height: 14px; }
/* Desabilitado continua sendo BOTAO: mantem fundo, borda e forma, e perde
so' o contraste. Com opacidade baixa ele virava texto apagado — some a
affordance e a pessoa nem entende que ali havia uma acao.
Precisa listar cada nivel: `.btn:disabled` sozinho tem especificidade
(0,1,1) e perde para `.btn.secundario` (0,2,0), que vem depois. */
.btn.primario:disabled,
.btn.secundario:disabled,
.btn.terciario:disabled,
.btn.perigo:disabled {
cursor: not-allowed;
background: var(--fio);
border-color: var(--borda);
color: var(--tinta-3);
opacity: 1;
}
.btn.primario { background: var(--marinho-700); border-color: var(--marinho-700); color: var(--papel); }
.btn.primario:hover:not(:disabled) { background: var(--marinho-500); border-color: var(--marinho-500); }
.btn.secundario { background: var(--papel); border-color: var(--borda-forte); color: var(--tinta); }
.btn.secundario:hover:not(:disabled) { border-color: var(--marinho-700); color: var(--marinho-700); }
.btn.terciario { background: none; color: var(--tinta-2); padding: 0 var(--e2); }
.btn.terciario:hover:not(:disabled) { background: var(--marinho-050); color: var(--marinho-700); }
.btn.perigo { background: var(--papel); border-color: var(--vermelho-borda); color: var(--vermelho); }
.btn.perigo:hover:not(:disabled) { background: var(--vermelho-bg); border-color: var(--vermelho); }
/* Sólido só dentro de modal de confirmação, onde o risco já foi explicado. */
.btn.perigo.solido { background: var(--vermelho); border-color: var(--vermelho); color: var(--papel); }
.btn.perigo.solido:hover:not(:disabled) { background: var(--vermelho-forte); border-color: var(--vermelho-forte); }
.btn.bloco { width: 100%; justify-content: center; height: 38px; }
/* Abre a gaveta abaixo de 900px. No desktop não existe — a lateral está
sempre visível e quem a recolhe é o botão do rodapé dela.
Escrito como .btn-ico.menu-movel de propósito: com um seletor de classe
só, este display perdia para o `display:grid` de .btn-ico, que vem
depois no arquivo, e o botão aparecia no desktop. */
.btn-ico.menu-movel { display: none; }
.overlay-lateral {
position: fixed;
inset: 0;
z-index: 45;
background: var(--veu-overlay);
}
/* Ação de ícone: linha de tabela, fechar modal. */
.btn-ico {
width: 28px; height: 28px;
display: grid; place-items: center;
border: 1px solid transparent;
border-radius: var(--raio-2);
background: none;
color: var(--tinta-3);
cursor: pointer;
transition: background var(--troca), color var(--troca), border-color var(--troca);
}
.btn-ico:hover { background: var(--marinho-050); color: var(--marinho-700); border-color: var(--borda); }
/* ==========================================================================
8. INDICADORES (KPI) — um padrão só
rótulo pequeno · número · apoio. Sem ícone, sem cor de fundo,
sem barra decorativa. O número é o assunto.
========================================================================== */
.kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: var(--e3);
}
.kpi {
padding: var(--kpi-recuo);
background: var(--papel);
border: 1px solid var(--borda);
border-radius: var(--raio);
box-shadow: var(--sombra-1);
}
.kpi-rotulo {
font-size: var(--fs-micro);
font-weight: var(--peso-negrito);
letter-spacing: var(--caixa-alta);
text-transform: uppercase;
color: var(--tinta-3);
}
.kpi-valor {
margin-top: 5px; /* era 8px */
font-family: var(--fonte-titulo);
font-size: var(--fs-numero);
font-weight: var(--peso-negrito);
letter-spacing: -.03em;
line-height: 1.05;
color: var(--marinho-900);
}
.kpi-valor .unidade { font-size: 60%; font-weight: var(--peso-forte); color: var(--tinta-3); margin-right: 2px; }
/* Indicador que ainda nao tem numero. Nao e' um valor pequeno: e' a
AUSENCIA de valor, e por isso ocupa o slot com uma etiqueta neutra em
vez de texto na escala do numero. A etiqueta ja existe no sistema e nao
carrega juizo — nao afirma bom nem ruim, so' diz que ainda nao ha dado. */
.kpi-estado {
margin-top: 7px;
line-height: 1;
}
.kpi-apoio {
margin-top: 5px; /* era 8px */
font-size: var(--fs-mini);
color: var(--tinta-3);
}
/* A cor entra só na linha de apoio, nunca no número nem no fundo. */
.kpi-apoio.positivo { color: var(--verde); font-weight: var(--peso-forte); }
.kpi-apoio.negativo { color: var(--vermelho); font-weight: var(--peso-forte); }
.kpi-apoio.atencao { color: var(--ambar); font-weight: var(--peso-forte); }
/* KPI que exige ação ganha um fio dourado à esquerda — o único uso
decorativo do dourado no sistema. */
.kpi.destaque { border-left: 3px solid var(--ouro); }
/* ==========================================================================
9. CONTROLES — busca, filtros, select
========================================================================== */
.controles {
display: flex;
align-items: center;
gap: var(--e3);
flex-wrap: wrap;
}
/* ---- Busca ------------------------------------------------------------ */
.busca { position: relative; flex: 1 1 260px; max-width: 360px; }
.busca input {
width: 100%;
height: 32px;
padding: 0 var(--e3) 0 32px;
font-family: inherit;
font-size: var(--fs-menor);
color: var(--tinta);
background: var(--papel);
border: 1px solid var(--borda-forte);
border-radius: var(--raio-2);
transition: border-color var(--troca), box-shadow var(--troca);
}
.busca input::placeholder { color: var(--tinta-3); }
.busca input:hover { border-color: var(--tinta-3); }
.busca input:focus { outline: none; border-color: var(--foco); box-shadow: var(--anel-foco); }
.busca .ico {
position: absolute;
left: 10px; top: 50%;
margin-top: -8px;
color: var(--tinta-3);
pointer-events: none;
}
/* ---- Select ----------------------------------------------------------- */
.campo-select { position: relative; display: inline-flex; }
.campo-select select {
height: 32px;
padding: 0 30px 0 var(--e3);
font-family: inherit;
font-size: var(--fs-menor);
color: var(--tinta);
background: var(--papel);
border: 1px solid var(--borda-forte);
border-radius: var(--raio-2);
appearance: none;
cursor: pointer;
transition: border-color var(--troca);
}
.campo-select select:hover { border-color: var(--tinta-3); }
.campo-select select:focus { outline: none; border-color: var(--foco); box-shadow: var(--anel-foco); }
/* Seta desenhada em borda: sem arquivo, acompanha a cor do tema. */
.campo-select::after {
content: "";
position: absolute;
right: 12px; top: 50%;
margin-top: -2px;
width: 0; height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid var(--tinta-3);
pointer-events: none;
}
/* ---- Chips de filtro --------------------------------------------------- */
.filtros { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.chip {
display: inline-flex;
align-items: center;
gap: var(--e2);
height: 28px;
padding: 0 var(--e3);
border: 1px solid var(--borda);
border-radius: var(--pilula);
background: var(--papel);
font-size: var(--fs-menor);
color: var(--tinta-2);
cursor: pointer;
transition: border-color var(--troca), background var(--troca), color var(--troca);
}
.chip:hover { border-color: var(--borda-forte); color: var(--tinta); }
.chip[aria-pressed="true"] {
background: var(--marinho-100);
border-color: var(--marinho-100);
color: var(--marinho-700);
font-weight: var(--peso-forte);
}
.chip .contador { font-size: var(--fs-mini); color: var(--tinta-3); }
.chip[aria-pressed="true"] .contador { color: var(--marinho-700); }
.chip.alerta .contador { color: var(--vermelho); font-weight: var(--peso-negrito); }
.controles .direita { margin-left: auto; display: flex; align-items: center; gap: var(--e2); }
/* ==========================================================================
10. PAINEL — o recipiente único de conteúdo
Tabela, lista, gráfico, formulário: tudo mora dentro de um .painel.
========================================================================== */
.painel {
background: var(--papel);
border: 1px solid var(--borda);
border-radius: var(--raio);
box-shadow: var(--sombra-1);
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
.painel-cabecalho {
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--e4);
padding: var(--e4) var(--e5);
border-bottom: 1px solid var(--borda);
}
.painel-titulo { font-size: var(--fs-medio); font-weight: var(--peso-forte); color: var(--marinho-900); }
.painel-apoio { font-size: var(--fs-mini); color: var(--tinta-3); margin-top: 2px; }
.painel-corpo { padding: var(--e5); min-height: 0; }
.painel-corpo.sem-recuo { padding: 0; }
/* Corpo que contém só uma lista de definição: as linhas já trazem recuo
próprio, e o recuo cheio do corpo dobrava o espaço à toa. */
.painel-corpo.lista { padding: var(--e2) var(--e5) var(--e3); }
.painel-rodape {
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--e4);
padding: var(--e3) var(--e5);
background: var(--fundo-2);
border-top: 1px solid var(--borda);
font-size: var(--fs-mini);
color: var(--tinta-3);
}
/* Painel que carrega só uma lista curta de definição. Sem teto, o par
rótulo/valor fica separado pela largura inteira da tela — o "excessivamente
largo" que a versão legada tinha. */
.painel.estreito { max-width: var(--coluna-estreita); }
/* Um aviso que fala DE um painel estreito não pode ser mais largo que ele:
a faixa larga sugere que trata da página inteira. Mesma medida, mesmo
eixo — o olho lê os dois como um bloco só. */
.alerta.estreito { max-width: var(--coluna-estreita); }
/* Duas colunas de painel na visão geral. */
.grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--e4); align-items: start; }
.grade-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--e4); align-items: start; }
/* ==========================================================================
11. TABELA — um padrão para o sistema inteiro
========================================================================== */
.tabela-rolagem { overflow: auto; min-height: 0; }
/* table-layout: fixed é o que faz a grade preencher a largura com
elegância. Em layout automático a sobra da tela ia inteira para uma
coluna só — ou abria um vão entre razão social e CNPJ, ou deixava um
vazio no fim da linha. No fixo, a sobra é repartida entre todas as
colunas na proporção da largura declarada: tudo cresce junto, nada
descola. De quebra, o corte com reticências passa a funcionar pela
largura real da coluna, sem max-width. */
.tabela { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tabela thead th {
position: sticky;
top: 0;
z-index: 1;
background: var(--fundo-2);
text-align: left;
padding: 7px var(--linha-recuo-x);
font-size: var(--fs-grade-cab);
font-weight: var(--peso-forte);
letter-spacing: var(--caixa-alta-grade);
text-transform: uppercase;
color: var(--tinta-3);
white-space: nowrap;
border-bottom: 1px solid var(--borda);
}
/* CONTRATO DE DENSIDADE DA TABELA — mora inteiro aqui, de propósito.
A altura da linha é derivada, não arbitrada:
--linha-recuo-y × 2 + --linha-controle
7 × 2 + 24 = 38px
O fio de 1px NÃO entra nessa soma. O reset global aplica
box-sizing: border-box, então a borda mora DENTRO da altura declarada
em vez de somar por fora. Medido: 38px em toda td e toda tr. O que
sobra de fato para o conteúdo da célula é 38 − 14 de recuo − 1 de fio
= 23px, e é esse o teto real, não os 24px do token.
Daí a regra que já custou caro duas vezes: nada dentro da célula pode
ser mais alto que a linha de texto. Quem cresce aqui empurra a linha
inteira, em silêncio — não é o recuo que manda, é o elemento mais alto.
A altura fica declarada na própria célula para que a linha sem botão
tenha exatamente a mesma altura da que tem. Sem isto a última página,
que pode não ter ações, ficaria 8px mais baixa que as outras.
Hierarquia de cor: o dado auxiliar recua um tom para a razão social
ficar sozinha no primeiro plano. Vale por padrão, sem classe nenhuma
no HTML — quem sobe de nível é a exceção, não a regra. */
.tabela tbody td {
height: calc(var(--linha-controle) + var(--linha-recuo-y) * 2);
padding: var(--linha-recuo-y) var(--linha-recuo-x);
font-size: var(--fs-grade);
line-height: var(--altura-grade);
border-bottom: 1px solid var(--fio);
white-space: nowrap;
color: var(--tinta-2);
}
/* A razão social: maior, mais escura e sem negrito. O peso viria de
graça, mas negrito numa coluna inteira cansa e não hierarquiza nada
— todas as linhas ficariam igualmente fortes. */
.tabela tbody td.celula-nome {
font-size: var(--fs-grade-nome);
font-weight: var(--peso-normal);
color: var(--tinta);
}
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover td { background: var(--marinho-050); }
.tabela tbody tr[aria-selected="true"] td { background: var(--marinho-100); }
/* Célula que precisa quebrar mesmo (observação, endereço). */
.tabela td.quebra { white-space: normal; }
/* TABELA LARGA — para grades com muitas colunas e células de mais de uma linha (guias salvas, painel de
parcelamentos). O contrato de linha única (38px, sem quebra) NÃO serve aqui: com table-layout fixo e
10+ colunas, o texto de uma coluna invadia a vizinha e o botão era cortado. Esta variante:
· fixa uma largura mínima e deixa a rolagem horizontal por conta do `.tabela-rolagem` que a envolve;
· deixa a célula crescer em altura e quebrar o texto (inclusive sequências longas);
· alinha ao topo, para a linha ler de cima para baixo.
Use SEMPRE dentro de `` e com `
` declarando as larguras. */
.tabela.tabela-larga { min-width: 1080px; }
.tabela.tabela-larga thead th { white-space: normal; }
.tabela.tabela-larga tbody td {
height: auto;
white-space: normal;
overflow-wrap: anywhere;
vertical-align: top;
}
.tabela.tabela-larga .btn { white-space: normal; text-align: left; height: auto; }
/* A carteira abre compacta; historicos e comparacao sao consultas opcionais. */
.carteira-busca { display: grid; gap: 6px; font-size: 13px; font-weight: 600; max-width: 520px; }
.carteira-busca input { width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1px solid #ced7e4; border-radius: 8px; font: inherit; font-weight: 400; background: #fff; }
.empresas-acordos { display: grid; margin-top: 12px; border: 1px solid #dfe5ee; border-radius: 10px; overflow: hidden; }
.empresa-acordos { border-bottom: 1px solid #e8edf3; background: #fff; min-width: 0; }
.empresa-acordos:last-child { border-bottom: 0; }
.empresa-acordos[hidden] { display: none; }
.empresa-acordos-resumo { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 16px; padding: 12px 16px; cursor: pointer; list-style: none; }
.empresa-acordos-resumo::-webkit-details-marker { display: none; }
.empresa-acordos-resumo:hover { background: #f7f9fc; border-radius: 10px; }
.empresa-acordos-resumo:focus-visible, .parcelamento-acordo-resumo:focus-visible { outline: 2px solid #295ac0; outline-offset: 3px; }
.empresa-acordos-identidade { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.empresa-acordos-identidade strong { font-size: 14px; overflow-wrap: anywhere; min-width: 0; }
.empresa-acordos-identidade small { color: #66758d; font-size: 12px; order: -1; flex: 0 0 60px; white-space: nowrap; }
.empresa-acordos-quantidade { color: #66758d; font-size: 12px; white-space: nowrap; }
.empresa-acordos-indicacao::before { content: '+'; color: #536581; font-size: 20px; }
.empresa-acordos[open] > summary .empresa-acordos-indicacao::before { content: '−'; }
.empresa-acordos-conteudo { padding: 0 16px 16px; display: grid; gap: 8px; }
.parcelamento-acordo { border-top: 1px solid #e8edf3; min-width: 0; }
.parcelamento-acordo-resumo { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; cursor: pointer; padding: 13px 4px; font-size: 13px; }
.acordo-situacao { color: #536581; text-align: right; max-width: 50%; overflow-wrap: anywhere; }
.parcelamento-acordo > .painel { margin: 0; box-shadow: none; border-color: #e8edf3; }
.parcelamento-historico { border-top: 1px solid #e8edf3; }
.parcelamento-historico > summary { cursor: pointer; padding: 15px 20px; font-weight: 600; font-size: 13px; }
.parcelamento-historico > summary span { color: #66758d; font-weight: 400; margin-left: 8px; }
.parcelamentos-comparativo, .parcelamentos-ajuda { margin: 16px 0; }
.parcelamentos-comparativo > summary, .parcelamentos-ajuda > summary { cursor: pointer; color: #536581; font-size: 13px; padding: 10px 0; }
.tabela.acordos-comparativo { min-width: 1440px; }
.tabela.historico-acordo { min-width: 640px; }
@media (max-width: 600px) {
.parcelamentos-carteira > .painel-cabecalho { align-items: flex-start; flex-wrap: wrap; gap: 10px; }
.empresa-acordos-resumo { gap: 9px; padding: 13px 12px; }
.empresa-acordos-identidade strong { font-size: 13px; }
.empresa-acordos-identidade { display: grid; gap: 3px; }
.empresa-acordos-identidade small { order: 0; }
.empresa-acordos-conteudo { padding: 0 10px 12px; }
.parcelamento-acordo-resumo { flex-wrap: wrap; gap: 5px; }
.acordo-situacao { max-width: 100%; text-align: left; }
}
/* ---- Alinhamento por tipo de informação -------------------------------
Identificador (nome, CNPJ, data) à esquerda: lê-se como texto.
Quantidade (valor, código, contagem) à direita: compara-se em coluna. */
.tabela .num-dir, .tabela th.num-dir { text-align: right; }
/* ---- Largura por tipo de dado: o mesmo dado ocupa a mesma coluna em
todos os cinco sistemas. É isto que faz duas telas diferentes
parecerem o mesmo produto — mais do que a cor. -------------------- */
/* No layout fixo estas larguras são a PROPORÇÃO em que a sobra é
repartida, não um teto. Foram medidas pelo elemento mais largo de
cada coluna — que às vezes é o cabeçalho, não o dado: "CÓD. DOMÍNIO"
ocupa mais que "175", e "SINCRONIZAÇÃO" mais que "02/09 09:14". */
.col-selecao { width: 32px; }
.col-nome { width: var(--coluna-nome); }
.col-cnpj { width: 140px; } /* 12.345.678/0001-90 */
.col-codigo { width: 116px; } /* o cabeçalho manda: "CÓD. DOMÍNIO" pede 111px */
.col-data { width: 102px; } /* 20/09/2026 */
.col-datahora { width: 118px; } /* 02/09 09:14 */
.col-data-longa { width: 152px; } /* data cujo CABEÇALHO é o elemento mais
largo, ex.: "Próximo vencimento" */
.col-valor { width: 112px; } /* 184.500,00 */
.col-tipo { width: 118px; } /* Simples Nacional */
.col-origem { width: 170px; } /* SITFIS · Receita Federal */
.col-estado { width: 132px; } /* • Nunca consultado */
.col-texto { width: 260px; } /* texto livre: rótulo, observação, descrição */
.col-detalhe { width: 190px; } /* detalhe de várias linhas dentro da célula */
.col-mini { width: 68px; } /* código curto de 3 dígitos, sem cabeçalho longo */
.col-acoes { width: 52px; }
.tabela td.col-acoes, .tabela th.col-acoes { text-align: right; }
/* A coluna de seleção não precisa do recuo cheio: são 14px de caixa. */
.tabela th.col-selecao, .tabela td.col-selecao { padding-left: var(--e2); padding-right: 0; }
/* ---- Nome longo: corta com reticências em vez de empurrar as colunas.
Sempre com title="" trazendo o nome inteiro. --------------------- */
/* Sem max-width: no layout fixo quem define o corte é a largura da
coluna, então numa tela larga aparece mais nome em vez de sobrar
espaço em branco depois das reticências. */
.celula-nome,
.celula-corta { overflow: hidden; text-overflow: ellipsis; }
/* Segunda coluna de nome na mesma tabela — tomador da nota, cliente do
lançamento. Menor que a principal de propósito: quem se procura é o
registro, e o segundo nome é contexto. */
.col-nome-2 { width: 210px; }
.celula-nome .secundario { display: block; font-size: var(--fs-mini); color: var(--tinta-3); }
/* ---- Ordenação --------------------------------------------------------- */
.tabela th.ordenavel { padding: 0; }
.ordenar {
width: 100%;
display: flex;
align-items: center;
gap: var(--e1);
padding: 7px var(--linha-recuo-x);
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
color: inherit;
background: none;
border: none;
cursor: pointer;
transition: color var(--troca);
}
.ordenar:hover { color: var(--marinho-700); }
.num-dir .ordenar { justify-content: flex-end; }
.ordenar::after {
content: "";
width: 0; height: 0;
border-left: 3.5px solid transparent;
border-right: 3.5px solid transparent;
border-bottom: 4px solid currentColor;
opacity: .25;
}
[aria-sort="ascending"] .ordenar, [aria-sort="descending"] .ordenar { color: var(--marinho-700); }
[aria-sort="ascending"] .ordenar::after { opacity: 1; }
[aria-sort="descending"] .ordenar::after { opacity: 1; transform: rotate(180deg); }
/* ---- Seleção ----------------------------------------------------------- */
.tabela input[type="checkbox"] { width: 14px; height: 14px; margin: 0; accent-color: var(--marinho-700); cursor: pointer; }
/* ---- Ação de linha: só aparece na linha sob o cursor, para a coluna
não virar um paredão de ícones.
A altura vem de --linha-controle, o mesmo token que entra na conta da
altura da linha. Sem margem negativa: o botão é dimensionado para
caber, não espremido para dentro. Mexer no token move a linha e o
botão juntos, que é o comportamento que se espera de um sistema. ---- */
.tabela td .btn-ico {
width: 26px;
height: var(--linha-controle);
opacity: 0;
transition: opacity var(--troca);
}
/* Alinhamento do que vive dentro da célula. A altura em si é parte do
contrato de densidade e está declarada junto com o recuo, lá em cima. */
.tabela tbody td > * { vertical-align: middle; }
.tabela tr:hover td .btn-ico,
.tabela td .btn-ico:focus-visible { opacity: 1; }
/* ---- Conteúdo secundário dentro de uma célula -------------------------
Um conflito de CNPJ e uma lista de alterações são, por natureza, de
várias linhas. Vivem dentro de td.quebra e usam uma escala menor, para
ficar claro que são detalhe da linha e não outra grade.
O conflito JÁ FOI uma tabela aninhada de cinco colunas. Não pode ser:
com white-space: nowrap ela exigia a largura intrínseca — cerca de
680px — e empurrava a célula, a coluna e a tabela inteira junto. Cinco
colunas dentro de 190px é uma grade de mentira. Vira ficha: os mesmos
cinco campos, um por linha, quebrando quando falta largura. Nenhum
dado saiu; o que saiu foi a grade que não cabia. */
.lista-conflito { margin: var(--e1) 0 0; padding: 0; list-style: none; }
.lista-conflito li {
padding: var(--e1) 0;
font-size: var(--fs-mini);
line-height: 1.45;
color: var(--tinta-2);
border-bottom: 1px solid var(--fio);
}
.lista-conflito li:last-child { border-bottom: none; }
.lista-conflito .conflito-papel {
display: block;
font-size: var(--fs-mini);
font-weight: var(--peso-forte);
letter-spacing: var(--caixa-alta-grade);
text-transform: uppercase;
color: var(--tinta-3);
}
.lista-conflito .conflito-nome { color: var(--tinta); font-weight: var(--peso-forte); }
.lista-conflito .conflito-meta { display: block; color: var(--tinta-3); }
.rotulo-conflito {
margin-top: var(--e2);
font-size: var(--fs-mini);
font-weight: var(--peso-forte);
color: var(--tinta-2);
}
.lista-diffs { margin: 0; padding: 0; list-style: none; }
.lista-diffs li {
font-size: var(--fs-mini);
line-height: 1.5;
color: var(--tinta-2);
}
.lista-diffs b { color: var(--tinta); font-weight: var(--peso-forte); }
.lista-diffs .seta { color: var(--tinta-3); }
/* Célula com conteúdo de várias linhas: o recuo vertical acompanha, senão
o bloco encosta no fio da linha seguinte. */
.tabela tbody td.quebra { padding-top: var(--e2); padding-bottom: var(--e2); vertical-align: top; }
/* ==========================================================================
12. ESTADO / BADGE
Ponto colorido + texto. Não usa fundo preenchido: dentro de uma tabela
de 12 linhas, 12 blocos de cor competem com o dado.
========================================================================== */
.estado {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--fs-grade);
font-weight: var(--peso-medio);
white-space: nowrap;
}
.estado::before { content: ""; width: 5px; height: 5px; border-radius: 50%; flex: none; }
.estado.ok { color: var(--verde); } .estado.ok::before { background: var(--verde); }
.estado.atencao { color: var(--ambar); } .estado.atencao::before { background: var(--ambar); }
.estado.erro { color: var(--vermelho); } .estado.erro::before { background: var(--vermelho); }
.estado.neutro { color: var(--tinta-3); } .estado.neutro::before { background: var(--tinta-3); }
.estado.processo { color: var(--marinho-700); }.estado.processo::before { background: var(--marinho-700); }
/* Várias etiquetas lado a lado, quebrando linha. Para enumerar itens de
mesma natureza sem virar uma caixa por item. */
.etiquetas { display: flex; gap: var(--e2); flex-wrap: wrap; }
/* Etiqueta preenchida: só fora de tabela — ficha de cliente, cabeçalho
de registro, onde ela aparece sozinha. */
.etiqueta {
display: inline-block;
padding: 2px var(--e2);
border-radius: var(--raio-2);
font-size: var(--fs-mini);
font-weight: var(--peso-forte);
}
.etiqueta.marca { background: var(--marinho-100); color: var(--marinho-700); }
.etiqueta.neutra { background: var(--fio); color: var(--tinta-2); }
.etiqueta.ok { background: var(--verde-bg); color: var(--verde); }
.etiqueta.erro { background: var(--vermelho-bg); color: var(--vermelho); }
.etiqueta.atencao { background: var(--ambar-bg); color: var(--ambar); }
/* ==========================================================================
13. ALERTAS E DIVERGÊNCIAS
========================================================================== */
.alerta {
display: flex;
align-items: flex-start;
gap: var(--e3);
padding: var(--e3) var(--e4);
border: 1px solid var(--borda);
border-left-width: 3px;
border-radius: var(--raio-2);
background: var(--papel);
font-size: var(--fs-menor);
}
.alerta .ico { margin-top: 1px; }
.alerta-texto { flex: 1; color: var(--tinta-2); }
.alerta-texto b { color: var(--tinta); font-weight: var(--peso-forte); display: block; margin-bottom: 2px; }
.alerta .btn { flex: none; }
/* O alerta pode carregar uma ação num