/* ═══════════════════════════════════════════════════════════════════════
BRAVOLABS — design system · direção "Papel de Campo" (aprovada 22/08/2026)
Extraído de mockups/identidade/opcao_a.html
COMO USAR
1. No , antes do CSS da aplicação:
2. Carregue este arquivo DEPOIS do CSS da aplicação (ele sobrescreve o tema escuro).
3. Varra o arquivo da aplicação atrás de cor hard-coded fora dos tokens — a
inversão de tema não se resolve só trocando as variáveis do :root.
A REGRA DA DIREÇÃO
Preto é a única cor de ação. Sinal (vivo/alerta/ok/info) aparece em ponto,
fio ou texto — nunca preenchendo bloco. Gradiente é funcional: scrim sobre
foto, véu de casamento fotográfico, fade de borda. Nada decorativo.
═══════════════════════════════════════════════════════════════════════ */
:root{
/* superfícies — neutros de viés QUENTE (pedra/areia), nunca cinza frio */
--papel:#FDFCFC;
--branco:#FFFFFF;
--areia:#F5F3F1;
--areia-2:#FAF8F7;
--linha:#EBE8E4;
--linha-forte:#DEDAD3;
--fio:rgba(0,0,0,.055);
--cruz:#CFC9C1;
/* tinta */
--tinta:#000000;
--tinta-2:#44403B;
--tinta-3:#777169;
--tinta-4:#A59F97;
/* sinais — nunca decorativos */
--vivo:#FF4704;
--alerta:#F41A2F;
--ok:#12704A;
--info:#0A59D2;
/* forma */
--r-pilula:9999px;
--r-g:20px;
--r-m:14px;
--r-p:8px;
--r-mm:4px;
/* elevação: fio de 0,5px + sombra curta */
--elev-1:0 0 0 .5px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.035);
--elev-2:0 0 0 .5px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04), 0 14px 28px -18px rgba(0,0,0,.22);
/* gradientes funcionais */
--scrim:linear-gradient(to top, rgba(0,0,0,.66) 0%, rgba(0,0,0,.28) 34%, rgba(0,0,0,0) 66%);
--veu:linear-gradient(180deg, rgba(255,240,224,.14) 0%, rgba(255,240,224,0) 46%, rgba(28,22,14,.10) 100%);
--fade-d:linear-gradient(to right, rgba(253,252,252,0), var(--papel) 78%);
--grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
--marca-cruz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0v11M0 5.5h11' stroke='%23CFC9C1' stroke-width='1'/%3E%3C/svg%3E");
--sans:"Archivo","Segoe UI",system-ui,-apple-system,sans-serif;
--mono:"Geist Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
/* ── compatibilidade: os nomes que a aplicação escura usava hoje ──
mantidos para que nada fique sem valor durante a migração. */
--bg:var(--papel); --bg2:var(--areia-2); --panel:var(--branco);
--panel2:var(--areia); --sunk:var(--areia); --line:var(--linha);
--line2:var(--linha-forte); --line3:var(--cruz);
--fg:var(--tinta); --fg-soft:var(--tinta-3); --fg-faint:var(--tinta-4);
--good:var(--ok); --warn:#8A5A00; --bad:var(--alerta);
--violet:var(--tinta); --violet-2:var(--tinta-2); --violet-dim:var(--areia);
--blue:var(--info); --amber:var(--vivo); --amber-2:var(--vivo);
--amber-dim:var(--areia); --amber-line:var(--linha-forte);
--grad:var(--tinta); /* era violeta→azul; na identidade a ação é preta */
--grad-soft:var(--areia);
}
/* ── base ─────────────────────────────────────────────────────────── */
body{
background:var(--papel) !important;
color:var(--tinta);
font-family:var(--sans);
font-size:14px;
line-height:1.5;
-webkit-font-smoothing:antialiased;
}
a{color:var(--tinta);text-decoration:none;border-bottom:1px solid var(--linha-forte)}
a:hover{border-bottom-color:var(--tinta)}
.mono,td.num,.num,[class*="mono"]{font-family:var(--mono);font-variant-numeric:tabular-nums}
::selection{background:#000;color:#fff}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--linha-forte);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}
:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
/* ── tipografia ───────────────────────────────────────────────────
display leve com tracking negativo moderado (−0.02em) e entrelinha
folgada: a leveza vem do respiro, não do aperto. */
h1{font-size:clamp(30px,3.6vw,46px);font-weight:300;letter-spacing:-.02em;line-height:1.08;
margin:0;text-wrap:balance;color:var(--tinta)}
h2{font-size:clamp(22px,2.4vw,30px);font-weight:300;letter-spacing:-.018em;line-height:1.14;margin:0}
h3{font-size:14px;font-weight:500;letter-spacing:-.008em;margin:0}
p{color:var(--tinta-2);line-height:1.55}
.rotulo,.tinylabel,.navsec,.kl,.edcount,.edsectitle{
font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
color:var(--tinta-4);font-weight:400}
/* ── shell: barra lateral e topo ─────────────────────────────────── */
#side,.sidebar,aside#side{
background:var(--areia-2) !important;border-right:1px solid var(--linha) !important}
.brand .bt,.marca{color:var(--tinta);font-weight:600;letter-spacing:-.015em}
.brand .bs{font-family:var(--mono);color:var(--tinta-4);letter-spacing:.14em;text-transform:uppercase}
/* o leão é o selo — não precisa de caixa em volta. Ele entra sozinho, em tinta,
direto sobre o papel; `currentColor` faz o resto (branco se o fundo virar escuro). */
.logo{background:transparent !important;box-shadow:none !important;border-radius:0 !important;
color:var(--tinta);width:34px;height:34px;display:grid;place-items:center}
.logo svg{width:100%;height:100%;color:inherit}
/* ── item ativo: REGISTRO DE LINHA, não preenchimento ──────────────
A pílula preta cheia contradizia a direção: nesta identidade o preto é
reservado à AÇÃO (botão primário). Estado de navegação é presença, não
ação — então marca-se com um filete e peso de texto, no mesmo vocabulário
da grade de fios. Menos contraste, mesma clareza. */
.nav a{color:var(--tinta-3);border-radius:var(--r-p);font-weight:400;
position:relative;padding-left:16px}
.nav a:hover{background:var(--areia-2);color:var(--tinta-2)}
.nav a.active{background:var(--areia) !important;color:var(--tinta) !important;font-weight:500}
.nav a.active::before{
content:"" !important;display:block !important;position:absolute;
left:0;top:50%;transform:translateY(-50%);
width:3px;height:17px;border-radius:0 3px 3px 0;
background:var(--tinta) !important;box-shadow:none}
.nav a.active svg{color:var(--tinta) !important;opacity:1}
.nav a .badge{background:var(--vivo) !important;color:#fff;font-family:var(--mono);border-radius:var(--r-pilula)}
.topbar{background:rgba(253,252,252,.9) !important;border-bottom:1px solid var(--linha) !important}
.crumbs{color:var(--tinta-4)} .crumbs b{color:var(--tinta)}
.search{background:var(--branco);border:1px solid var(--linha);border-radius:var(--r-pilula);color:var(--tinta-4)}
.avatar{background:var(--tinta) !important;color:#fff;border-radius:var(--r-p)}
.icobtn{background:var(--branco);border:1px solid var(--linha);color:var(--tinta-2);border-radius:var(--r-p)}
.icobtn:hover{border-color:var(--tinta-3);color:var(--tinta)}
/* ── superfície ───────────────────────────────────────────────────
card não usa sombra pesada: fio de 1px sobre papel. Profundidade
vem da diferença entre papel e branco, não de sombra. */
.card,.painel,.bloco{
background:var(--branco) !important;border:1px solid var(--linha) !important;
border-radius:var(--r-m) !important;box-shadow:none !important;color:var(--tinta)}
.cardhead{border-bottom:1px solid var(--linha) !important;background:transparent}
.cardhead h3{color:var(--tinta)}
/* ── ação: preto sólido, pílula ───────────────────────────────────── */
.btn{
background:var(--branco);border:1px solid var(--linha-forte);color:var(--tinta);
border-radius:var(--r-pilula);font-family:var(--sans);font-weight:400;
padding:8px 15px;font-size:13px;transition:.14s}
.btn:hover{border-color:var(--tinta-3);background:var(--areia-2)}
/* ── hierarquia da ação: o preto cheio é superlativo, não padrão ──────
O problema não era o preto — era ele estar em toda parte. Quando cada
tela tem cinco botões pretos, nenhum é o primário, e o olho perde onde
a tela quer ser usada. Então o preenchimento fica reservado ao ÚNICO
lugar onde só existe uma ação decisiva:
· o cabeçalho da tela (.vhead) — o que a tela existe para fazer;
· o rodapé de um modal (.modalft) — o que aquele momento pede.
Qualquer .btn.pri fora daí é ação LOCAL (de um card, de uma linha) e
desce um nível: tinta no texto e na borda, fundo claro. Continua sendo
o botão mais forte do seu bloco, sem competir com o da tela.
Isto é estrutural: nenhuma tela precisa ser editada para obedecer. */
.btn.pri{background:var(--branco) !important;border-color:var(--linha-forte) !important;
color:var(--tinta) !important;font-weight:500}
.btn.pri:hover{background:var(--areia) !important;border-color:var(--tinta-3) !important}
.vhead .btn.pri, .modalft .btn.pri, .acts > .btn.pri:last-child{
background:var(--tinta) !important;border-color:var(--tinta) !important;color:#fff !important}
.vhead .btn.pri:hover, .modalft .btn.pri:hover, .acts > .btn.pri:last-child:hover{
background:var(--tinta-2) !important;border-color:var(--tinta-2) !important}
/* ── estado selecionado NÃO é ação ────────────────────────────────────
Aba ativa, segmento escolhido: são presença, não comando. Mesmo
registro do item de menu — leito de areia, texto em tinta. Bloco preto
aqui rouba o olho do que é clicável de verdade.
⚠️ FRONTEIRA: esta lista cobre só estados GENÉRICOS, de um elemento só.
Componente com estrutura interna própria (uma barra com título, pílula
e contagem dentro) NÃO cabe aqui: a regra pinta o pai e deixa os filhos
com a cor antiga, quebrando o contraste por dentro. Esses ficam com o
dono do componente — ver COORDENACAO_AGENTES.md §6. */
.subtabs .on, .seg span.on, .tabbar span.on{
background:var(--areia) !important;color:var(--tinta) !important;
border-color:var(--linha-forte) !important;font-weight:500}
.btn.gho{background:transparent;border-color:transparent;color:var(--tinta-3)}
.btn.gho:hover{background:var(--areia);color:var(--tinta)}
.btn.dgr{border-color:#E7C9C6;color:var(--alerta);background:var(--branco)}
.btn.dgr:hover{background:#FDF3F2;border-color:var(--alerta)}
.btn.sm{padding:5px 11px;font-size:12px}
.btn[disabled]{background:var(--areia);border-color:var(--linha);color:var(--tinta-4);cursor:not-allowed;opacity:1}
/* ── formulário ──────────────────────────────────────────────────── */
.field label{color:var(--tinta-2);font-weight:500}
.field input,.field select,.field textarea{
background:var(--branco);border:1px solid var(--linha-forte);border-radius:var(--r-p);
color:var(--tinta);font-family:inherit}
.field input:focus,.field select:focus,.field textarea:focus{
border-color:var(--tinta);box-shadow:0 0 0 3px rgba(0,0,0,.07);outline:none}
.lhint{color:var(--tinta-4)}
.seg{background:var(--areia);border:1px solid var(--linha);border-radius:var(--r-pilula);padding:3px}
.seg span{color:var(--tinta-3);border-radius:var(--r-pilula)}
.seg span.on{background:var(--branco) !important;color:var(--tinta) !important;font-weight:500;
box-shadow:var(--elev-1)}
.tabbar{border-bottom:1px solid var(--linha)}
.tabbar span{color:var(--tinta-3)}
.tabbar span.on{color:var(--tinta);border-bottom-color:var(--tinta) !important}
.sw{background:var(--linha-forte)} .sw.on{background:var(--tinta)}
.sw::after{background:var(--branco)}
/* ── tabela: só fios, sem zebra, sem sombra ──────────────────────── */
thead th{
background:transparent !important;border-bottom:1px solid var(--linha-forte) !important;
color:var(--tinta-4);font-family:var(--mono);font-size:10px;letter-spacing:.12em;
text-transform:uppercase;font-weight:400}
tbody td{border-bottom:1px solid var(--linha) !important;color:var(--tinta-2)}
tbody tr[onclick]:hover{background:var(--areia-2) !important}
.who .wn{color:var(--tinta);font-weight:500}
.who .ws{color:var(--tinta-4)}
.ini{background:var(--areia);border:1px solid var(--linha);color:var(--tinta-2);border-radius:var(--r-p)}
/* ── estado: ponto e fio, nunca bloco preenchido ─────────────────── */
.st{background:transparent !important;border:1px solid var(--linha-forte) !important;
color:var(--tinta-2) !important;border-radius:var(--r-pilula)}
.st .d{width:6px;height:6px;border-radius:50%}
.st.on{color:var(--ok) !important;border-color:#BFDCCD !important}
.st.on .d{background:var(--ok)}
.st.warn{color:#8A5A00 !important;border-color:#E8D6A8 !important}
.st.warn .d{background:#B8860B}
.st.bad{color:var(--alerta) !important;border-color:#E7C9C6 !important}
.st.bad .d{background:var(--alerta)}
.st.info{color:var(--info) !important;border-color:#C3D4F5 !important}
.st.info .d{background:var(--info)}
.st.off{color:var(--tinta-4) !important}
.pill,.chip,.plan{background:var(--areia);border:1px solid var(--linha);color:var(--tinta-2);
border-radius:var(--r-pilula)}
.bar{background:var(--areia);border:1px solid var(--linha);border-radius:var(--r-pilula)}
.bar i{background:var(--tinta)} .bar i.good{background:var(--ok)}
.bar i.warn{background:#B8860B} .bar i.bad{background:var(--alerta)}
/* “ao vivo”: o único lugar onde o sinal pulsa */
.livepill .lp,.hpill .hd,.vivo-dot{background:var(--vivo) !important}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,71,4,.35)}50%{box-shadow:0 0 0 5px rgba(255,71,4,0)}}
/* ── KPI: célula separada por fio, não cartão ────────────────────── */
.kpi{background:transparent !important;border:0 !important;border-left:1px solid var(--linha) !important;
border-radius:0 !important;padding:16px 20px}
.kpi:first-child{border-left:0 !important;padding-left:0}
.kpi .kl{color:var(--tinta-4)}
.kpi .kv{font-family:var(--mono);color:var(--tinta);font-weight:400;letter-spacing:-.02em}
.kpi .kd{color:var(--tinta-3)}
.kpi.acc{background:transparent !important}
.kpi.acc .kv{color:var(--tinta) !important}
/* ── modal ───────────────────────────────────────────────────────── */
.modalov{background:rgba(28,22,14,.34);backdrop-filter:blur(2px)}
.modalbox{background:var(--branco) !important;border:1px solid var(--linha-forte) !important;
border-radius:var(--r-g) !important;box-shadow:var(--elev-2) !important}
.modalhd{border-bottom:1px solid var(--linha) !important}
.modalft{border-top:1px solid var(--linha) !important}
.xbtn{color:var(--tinta-4)} .xbtn:hover{background:var(--areia);color:var(--tinta)}
.krow{border-bottom:1px solid var(--linha)} .krow span{color:var(--tinta-3)} .krow b{color:var(--tinta)}
/* ── foto: emoldurada e medida, nunca colada ─────────────────────── */
.foto,.midia,.quadro-foto{position:relative;border-radius:var(--r-g);overflow:hidden;
border:1px solid var(--linha)}
.foto img,.midia img{display:block;width:100%;height:100%;object-fit:cover}
.foto::after,.midia::after{content:"";position:absolute;inset:0;pointer-events:none;
background:var(--veu)}
.foto--grao::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
background-image:var(--grao);background-size:140px;opacity:.17;mix-blend-mode:overlay}
.foto-legenda{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 16px 12px;
background:var(--scrim);color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.04em}
/* ── grade de fios: o detalhe estrutural da direção ──────────────── */
.grade{position:relative}
.grade::before{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(to right,var(--fio) 1px,transparent 1px) 0 0/var(--col,1240px) 100%}
.fio-sec{border-top:1px solid var(--linha);position:relative}
.fio-sec::after{content:"";position:absolute;left:-5px;top:-5px;width:11px;height:11px;
background-image:var(--marca-cruz);background-size:11px}
/* ── vazio ───────────────────────────────────────────────────────── */
.empty{color:var(--tinta-4)} .empty svg{opacity:.3}
/* ⛔ o que NÃO fazer nesta identidade
- preencher bloco com cor de sinal (o sinal é ponto, fio ou texto)
- gradiente decorativo (só scrim, véu e fade)
- sombra longa e difusa (a profundidade é o fio de 0,5px)
- cinza frio (todo neutro tem viés quente)
- desabilitar com opacity (use token de cor) */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
/* ── campo editável é branco ───────────────────────────────────────
⛔ Regra de identidade, não ajuste de tela: fundo cinza num campo diz
"você não pode escrever aqui". Se o campo aceita digitação, ele é BRANCO —
sempre. Cinza fica reservado ao estado real de congelado, aplicado por
[disabled]/[readonly], nunca por escolha de aparência.
(Bruno, 28/08: "só fica cinza quando tá congelado e não é pra editar".)
Vale para o painel inteiro: antes cada vertical repetia `background:
var(--sunk)` no seu próprio bloco de CSS, e corrigir um a um resolveria
hoje e voltaria a quebrar no próximo campo que alguém escrevesse. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([disabled]):not([readonly]),
select:not([disabled]),
textarea:not([disabled]):not([readonly]){
background:var(--branco) !important;
}
/* ⛔ exceções: campos que vivem DENTRO de um chip e não têm caixa própria
(`all:unset`). Pintá-los criaria uma caixa branca dentro do chip. */
.sabusca input, .fin-piso input, .fin-sim input{
background:transparent !important;
}
/* congelado — o único caso em que o cinza é informação */
input[disabled], input[readonly],
select[disabled],
textarea[disabled], textarea[readonly]{
background:var(--areia) !important;
color:var(--tinta-3);
cursor:not-allowed;
}