LIMITE HONESTO: se uma célula quebrar em duas linhas, aquela `tr` fica mais
alta e o corte volta a cair no meio. A régua não adivinha conteúdo — ela
acerta o caso normal, que é o que estava errado em 51 lugares.
--------------------------------------------------------------------------- */
.tabela-rolagem{--tab-th:33.9px;--tab-tr:38.1px;--linhas:10;
overflow:auto;max-height:calc(var(--tab-th) + var(--linhas) * var(--tab-tr))}
/* CABEÇALHO PARADO. Numa tabela que mostra 10 de 40 linhas, rolar sem o
cabeçalho deixa o leitor sem saber qual coluna é qual — e aqui as colunas
são seis valores em reais parecidos. A faixa já é azul sólida (§24.33), então
ela cobre a linha que passa por baixo sem precisar de fundo extra. */
.tabela-rolagem thead th{position:sticky;top:0;z-index:1}
table.tab{border-collapse:collapse;width:100%;font-size:13.5px}
table.tab th{text-align:left;padding:var(--pad-linha);border-bottom:2px solid var(--borda);
font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:var(--ink-2);font-weight:700;
position:sticky;top:0;background:var(--superficie);cursor:pointer;user-select:none;white-space:nowrap}
table.tab th:hover{color:var(--azul-logo)}
table.tab td{padding:var(--pad-linha);border-bottom:1px solid var(--borda);vertical-align:middle}
table.tab tbody tr{transition:.1s}
table.tab tbody tr:hover{background:#f7fafd}
table.tab td.num,table.tab th.num{text-align:right;font-variant-numeric:tabular-nums}
table.tab td.center,table.tab th.center{text-align:center}
.tab-fixa{position:sticky;left:0;background:var(--superficie);z-index:1}
.tabela-rodape{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
padding:var(--pad-linha);border-top:1px solid var(--borda);font-size:12.5px;color:var(--ink-2)}
/* lista em cartões (tabela larga vira isso no celular) */
.lista-cartoes{display:flex;flex-direction:column;gap:var(--e2)}
.lc-item{display:flex;align-items:center;gap:var(--e3);background:var(--superficie);border:1px solid var(--borda);
border-radius:var(--r-sm);padding:12px 14px}
.lc-tit{font-weight:700;font-size:13.5px}
.lc-ctx{font-size:12.5px;color:var(--ink-2);margin-top:2px}
.lc-val{margin-left:auto;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
/* ---------------------------------------------------------------------------
ITEM DE FILA — um trabalho a fazer, com o formulário dele dentro (09/09/2026)
Apontamento do Joel na tela nova de Comissão · Entrada da Nota: "ficou tudo
como se fosse um aviso". E ficou: cada linha da fila estava embrulhada em
`cust-nota`, que é a caixa de NOTA — fundo azul, barra azul e o ícone (i).
Os campos do formulário apareciam dentro de um aviso.
Aviso é recado que se lê. Isto é trabalho que se FAZ: tem campo, tem botão,
tem estado. Precisava de componente próprio, e não havia — `.lc-item` é
`display:flex` de UMA linha (título | valor) e desmancharia o formulário,
pelo mesmo motivo de sempre.
`display:block` explícito: quem vier depois não transforma isto em flex sem
ver o aviso. Fundo de superfície e borda simples — a mesma moldura de
`.lc-item`, que é o vocabulário do portal para "um item de uma lista".
--------------------------------------------------------------------------- */
.item-fila{display:block;background:var(--superficie);
border:1px solid var(--borda);border-radius:var(--r-sm);
padding:14px 16px}
.item-fila + .item-fila{margin-top:var(--e3)}
/* O cabeçalho do item: nome à esquerda, competência e valor à direita. */
.item-fila > .item-cab{display:flex;justify-content:space-between;flex-wrap:wrap;
gap:6px;align-items:baseline;margin-bottom:2px}
/* A linha de contexto ("Nota 890 · R$ … · anexada por …"). Não é nota de
rodapé nem aviso: é o dado do item. Classe própria pelo mesmo motivo de
`.linha-valor` (§24.44) — a caixa amarela não a alcança. */
.item-fila > .item-ctx{font-size:12.5px;color:var(--ink-2);line-height:1.5;
margin:6px 0 10px}
.item-fila > .item-ctx b{color:var(--ink);font-weight:700}
/* Barra de ações do item: os botões ficam juntos e alinhados à esquerda,
embaixo dos campos. */
.item-fila > .item-acoes{display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:var(--e3)}
/* ============================ estados: carregando / vazio / erro ============================ */
.sk{position:relative;overflow:hidden;background:var(--superficie-2);border-radius:var(--r-sm)}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:sk 1.15s infinite}
@keyframes sk{100%{transform:translateX(100%)}}
.sk-linha{height:14px;margin:8px 0;border-radius:6px}
.sk-linha.curta{width:55%}
.sk-kpi{height:86px;border-radius:var(--r)}
.vazio{text-align:center;color:var(--ink-2);padding:30px 20px;font-size:13.5px}
.vazio .btn{margin-top:12px}
.erro{text-align:center;color:var(--erro-tx);background:var(--erro-bg);border-radius:var(--r-sm);
padding:16px 18px;font-size:13.5px}
.erro .btn{margin-top:10px}
/* ============================ overlay / painel lateral (detalhe) ============================ */
.overlay{position:fixed;inset:0;background:rgba(16,32,58,.45);display:none;z-index:100;backdrop-filter:blur(2px)}
.overlay.aberto,.overlay.on{display:block}
/* FOLHA SOBREPOSTA, NAO MAIS LATERAL (10/09/2026, regra do Joel: "toda tela
que abre por cima abre sobreposta, nao lateral"). O `.painel` deslizava pela
direita com `translateX`; agora e' um quadro central, do mesmo jeito que o
`#gaveta` e a folha de Despesas. O unico uso que restava era a ficha do
cliente (`#painelCliente`, app.js). Cabecalho `.ph` parado, `.pbody` rola.
`dvh` e' o que faz o pe' ficar a' vista no iPhone: `100vh` conta a barra de
endereco e empurra o rodape' para fora da tela. */
.painel{position:fixed;inset:0;margin:auto;height:auto;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);
width:min(940px,96vw);background:var(--bg);border-radius:var(--r-lg);
box-shadow:var(--sombra-lg);z-index:101;transform:none;transition:none;
overflow:hidden;display:none;flex-direction:column}
.painel.aberto,.painel.on{display:flex;transform:none}
.painel .pbody{overflow-y:auto;min-height:0}
.painel .pbody > *{flex-shrink:0}
@media (max-width:767px){
.painel{width:100%;max-height:none;height:100vh;height:100dvh;border-radius:0}
}
/* ============================ toast ============================ */
/* O TOAST TEM QUE FICAR ACIMA DE TUDO — 28/08/2026.
Ele nascia com z-index:200, ABAIXO de .modal-bg (300), .fab-confirma (400) e
.login-bg (1000). Como esses tres cobrem a tela inteira e o .fab-confirma
ainda pinta 92% de opacidade por cima, TODA mensagem levantada com o modal
aberto era desenhada atras dele: invisivel.
O efeito pratico era sempre o mesmo relato — "cliquei em salvar e nao
aconteceu nada". Acontecia: o sistema recusava e explicava o porque, atras
de uma cortina. Ver o caso da Conferencia de Frete (num() em
logistica-cotacao.js). Isto vale para todas as telas com modal. */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
background:var(--preto);color:#fff;padding:12px 22px;border-radius:var(--r-sm);font-size:13.5px;font-weight:600;
opacity:0;pointer-events:none;transition:.25s;z-index:1200;box-shadow:var(--sombra-md);max-width:92vw}
.toast.aberto,.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.ok{background:var(--ok-tx)}
.toast.erro{background:var(--erro)}
/* ============================ formulário ============================ */
.fld{display:flex;flex-direction:column;gap:5px}
.fld label{font-size:11px;font-weight:700;color:var(--ink-2)}
.fld input,.fld select,.fld textarea{padding:9px 11px;border:1px solid var(--borda-forte);
border-radius:var(--r-sm);font-size:13.5px;font-family:var(--fonte);background:var(--superficie);
width:100%;color:var(--ink)}
/* VEM DEPOIS DA REGRA `.fld` DE PROPÓSITO: as duas têm a mesma força (uma
classe + um elemento), então quem vence é quem vem por último. Colocada
antes, a `.fld` reimpunha 13,5px e a fonte não subia — o padding subia e a
fonte não, que foi exatamente o que o teste mostrou. */
/* .busca nasceu como a CAIXA de busca — uma div com um input dentro — e virou
também a classe dos campos das telas novas. Para a div funciona; para um
não: `height:36px` não cabe o texto que o próprio navegador desenha
dentro dele, e ele saía CORTADO na base, difícil de ler (Joel, 26/08/2026 —
apareceu no seletor de item da caixa manual e no de embalagem do fecho).
Campo é campo: altura automática e padding de verdade.
ESCOPO POR ELEMENTO de propósito — a `div.busca` da busca global continua
exatamente como estava, e ela é o único uso como div no portal inteiro. */
input.busca, select.busca, textarea.busca{
height:auto; min-height:40px; padding:9px 12px;
font-size:13.5px; line-height:1.4; font-family:var(--fonte); color:var(--ink)}
select.busca{padding-right:30px}
textarea.busca{min-height:70px; resize:vertical}
input.busca:focus, select.busca:focus, textarea.busca:focus{
outline:none; border-color:var(--azul-claro)}
/* O `min-width:230px` vem da `.busca` lá de cima, que nasceu como a CAIXA de
busca da topbar. Herdado por CAMPO dentro de grade, ele vira piso: a coluna
não consegue encolher e o formulário transborda o quadro. Medido em
01/09/2026, com o CSS real:
Novo lead (modal 720px, 3 colunas) ....... 40 px para fora
Novo orçamento (modal 820px, 5 colunas) .. 224 px para fora — o `×` da
linha de item ficava do lado
de fora da borda
`min-width:0` conserta o modal mas ENCOLHE a busca solta de 230px para 165px
em ~43 telas. `min(230px,100%)` conserta o modal E mantém os 230px onde há
espaço: o piso passa a ser o menor entre 230px e a largura disponível.
Medido: estouro 0px nos dois modais, busca solta continua com 230px. */
input.busca, select.busca, textarea.busca{min-width:min(230px,100%)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--azul-logo);
box-shadow:0 0 0 3px rgba(12,99,164,.12)}
.fld textarea{resize:vertical;min-height:64px}
/* ============================ gráfico de barras simples ============================ */
.barras{display:flex;align-items:stretch;gap:var(--e2);height:180px}
.barra-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;min-width:0}
.barra{width:100%;max-width:46px;background:var(--azul-claro);border-radius:6px 6px 0 0;transition:height .4s;min-height:3px}
.barra.destaque{background:var(--azul-logo)}
.barra-rot{font-size:11px;color:var(--ink-2);white-space:nowrap}
/* ============================ login ============================ */
.login-bg{position:fixed;inset:0;z-index:1000;padding:20px;display:flex;align-items:center;justify-content:center;
background:linear-gradient(120deg,var(--azul-escuro),var(--azul-logo) 55%,var(--azul-claro))}
.login-card{background:var(--superficie);border-radius:var(--r-lg);box-shadow:var(--sombra-lg);
width:100%;max-width:380px;padding:34px 30px;text-align:center;display:flex;flex-direction:column;gap:var(--e3)}
.login-card img{height:52px;margin:0 auto 2px}
.login-card h1{font-size:21px;margin:0;color:var(--preto)}
.login-card .sub{font-size:12.5px;color:var(--ink-2);margin-top:-6px}
.login-card .fld{text-align:left}
.login-card .btn{width:100%;height:46px;margin-top:4px}
.login-erro{background:var(--erro-bg);color:var(--erro-tx);font-size:12.5px;padding:9px 12px;
border-radius:var(--r-sm);display:none}
.login-erro.aberto,.login-erro.on{display:block}
/* ============================ modal ============================ */
.modal-bg{position:fixed;inset:0;background:rgba(16,32,58,.45);z-index:300;display:none;
align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(2px)}
.modal-bg.aberto,.modal-bg.on{display:flex}
.modal{background:var(--superficie);border-radius:var(--r-lg);box-shadow:var(--sombra-lg);
width:100%;max-width:420px;padding:24px;display:flex;flex-direction:column;gap:var(--e3)}
.modal h3{margin:0;font-size:17px}
.modal-acoes{display:flex;justify-content:flex-end;gap:var(--e2);margin-top:4px}
/* MODAL QUE CRESCEU DEMAIS. Quando o formulario passa da altura da janela, o
modal inteiro transborda e os botoes ficam FORA da tela — sem rolagem, nao
ha como chegar neles. Aconteceu em 03/09/2026 no cadastro de usuario, depois
que o campo da carteira entrou.
O conserto: o modal para de crescer (max-height), o MIOLO rola, e a barra de
acoes fica de fora da rolagem, sempre visivel no pe.
`min-height:0` nao e' enfeite: sem ele, filho de flex-column nao encolhe
abaixo do proprio conteudo e a rolagem simplesmente nao acontece. */
.modal.modal-alto{max-height:86vh}
.modal.modal-alto .modal-corpo{flex:1;min-height:0;overflow-y:auto;
display:flex;flex-direction:column;gap:var(--e3);padding-right:4px}
.modal.modal-alto .modal-acoes{flex:0 0 auto;border-top:1px solid var(--borda);
padding-top:12px;margin-top:4px;background:var(--superficie)}
/* ============================ tabbar (celular) ============================ */
.tabbar{display:none}
/* ============================ modo fábrica (apontamento) ============================ */
/* MODO FÁBRICA — claro, no padrão do portal (pedido da reunião de 25/08/2026).
Era escuro para "descansar a vista no galpão", mas destoava de todas as
outras telas e a equipe estranhava. O que o chão de fábrica precisa é
NÚMERO GRANDE e ALVO GRANDE, não fundo preto — e isso continua aqui. */
.modo-fabrica{background:var(--bg);color:var(--ink);min-height:100vh}
/* ---------------------------------------------------------------------------
MODO TV — a doca numa televisão (pedido do Joel, 27/08/2026)
---------------------------------------------------------------------------
A tela de bipar da doca fica numa TV, longe de quem opera. Menu lateral e
barra do topo não servem para nada ali: ninguém navega, só bipa. Some com
os dois e a leitura ganha a tela inteira.
O ESC traz o menu de volta (a tela remove esta classe), para quem precisa
sair sem mouse.
O `!important` é necessário e não é preguiça: `.modo-fabrica` carrega
`margin` e `padding` em ATRIBUTO STYLE, escrito pela tela, e estilo inline
vence qualquer seletor de classe. A alternativa seria tirar o inline de
`expedicao-doca.js` e de `expedicao-acabamento.js`, que compartilham a mesma
marcação — mudança maior, em duas telas em produção, para o mesmo efeito. */
body.modo-tv .sidebar,
body.modo-tv .topbar {display:none}
body.modo-tv .conteudo {max-width:none; padding:0}
body.modo-tv .modo-fabrica{margin:0 !important; padding:22px 26px !important}
/* Na TV a distância de leitura é outra: o campo de bipe e o retorno crescem. */
body.modo-tv .modo-fabrica .page-title{font-size:30px}
body.modo-tv #ed_cod{height:78px !important; font-size:34px !important}
/* A dica do ESC. Discreta, no canto, e some junto com o modo. */
body.modo-tv::after{
content:'ESC mostra o menu';
position:fixed; right:12px; bottom:10px; z-index:60;
font-family:var(--fonte); font-size:11px; letter-spacing:.4px;
color:var(--ink-3); background:var(--superficie);
border:1px solid var(--borda); border-radius:var(--r-pill);
padding:4px 12px; opacity:.85; pointer-events:none}
.modo-fabrica .fab-marca{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.modo-fabrica .fab-marca img{height:26px;width:auto}
.modo-fabrica .btn-primario{background:var(--verde);color:#123006}
.modo-fabrica .btn-grande{height:62px;font-size:17px}
.modo-fabrica .fab-valor{font-size:64px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums;line-height:1}
.modo-fabrica .fab-progresso{height:14px;background:var(--superficie-2);border:1px solid var(--borda);border-radius:var(--r-pill);overflow:hidden}
.modo-fabrica .fab-progresso>span{display:block;height:100%;background:var(--verde);border-radius:var(--r-pill)}
/* O OVERLAY ROLA. Antes era `align-items:center` sem rolagem: modal mais alto
que a tela ficava com o topo e o rodapé fora de alcance, e o botão de
confirmar simplesmente sumia — apareceu ao acrescentar mais de uma linha de
embalagem no fecho da conferência (26/08/2026). `overflow-y:auto` com
`margin:auto` no filho mantém a centralização quando cabe, e passa a rolar
quando não cabe (com `align-items:center` puro o topo fica inacessível). */
.fab-confirma{position:fixed;inset:0;display:none;justify-content:center;
overflow-y:auto;padding:16px;background:rgba(15,23,32,.92);z-index:400}
.fab-confirma.aberto{display:flex}
.fab-confirma > *{margin:auto 0}
/* A BARRA DE BOTÕES GRUDA NO PÉ do modal: mesmo rolando, o "Confirmar" fica
sempre à vista, em vez de obrigar a procurar o fim da lista. */
.fab-confirma .modal{max-height:none}
/* CABEÇALHO DO PAINEL — 27/08/2026.
`.painel-topo` era usada em 5 telas e NÃO EXISTIA no CSS: saía como `div`
comum, `display:block`. O efeito, no painel do faturamento: o botão "Fechar"
caía EMBAIXO do nome do cliente, solto no meio do cabeçalho, e nada separava
o topo do conteúdo — parecia que a tela não tinha saída e que o topo estava
por cima das informações.
Gruda no topo pelo mesmo motivo que `.modal-acoes` gruda no pé: quem rola uma
lista longa de itens não pode perder o caminho de volta. `top:-24px` espelha
o `bottom:-24px` de lá, descontando o padding de 24px do modal. */
.painel-topo{display:flex;align-items:flex-start;justify-content:space-between;
gap:12px;flex-wrap:wrap}
.painel-topo > :first-child{min-width:0}
/* O GRUDAR É SÓ DENTRO DE MODAL, e o escopo aqui não é preciosismo: a mesma
classe é usada em `paineis.js` numa PÁGINA comum, fora de modal. As margens
negativas de -24px existem para cancelar o padding do `.modal`; soltas numa
página elas arrancariam o cabeçalho para fora do contêiner. */
.modal .painel-topo{
position:sticky;top:-24px;z-index:2;background:var(--superficie);
margin:-24px -24px 0;padding:24px 24px 12px;
border-bottom:1px solid var(--borda)}
/* `:last-child` (08/09/2026). A barra gruda no pé com `bottom:-24px` e
`margin-bottom:-24px` — a margem negativa puxa o IRMÃO SEGUINTE 24px para
cima, direto para baixo da barra, que tem fundo opaco e o pinta por cima.
Medido na tela de aprovação: a nota "você está logado como…" tem 18px de
altura e sobravam 6 visíveis. São 8 modais da Expedição com algo depois da
barra. Grudada só quando ela é mesmo o pé do modal; nos outros ela rola
junto, que é feio de menos perto de cobrir texto. */
.fab-confirma .modal > .modal-acoes:last-child{position:sticky;bottom:-24px;z-index:1;
background:var(--superficie);margin:4px -24px -24px;padding:14px 24px 24px}
.fab-check{width:120px;height:120px;border-radius:50%;background:var(--verde);color:#0a2205;
display:flex;align-items:center;justify-content:center;font-size:64px}
/* ============================ RESPONSIVO ============================ */
/* --------------------------------------------------------- RAIL (72px)
A lateral encolhida: só ícone. Vale em DOIS casos —
· iPad (768–1023px), onde 232px de menu comem a tela; e
· por ESCOLHA, no botão da topbar (pedido do Joel, 02/09/2026).
POR QUE A CLASSE E NÃO O @media: com media query as regras teriam de existir
DUAS vezes, uma por largura e outra por classe, e duas definições da mesma
coisa divergem no primeiro ajuste — é a armadilha #12 do CLAUDE.md noutra
roupa. Aqui há UMA definição; quem decide quando ela vale é `aplicarRail()`
no portal.js, que liga a classe sozinho na faixa do iPad e obedece à escolha
da pessoa acima disso. Depender de JS não acrescenta risco: o menu inteiro é
desenhado por JS — sem ele não há lateral nenhuma para encolher. */
.app.rail .sidebar{width:var(--rail-w)}
.app.rail .side-logo{padding:12px 6px}
.app.rail .side-logo .logo-full{display:none}
.app.rail .side-logo .logo-simbolo{display:block;height:34px}
.app.rail .side-grupo{display:none}
.app.rail .side-item{justify-content:center;padding:12px 0;gap:0}
.app.rail .side-item .rot{display:none}
.app.rail .side-item .ic{width:auto}
.app.rail .side-user{padding:10px 6px}
.app.rail .side-user .su-nome{display:none}
.app.rail .side-acao{justify-content:center;padding:0}
.app.rail .side-acao .rot{display:none}
/* O seletor de empresa EMPILHA em vez de sumir. Escondê-lo tiraria a troca
Brascamp/Confio/Ambas de quem está com o menu encolhido — uma função a menos,
calada. Medido em 02/09/2026: empilhado ele ocupa 59px dentro dos 72 do rail,
sem transbordar e sem cortar nenhum dos três rótulos. Vale também para o
iPad, onde ele vinha lado a lado e não cabia. */
.app.rail .emp-sel{flex-direction:column;gap:3px;margin:6px 0 4px}
.app.rail .emp-sel button{padding:6px 2px;font-size:10px;width:100%}
/* Botão que encolhe/expande. Só no desktop: no iPad o rail é obrigatório (não
há o que escolher) e no celular a lateral já é gaveta, com o ☰. */
.rail-btn{display:none;border:none;background:transparent;color:var(--ink-2);
cursor:pointer;padding:5px;border-radius:var(--r-sm);line-height:0;
font-family:var(--fonte);transition:.14s}
.rail-btn:hover{background:var(--superficie-2);color:var(--ink)}
.rail-btn svg{width:20px;height:20px;display:block}
@media (min-width:1024px){ .rail-btn{display:inline-flex;align-items:center} }
/* espelha o ícone quando encolhido: a seta passa a apontar para fora */
.app.rail .rail-btn svg{transform:scaleX(-1)}
/* Celular — a lateral vira MENU DESLIZANTE (drawer), aberto pelo ☰ da topbar.
Mantém a mesma navegação agrupada + ícones; nada de nav perdida. */
@media (max-width:767px){
.app{flex-direction:column}
.menu-btn{display:inline-flex;align-items:center}
.tb-simbolo{display:block}
.sidebar{position:fixed;left:0;top:0;height:100vh;width:min(284px,84vw);z-index:120;
transform:translateX(-100%);transition:transform .25s ease}
.sidebar.aberto{transform:translateX(0);box-shadow:var(--sombra-lg)}
.drawer-overlay{position:fixed;inset:0;background:rgba(16,32,58,.45);z-index:110;display:none}
.drawer-overlay.aberto{display:block}
.side-item{padding:12px 14px;justify-content:flex-start;gap:11px}
.side-item .rot{display:inline}
.side-grupo{display:block}
.topbar{padding:0 var(--pad-pagina);gap:var(--e2)}
.topbar .filtros,.topbar .busca-global{display:none}
.topbar .tb-sync{font-size:11px}
.busca{min-width:0;width:100%;height:44px}
.busca input{font-size:15px}
.btn{height:40px}
.btn-grande{height:48px}
.tabela-scroll{overflow:auto}
}
/* .tabbar existe no sistema mas não é usada no shell atual (drawer no lugar) */
/* ============================================================================
COMPAT — padroniza o markup das PÁGINAS LEGADAS (cobranças/app.js, projeções,
apontamento, análise-produção, admin) com o design system, SEM reescrever o
HTML/JS delas. Carregado depois do style.css → vence os conflitos.
============================================================================ */
/* KPI legado (.kpi .rot/.val/.desc) renderiza IGUAL ao .kpi-rotulo/.kpi-valor/.kpi-nota */
.kpi .rot{font-size:11px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.4px;font-weight:700}
.kpi .val{font-size:21px;font-weight:800;margin-top:3px;color:var(--preto);
letter-spacing:-.4px;white-space:nowrap;font-variant-numeric:tabular-nums}
.kpi .desc{font-size:11px;color:var(--ink-2);margin-top:2px}
/* O título de cartão legado morava aqui, com `.card>h2:first-child` — e o
`:first-child` conta como PESO DE CLASSE: (0,2,1) contra (0,1,1) do padrão
novo, que por isso não conseguia trocar o tamanho nem a cor. Foi a terceira
vez que pseudo-classe como peso mordeu neste projeto (as outras: `:not(.btn)`
no botão primário e no seletor de empresa). Removida em vez de escalar
especificidade: quem manda agora é a abertura de bloco, lá embaixo. */
.card h2 .cnt{background:var(--superficie-2);color:var(--ink-2)}
/* navegação em pílulas legada = mesma cor de marca do .chip.ativo */
.pill-nav button{border-color:var(--borda-forte);color:var(--ink-2)}
.pill-nav button.on{background:var(--azul-logo);border-color:var(--azul-logo);color:#fff}
/* aging bar / barras inline legadas herdam trilho e cor da marca */
.aging-row .barwrap{background:var(--superficie-2)}
/* ---- utilitários que faltavam (substituem estilos inline repetidos) ---- */
.nota{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.nota-fraca{font-size:11px;color:var(--ink-3)}
.form-msg{font-size:13.5px;min-height:18px;margin:6px 0}
.form-msg.ok{color:var(--ok-tx)}
.form-msg.erro{color:var(--erro-tx)}
.form-msg.info{color:var(--ink-2)}
/* `.alerta` era usado em 19 lugares do portal e NÃO existia no CSS — o aviso
saía como texto comum, do mesmo tamanho e cor do resto, e passava batido.
Achado em 28/08/2026 montando a Consulta de bipes. */
.form-msg.alerta{color:var(--alerta-tx)}
/* Linha de conferência dentro de um modal: mostra a conta que o usuário está
montando ANTES de ele confirmar (ex.: "12 caixas de 50 = 600 peças, e faltam
300"). Usa os mesmos tons de estado dos badges — nada de cor nova. */
.aviso-linha{font-size:13.5px;line-height:1.45;border-radius:var(--r-sm);
padding:0;min-height:0;transition:padding .12s ease}
.aviso-linha:empty{display:none}
.aviso-linha.ok{background:var(--ok-bg);color:var(--ok-tx);
border:1px solid var(--ok-tx);padding:9px 12px}
.aviso-linha.alerta{background:var(--alerta-bg);color:var(--alerta-tx);
border:1px solid var(--alerta-tx);padding:9px 12px}
/* ============ COMEX — processos (pagamentos / anexos / avisos) ============ */
.btn-peq{height:30px;padding:0 12px;font-size:13.5px;gap:5px}
/* `.tab-compacta` NÃO encolhe mais o espaçamento — decisão do Joel em
02/09/2026: "pode deixar da forma que está, que o visual fica melhor".
E, na prática, ela já não encolhia: as 129 tabelas que usam a classe TAMBÉM
usam `.tab`, e `table.tab td` (0,1,2) vence `.tab-compacta td` (0,1,1). Era
código morto que enganava — quem lesse acharia que existiam tabelas densas.
O resto da classe continua valendo: campo dentro da célula, alinhamento à
direita e o traço do rodapé. */
.tab-compacta th,.tab-compacta td{vertical-align:middle}
.tab-compacta input,.tab-compacta select{
width:100%;height:32px;padding:0 8px;border:1px solid var(--borda);border-radius:var(--r-sm);
background:var(--superficie);color:var(--ink);font:inherit;font-size:13.5px}
.tab-compacta input:focus,.tab-compacta select:focus{outline:none;border-color:var(--azul-claro)}
.tab-compacta .ta-num{text-align:right;font-variant-numeric:tabular-nums}
.tab-compacta tfoot td{border-top:2px solid var(--borda-forte);font-variant-numeric:tabular-nums}
.lixo{border:none;background:transparent;color:var(--ink-3);font-size:15px;line-height:1;
width:28px;height:28px;border-radius:var(--r-sm);cursor:pointer}
.lixo:hover{background:var(--erro-bg);color:var(--erro)}
.anex-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--borda);
border-radius:var(--r-sm);background:var(--superficie);margin-bottom:6px}
.anex-nome{font-weight:600;color:var(--ink);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.anex-meta{color:var(--ink-3);font-size:12.5px;font-variant-numeric:tabular-nums}
/* AVISO — o quadro amarelo com (!). Era azul e sem símbolo, indistinguível da
nota. Mesmo desenho da nota, outra cor e outro símbolo: quem varre a tela
separa os três sem ler. */
.aviso{display:block;position:relative;
background:var(--aviso-bg);border:1px solid var(--aviso-borda);
border-left:4px solid var(--aviso-tx);border-radius:0 var(--r-sm) var(--r-sm) 0;
padding:11px 14px 11px 40px;margin-top:var(--gap-blocos);
font-size:12.5px;color:var(--ink-2);line-height:1.55}
.aviso::before{content:"!";position:absolute;left:13px;top:12px;
width:17px;height:17px;border-radius:50%;background:var(--aviso-tx);color:#fff;
font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.aviso b{color:var(--ink);font-weight:700}
.aviso:empty{display:none}
/* ALERTA — o quadro vermelho com ⚠. Classe PRÓPRIA (`alerta-cx`) e não `.alerta`:
aquela já é MODIFICADOR em 184 lugares (`.form-msg alerta`, `.kpi alerta`,
`.aviso-linha alerta`), e transformá-la em caixa quebraria os três. */
.alerta-cx{display:block;position:relative;
background:var(--alerta-cx-bg);border:1px solid var(--alerta-cx-borda);
border-left:4px solid var(--alerta-cx-tx);border-radius:0 var(--r-sm) var(--r-sm) 0;
padding:11px 14px 11px 40px;margin-top:var(--gap-blocos);
font-size:12.5px;color:var(--ink-2);line-height:1.55}
.alerta-cx::before{content:"\26A0";position:absolute;left:13px;top:11px;
width:18px;height:18px;border-radius:50%;background:var(--alerta-cx-tx);color:#fff;
font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center}
.alerta-cx b{color:var(--ink);font-weight:700}
.alerta-cx:empty{display:none}
.cust-kpis{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.cust-kpis .ck{background:var(--bg);border:1px solid var(--borda);border-radius:var(--r-sm);
padding:8px 12px;min-width:120px}
.cust-kpis .ck-r{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-3);font-weight:600}
.cust-kpis .ck-v{font-size:15px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;margin-top:2px}
.cust-nota{font-size:12.5px;color:var(--ink-3);margin-top:8px;line-height:1.5}
/* container ao lado do título/invoice + filtros da lista Comex */
.page-title .ic-cont{vertical-align:-3px;margin-right:2px;color:var(--azul-logo)}
.inv-cel{display:inline-flex;align-items:center;gap:7px}
.inv-cel .ic-cont{color:var(--azul-logo);flex:none}
.fl-data{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2)}
.fl-data input{margin:0}
/* Painel Comex nativo — barras por mês, economia, busca mini */
.mes-wrap{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.mes-row{display:flex;align-items:center;gap:10px;font-size:12.5px}
.mes-lab{width:64px;flex:none;color:var(--ink-2);font-variant-numeric:tabular-nums}
.mes-bar{flex:1;height:14px;background:var(--bg);border-radius:7px;overflow:hidden}
.mes-fill{display:block;height:100%;background:var(--azul-logo);border-radius:7px}
.mes-val{width:150px;flex:none;text-align:right;color:var(--ink-3);font-variant-numeric:tabular-nums}
.busca-mini{height:32px;padding:0 10px;border:1px solid var(--borda);border-radius:var(--r-sm);
background:var(--superficie);color:var(--ink);font-size:13.5px;min-width:180px}
.busca-mini:focus{outline:none;border-color:var(--azul-claro)}
.eco-pos{color:#2e7d32;font-weight:700}
.eco-neg{color:var(--erro);font-weight:700}
@media(max-width:900px){.mes-val{width:120px}}
/* ============================ ajuda (i) ============================
Explicação de método/critério não fica mais impressa na tela: vira um
símbolo (i) ao lado do título e abre no modal #ajBg (index.html). Motivo:
no celular esses parágrafos empurravam os números para fora da 1ª tela.
O texto vai dentro de .aj-tx (escondido), não num atributo — assim pode
conter , aspas e acento sem escapar nada.
O modal reaproveita .modal-bg/.modal; aqui só o símbolo, a tipografia do
texto e a largura maior (o .modal padrão é estreito, de formulário). */
.aj{display:inline-flex;vertical-align:middle;margin-left:6px}
.aj-bt{width:24px;height:24px;min-width:24px;border-radius:50%;border:1.5px solid var(--azul-logo);
background:transparent;color:var(--azul-logo);font-weight:700;font-size:13.5px;line-height:1;
font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.aj-bt:hover{background:var(--azul-logo);color:#fff}
.aj-tx{display:none}
#ajCx{max-width:620px;max-height:80vh;overflow:auto}
#ajCx h3{color:var(--azul-logo);margin-bottom:10px}
#ajTxt{font-size:13.5px;line-height:1.65;color:var(--ink-2)}
#ajTxt p{margin:0 0 10px}
#ajTxt p:last-child{margin-bottom:0}
/* ============================================================================
ESPAÇAMENTO VERTICAL — corrige a dupla contagem (25/08/2026)
`.conteudo` é flex-column com `gap:var(--gap-secao)`. Em flex a margem NÃO
colapsa: ela SOMA ao gap. As margens abaixo foram escritas antes de o gap
existir, e desde então todo bloco vinha separado duas vezes.
Medido no navegador, com o CSS real, antes desta correção:
filtros -> corpo .......... 40px (28 de gap + 12 de margin-bottom)
+ .card margin-top ........ 16px
= 56px de vazio entre a linha de abas e o primeiro cartão.
A regra vale só para filho DIRETO de `.conteudo`. Um `.filtros` dentro de um
cartão continua com a margem dele — lá não há gap para somar.
========================================================================== */
/* O título e o que ele titula não são duas seções: 28px entre eles separava o
que deveria vir junto. 16px é o mesmo `--gap-blocos` usado dentro da seção.
Feito com margem NEGATIVA porque `gap` não se ajusta item a item. */
.conteudo > .tier-tabs,
.conteudo > .kpis { margin-bottom:0 }
/* `!important` pelo mesmo motivo das duas regras abaixo: inline vence classe.
O page-head saiu da lista de cima porque aqui a margem nao e' zero — e'
negativa de proposito, para encurtar o `gap` so' depois do titulo. */
/* ---------------------------------------------------------------------------
O TÍTULO DA PÁGINA SAI DO CORPO (02/09/2026, pedido do Joel)
Ele aparecia DUAS vezes: na barra superior e de novo aqui, logo abaixo. Eram
69px (53 do bloco + 16 de vão) gastos com uma informação que já estava na
tela. Medido: o vão da barra até o primeiro dado cai de 189 para 120px.
O que estava DENTRO do bloco além do título — botões, seletores que são ação,
e em 6 telas um botão solto fora de `.page-actions` — é levado para a barra
por `moverAcoes()` (portal.js) ANTES desta regra escondê-lo. Esconder sem
mover apagaria esses botões da tela, calado.
ESCOPO: só filho DIRETO de `.conteudo`. Cinco telas reaproveitam `.page-head`
como cabeçalho de SEÇÃO, dentro de um cartão (Ativos, Compras-Cadastros,
Marketing, Expedição-Peças, Painel Financeiro) — lá ele continua visível e
fazendo o que sempre fez. */
.conteudo > .page-head { display:none }
/* Onde as ações passam a morar. `min-width:0` para o bloco poder encolher
quando o título da barra for longo, e a rolagem lateral em vez de empurrar o
selo de falha de extração para fora da tela. */
.topbar .tb-acoes{display:flex;align-items:center;gap:var(--e2);min-width:0;overflow-x:auto;
scrollbar-width:none}
.topbar .tb-acoes::-webkit-scrollbar{display:none}
.topbar .tb-acoes > *{flex:0 0 auto}
/* dentro da barra os controles são menores: 58px de altura não comportam o
botão de 40px que o corpo da página usa */
.topbar .tb-acoes .btn{height:32px;padding:0 12px;font-size:12.5px}
.topbar .tb-acoes select,.topbar .tb-acoes input{height:32px;font-size:12.5px}
/* !important porque as telas trazem `style="margin-bottom:12px"` no atributo,
e estilo inline vence classe. Trocar isso arquivo por arquivo em ~40 telas
seria a mesma correção repetida 40 vezes, com 40 chances de esquecer uma. */
.conteudo > .filtros { margin-bottom:0 !important }
/* A `.filtro-bar` ficou de fora desta lista quando ela foi escrita e vinha
somando duas vezes como todo o resto somava antes. Medido em 01/09/2026:
page-head -> filtro-bar ....... 24 px
filtro-bar -> kpis ............ 38 px <- 28 de gap + 14 de margem
kpis -> filtros ............... 24 px
`margin` inteira (não só `-bottom`) porque ~20 telas trazem
`style="margin:14px 0 10px"` no atributo, e os 14px de topo somariam do mesmo
jeito. Regra só para filho DIRETO: `.filtro-bar` dentro de cartão continua
com a margem dela, que lá não há gap para somar. */
.conteudo > .filtro-bar { margin:0 !important }
/* `.carimbo-base` tinha `margin:-4px 0 14px` e ficou fora da lista quando ela
foi escrita: o vão carimbo -> filtros media 42px onde todos os outros medem
28. Zerada a margem INTEIRA, quem separa volta a ser so' o `gap`. */
.conteudo > .carimbo-base { margin:0 !important }
/* ---------------------------------------------------------------------------
O RESTO DA MESMA CONTA — quem separa e' o `gap`, ponto (01/09/2026)
As regras acima cobriam bloco por bloco, uma classe de cada vez, e por isso
nunca terminavam: sempre havia um contêiner novo fora da lista. Medido no
navegador, com o CSS real, os vaos de uma tela tipica ANTES desta regra:
page-head -> kpis .................. 24 px
kpis -> filtro-bar ............ 24 px
filtro-bar -> cartao ................ 40 px <- 24 de gap + 16 de margem
cartao -> cartao ................ 40 px <- idem
DENTRO de .secao: cartao -> cartao .. 32 px <- 16 de gap + 16 de margem
DENTRO de .secao: com margem inline . 30 px
.secao -> cartao com inline ..... 36 px
Cinco numeros diferentes para a mesma pergunta. DEPOIS: 24 entre blocos da
pagina e 16 dentro da secao — que sao exatamente `--gap-secao` e
`--gap-blocos` na largura medida (28 e 16 no desktop; a regua ja e'
responsiva, o problema nunca foi o valor).
`.card{margin-top:16px}` (style.css) e' anterior ao `gap` e nao sabe que hoje
quem separa e' o contêiner. Onde ha `gap`, margem nao separa: ela SOMA.
`!important` porque as telas trazem `style="margin-top:12px"` no atributo, e
inline vence classe. Trocar isso arquivo por arquivo seria a mesma correcao
repetida dezenas de vezes.
ESCOPO: so' filho DIRETO de um contêiner que tem `gap` proprio. Cartao dentro
de outra div qualquer continua com a margem dele — la nao ha gap para somar,
e tirar a margem juntaria os dois.
--------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
A REGRA GERAL (03/09/2026) — antes eram 6 listas de classes
A lista abaixo era nominal, e o comentário acima já dizia por quê ela nunca
terminava: sempre aparecia um contêiner novo fora dela. Em 03/09 o Joel
mediu de novo, em cinco telas ao acaso, e o vão "separar dois blocos" dava
QUATRO valores diferentes na mesma página:
bloco -> bloco ............. 24px (só o gap — o certo)
bloco -> caixa de aviso .... 38px (24 de gap + 14 de margem)
subtabs-> cartão ............ 40px (24 de gap + 16 de margem)
caixa -> caixa ............. 34px (24 de gap + 10 de margem inline)
cartão -> cartão sem gap .... 12, 14 ou 16px, conforme quem escreveu
`.aviso`, `.hint` e `.subtabs` ficaram de fora da lista nominal — e é
exatamente onde os 38 e os 40 apareciam.
Por isso a lista virou UMA regra: em contêiner que tem `gap`, NENHUM filho
direto carrega margem vertical. Não é preciso lembrar de cadastrar a classe
nova; ela já nasce certa. É o que faz uma tela futura seguir o padrão sem
ninguém avisar.
`!important` porque as telas trazem `style="margin-top:12px"` no atributo, e
inline vence classe.
ESCOPO: filho DIRETO. Cartão dentro de uma div qualquer continua com a
margem dele — lá não há gap para somar, e zerar juntaria os dois.
--------------------------------------------------------------------------- */
.conteudo > *, .secao > *,
.grid-2 > *, .grid-3 > *, .grid-4 > *, .grid-2-1 > *,
.grid2 > *, .grid2-1 > * {
margin-top:0 !important; margin-bottom:0 !important }
/* CONTÊINER SEM `gap` — aí quem separa é a margem, e ela não pode faltar.
Medido em 03/09/2026, com a regra geral acima já no ar: dentro de uma `div`
comum, `.card` → `.card` dava 16px (a margem do `.card`, que existe desde
sempre) mas `.card` → `.tabela-card` dava **0px** — os dois painéis
encostando, porque `.tabela-card` nunca teve margem própria. Ninguém via
enquanto cada tela escrevia `style="margin-top:14px"` à mão; quando as
margens inline saíram, o vão apareceu.
Mesmo valor de `--gap-blocos`, para que mudar de contêiner não mude o ritmo.
Primeiro filho não leva margem: ali quem separa é o topo do contêiner. */
.card, .tabela-card, .kpis, .secao, .grid-2, .grid-3, .grid-4, .grid-2-1,
.grid2, .grid2-1, .tabela-wrap { margin-top:var(--gap-blocos) }
.card:first-child, .tabela-card:first-child, .kpis:first-child, .secao:first-child,
.grid-2:first-child, .grid-3:first-child, .grid-4:first-child, .grid-2-1:first-child,
.grid2:first-child, .grid2-1:first-child, .tabela-wrap:first-child { margin-top:0 }
/* DUAS CAIXAS SEGUIDAS. `gap` é uniforme e não se ajusta item a item; a única
forma de encurtar UM vão é margem negativa. Fica −12 sobre os 24 do gap: 12.
Nunca zero — o Joel foi explícito: "não encoste os painéis". */
.conteudo > .aviso + .aviso, .conteudo > .aviso + .alerta-cx,
.conteudo > .aviso + .hint, .conteudo > .aviso + .nota, .conteudo > .aviso + .cust-nota,
.conteudo > .alerta-cx + .aviso, .conteudo > .alerta-cx + .alerta-cx,
.conteudo > .alerta-cx + .hint, .conteudo > .alerta-cx + .nota, .conteudo > .alerta-cx + .cust-nota,
.conteudo > .hint + .aviso, .conteudo > .hint + .alerta-cx,
.conteudo > .hint + .hint, .conteudo > .hint + .nota, .conteudo > .hint + .cust-nota,
.conteudo > .nota + .aviso, .conteudo > .nota + .alerta-cx,
.conteudo > .nota + .hint, .conteudo > .nota + .nota, .conteudo > .nota + .cust-nota,
.conteudo > .cust-nota + .aviso, .conteudo > .cust-nota + .alerta-cx,
.conteudo > .cust-nota + .hint, .conteudo > .cust-nota + .nota, .conteudo > .cust-nota + .cust-nota {
margin-top:calc(var(--gap-caixas) - var(--gap-secao)) !important }
/* Primeiro cartão de um bloco não precisa de margem: quem separa é o gap (se
for filho direto) ou o topo do bloco. Entre cartões IRMÃOS a margem continua
valendo — é ela que os separa. */
.conteudo > .card:first-child,
.conteudo > .secao:first-child,
.conteudo > * > .card:first-child,
.conteudo > * > .secao:first-child,
.conteudo > * > .tabela-card:first-child { margin-top:0 }
/* QUADROS LADO A LADO — o `:first-child` acima desalinhava o par (01/09/2026)
Dentro de uma grade de duas colunas, a regra acima zera a margem só do
PRIMEIRO cartão. O segundo mantém os 16px de `.card{margin-top:16px}`
(style.css) e desce sozinho. Medido no navegador, com o CSS real:
topo do cartão esquerdo .... 111,4 px altura 186 px
topo do cartão direito ..... 127,4 px altura 170 px
---------
16 px de degrau
Apareceu em Margem, Análise de Margem, Especiais, Metas, Painel de Amostras e
Painel de Ocorrências — sempre o mesmo 16. Numa grade quem separa é o `gap`;
margem de topo ali não separa nada, só desalinha. Depois desta regra: 0px de
degrau e as duas alturas iguais. */
.grid2 > .card, .grid2 > .tabela-card, .grid2 > .secao,
.grid2-1 > .card, .grid2-1 > .tabela-card, .grid2-1 > .secao,
.grid2especiais > .card, .grid2especiais > .tabela-card, .grid2especiais > .secao,
.grid-2 > .card, .grid-3 > .card, .grid-4 > .card, .grid-2-1 > .card { margin-top:0 }
/* ============================================================================
CAMPO EDITÁVEL DENTRO DE TABELA — moldura padrão (25/08/2026)
O portal estiliza campo em formulário (`.fld input`) e campo em filtro
(`.filtros input`), mas nunca estilizou campo dentro de célula de tabela.
Quem escrevia ` ` ganhava a caixa CRUA do navegador no meio
de uma tabela do portal — borda cinza fina, cantos vivos, altura diferente.
Levantado em 12 telas.
O `:not([class])` é a trava: só pega campo que NÃO declarou classe própria.
Quem já usa `.cel-num`, `.cel-txt` ou qualquer outra continua mandando, e
nada do que já estava certo muda de aparência.
========================================================================== */
table.tab td input:not([class]):not([type=checkbox]):not([type=radio]):not([type=color]),
table.tab td select:not([class]),
table.tab td textarea:not([class]){
border:1.5px solid var(--line,var(--borda));border-radius:6px;padding:4px 6px;
font-size:13.5px;font-family:inherit;background:#fff;color:inherit}
table.tab td input:not([class]):focus,
table.tab td select:not([class]):focus,
table.tab td textarea:not([class]):focus{
border-color:var(--azul-logo);outline:none}
/* Coluna numérica: o alinhamento vem do `.num` do , não de style inline. */
table.tab td.num input:not([class]){text-align:right;font-variant-numeric:tabular-nums}
/* ---------------------------------------------------------------------------
Utilitárias que faltavam (25/08/2026). As telas de Etiquetas e Inventário
usavam .mono, .card-head e .tab-n como se existissem — não existiam, e por
isso saíam sem estilo nenhum. São REGRAS NOVAS, não sobrescrevem nada.
--------------------------------------------------------------------------- */
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.94em}
.card-head{display:flex;align-items:center;gap:10px;padding:11px 14px;
border-bottom:1px solid var(--borda);font-size:13.5px}
.chip .tab-n{display:inline-flex;align-items:center;justify-content:center;
min-width:18px;height:18px;padding:0 5px;border-radius:9px;font-size:11px;
font-weight:800;background:var(--borda);color:var(--ink-2)}
.chip.ativo .tab-n{background:rgba(255,255,255,.26);color:#fff}
/* ---------------------------------------------------------------------------
TABELA LARGA EM TELA ESTREITA (26/08/2026)
MEDIDO ANTES: numa tela de 375px, uma tela com tabela de 14 colunas deixava
o layout com 359px e a PAGINA com 1.229px — 870px vazando para o lado. O
usuario arrastava a pagina inteira (cabecalho e menu junto) para ler a ultima
coluna, e voltava perdido.
POR QUE AQUI E NAO EM CADA TELA: 84 arquivos desenham e so 36
embrulhavam a tabela num container rolavel. Corrigir tela a tela seria 48
alteracoes, cada uma um risco — e a proxima tela nova nasceria com o mesmo
defeito. A regra no cartao vale para todas, inclusive as que ainda nao
existem.
`max-content` no lugar de largura fixa: a tabela ocupa o que precisa e o
CARTAO rola, em vez da pagina.
--------------------------------------------------------------------------- */
@media (max-width:1023px){
.card{overflow-x:auto}
/* `.tabela-wrap` e' a convencao de ~50 telas para embrulhar a tabela — e nunca
teve regra nenhuma no CSS. O seletor `.card > table` nao a alcancava (a
tabela deixa de ser filha DIRETA do cartao), entao justamente as telas que
tentaram fazer certo eram as que nao rolavam. 27/08/2026.
A rolagem continua no CARTAO, de proposito. Por um instante a correcao
obvia parecia ser `.tabela-wrap{overflow:auto}` — mas isso faria o wrapper
virar o contexto de rolagem, e o cabecalho `position:sticky` (linha 258)
pararia de grudar em toda tabela longa: ele passaria a se prender a um
contêiner que nunca rola na vertical. Trocaria um defeito por outro pior.
Seletor de DESCENDENTE, nao de filho: nas ~50 telas o wrapper aparece em
profundidades diferentes (direto no cartao, depois de um `secao-titulo`,
dentro de outra div). `>` pegaria so uma parte delas. */
.card > table,
.card .tabela-wrap > table{min-width:max-content}
}
/* ---------------------------------------------------------------------------
SELECT DENTRO DE .busca — 26/08/2026
`.busca` nasceu como a CAIXA de busca (uma div com input dentro) e por isso
traz `display:inline-flex` e altura fixa. Um nao e' caixa flex:
herdando isso, o texto da opcao aparece CORTADO em altura — foi o que o Joel
viu no campo de condicao do frete ("CIF - Incluir 1,5%").
Escopo por ELEMENTO de proposito: a div.busca da busca global continua igual.
--------------------------------------------------------------------------- */
/* ALTURA IGUAL À DO INPUT — 27/08/2026.
A correcao acima resolveu o corte do texto, mas com `min-height:44px` +
padding vertical: medido, o select ficava com 52px e o input ao lado com 40.
Lado a lado num `grid-3` (Volumes | Tipo de volume | Peso total) a diferenca
de 12px salta aos olhos — foi o que o Joel viu.
`height` fixa no lugar de `min-height` + padding vertical zero: o select
centra o texto sozinho, sem precisar de padding para isso. Medido com o CSS
real: input 40px, select 40px, e "CIF - Incluir 1,5%" continua inteiro. */
select.busca{
display:block; width:100%; box-sizing:border-box;
height:40px; min-height:0; line-height:1.4; padding:0 30px 0 12px;
text-overflow:ellipsis}
/* ==========================================================================
PILL-NAV NO CELULAR (29/08/2026)
O QUE ESTAVA ERRADO: `.pill-nav` é `display:flex` com `gap:6px` e MAIS NADA
— sem `flex-wrap`, sem rolagem, e sem nenhuma media query em arquivo algum.
Item de flex encolhe por padrão, então as 10 abas do Painel Financeiro se
espremiam todas na largura do telefone. Cada uma ainda carrega um subtítulo
em segunda linha, o que dobra a altura e reduz mais a largura útil. Era o
"visualmente difícil de identificar os campos" do Joel.
Atinge 5 telas: financeiro-painel · margem-painel · projecoes ·
expedicao-auditoria · expedicao-cadastros.
A ESCOLHA: faixa que ROLA na horizontal, com as pílulas em tamanho legível,
e não quebra de linha. Dez pílulas de duas linhas empilhadas comeriam meia
tela antes do primeiro número aparecer. Rolagem lateral aqui é o padrão que
o celular já ensina — e é diferente do caso da tabela de preços, onde rolar
para o lado faz perder a referência da linha.
O SUBTÍTULO SAI no celular. Ele é dica, não identificação: "Caixa" já diz o
que é, "Fluxo realizado (DRF)" é o detalhe. Precisa de `!important` porque
o subtítulo vem com `style="display:block"` inline no JS, e inline vence
folha de estilo — sem o `!important` a regra seria ignorada em silêncio.
========================================================================== */
@media (max-width: 760px) {
.pill-nav{
flex-wrap:nowrap;
overflow-x:auto;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
scroll-snap-type:x proximity;
scrollbar-width:none;
padding-bottom:2px;
}
.pill-nav::-webkit-scrollbar{display:none}
.pill-nav button{
flex:0 0 auto;
scroll-snap-align:center;
padding:9px 15px;
font-size:13.5px;
line-height:1.25;
white-space:nowrap;
}
.pill-nav button > span{display:none !important}
/* AS OUTRAS DUAS BARRAS DE ABA, PELO MESMO MOTIVO (31/08/2026).
O conserto de 29/08 arrumou só `.pill-nav`, e o Joel viu no celular que o
Painel de Faturamento continuava com os botões picotados ("Cresci",
"Clien", "Repres", "estad"). O motivo: aquele painel não usa `.pill-nav`,
usa `.subtabs` — que era `display:flex;gap:6px` e MAIS NADA, exatamente o
que a `.pill-nav` era antes. Sem `nowrap` os botões quebram linha e o
texto é cortado pela largura fixa.
`.subtabs` serve Faturamento, DRE e Clientes; `.chips-min` serve outras 12
telas — ela ao menos QUEBRA em vez de cortar, mas vira um paredão de três
linhas no celular. As duas entram na mesma regra de rolagem lateral. */
.subtabs, .chips-min{
flex-wrap:nowrap;
overflow-x:auto;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
scroll-snap-type:x proximity;
scrollbar-width:none;
padding-bottom:2px;
}
.subtabs::-webkit-scrollbar,
.chips-min::-webkit-scrollbar{display:none}
.subtabs > button, .chips-min > button, .chips-min > .chip{
flex:0 0 auto;
scroll-snap-align:center;
white-space:nowrap;
}
/* O botão do subtabs vem com altura/padding de desktop; no celular ele
precisa do mesmo respiro do pill-nav para o texto não encostar na borda. */
.subtabs > button{padding:9px 15px;font-size:13.5px;line-height:1.25}
}
/* ==========================================================================
TABELA EM CARTÕES: DESARMAR O `min-width:max-content` (29/08/2026)
A regra da linha ~718 põe `min-width:max-content` na tabela dentro de
`.tabela-wrap` até 1023px — foi o conserto de 27/08 para as ~50 telas cuja
tabela larga não rolava. Está certa para elas.
Mas ela é justamente o que IMPEDE o padrão de cartões de funcionar: a tabela
continua obrigada a ter a largura do conteúdo, então mesmo virando cartão o
cartão nasce mais largo que a tela e a rolagem lateral volta. Quem opta por
`tab-cards` está dizendo "aqui não rola para o lado" — e precisa desligar a
obrigação de largura.
Vem depois no arquivo de propósito: mesma especificidade, ganha por ordem.
O recorte é 767px, o mesmo em que `despesas.css` transforma a tabela em
cartões — se fossem diferentes haveria uma faixa de largura com metade de
cada desenho.
========================================================================== */
@media (max-width:767px){
.card > table.tab-cards,
.card .tabela-wrap > table.tab-cards{min-width:0}
.tabela-wrap:has(> table.tab-cards){overflow-x:visible}
}
/* No cartão, valor cola na direita — inclusive os que a tabela centralizava.
`.center` é alinhamento de COLUNA: faz sentido numa grade, não num cartão de
duas colunas (rótulo à esquerda, valor à direita). Sem isto, CA, Múlt. e NCM
ficam boiando no meio e o olho não acha a coluna de valores. */
@media (max-width:767px){
table.tab-cards td.center{text-align:right}
}
/* ==========================================================================
O SINO (31/08/2026) — caixa de notificação de quem está logado.
Mora na `.tb-dir` da barra do topo, ao lado do carimbo de sincronização.
A caixa é `position:absolute` ancorada no botão; no celular ela vira quase a
largura da tela, porque 380px numa tela de 375 sairia pela borda — o mesmo
erro que cortou os cartões do painel de estoque.
========================================================================== */
.sino-wrap{position:relative;display:inline-flex;align-items:center;margin-right:10px}
.sino-btn{position:relative;background:none;border:0;color:var(--ink-2);cursor:pointer;
padding:6px;border-radius:10px;display:inline-flex;align-items:center;line-height:0}
.sino-btn:hover{background:var(--bg);color:var(--ink)}
.sino-btn.tem{color:var(--azul-logo)}
.sino-n{position:absolute;top:0;right:0;min-width:17px;height:17px;padding:0 4px;
background:var(--erro);color:#fff;border-radius:9px;font-size:11px;font-weight:800;
display:inline-flex;align-items:center;justify-content:center;line-height:1}
.sino-caixa{display:none;position:absolute;top:calc(100% + 8px);right:0;width:380px;
max-width:calc(100vw - 24px);max-height:min(72vh,560px);overflow:auto;z-index:1200;
background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r);
box-shadow:0 10px 34px rgba(16,32,52,.18)}
.sino-caixa.aberta{display:block}
.sino-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:11px 13px;border-bottom:1px solid var(--borda);position:sticky;top:0;
background:var(--superficie);font-size:13.5px}
.sino-vazio{padding:22px 16px;color:var(--ink-3);font-size:13.5px;text-align:center;line-height:1.5}
.sino-lista{display:flex;flex-direction:column}
.sino-item{padding:11px 13px;border-bottom:1px solid var(--borda);cursor:pointer}
.sino-item:hover{background:var(--bg)}
.sino-item.nova{border-left:3px solid var(--azul-logo);background:var(--bg)}
.sino-item-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.sino-quando{font-size:11px;color:var(--ink-3)}
.sino-titulo{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35}
.sino-corpo{font-size:12.5px;color:var(--ink-2);margin-top:3px;line-height:1.4}
@media (max-width: 760px){
/* NO CELULAR A CAIXA PRENDE-SE À TELA, NÃO AO BOTÃO.
Medido a 375px: ancorada no botão (`position:absolute; right:-6px`) ela
saía 87px pela ESQUERDA — a largura cabia, a posição não. Onde o botão
está na barra muda com o título e com o carimbo de sincronização, então
ancorar nele é frágil por construção. `fixed` com as duas bordas presas
não depende de nada disso. */
.sino-caixa{
position:fixed;
top:calc(var(--topbar-h, 56px) + 6px);
left:10px; right:10px;
width:auto; max-width:none;
max-height:min(70vh,520px);
}
}
/* ============================================================================
PAINEL DE MARGEM — faixa de aviso com a MESMA altura nas duas empresas
(01/09/2026)
Cada empresa era um item da grade, com aviso e corpo dentro. O texto do aviso
muda de tamanho com o número (Brascamp quebrava em 3 linhas, Confio em 2), e
as duas caixas saíam de alturas diferentes — junto com os KPIs de baixo.
Aqui a grade é chapada: título, aviso e corpo são itens soltos, com
`grid-column`/`grid-row` explícitos (montados em `colunasComAviso()`). Os dois
avisos dividem a MESMA linha e, com `align-items:stretch`, saem com a altura
do maior.
Abaixo de 860px vira uma coluna só; aí quem manda é o `order` que a função
escreve em cada célula, para os três blocos de uma empresa não saírem
intercalados com os da outra.
========================================================================== */
.mgp-grade{display:grid;grid-template-columns:repeat(var(--mgp-cols,2),minmax(0,1fr));
gap:10px 16px;align-items:stretch}
.mgp-cel{min-width:0;display:flex;flex-direction:column}
/* o aviso estica até o fim da célula: é isso que iguala as duas caixas */
.mgp-aviso{flex:1;padding:10px 12px;border-radius:var(--r-sm);line-height:1.5;font-size:13.5px}
@media(max-width:860px){
.mgp-grade{grid-template-columns:1fr}
.mgp-grade > .mgp-cel{grid-column:1 !important;grid-row:auto !important}
.mgp-aviso{flex:0 1 auto}
}
/* ============================================================================
TABELA SOLTA GANHA A MOLDURA DE CARTÃO (01/09/2026)
`.secao` é só `flex-column` com `gap` — não tem fundo. Quem escreveu
` …
` pôs a tabela direto
sobre o cinza da página. Foi o "quadro sem fundo" de Representantes e Áreas
(consertado tela a tela), e voltou em Marketing — Cadastros.
AQUI A CORREÇÃO É NO CSS, não nas telas. A auditoria estrutural achou o
mesmo desenho em ~18 arquivos (Marketing, Ativos, Compras, Admin, Etiquetas,
Expedição): editar um por um é a mesma correção repetida 18 vezes, com 18
chances de esquecer uma — e a 19ª tela nasceria errada de novo.
`>` de propósito: só pega o wrapper que é filho DIRETO de `.secao` ou de
`.conteudo`, isto é, o que NÃO tem cartão em volta. Wrapper dentro de
`.card`, de `.tabela-card` ou de modal não é alcançado e continua exatamente
como está.
POR QUE NÃO LEVA `padding`: quem dá o respiro interno é o `th`/`td` da
tabela (`--pad-linha`), como já acontece na `.tabela-card`. Padding aqui
criaria uma faixa branca dupla.
O `overflow:hidden` é o que faz a primeira e a última linha respeitarem o
canto arredondado. A rolagem horizontal não se perde: `.tabela-wrap` já tem
`overflow-x:auto` (style.css:72), e `overflow-x` declarado vence o `hidden`
do atalho porque vem depois na cascata — conferido no navegador.
========================================================================== */
.secao > .tabela-wrap,
.conteudo > .tabela-wrap{
background:var(--superficie);border:1px solid var(--borda);
border-radius:var(--r);box-shadow:var(--sombra);overflow:hidden;overflow-x:auto}
@media (max-width:1023px){
/* Paridade com a tabela DENTRO de cartão (regra de 27/08): sem isto a tabela
solta espreme as colunas em vez de rolar, e o defeito some da vista sem
ter sido resolvido. */
.secao > .tabela-wrap > table,
.conteudo > .tabela-wrap > table{min-width:max-content}
}
/* ============================================================================
BALÃO DO (i) — a prévia no passar do mouse (01/09/2026)
Regra do Joel: passar o mouse mostra; clicar abre sobreposto. O clique já
abria o modal (`#ajBg`, com "Entendi", fecha no fundo e no Esc); faltava a
prévia.
Mora no `body`, não dentro do `.aj` — dentro dele qualquer ancestral com
`overflow` o cortaria (`.card{overflow-x:auto}` abaixo de 1023px, a
`.tabela-wrap`, a `.rank-scroll`), e o corte é SILENCIOSO: o balão some
naquela tela e não há erro para investigar.
`max-height` com desvanecimento: a prévia é isca, não substituta. Quem
quiser o texto inteiro clica — e o rodapé do balão diz isso.
========================================================================== */
.aj-tip{position:fixed;z-index:1150;width:min(380px,86vw);max-height:210px;overflow:hidden;
background:var(--preto);color:#fff;border-radius:var(--r-sm);padding:11px 13px 26px;
box-shadow:var(--sombra-lg);font-size:12.5px;line-height:1.55;
opacity:0;pointer-events:none;transition:opacity .12s;left:-9999px;top:-9999px}
.aj-tip.on{opacity:1}
.aj-tip-tit{font-weight:800;font-size:12.5px;margin-bottom:5px;color:#fff}
.aj-tip-tx{color:#dfe7f0}
.aj-tip-tx p{margin:0 0 7px}
.aj-tip-tx p:last-child{margin-bottom:0}
.aj-tip-tx b{color:#fff}
/* a faixa de baixo cobre o corte do texto e diz o que fazer para ver o resto */
.aj-tip-mais{position:absolute;left:0;right:0;bottom:0;padding:14px 13px 7px;
font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--azul-claro);
background:linear-gradient(to bottom,rgba(4,4,4,0) 0%,var(--preto) 55%)}
/* ---------------------------------------------------------------------------
NOTA NO PÉ DE UM `.tabela-card` (01/09/2026)
`.cust-nota` traz só `margin-top` — nenhum padding. Como último filho de um
`.tabela-card` (que não tem padding próprio e é `overflow:hidden`), o texto
encostava na borda esquerda e na de baixo: era o "texto cortado embaixo da
tabela" da Nova invoice.
O respiro horizontal é o mesmo do `.tabela-topo` (`--e5`), para a nota
alinhar com o título do cartão em vez de flutuar 20px à esquerda dele.
--------------------------------------------------------------------------- */
/* REGRA MORTA desde que a nota virou QUADRO (§24.32) — mantida aqui só como
registro. `.tabela-card > .hint` é (0,2,0), a mesma especificidade de
`.conteudo .hint`, e perdia por vir ANTES no arquivo. Quem a lesse
procurando ajustar a nota do rodapé de tabela mexeria no lugar errado.
Removida em 03/09/2026. */
/* ---------------------------------------------------------------------------
BLOCO RECOLHÍVEL (01/09/2026)
Para o texto longo que NÃO pode virar símbolo (i) porque outra parte da tela
se refere a ele pela posição — o caso dos "Pressupostos desta projeção", que
a tabela abaixo cita como "o motivo nos pressupostos ACIMA". Mandá-lo para um
modal tornaria aquela frase falsa.
`/` nativo: sem JavaScript, com teclado e leitor de tela
funcionando de graça. Fechado por padrão — eram 9 itens ocupando meia tela.
--------------------------------------------------------------------------- */
.bloco-recolhivel > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px}
.bloco-recolhivel > summary::-webkit-details-marker{display:none}
.bloco-recolhivel > summary h2{margin:0}
/* a seta é desenhada aqui para girar na abertura; a nativa não se estiliza */
.bloco-recolhivel > summary::before{content:'';width:0;height:0;flex:none;
border-left:6px solid var(--azul-logo);border-top:5px solid transparent;
border-bottom:5px solid transparent;transition:transform .15s}
.bloco-recolhivel[open] > summary::before{transform:rotate(90deg)}
.bloco-recolhivel > summary:hover h2{color:var(--azul-logo)}
.bloco-recolhivel-n{margin-left:auto;font-size:11px;font-weight:700;color:var(--ink-3);
text-transform:uppercase;letter-spacing:.04em}
/* ============================================================================
DIREÇÃO A — MANCHETE E FAIXA (01/09/2026, aprovada pelo Joel)
O problema: um painel da diretoria abria com 8 a 12 cartões `.kpi` do mesmo
tamanho, mesmo peso e mesmo número de linhas. O olho percorria todos porque
nada dizia por onde começar, e a pergunta que a diretoria faz — "como
estamos?" — não tinha resposta em lugar nenhum da faixa.
`.destaques` é a manchete: 3 números grandes, os que respondem aquela
pergunta. `.faixa` é o resto — **nada foi removido**, foi hierarquizado.
Quem precisa do detalhe continua achando tudo, numa linha que se lê de
relance em vez de doze cartões que competem entre si.
A `.faixa` usa borda entre células, não `gap`: sem o vão, doze valores lado a
lado leem-se como uma régua contínua, e é assim que se compara número com
número. Cartão separado convida a ler um de cada vez.
========================================================================== */
.destaques{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--gap-blocos)}
.destaque{
background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r-lg);
padding:20px 22px 18px;display:flex;flex-direction:column;gap:3px;min-width:0;
position:relative;overflow:hidden;box-shadow:var(--sombra)}
/* a barra é pseudo-elemento, não `border-left`: assim ela vai de canto a canto
do raio maior (--r-lg) sem o corte que a borda deixa na quina */
.destaque::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--azul-logo)}
.destaque.ok::before{background:var(--verde)}
.destaque.info::before{background:var(--azul-claro)}
.destaque.alerta::before{background:var(--alerta)}
.destaque.erro::before{background:var(--erro)}
/* ARMADILHA, A SEGUNDA VEZ. `.erro` (mais acima) e' caixa de MENSAGEM:
`background:var(--erro-bg)` e `text-align:center`. Todo componente que usa
`erro` como MODIFICADOR a herda sem querer — aconteceu no `.kpi` e agora no
`.destaque`, que saiu com o numero centralizado enquanto os irmaos ao lado
ficavam a esquerda.
Enquanto os dois nomes forem o mesmo, todo componente novo com modificador
`erro` precisa desta linha. A saida definitiva e' renomear a caixa de
mensagem (`.msg-erro`) — fica anotado como divida, porque `.erro` aparece
em dezenas de telas e a troca pede varredura propria. */
.destaque.erro{background:var(--superficie);text-align:left}
.destaque .rot{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
.destaque .val{font-size:clamp(28px,3.4vw,38px);font-weight:800;letter-spacing:-.035em;line-height:1.06;
color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.destaque .sub{font-size:12.5px;color:var(--ink-2)}
/* o selo de variação — só onde existe período anterior de verdade */
.destaque .delta{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;margin-top:6px;
font-size:12.5px;font-weight:700;padding:2px 9px;border-radius:var(--r-pill);font-variant-numeric:tabular-nums}
.destaque .delta.pos{background:var(--ok-bg);color:var(--ok-tx)}
.destaque .delta.neg{background:var(--erro-bg);color:var(--erro-tx)}
.destaque .delta.neutro{background:var(--superficie-2);color:var(--ink-2)}
.faixa{background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r);
box-shadow:var(--sombra);display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
overflow:hidden}
.faixa > div{padding:12px 16px;border-right:1px solid var(--borda);border-bottom:1px solid var(--borda);
display:flex;flex-direction:column;gap:1px;min-width:0}
.faixa > div:last-child{border-right:0}
.faixa .f-rot{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.faixa .f-val{font-size:17px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.faixa .f-val.aten{color:var(--erro-tx)}
.faixa .f-val.bom{color:var(--ok-tx)}
@media (max-width:640px){ .faixa > div{border-right:0} }
/* ============================================================================
INÍCIO DE TABELA — um formato só (01/09/2026)
Havia TRÊS paddings para a mesma coisa, e por isso o cabeçalho começava a
distâncias diferentes da borda do cartão conforme a tela:
table.tab th ........ 9px 20px (--pad-linha)
th sem classe ....... 9px 10px (style.css, 58 tabelas)
.tab-compacta th .... 5px 6px (nunca valeu: ver a nota da classe)
Cor e borda já eram as mesmas — os tokens `--cinza-*` do style.css são apelido
de `--ink-2` e `--borda`. O que destoava era só o recuo, e é o recuo que o
olho usa para achar onde a coluna começa.
Agora são DOIS formatos, e os dois de propósito: o normal e o compacto. A
tabela compacta continua compacta na VERTICAL (é para isso que ela existe) e
ganha respiro na horizontal, para o cabeçalho não encostar na borda.
`font-weight` declarado: sem ele o `th` vale o padrão do navegador, que hoje
coincide com 700 mas não é promessa de ninguém.
========================================================================== */
th{padding:var(--pad-linha);color:var(--ink-2);font-weight:700;
border-bottom:2px solid var(--borda);background:var(--superficie)}
td{padding:var(--pad-linha)}
/* ---------------------------------------------------------------------------
`.full` NUM BOTÃO não fazia nada (01/09/2026)
Existia só `.fld.full{grid-column:1/-1}`, que vale para campo de formulário.
Seis botões em três telas (Amostras, Especiais ×4, Ocorrências) foram
escritos como `class="btn btn-primario full"` esperando ocupar a largura toda
e nunca ocuparam — o mesmo tipo de defeito do `btn-primario` que não ficava
azul: o código pedia, o CSS ignorava, e nada avisava.
--------------------------------------------------------------------------- */
.btn.full{width:100%}
/* ---------------------------------------------------------------------------
RODAPÉ DE ABA — a mesma forma em todo painel (01/09/2026)
Toda aba de painel termina dizendo O QUE ELA MEDE e DE ONDE VEM. Antes isso
variava de 0 a 20 notas por aba no Painel Financeiro: Diretoria e Estoque não
tinham nenhuma, Bancos tinha vinte espalhadas pelo meio.
Fica separado do conteúdo por uma linha, não por um cartão: o rodapé é
metadado do que está acima, não mais um bloco a ler. Texto fraco e pequeno
pelo mesmo motivo — quem procura por ele acha, quem não procura não tropeça.
--------------------------------------------------------------------------- */
.rodape-aba{
margin-top:var(--gap-secao);padding-top:14px;border-top:1px solid var(--borda);
font-size:var(--fs-2,12.5px);line-height:1.6;color:var(--ink-2)}
.rodape-aba b{color:var(--ink)}
.rodape-fonte{display:block;margin-top:3px;color:var(--ink-3)}
.rodape-aba code{
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.94em;
background:var(--superficie-2);border:1px solid var(--borda);border-radius:5px;padding:1px 5px}
/* ---------------------------------------------------------------------------
CONTROLE SEGMENTADO NA BARRA DO TÍTULO — regressão minha (01/09/2026)
A regra `.page-actions button:not(.btn):not(.chip)` que escrevi hoje tem
especificidade (0,3,1) e passou a vencer `.emp-toggle button` (0,1,1), que
até então ganhava por vir depois na cascata. O par Brascamp/Confio deixou de
ser um controle segmentado e virou dois botões brancos soltos — e o grupo
ficou com **54px** de altura ao lado de botões de **36px**.
Consertado com a mesma força (0,3,1) e depois na cascata, e já alinhado à
altura do `.btn`: numa linha de ações, o que quebra o alinhamento é uma peça
de altura diferente, não a cor dela.
--------------------------------------------------------------------------- */
.page-actions .emp-toggle{height:36px;padding:3px;align-items:stretch;
background:var(--superficie-2);border:1px solid var(--borda-forte);border-radius:var(--r-sm)}
/* `:not(.btn)` NAO e decoracao: e peso. `.page-actions button:not(.btn):not(.chip)`
vale (0,3,1) — cada `:not` conta como o seletor de dentro. Sem o terceiro
componente aqui a regra fica em (0,2,1) e PERDE, que foi o que aconteceu na
primeira tentativa: altura consertada, moldura e cor ainda vindo da outra. */
.page-actions .emp-toggle button:not(.btn){height:100%;padding:0 14px;border:0;background:transparent;
box-shadow:none;border-radius:6px;font-size:var(--fs-3,13.5px);font-weight:700;
color:var(--ink-2);font-family:var(--fonte);cursor:pointer;white-space:nowrap}
.page-actions .emp-toggle button:not(.btn):hover{color:var(--ink)}
.page-actions .emp-toggle button:not(.btn).on{background:var(--superficie);color:var(--azul-logo);
box-shadow:var(--sombra)}
/* ============================================================================
ABERTURA DE BLOCO E RODAPÉ EXPLICATIVO — padrão do sistema (02/09/2026)
Pedido do Joel: toda abertura de tabela com destaque azul da marca e texto em
negrito; todo rodapé que explica ou adverte num quadro destacado.
Escolhas dele: título "opção B" (marcador quadrado + fio azul embaixo, SEM
fundo), tamanho ÚNICO em caixa alta miúda, e rodapé "opção 2" (barra + ícone)
com fundo AZUL claro — no primeiro pedido era amarelo; ele trocou ao ver as
opções, e azul casa com o título.
POR QUE POR POSIÇÃO, E NÃO POR NOME DE CLASSE: `.rotulo` aparece 358 vezes e
`.hint` 327, mas 85 dos rótulos estão dentro de `` e 55 das dicas também
— são rótulo miúdo de célula, não abertura de bloco. Pintar por nome viraria
caixinha azul dentro de tabela. Por isso todo seletor abaixo exige um PAI
(`.card`, `.tabela-topo`, `.conteudo`) ou a posição de último filho.
========================================================================== */
/* ---- abertura de bloco ---------------------------------------------------
Um tamanho só: 11px em caixa alta. Antes convivia o rótulo miúdo (11px) e o
título de cartão (15px) fazendo o mesmo papel. */
/* ---------------------------------------------------------------------------
TÍTULO NO MEIO DO CARTÃO PRECISA DE AR EM CIMA (08/09/2026)
Medido no Cadastro & Crédito: o "Sócios" encostava — 0px — no campo acima.
`.card > h2` traz `margin:0 0 16px`: ar EMBAIXO, nada em cima. Enquanto o
título é o primeiro filho ninguém vê; a partir do segundo, ele gruda no que
veio antes. São 90 títulos assim no portal, e outros 21 onde a tela
compensou à mão — com 8, 12 ou 14px, três valores para a mesma pergunta.
24 em cima e 16 embaixo, de propósito: um título tem de ficar MAIS PERTO do
que ele titula do que do bloco anterior. Simétrico, ele parece pertencer
igualmente aos dois — e aí não organiza nada.
--------------------------------------------------------------------------- */
.card > h2:not(:first-child), .card > h3:not(:first-child),
.card > .sec:not(:first-child), .card > .rotulo:not(:first-child),
.tabela-card > h2:not(:first-child), .tabela-card > h3:not(:first-child),
.tabela-card > .sec:not(:first-child){ margin-top:var(--gap-secao) }
.card > h2, .card > h3, .card > .sec, .card > .rotulo,
.tabela-card > h2, .tabela-card > .rotulo,
.tabela-topo > h3, .tabela-topo > .rotulo,
/* `.secao-titulo` em QUALQUER profundidade: ela nasceu como "título de seção" e
é isso que quer dizer, esteja onde estiver. Listar os pais deixava de fora,
por exemplo, o "Retrato contábil do período" do Painel Financeiro, que mora
dentro do corpo da aba (`#finConteudo`) — e o Joel viu como índices sem
destaque. Modal fica de fora, mais abaixo: lá é título de diálogo. */
.secao-titulo{
/* `display:block`, NUNCA flex. Com flex, cada trecho de texto e cada
dentro do título vira um item separado, e um título com marcação inline se
desmancha em palavras espalhadas. Aconteceu na Análise de Logística, onde
um `.rotulo` de cartão carrega um parágrafo inteiro: virou coluna de
palavras, ilegível. O marcador é inline-block, e não muda o fluxo. */
display:block;
font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
color:var(--azul-logo);
/* 16px e não 12: com o cabeçalho de coluna virando faixa azul sólida
(§24.33), 12px deixavam o título, o fio e a faixa quase colados — o Joel
pediu para "padronizar o distanciamento da primeira linha nessa e todas as
tabelas". 16px é o mesmo `--gap-blocos` usado entre blocos irmãos. */
margin:0 0 16px;padding:0 0 8px;
border-bottom:2px solid rgba(12,99,164,.22)}
.card > h2::before, .card > h3::before, .card > .sec::before, .card > .rotulo::before,
.tabela-card > h2::before, .tabela-card > .rotulo::before,
.tabela-topo > h3::before, .tabela-topo > .rotulo::before,
.secao-titulo::before{
content:"";display:inline-block;vertical-align:middle;
width:7px;height:7px;border-radius:2px;background:var(--azul-logo);
margin-right:8px;margin-top:-2px}
/* Título que divide a linha com outra coisa — os botões em `.secao-topo`
(`.acoes` tem `margin-left:auto`), a contagem em `.tabela-topo`. Ali o fio
ficaria com a largura do TEXTO, e não do bloco: ele sai do título e vai para
a linha inteira. */
/* ---------------------------------------------------------------------------
AR ACIMA DO TÍTULO DE SEÇÃO — e a lição de onde esta regra NÃO pode morar.
Mesmo caso do título de cartão (§24.56): `margin:0 0 16px` dá ar embaixo e
nada em cima; dentro de um contêiner sem `gap` (o `#aud_corpo` da Auditoria)
o título encostava com 0px na tabela.
EM 08/09 EU ESCREVI ESTA REGRA NO LUGAR ERRADO: entre o último seletor da
lista de abertura e o `.secao-titulo` que a fechava. Com isso a lista passou
a terminar em `.secao-titulo:not(:first-child)` e a receber
`margin-top` — todo `.card > h2` e todo `.tabela-topo > h3` do portal ganhou
28px de margem e PERDEU a formatação de abertura (o caixa alta, o azul, o
fio). Num `.tabela-topo`, que é flex centrado, a margem ainda empurrava o
título para baixo e deixava a contagem flutuando acima dele. Foi o que o
Joel viu em nove telas da Logística.
A lição, e é irmã da vírgula sobrando (§24.31): **uma lista de seletores
quebrada em várias linhas não tem fim visível.** Inserir "antes do próximo
seletor" é inserir DENTRO da lista. Regra nova vai depois do `}` — nunca
entre duas linhas de uma lista.
--------------------------------------------------------------------------- */
.secao-titulo:not(:first-child){margin-top:var(--gap-secao)}
.secao-topo > .secao-titulo,
.tabela-topo > h3, .tabela-topo > .rotulo{border-bottom:0;padding-bottom:0;margin-bottom:0}
.secao-topo:has(> .secao-titulo){border-bottom:2px solid rgba(12,99,164,.22);
padding-bottom:8px;margin-bottom:16px}
.tabela-topo:has(> h3),.tabela-topo:has(> .rotulo){border-bottom:2px solid rgba(12,99,164,.22)}
/* Título de modal é título de DIÁLOGO, não abertura de tabela: fica como está. */
.modal .card > h2, .modal .card > h3, .modal > h2, .modal .secao-titulo{
display:block;font-size:17px;font-weight:800;letter-spacing:normal;
text-transform:none;color:var(--ink);border-bottom:0;padding:0;margin:0 0 12px}
.modal .card > h2::before, .modal .card > h3::before, .modal .secao-titulo::before{content:none}
/* ---- rodapé explicativo --------------------------------------------------
Quadro azul claro com barra e ícone. Vale para a nota que FECHA um cartão ou
a página — nunca para dica dentro de célula, que não é filho direto. */
/* ---- quem é NOTA, por exclusão ---------------------------------------------
A primeira versão listava os PAIS permitidos (`.card >`, `.conteudo >`…), e
isso deixava de fora toda nota aninhada — as que moram em `#ap_corpo`,
`#cl_corpo`, `#fc_corpo` e afins, que são a maioria nas telas de operação.
Invertido: a nota vale em qualquer lugar do conteúdo, e as posições onde a
classe é só "texto pequeno e cinza" saem por exclusão. A lista de exceções é
CURTA E CONHECIDA (célula, campo, modal, KPI, legenda); a de inclusão nunca
terminava. */
.conteudo .cust-nota, .conteudo .hint, .conteudo .nota, .conteudo .nota-fraca, .rodape-aba{
display:block;position:relative;
background:var(--nota-bg);
border:1px solid var(--nota-borda);border-left:4px solid var(--nota-tx);
border-radius:0 var(--r-sm) var(--r-sm) 0;
padding:11px 14px 11px 40px;margin-top:var(--gap-blocos);
font-size:12.5px;color:var(--ink-2);line-height:1.55}
.conteudo .cust-nota::before, .conteudo .hint::before,
.conteudo .nota::before, .conteudo .nota-fraca::before, .rodape-aba::before{
content:"i";position:absolute;left:13px;top:12px;
width:17px;height:17px;border-radius:50%;
background:var(--nota-tx);color:#fff;font-size:11px;font-weight:800;
display:flex;align-items:center;justify-content:center}
.conteudo .cust-nota b, .conteudo .hint b,
.conteudo .nota b, .conteudo .nota-fraca b, .rodape-aba b{color:var(--ink);font-weight:700}
/* AS EXCEÇÕES — aqui a classe só empresta o tamanho e a cor do texto:
célula de tabela, campo de formulário, modal, KPI, legenda, rótulo, chip e
qualquer uma que traga `display:flex` na linha (legenda de gráfico). */
/* `.conteudo` na frente das exceções POR ELEMENTO: `td .hint` é (0,1,1) e
perde para `.conteudo .hint`, que é (0,2,0) — duas classes vencem uma classe
e um elemento. Com o prefixo vira (0,2,1) e ganha. As exceções por CLASSE
(`.fld`, `.kpi`, `.legenda-gr`) já empatavam e ganhavam por vir depois. */
.conteudo td .cust-nota, .conteudo td .hint, .conteudo td .nota, .conteudo td .nota-fraca,
.conteudo th .hint, .conteudo th .nota, .conteudo tr .hint, .conteudo tr .nota,
.fld .hint, .fld .nota, .fld .nota-fraca,
.kpi .hint, .kpi .nota, .modal .hint, .modal .nota, .modal .nota-fraca, .modal .cust-nota,
.filtros .hint, .filtros .nota, .filtro-bar .hint, .filtro-bar .nota,
.conteudo label .hint, .conteudo label .nota, .badge .hint, .selo .hint, .legenda .hint, .legenda-gr .hint,
.chip .hint, .page-actions .hint, .page-actions .nota, .tb-acoes .hint, .tb-acoes .nota,
/* CAIXA DENTRO DE CAIXA (03/09/2026, apontamento do Joel: "quando tem 2 avisos
no mesmo local, está ficando quadro sobreposto, com 2 cores, sempre separar").
Um `hint` dentro de um `aviso` desenhava um quadro AZUL dentro do quadro
ÂMBAR: duas molduras, duas cores, e a impressão de dois recados quando havia
um só. Aqui a de dentro vira texto corrido — a de fora já é o recipiente.
Onde os dois recados são MESMO distintos, a separação é no HTML (dois blocos
irmãos), não aqui; foi o que se fez nas duas telas de Margem.
Fora desta lista de propósito: `.nota .aviso`, `.nota .alerta-cx` e
`.cust-nota .alerta-cx`. Achatar um alerta vermelho dentro de uma nota azul
o rebaixaria de degrau — some o quadro que PEDE AÇÃO. Esse caso não existe
hoje no portal (varrido com pilha de tags), e se aparecer tem de gritar. */
.aviso .hint, .aviso .nota, .aviso .nota-fraca, .aviso .cust-nota,
.alerta-cx .hint, .alerta-cx .nota, .alerta-cx .nota-fraca, .alerta-cx .cust-nota,
.cust-nota .hint, .cust-nota .nota, .cust-nota .nota-fraca, .cust-nota .cust-nota,
.nota .hint, .nota .nota, .nota .nota-fraca, .nota .cust-nota,
.hint .hint, .hint .nota, .hint .nota-fraca, .hint .cust-nota,
.rodape-aba .hint, .rodape-aba .nota, .rodape-aba .nota-fraca, .rodape-aba .cust-nota,
/* Componentes de RANKING: ali o `hint` carrega um número, não uma explicação.
O "75% · R$ 1.098.520" saía dentro de um quadro azul com ícone de informação. */
.bar-row .hint, .bar-val .hint, .mv-item .hint, .rank-linha .hint, .rank-scroll .hint,
.hint[style*="display:flex"], .nota[style*="display:flex"],
.hint[style*="display:grid"], .nota[style*="display:grid"]{
display:inline;position:static;background:none;border:0;border-radius:0;
padding:0;margin-top:0;color:var(--ink-3);font-size:12.5px;line-height:1.45}
/* ---------------------------------------------------------------------------
DENTRO DA CÉLULA CONTINUA SENDO BLOCO (09/09/2026)
Apontamento do Joel na lista de Cadastro & Crédito: "melhorar a forma que
aparece o nome, 2x em cima um do outro, colocar espaço". Saía
"BARBARA OLIVEIRA MARTINS MGMELISSA" — razão social e nome fantasia colados,
sem um espaço sequer.
O HTML estava certo: `
razão social fantasia
`,
um
justamente para virar a segunda linha. Quem desmanchava era a MINHA
regra de exceção (§24.53): ela põe `display:inline` para a nota dentro de
célula não virar quadro — e com isso o
perde a quebra de linha.
O `display:inline` faz sentido para
, que é inline por natureza. Para
um , que foi escrito como bloco de propósito, ele mente. Aqui o
elemento manda: `div` volta a ser bloco. Especificidade (0,2,2) contra
(0,2,1) da exceção.
São 34 lugares em 16 telas, todos com a mesma intenção de duas linhas.
--------------------------------------------------------------------------- */
.conteudo td div.cust-nota, .conteudo td div.hint,
.conteudo td div.nota, .conteudo td div.nota-fraca,
.conteudo th div.hint, .conteudo th div.nota,
.conteudo tr div.hint, .conteudo tr div.nota{
display:block;margin-top:2px;line-height:1.35}
/* ---------------------------------------------------------------------------
A CLASSE NA PRÓPRIA CÉLULA (08/09/2026, apontamento do Joel: "verificar a
diferença de números na página e cores entre eles")
A lista de exceções acima trata a nota DENTRO de uma célula. Mas
`.conteudo tr .hint` também casa com a nota que É a célula — `
` — e ali `display:inline` DESMANCHA a célula: ela perde os 20px de
respiro, encolhe (89px contra 137 das vizinhas) e o número desalinha da
coluna. Foi o que o Joel viu na coluna "Acumulado" do cronograma bancário.
São 99 células assim, em 22 telas. Escritas de propósito: quem pôs a classe
queria uma COLUNA SECUNDÁRIA. Então é isso que ela passa a significar — só o
tom muda, a célula continua célula. Especificidade (0,2,1) para vencer
`.conteudo tr .hint`, que também é (0,2,1) e vem antes.
--------------------------------------------------------------------------- */
.conteudo td.cust-nota, .conteudo td.hint, .conteudo td.nota, .conteudo td.nota-fraca,
.conteudo th.cust-nota, .conteudo th.hint, .conteudo th.nota, .conteudo th.nota-fraca{
display:table-cell;padding:var(--pad-linha);margin:0;
background:none;border:0;border-bottom:1px solid var(--borda);
color:var(--ink-3);font-size:inherit;line-height:inherit}
.conteudo th.cust-nota, .conteudo th.hint, .conteudo th.nota, .conteudo th.nota-fraca{
border-bottom:0}
.conteudo td.cust-nota::before, .conteudo td.hint::before, .conteudo td.nota::before,
.conteudo td.nota-fraca::before, .conteudo th.hint::before, .conteudo th.nota::before{content:none}
.conteudo td .cust-nota::before, .conteudo td .hint::before,
.conteudo td .nota::before, .conteudo td .nota-fraca::before,
.conteudo th .hint::before, .conteudo th .nota::before,
.conteudo tr .hint::before, .conteudo tr .nota::before,
.fld .hint::before, .fld .nota::before, .fld .nota-fraca::before,
.kpi .hint::before, .kpi .nota::before,
.modal .hint::before, .modal .nota::before, .modal .nota-fraca::before, .modal .cust-nota::before,
.filtros .hint::before, .filtros .nota::before, .filtro-bar .hint::before, .filtro-bar .nota::before,
.conteudo label .hint::before, .conteudo label .nota::before,
.badge .hint::before, .selo .hint::before,
.legenda .hint::before, .legenda-gr .hint::before, .chip .hint::before,
.page-actions .hint::before, .page-actions .nota::before,
.tb-acoes .hint::before, .tb-acoes .nota::before,
.aviso .hint::before, .aviso .nota::before, .aviso .nota-fraca::before, .aviso .cust-nota::before,
.alerta-cx .hint::before, .alerta-cx .nota::before, .alerta-cx .nota-fraca::before, .alerta-cx .cust-nota::before,
.cust-nota .hint::before, .cust-nota .nota::before, .cust-nota .nota-fraca::before, .cust-nota .cust-nota::before,
.nota .hint::before, .nota .nota::before, .nota .nota-fraca::before, .nota .cust-nota::before,
.hint .hint::before, .hint .nota::before, .hint .nota-fraca::before, .hint .cust-nota::before,
.rodape-aba .hint::before, .rodape-aba .nota::before, .rodape-aba .nota-fraca::before, .rodape-aba .cust-nota::before,
.bar-row .hint::before, .bar-val .hint::before, .mv-item .hint::before,
.rank-linha .hint::before, .rank-scroll .hint::before,
.hint[style*="display:flex"]::before, .nota[style*="display:flex"]::before,
.hint[style*="display:grid"]::before, .nota[style*="display:grid"]::before{content:none}
/* nota vazia continua sem desenhar quadro */
.conteudo .cust-nota:empty, .conteudo .hint:empty,
.conteudo .nota:empty, .conteudo .nota-fraca:empty, .rodape-aba:empty{display:none}
/* ---- contagem ao lado do título NÃO é um segundo título -------------------
`
Certificados 27 de
27 `: os dois são filhos diretos, e os dois casavam com a regra
de abertura — saíam DOIS marcadores e DOIS fios na mesma linha. Só o primeiro
é abertura; o que vem depois é contagem ou complemento. */
.tabela-topo > h3 ~ .rotulo,
.tabela-card > h2 ~ .rotulo,
.card > h2 ~ .rotulo, .card > h3 ~ .rotulo, .card > .sec ~ .rotulo,
.secao-topo > .secao-titulo ~ .rotulo,
.conteudo > .secao-titulo ~ .rotulo{
display:inline-flex;align-items:center;
font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
color:var(--ink-3);border-bottom:0;padding:0;margin:0}
.tabela-topo > h3 ~ .rotulo::before,
.tabela-card > h2 ~ .rotulo::before,
.card > h2 ~ .rotulo::before, .card > h3 ~ .rotulo::before, .card > .sec ~ .rotulo::before,
.secao-topo > .secao-titulo ~ .rotulo::before,
.conteudo > .secao-titulo ~ .rotulo::before{content:none}
/* ============================================================================
CABEÇALHO DE COLUNA — azul da marca, texto branco, altura igual em TODA
tabela (02/09/2026, pedido do Joel).
Havia QUATRO definições de altura competindo: `table.tab th` e o `th` geral
(ambas `--pad-linha`, 9px 20px), `.tab-compacta th` em dois lugares (5px 6px
e 5px 12px) e o `th` do style.css (9px 10px). A altura passa a sair de um
lugar só.
SÓ O VERTICAL É PADRONIZADO. O respiro HORIZONTAL tem de continuar igual ao
da célula da mesma tabela — se o cabeçalho usasse 20px e o corpo 12px, a
coluna do título sairia deslocada da coluna do dado. Por isso `padding-block`
e não `padding`.
========================================================================== */
th, table.tab th{
background:var(--azul-logo);color:#fff;
padding-block:9px; /* a altura, uma vez só */
border-bottom:0;
font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
white-space:nowrap}
/* a coluna ordenável muda de tom, não de cor do texto: no azul, escurecer a
letra a apagaria */
table.tab th:hover{color:#fff;background:var(--azul-escuro)}
/* cantos do cabeçalho acompanham o cartão quando a tabela abre o bloco */
.tabela-scroll > table.tab > thead > tr > th:first-child{border-top-left-radius:var(--r-sm)}
.tabela-scroll > table.tab > thead > tr > th:last-child{border-top-right-radius:var(--r-sm)}
/* ============================================================================
SELO DE EMPRESA (02/09/2026, pedido do Joel)
Cada painel escrevia o nome da empresa do seu jeito: `cabEmpresa()` no
Faturamento e no DRE com `#7048e8` ROXO fixo no código, `.secao-titulo` no
Painel Financeiro, `` no Painel Margem. Quatro desenhos para a mesma
pergunta — "de qual empresa é este bloco?".
Agora é um selo só. Confio em LARANJA, como o Joel pediu; Brascamp no azul da
marca. O tom do texto é mais escuro que o do fundo de propósito: laranja
claro com texto laranja claro não se lê.
========================================================================== */
.selo-emp{display:inline-flex;align-items:center;gap:6px;
font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
padding:4px 11px;border-radius:var(--r-pill);margin:0 0 8px;
/* SÓLIDO, não tingido. A primeira versão era fundo claro + texto escuro, e o
Joel leu o da Confio como VERMELHO duas vezes. Medido: o tom escuro que o
contraste exige (#a85408) É laranja — matiz 28,5°, e vermelho fica abaixo
de 15° — mas escuro demais para a cor se anunciar. Nos laranjas vivos o
texto cai para 3,7:1 sobre fundo claro, abaixo do mínimo de 4,5:1.
Sólido resolve os dois lados: a cor ocupa a área inteira e se anuncia, e o
texto branco tem contraste de sobra. `#b85608` tem 92% de saturação e 26,6°
de matiz — laranja sem dúvida — e dá 4,8:1 com branco. */
background:var(--azul-logo);color:#fff;border:1px solid transparent;
align-self:flex-start;width:fit-content}
.selo-emp::before{content:"";width:7px;height:7px;border-radius:50%;
background:#fff;flex:none;opacity:.85}
.selo-emp.confio{background:#b85608}
/* ---- as duas empresas lado a lado: mesma altura ---------------------------
Pedido do Joel: "sempre vendo na mesma linha, mesmo que sobre espaço em
branco". Sem isto, o cartão da Confio com uma linha a mais de texto
empurrava a linha inteira e os dois blocos deixavam de casar. */
.emp-par{display:grid;gap:var(--gap-blocos);align-items:stretch}
.emp-par > *{min-width:0;display:flex;flex-direction:column}
/* dentro de cada empresa, os KPIs de uma mesma faixa terminam juntos */
.emp-par .kpis{grid-auto-rows:1fr}
.emp-par .kpi{height:100%}
/* ---- tabela solta ganha o cartão branco ------------------------------------
`.tabela-wrap` é a convenção de ~50 telas para embrulhar a tabela. Quando ela
está DENTRO de um `.card`, o cartão já dá o fundo; solta na página, a tabela
ficava direto sobre o cinza — foi o "quadro sem fundo branco" que o Joel viu
na Auditoria da Expedição, nos Cadastros da Expedição e na Aferição. */
.conteudo > .tabela-wrap, .secao > .tabela-wrap, .conteudo > .tabela-scroll{
background:var(--superficie);border:1px solid var(--borda);
border-radius:var(--r);box-shadow:var(--sombra);overflow:auto}
/* ---- lista de chips ocupa a própria linha ----------------------------------
No Saldo por Banco os 15 bancos viram uma fila de chips dentro de um `.fgrp`.
Na mesma linha dos campos de mês, ela montava por cima deles — o rótulo
"Banco" caía sobre o campo "até". Uma lista dessas é sempre larga: linha
própria. */
.filtro-bar .fgrp:has(> .chips-min){flex:1 1 100%}
/* ============================================================================
LEGENDA DE GRÁFICO — na BASE, com desenho e cor (02/09/2026, pedido do Joel:
"nesse e em todos os gráficos")
Antes a legenda do Comercial era texto no TÍTULO ("barra: venda · traço: meta
· ponto: 2025"): quem olhava o gráfico tinha de subir os olhos e traduzir
palavra em forma. Aqui o desenho é o mesmo do gráfico — retângulo para barra,
traço interrompido para meta, bolinha para o ano anterior — na cor de cada um.
========================================================================== */
.legenda-gr{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
margin-top:10px;font-size:11px;font-weight:600;color:var(--ink-2)}
.legenda-gr > span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.legenda-gr i{flex:none;display:inline-block}
.legenda-gr i.barra{width:11px;height:11px;border-radius:2px}
.legenda-gr i.traco{width:17px;height:0;border-top:2px dashed currentColor;
/* a cor do traço vem do `color` do , escrito na linha pelo gráfico */}
.legenda-gr i.ponto{width:9px;height:9px;border-radius:50%}
/* Classe do cliente (A/B/C) na curva ABC. Era uma LETRA solta colorida antes do
nome — pequena demais para servir de marcador e fácil de confundir com o
texto. Vira selo redondo: mesma cor, forma que se acha correndo o olho. */
.selo-classe{display:inline-flex;align-items:center;justify-content:center;
width:19px;height:19px;border-radius:50%;flex:none;
font-size:10.5px;font-weight:800;line-height:1;
color:var(--cc,var(--ink-3));
/* reserva para navegador sem `color-mix`: o selo ainda se lê, só sem o tom */
background:var(--superficie-2);border:1px solid var(--borda-forte);
background:color-mix(in srgb,var(--cc,#8695a8) 14%,transparent);
border-color:color-mix(in srgb,var(--cc,#8695a8) 38%,transparent)}
/* Linha de VALORES sob um título ("R$ 16.791.556 de R$ 20.495.789 · Jan—Set").
Ela usava `.nota nota-fraca` e por isso virou quadro amarelo com ícone (i) —
o Joel viu e disse certo: "não é informação, é valores". Nota explica; isto
mostra número. Classe própria, e o quadro não a alcança. */
.linha-valor{font-size:12.5px;color:var(--ink-2);line-height:1.45;
font-variant-numeric:tabular-nums}
.linha-valor b{color:var(--ink);font-weight:700}
/* ---------------------------------------------------------------------------
FICHA — rótulo e valor de um campo SÓ DE LEITURA (08/09/2026)
Apontamento do Joel no Cadastro & Crédito: "melhorar a disposição dos dados
depois dos títulos, está junto e dificultando a leitura". E estava mesmo —
saía "Razão socialDistribuidora Marinos Ferramentas...", sem respiro nenhum.
A causa não era um valor errado de espaçamento: a classe `.det-i` era usada
em 8 lugares e **não existia em CSS nenhum**. `` e `` são inline;
sem regra, o navegador encosta um no outro. Em `clientes.js` o mesmo bloco
nem classe tinha — um `` pelado dentro da grade.
Isto é um campo de leitura, não um KPI (que é número grande) e não um `.fld`
(que é campo de formulário, com input). Faltava o terceiro. Rótulo em cima,
pequeno e em caixa alta — o mesmo tratamento de `th` e `.kpi-rotulo`, para
ser a MESMA linguagem —, valor embaixo, no corpo do texto.
Empilhado, e não lado a lado, porque os valores aqui variam de "PEQUENO" a
uma razão social de 60 caracteres: lado a lado, o rótulo ou o valor quebra.
O número de colunas é uma ESCADA, não `auto-fit`. Medido: com `auto-fit` e
mínimo de 240px, a tela de 1690px do Joel abre SEIS colunas, e a razão
social — 60 caracteres — quebra em quatro linhas. Quatro é o teto: acima
disso o campo fica mais estreito do que o dado que ele carrega.
A coluna precisa de mais folga que a linha (24 contra 14). Com o mesmo vão
nos dois eixos o olho junta o par da esquerda com o da direita e lê na
diagonal, que é justamente a queixa de "está junto".
--------------------------------------------------------------------------- */
.dados-grade{display:grid;grid-template-columns:1fr;gap:14px 24px}
@media(min-width:560px) {.dados-grade{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px) {.dados-grade{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1360px){.dados-grade{grid-template-columns:repeat(4,1fr)}}
.dados-grade .larga{grid-column:1/-1}
.dado{min-width:0}
.dado > span{display:block;font-size:var(--fs-1);font-weight:700;letter-spacing:.4px;
text-transform:uppercase;color:var(--ink-3);line-height:1.3;margin-bottom:3px}
.dado > b{display:block;font-size:var(--fs-3);font-weight:600;color:var(--ink);
line-height:1.4;overflow-wrap:anywhere}
/* Valor ausente não deve pesar como valor presente: o travessão fica no tom do
rótulo, senão "—" compete com o dado de verdade na varredura da coluna. */
.dado > b:empty::before{content:"—"}
/* marcas que faltavam na legenda de gráfico: linha cheia e faixa de período */
.legenda-gr i.linha{width:17px;height:0;border-top:2px solid currentColor}
.legenda-gr i.faixa{width:15px;height:11px;border-radius:2px;
background:color-mix(in srgb,var(--azul-logo) 12%,transparent);
border:1px solid color-mix(in srgb,var(--azul-logo) 26%,transparent)}
/* O mapa por estado do Comercial mora agora no bloco `.mapa-uf*`, junto com o
do Faturamento — um desenho só para os dois. O que havia aqui (a grade de
quadrados, e depois o segundo mapa) saiu. */
/* ---- linha de ranking (nome · barra · valor) -------------------------------
Havia QUATRO grades diferentes para a mesma linha, em quatro gráficos do
Comercial: 150/1.6fr/190, 170/1.7fr/160, 180/1.8fr/170 e 200/2fr/200. Por
isso as barras começavam em posições distintas de um gráfico para o outro —
foi o "gráficos desalinhados entre si, não iniciando na mesma origem" que o
Joel apontou. Uma definição só: a coluna do nome comporta o mais longo, e a
do valor comporta "R$ 4.083.363 · 8,6%". */
.rank-linha{display:grid;grid-template-columns:minmax(190px,1.8fr) 1fr minmax(190px,auto);
gap:12px;align-items:center}
/* ---- rótulo que ABRE um bloco dentro do formulário -------------------------
"Mudança de consumo de item (engenharia)" tinha o mesmo `.lbl` de "Opcionais
/ acabamentos", e as duas listas pareciam uma só. Este separa: fio em cima,
caixa alta e a cor da marca. */
.lbl-secao{display:block;margin:16px 0 8px;padding-top:12px;
border-top:1px solid var(--borda);
font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
color:var(--azul-logo)}
/* Botão dentro de `.fld`: o `.fld` é coluna flex, e o botão esticava na largura
inteira da célula — no Formação Especial o "Buscar" e o "Sem cadastro" viravam
duas barras enormes e sem destaque. `align-self` devolve a largura do texto. */
.fld > .btn{align-self:flex-start}
/* Duas fileiras de botões de recorte na MESMA linha. Elas ocupavam duas linhas
inteiras com um vão entre elas — "perdendo muito espaço visual" (Joel). */
.linha-abas{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.linha-abas > *{margin:0}
/* complemento fraco dentro de um rótulo de filtro (as datas do recorte) */
.rot-fraco{font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink-3)}
/* ---- nota VAZIA não desenha quadro -----------------------------------------
Várias telas deixam um `
` vazio no HTML e o preenchem
depois (`#cli_extra` na Formação Especial é um). Enquanto está vazio, o
quadro amarelo aparecia sozinho, com o ícone (i) solto no canto e nenhum
texto — foi o que o Joel viu. Só some quando não há nada dentro; assim que a
tela escreve, o quadro volta. */
.cust-nota:empty, .rodape-aba:empty,
.card > .hint:empty, .card > .nota:empty, .card > .nota-fraca:empty,
.secao > .hint:empty, .secao > .nota:empty, .secao > .nota-fraca:empty,
.tabela-card > .cust-nota:empty, .tabela-card > .hint:empty, .tabela-card > .nota:empty,
.conteudo > .hint:empty, .conteudo > .nota:empty, .conteudo > .nota-fraca:empty{display:none}
/* ---- campo solto dentro do cartão respira como as linhas duplas ------------
`.frow` (duas colunas) traz `margin-bottom:12px`; o `.fld` solto não trazia
nada. Na Formação Especial o rótulo "Cor do item" encostava no campo "Item"
logo acima, enquanto as demais linhas tinham folga — duas distâncias para a
mesma coisa. */
/* 16px e não 12: com 12 o rótulo da linha seguinte quase encostava no campo de
cima — "espaço entre as linhas comendo títulos" (Joel, Nova ficha técnica).
O `.frow` acompanha, para as duas formas de linha terem a mesma folga. */
.card > .fld{margin-bottom:16px}
.frow{margin-bottom:16px}
/* ---- cartão que só embrulha uma nota ---------------------------------------
Cinco lugares tinham um `.card` branco cujo ÚNICO conteúdo era a nota — e
depois que a nota virou quadro (§24.32), virou quadro dentro de quadro. Foi o
"aviso em 2 quadros" que o Joel apontou em Matérias-primas, Classificação de
clientes e Cadastros do Financeiro.
O cartão perde o cromo em vez de sair do HTML: a nota PRECISA continuar sendo
filha direta dele para casar com a regra do quadro. Tirar o `
` deixaria
a nota solta num contêiner qualquer (`#cl_corpo`, `#fc_corpo`) e ela voltaria
a ser texto cinza — trocaria um defeito por outro. */
.card.card-nota{background:none;border:0;box-shadow:none;padding:0}
/* ============================================================================
LEITURA EXECUTIVA — cartão de leitura para a diretoria (02/09/2026)
Pedido do Joel: "algo visual mais agradável e de fácil entendimento da
diretoria e conselho". O desenho põe o NÚMERO primeiro, a cor vem do que o
número diz (a faixa está no `abaAcoes()` do faturamento-painel.js, não aqui),
e a ação sai do meio do texto para uma linha própria.
SEM QUADRO AMARELO DENTRO: o cartão já é o recipiente, e a nota amarela ali
dentro virava quadro dentro de quadro. Aqui a leitura é texto puro.
========================================================================== */
.le{background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r);
box-shadow:var(--sombra);padding:15px 17px 15px 19px;position:relative;overflow:hidden}
.le::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c)}
.le-topo{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.le-estado{display:inline-flex;align-items:center;gap:5px;
font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
padding:3px 9px;border-radius:var(--r-pill);color:var(--c);
background:var(--superficie-2);border:1px solid var(--borda-forte);
background:color-mix(in srgb,var(--c) 12%,transparent);
border-color:color-mix(in srgb,var(--c) 30%,transparent)}
.le-assunto{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
color:var(--ink-3);margin-left:auto}
.le-num{font-size:30px;font-weight:800;line-height:1.05;color:var(--c);
letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.le-oque{font-size:12.5px;color:var(--ink-2);margin:1px 0 9px}
.le-leitura{font-size:12.5px;color:var(--ink);line-height:1.55}
.le-acao{display:flex;gap:9px;align-items:flex-start;margin-top:11px;padding-top:10px;
border-top:1px dashed var(--borda-forte);font-size:12.5px;color:var(--ink-2);line-height:1.5}
.le-acao .tag{flex:none;font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
color:var(--azul-logo);background:rgba(12,99,164,.10);border-radius:4px;padding:2px 7px;margin-top:1px}
/* ============================================================================
MAPA POR ESTADO — desenho compartilhado (03/09/2026)
Estava injetado dentro do `faturamento-painel.js`, e por isso só existia
quando aquela tela abria. O Joel escolheu ESTE mapa como padrão ("o do
faturamento está visualmente melhor de identificação") e pediu o mesmo
arranjo: mapa e tabela LADO A LADO no mesmo cartão — "unificou tudo em um
único campo". O mapa diz ONDE, a tabela diz QUANTO; um sem o outro obriga a
adivinhar metade.
Os contornos vêm de `js/br-uf-paths.js`, que já servia o Faturamento.
========================================================================== */
.mapa-uf{flex:0 1 300px;max-width:380px;min-width:200px}
.mapa-uf svg{width:100%;height:auto;overflow:visible;display:block}
.mapa-uf path{stroke:var(--superficie);stroke-width:1.1;cursor:pointer;transition:opacity .1s}
.mapa-uf path:hover{opacity:.75;stroke:var(--ink);stroke-width:1.4}
.mapa-uf-leg{display:flex;align-items:center;gap:8px;margin-top:10px;
font-size:11px;color:var(--ink-3);flex-wrap:wrap}
.mapa-uf-leg i{flex:1 1 60px;height:9px;border-radius:5px;
background:linear-gradient(90deg,#deebf6,var(--azul-logo))}
.mapa-uf-zero{flex-basis:100%}
.mapa-uf-linha{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;padding:14px 16px}
.mapa-uf-tab{flex:1 1 340px;min-width:0;overflow:auto;max-width:100%}
/* Ao lado do mapa a tabela tem metade da coluna. O respiro padrão de
`table.tab` é 20px de cada lado: em quatro colunas são 160px só de folga, e a
coluna da barra era espremida até zero — barra presente no HTML e invisível
na tela. Aqui ela anda apertada de propósito. */
.mapa-uf-tab table.tab th,.mapa-uf-tab table.tab td{padding:6px 9px}
.mapa-uf-tab .bar-track{height:10px;min-width:40px}
/* Linha de subtotal dentro de uma tabela agrupada (região, família, grupo).
Estava como style inline no Faturamento; virou classe para o Comercial usar
a MESMA cor — dois cinzas ligeiramente diferentes lado a lado leem como erro. */
.tab tr.linha-grupo>td{background:var(--superficie-2)}
#mapa-uf-tip{position:fixed;pointer-events:none;z-index:9999;display:none;
background:var(--superficie);border:1px solid var(--borda);
border-radius:var(--r-sm);padding:7px 10px;font-size:12.5px;line-height:1.5;
box-shadow:var(--sombra-md)}
@media(max-width:900px){.mapa-uf{flex-basis:100%;max-width:none}}
/* ---------------------------------------------------------------------------
INÍCIO — a primeira tela é um resumo, não um menu (10/09/2026, §24.73)
Cartão por módulo; nos três que a diretoria olha primeiro, um número vivo.
--------------------------------------------------------------------------- */
.ini-saud{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.ini-titulo{margin:0;font-size:24px;font-weight:800;letter-spacing:-.01em}
.ini-data{color:var(--ink-3);font-size:13px}
.ini-rot{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
display:flex;align-items:baseline;gap:10px}
.ini-dica{font-weight:600;letter-spacing:0;text-transform:none;font-size:11.5px;color:var(--ink-3)}
.ini-chips{display:flex;gap:8px;flex-wrap:wrap}
.ini-chip{display:inline-flex;align-items:center;gap:7px;background:var(--superficie);border:1px solid var(--borda);
border-radius:999px;padding:6px 12px 6px 9px;font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;transition:.12s}
.ini-chip:hover{border-color:var(--azul-logo);text-decoration:none}
.ini-chip .st{font-size:12px;color:var(--alerta)}.ini-chip.rec .st{color:var(--ink-3)}
.ini-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.ini-tile{display:flex;flex-direction:column;gap:2px;background:var(--superficie);border:1px solid var(--borda);
border-radius:var(--r-md,10px);padding:13px 14px 12px;color:var(--ink);text-decoration:none;min-height:96px;transition:.12s}
.ini-tile:hover{border-color:var(--azul-logo);box-shadow:var(--sombra-md,0 2px 10px rgba(22,35,58,.08));text-decoration:none}
.ini-tile .h{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px}
.ini-tile .h .ic{font-size:17px}.ini-tile .h .c{margin-left:auto;font-size:11px;font-weight:700;color:var(--ink-3)}
.ini-tile .v{font-size:24px;font-weight:800;line-height:1.15;margin-top:6px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ini-tile.sem .v{color:var(--ink-3)}
.ini-tile .l{font-size:12px;color:var(--ink-3);line-height:1.35}
.ini-tile .e{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;font-size:11.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ini-tile .e i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle;background:var(--azul-logo)}
.ini-tile .e i.confio{background:#ee7203}
.ini-tile.num{min-height:118px}
/* ============================================================================
§24.75 PADRÃO VISUAL ÚNICO — a etapa de CSS (10/09/2026)
A auditoria de 133 telas mediu a mesma pergunta respondida de vários jeitos:
6 alturas de botão, 9 mecanismos de filtro, 9 jeitos de "número em
destaque", 84 tabelas sem classe, zero `:focus-visible`. Esta etapa não toca
tela nenhuma: cria os NOMES únicos, dá foco de teclado, e faz as classes
legadas VESTIREM o padrão (alias) até a varredura trocá-las. Única mudança
visível, decidida pelo Joel: `.filtros` passa a ter o desenho do
`.filtro-bar` (fundo, borda, altura de campo).
Ordem da cascata: style.css → brascamp-ui.css → menu.css → despesas.css →
comercial.css. O que o comercial.css redefine (`.tier`, `.sec`, `.lbl`,
`.legenda`) fica para a varredura; aqui só entra o que vence por
especificidade ou por não ter concorrente.
============================================================================ */
:root{
/* laranja da Confio, um só (eram 4 hex) */
--confio:#ee7203; --confio-tx:#b85608;
/* paleta de SÉRIE (identidade), separada da de ESTADO (semáforo): sem verde,
vermelho ou âmbar puros — esses respondem "que estado é este?" */
--serie-1:var(--azul-logo); --serie-2:#7048e8; --serie-3:#0ca678; --serie-4:#c2255c;
--serie-5:#4c6ef5; --serie-6:var(--ink-3); --serie-passado:#8ea3b9;
--linha-h:38px; --th-h:34px; --aba-fio:2px;
}
/* ---- foco de teclado: antes, zero `:focus-visible` em 3.022 linhas ---- */
.btn:focus-visible,.chip:focus-visible,.aba:focus-visible,.seg > button:focus-visible,.tier:focus-visible,
.subtabs .subtab:focus-visible,.pill-nav button:focus-visible,.emp-toggle button:focus-visible,
.tipo-tabs button:focus-visible,.btn-mini:focus-visible,.btn-pdf:focus-visible,.side-item:focus-visible,
.entrada:focus-visible,input.busca:focus-visible,select.busca:focus-visible,textarea.busca:focus-visible,
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible,
.filtro-bar input:focus-visible,.filtro-bar select:focus-visible,.filtros input:focus-visible,.filtros select:focus-visible,
table.tab th[onclick]:focus-visible,.tabela-topo .acoes button:focus-visible{
outline:2px solid var(--azul-claro);outline-offset:2px}
/* ---- estados do botão: toque de 1px, "carregando" contra o clique duplo ---- */
.btn:active:not(:disabled){transform:translateY(1px)}
.btn.carregando{pointer-events:none;opacity:.75}
.btn.carregando::before{content:"";width:13px;height:13px;flex:none;border:2px solid currentColor;
border-right-color:transparent;border-radius:50%;animation:btn-gira .7s linear infinite}
@keyframes btn-gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
.btn,.chip,.aba,.seg > button,.btn-mini,.btn-pdf{transition:none}
.btn:active:not(:disabled){transform:none}
.btn.carregando::before{animation:none;border-right-color:currentColor;opacity:.5}
}
/* ---- botões laterais vestem a família: .btn-mini = fantasma pequeno (77 usos),
.btn-pdf = secundário (era verde, único no portal) ---- */
.btn-mini{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:30px;padding:0 10px;
border-radius:var(--r-sm);font-size:12.5px;font-weight:700;font-family:var(--fonte);color:var(--ink-2);
background:transparent;border:1px solid transparent;cursor:pointer;transition:.14s;white-space:nowrap;line-height:1}
.btn-mini:hover{background:var(--superficie-2);color:var(--ink)}
.btn-pdf{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 16px;
border-radius:var(--r-sm);font-size:13.5px;font-weight:700;font-family:var(--fonte);
background:var(--superficie);color:var(--azul-logo);border:1px solid var(--borda-forte);
cursor:pointer;transition:.14s;white-space:nowrap;line-height:1}
.btn-pdf:hover{background:var(--bg);border-color:var(--azul-claro);filter:none}
.btn-cheio{width:100%}
.btn-ic{width:36px;padding:0}
.btn-ic.btn-peq{width:30px}
/* ---- contagem no título: `.qtd` (o `.cnt` do Comercial veste o mesmo) ---- */
.qtd,.card h2 .cnt,.card h3 .cnt,.tabela-topo h3 .cnt,.secao-titulo .cnt{display:inline-block;font-size:11px;
font-weight:700;letter-spacing:0;text-transform:none;background:var(--superficie-2);color:var(--ink-2);
padding:1px 7px;border-radius:var(--r-pill);margin-left:6px;vertical-align:middle;line-height:1.5}
/* ---- ABAS: trocar de visão = fio inferior, nunca pílula. `.subtabs` e
`.pill-nav` (12 telas) vestem o desenho; `.tier-tabs` fica com a cor
por assunto até a varredura ---- */
.abas,.subtabs,.pill-nav{display:flex;gap:2px;border-bottom:2px solid var(--borda);overflow-x:auto;
margin:0;padding:0;background:transparent;scrollbar-width:none}
.aba,.subtabs .subtab,.pill-nav button{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;
border:0;border-bottom:var(--aba-fio) solid transparent;margin-bottom:-2px;border-radius:0;
background:transparent;box-shadow:none;font-family:var(--fonte);font-size:13.5px;font-weight:700;
color:var(--ink-2);cursor:pointer;white-space:nowrap;transition:color .12s,border-color .12s}
.aba:hover,.subtabs .subtab:hover,.pill-nav button:hover{color:var(--ink);background:transparent}
.aba.ativa,.aba.ativo,.aba.on,.subtabs .subtab.on,.subtabs .subtab.ativo,.pill-nav button.on,.pill-nav button.ativo{
color:var(--tc,var(--azul-logo));border-bottom-color:var(--tc,var(--azul-logo));background:transparent;box-shadow:none}
.aba .qtd{margin-left:2px}
/* ---- SEGMENTADO: 2–4 opções exclusivas sempre visíveis (período rápido,
Brascamp/Confio/Ambas, R$/Qtd). `.emp-toggle` e `.tipo-tabs` já eram
isto; agora com um nome ---- */
.seg,.emp-toggle,.tipo-tabs{display:inline-flex;gap:2px;background:var(--superficie-2);padding:3px;
border-radius:var(--r-sm);margin:0}
.seg > button,.emp-toggle button,.tipo-tabs button{border:0;background:transparent;height:28px;padding:0 12px;
border-radius:6px;font-family:var(--fonte);font-size:12.5px;font-weight:700;color:var(--ink-2);
cursor:pointer;white-space:nowrap;transition:.12s}
.seg > button.ativo,.seg > button.on,.emp-toggle button.on,.tipo-tabs button.on{
background:var(--superficie);color:var(--azul-logo);box-shadow:0 1px 2px rgba(16,32,58,.15)}
.seg > button.confio.ativo,.seg > button.confio.on,.emp-toggle button.confio.on{color:var(--confio)}
/* ---- KPI: um componente, três tamanhos. `.kpi.grande` = manchete (o
`.destaque` continua valendo), `.kpi.mini` = dentro de modal/painel.
Variação sempre símbolo + número + cor: `.delta` também no `.kpi` ---- */
.kpi.grande .kpi-valor,.kpi.grande .val{font-size:clamp(28px,3.4vw,38px);letter-spacing:-.035em;line-height:1.06}
.kpi.mini{padding:11px 12px}
.kpi.mini .kpi-valor,.kpi.mini .val{font-size:15px}
.kpi .delta{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;margin-top:6px;
font-size:12.5px;font-weight:700;padding:2px 9px;border-radius:var(--r-pill);font-variant-numeric:tabular-nums}
.kpi .delta.pos{background:var(--ok-bg);color:var(--ok-tx)}
.kpi .delta.neg{background:var(--erro-bg);color:var(--erro-tx)}
.kpi .delta.neutro{background:var(--superficie-2);color:var(--ink-2)}
.kpi.neutro{border-left-color:var(--borda-forte)}
/* ---- BADGE de identidade com `--c` (fecha a armadilha do `${cor}20`, §24.25):
``. Os `.b-*` legados vestem
os semânticos ---- */
.badge[style*="--c"]{background:color-mix(in srgb,var(--c) 14%,var(--superficie));color:var(--c)}
.b-verde,.b-azul,.b-amarelo,.b-vermelho,.b-cinza{display:inline-flex;align-items:center;gap:5px;
padding:2px 10px;border-radius:var(--r-pill);font-size:11px;font-weight:700;white-space:nowrap;line-height:1.5}
.b-verde{background:var(--ok-bg);color:var(--ok-tx)}
.b-azul{background:var(--info-bg);color:var(--info-tx)}
.b-amarelo{background:var(--alerta-bg);color:var(--alerta-tx)}
.b-vermelho{background:var(--erro-bg);color:var(--erro-tx)}
.b-cinza{background:var(--superficie-2);color:var(--ink-2)}
/* ---- TABELA: total em `tfoot` (não `tr style`), cor semântica por classe
(não 72 hex inline), linha clicável com nome, seta só na coluna
ordenada ---- */
table.tab tfoot td{font-weight:700;border-top:2px solid var(--borda-forte);border-bottom:0;
background:var(--superficie-2);font-variant-numeric:tabular-nums}
table.tab td.pos{color:var(--ok-tx);font-weight:700}
table.tab td.neg{color:var(--erro-tx);font-weight:700}
table.tab td.aten{color:var(--aviso-tx);font-weight:700}
table.tab tbody tr.ok > td{background:var(--ok-bg)}
table.tab tbody tr.aviso > td{background:var(--aviso-bg)}
table.tab tbody tr.erro > td{background:var(--erro-bg)}
table.tab tbody tr.clicavel{cursor:pointer}
table.tab tbody tr.clicavel:hover > td{background:var(--info-bg)}
table.tab th[aria-sort]{cursor:pointer}
table.tab th[aria-sort]::after{content:"↕";margin-left:4px;opacity:.45;font-size:11px}
table.tab th[aria-sort="ascending"]::after{content:"↑";opacity:1}
table.tab th[aria-sort="descending"]::after{content:"↓";opacity:1}
/* ---- MODAL: três larguras, não dez ---- */
.modal.medio{max-width:640px}
.modal.largo{max-width:min(940px,96vw)}
/* ---- utilitários de fileira (substituem 253 `display:flex` inline; `.linha`
já era o tracinho da legenda de gráfico) ---- */
.fileira{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap}
.fileira-fim{margin-left:auto}
/* ---- ENTRADA: uma classe para input/select/textarea fora do `.fld`
(`input.busca` continua valendo; `.entrada` é o nome novo — `.campo`
já era o rótulo dos filtros da Auditoria) ---- */
.entrada{height:auto;min-height:40px;padding:9px 12px;font-size:13.5px;line-height:1.4;font-family:var(--fonte);
color:var(--ink);background:var(--superficie);border:1px solid var(--borda-forte);border-radius:var(--r-sm);
min-width:min(230px,100%)}
select.entrada{padding-right:30px}
textarea.entrada{min-height:70px;resize:vertical}
.entrada:focus{outline:none;border-color:var(--azul-claro)}
/* ---- FILTROS: `.filtros` (53 telas, antiga, sem fundo) veste o `.filtro-bar`.
Decisão do Joel em 10/09/2026. Rótulo em cima só na varredura — o
HTML não o tem. Na barra do topo continua transparente. ---- */
.filtros{background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r);
padding:10px 12px;gap:10px 14px;align-items:center;min-height:56px}
.filtros input:not([type=checkbox]):not([type=radio]):not(.busca),.filtros select:not(.busca){
height:36px;padding:0 11px;border:1px solid var(--borda-forte);border-radius:var(--r-sm);
background:var(--superficie);font-family:var(--fonte);font-size:13.5px;color:var(--ink)}
.filtros select:focus,.filtros input:focus{outline:none;border-color:var(--azul-logo)}
.filtros label{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.topbar .filtros,.page-actions .filtros,.tb-acoes .filtros{background:transparent;border:0;padding:0;min-height:0}
/* rótulo em cima também no `.filtros` (varredura B): o mesmo `.fgrp` do
`.filtro-bar`. Com rótulo, os controles alinham pela base. */
.filtros .fgrp{display:flex;flex-direction:column;gap:4px}
.filtros .fgrp > label{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2);font-weight:700;line-height:1.2}
.filtros:has(> .fgrp){align-items:flex-end;gap:12px 18px}
/* ---- ÍCONE NO BOTÃO: SVG por CSS, sem emoji (varredura A, 10/09/2026).
`Atualizar `.
O desenho vem por `mask-image`, pintado com `currentColor`: muda de cor
com o botão, sai igual em toda máquina (emoji mudava por sistema) e
vai para o PDF. 15px, à esquerda do rótulo. ---- */
.btn[data-ic]::before,.btn-mini[data-ic]::before{content:"";width:15px;height:15px;flex:none;background:currentColor;
-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.btn-peq[data-ic]::before{width:13px;height:13px}
[data-ic="mais"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
[data-ic="atualizar"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7M21 3v6h-6'/%3E%3C/svg%3E")}
[data-ic="buscar"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM20 20l-4-4'/%3E%3C/svg%3E")}
[data-ic="imprimir"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6M6 18H4V9h16v9h-2M6 14h12v7H6z'/%3E%3C/svg%3E")}
[data-ic="documento"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l5 5v13H6zM14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E")}
[data-ic="copiar"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 9h11v11H9zM5 15V4h11'/%3E%3C/svg%3E")}
[data-ic="salvar"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h12l4 4v12H4zM8 4v5h7V4M7 20v-6h10v6'/%3E%3C/svg%3E")}
[data-ic="baixar"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0 4-4m-4 4-4-4M4 17v3h16v-3'/%3E%3C/svg%3E")}
[data-ic="enviar"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E")}
[data-ic="excluir"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14M10 11v5M14 11v5'/%3E%3C/svg%3E")}
[data-ic="editar"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4l11-11-4-4L4 16zM13 7l4 4'/%3E%3C/svg%3E")}
[data-ic="ok"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E")}
[data-ic="seguir"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E")}
[data-ic="voltar"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5m6-6-6 6 6 6'/%3E%3C/svg%3E")}
[data-ic="anexo"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11 12 20a6 6 0 0 1-8-8l9-9a4 4 0 0 1 6 6l-9 9a2 2 0 0 1-3-3l8-8'/%3E%3C/svg%3E")}
[data-ic="calendario"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v16H4zM4 10h16M8 3v4M16 3v4'/%3E%3C/svg%3E")}
[data-ic="grafico"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E")}
[data-ic="olho"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12zm10 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'/%3E%3C/svg%3E")}
[data-ic="link"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 6 0l3-3a4 4 0 0 0-6-6l-1 1M14 10a4 4 0 0 0-6 0l-3 3a4 4 0 0 0 6 6l1-1'/%3E%3C/svg%3E")}
[data-ic="config"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM19 12l2-1-1-3-2 .3-1.5-1.5.3-2-3-1-1 2h-2l-1-2-3 1 .3 2L6 8.3 4 8l-1 3 2 1v2l-2 1 1 3 2-.3L7.5 19l-.3 2 3 1 1-2h2l1 2 3-1-.3-2 1.5-1.5 2 .3 1-3-2-1z'/%3E%3C/svg%3E")}
[data-ic="cadeado"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 11h12v10H6zM8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E")}
[data-ic="caixa"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l9-4 9 4v10l-9 4-9-4zM3 7l9 4 9-4M12 11v10'/%3E%3C/svg%3E")}
[data-ic="caminhao"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7h11v9H2zM13 10h4l4 4v2h-8zM6 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm11 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E")}
[data-ic="pausa"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5v14M16 5v14'/%3E%3C/svg%3E")}
[data-ic="parar"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6h12v12H6z'/%3E%3C/svg%3E")}
[data-ic="mensagem"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H8l-4 4z'/%3E%3C/svg%3E")}
[data-ic="telefone"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h4l2 5-2 1a11 11 0 0 0 6 6l1-2 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E")}
[data-ic="estrela"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.8 5.7 6.2.9-4.5 4.4 1 6.2L12 17.3 6.5 20.2l1-6.2L3 9.6l6.2-.9z'/%3E%3C/svg%3E")}
[data-ic="etiqueta"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l10 10-8 8zM7 8h.01'/%3E%3C/svg%3E")}
[data-ic="alerta"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20zM12 9v5M12 17h.01'/%3E%3C/svg%3E")}
[data-ic="fechar"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E")}
/* sem zoom por pinça no Safari (ver a meta viewport no index.html) */
html{touch-action:pan-x pan-y}