/* TEMA PAPEL — fundo bege claro, cards brancos, texto quase preto.
Victor escolheu em 16/09/2026: *"ele esta pesado no preto e nao gosto das
combinacoes de cores hoje"* + *"eu gosto muito do papel"*.
REGRAS DA PALETA
- o realce vem de PESO e CONTORNO, nao de cor. O amarelo-limao sai de cena:
ele marcava venda, preco e botao ativo ao mesmo tempo, entao tudo parecia
igualmente urgente.
- a marca manda: o logo da Seleto e branco com o nome PRETO (as vezes
prateado) — em fundo claro ele fica preto, que e o uso natural dela.
- vermelho so para FALTA, verde so para o que da pra comprar, azul so para
o que ja foi faturado. Tres cores, tres significados, nada mais.
Entra DEPOIS do estilo do catalogo e so redefine cor — nenhuma medida,
posicao ou tamanho, pra nao mexer no layout que ja foi ajustado. */
:root{
--pp-fundo:#f4f2ee; /* o papel */
--pp-painel:#ffffff; /* cards e barras */
--pp-borda:#e0ddd6;
--pp-texto:#1a1a1a;
--pp-fraco:#6b6862;
--pp-tenue:#faf9f7; /* celulas da grade */
--pp-furo:#b3261e; /* falta */
--pp-ok:#1e6b3a; /* a adidas tem */
--pp-azul:#1d5fa8; /* ja faturado */
--pp-ouro:#8a6d00; /* vendas (era o amarelo-limao) */
}
body{ background-color:var(--pp-fundo) !important; color:var(--pp-texto) !important; }
/* ---------- cabecalho, barras e laterais ---------- */
header, .header-linha, .barra-periodo, .barra-controle, .barra-voltar,
.marcas-fixas, .lado-dono, .est-bloco, .barra-baixo{
background-color:var(--pp-painel) !important;
border-color:var(--pp-borda) !important;
color:var(--pp-texto) !important;
}
header .logo, .logo{ color:var(--pp-texto) !important; }
.logo:hover{ color:#5a5a5a !important; }
.carimbo, .stats, .bv-onde, .contagem-resultado, .cap, .lojas{ color:var(--pp-fraco) !important; }
/* o NUMERO dentro da contagem ("219 produtos") era branco no tema escuro e
sumia no papel — unico texto invisivel que sobrou na varredura de 21/09 */
.contagem-resultado b, .stats b, .carimbo b{ color:var(--pp-texto) !important; }
/* ---------- botoes e chips ---------- */
.tab-btn, .per-btn, .ctrl-btn, .modo-btn, .btn-hist-transf, .bv-btn, .bv-ini,
.filtro, .chip, .lado-bt{
background-color:var(--pp-painel) !important;
border:1px solid var(--pp-borda) !important;
color:var(--pp-texto) !important;
}
.tab-btn.on, .per-btn.on, .modo-btn.active, .filtro.on, .chip.on,
.tab-btn.ativo, .tab-btn[aria-selected="true"]{
background:var(--pp-texto) !important;
border-color:var(--pp-texto) !important;
color:#fff !important;
}
.btn-hist-transf:hover, .lado-bt:hover{ border-color:#111 !important; color:#111 !important; }
/* ---------- busca e campos ---------- */
input, select, textarea{
background-color:var(--pp-painel) !important;
border-color:var(--pp-borda) !important;
color:var(--pp-texto) !important;
}
input:focus, select:focus{ border-color:var(--pp-texto) !important; }
.reguas label{ background-color:var(--pp-painel) !important; border-color:var(--pp-borda) !important; }
.reguas input, .rep-qtd{ color:var(--pp-texto) !important; background-color:var(--pp-tenue) !important; }
/* ---------- card do produto ---------- */
.card, .grid > *{ background-color:var(--pp-painel) !important; border-color:var(--pp-borda) !important; }
.nome, .preco-wrap, .valor, .centavos, .rs{ color:var(--pp-texto) !important; }
.ref-seleto{ color:var(--pp-fraco) !important; }
.ref-forn, .cod{ color:var(--pp-texto) !important; }
.dn, .tag, .grupo-tag, .cor-tag, .marca, .loja-sig{
background-color:var(--pp-tenue) !important; border-color:var(--pp-borda) !important;
color:var(--pp-fraco) !important;
}
/* ---------- grade de loja + colunas de reposicao ---------- */
.grade-dono td{ background-color:var(--pp-tenue) !important; border-color:var(--pp-borda) !important;
color:var(--pp-texto) !important; }
.grade-dono td.vazia{ background:#f0eeea !important; color:#8f887a !important; }
.grade-dono th{ color:var(--pp-fraco) !important; }
.grade-dono tr th:first-child{ color:var(--pp-texto) !important; border-right-color:var(--pp-borda) !important; }
.grade-dono td i{ color:var(--pp-ouro) !important; } /* vendeu no periodo */
.grade-dono td b{ color:var(--pp-texto) !important; } /* estoque hoje */
.grade-dono td s{ color:#c9c6bf !important; }
.tam-tot{ background:#ecebe6 !important; color:var(--pp-texto) !important; }
.tam-tot.zerado{ background:#f7e3e1 !important; color:var(--pp-furo) !important; }
.grade-dono td.rep-vem, .grade-dono td.rep-ad, .grade-dono td.rep-q{
background-color:var(--pp-painel) !important; }
.grade-dono td.rep-falta{ background:#f7e3e1 !important; color:var(--pp-furo) !important;
border-color:#eccbc8 !important; }
.rep-cl, .temclick{ color:var(--pp-ok) !important; }
.rep-fat, .rep-nf, .faturado{ color:var(--pp-azul) !important; }
.rep-zero, .zero{ color:#8f887a !important; }
.rep-hover, .temhover{ border-bottom-color:var(--pp-fraco) !important; }
.grade-dono td.rep-vem:hover .rep-hover{ color:var(--pp-texto) !important;
border-bottom-color:var(--pp-texto) !important; }
.rep-pop, .pop, .transf-menu{ background-color:var(--pp-painel) !important;
border-color:var(--pp-borda) !important; color:var(--pp-texto) !important;
box-shadow:0 8px 24px rgba(0,0,0,.14) !important; }
.transf-item:hover{ background:#f0eeea !important; color:var(--pp-texto) !important; }
/* ---------- sinalizacoes que continuam valendo ---------- */
.furo{ color:var(--pp-furo) !important; }
.longe, .alerta{ color:#8a5a00 !important; }
.novo-tag.chegando-tag{ background:#e3efff !important; color:#14457e !important; }
.novo-tag.entrou-tag{ background:#e3f5e9 !important; color:#14572c !important; }
.atraso-tag{ background:#fdf1dd !important; color:#7a5400 !important; border-color:#f0dfc0 !important; }
/* ---------- lateral ---------- */
.lado-dono .it:hover{ background:#f0eeea !important; }
.lado-dono h4{ color:var(--pp-fraco) !important; }
/* ===================== SEGUNDA PASSADA (16/09) =====================
Victor: *"vai precisar ajustar as cores de combinacao, as letras do texto
tambem estao feias"*. O que estava errado:
- as etiquetas do card (VENDEU / CUSTO / PDV / MK / marca / cor) herdaram
o cinza fraco: sobre branco viraram quase invisiveis;
- a tarja CONFERIR COR continuou no amarelo-limao do tema escuro, que em
fundo claro berra;
- restos de amarelo em texto (resultado da busca, chip de marca ativo). */
/* etiquetas do card: texto escuro de verdade, fundo levemente cinza */
.dn, .tag, .grupo-tag, .cor-tag, .marca, .loja-sig, .chip-tam{
color:#2b2b2b !important;
background:#f1efea !important;
border-color:#dcd8d0 !important;
font-weight:600 !important;
}
.dn.venda, .dn.venda.quente{ color:#14572c !important; background:#e7f4ec !important;
border-color:#c9e4d4 !important; }
.dn.pdv{ color:#1a1a1a !important; }
.mudou-preco{ color:#7a5400 !important; background:#fdf1dd !important; border-color:#f0dfc0 !important; }
/* tarja de foto a conferir: ambar suave em vez do limao.
⚠️ NAO usar [class*="tarja"]: o proprio card ganha a classe `card-tarja`
quando a foto esta em duvida, e a regra pintou o card inteiro de amarelo
(visto em 16/09). So a faixa. */
.tarja{ background:#f5d76e !important; color:#3d2f00 !important; border-color:#e4c46a !important; }
.card.card-tarja{ background-color:var(--pp-painel) !important; border-color:#e4c46a !important; }
/* qualquer texto que ainda esteja no amarelo do tema escuro */
[style*="e8ff00"], .destaque, mark{ color:#1a1a1a !important; background:transparent !important; }
.marca-btn.on, .marca-btn.ativa, .marcas-fixas .on{
background:#1a1a1a !important; color:#fff !important; border-color:#1a1a1a !important; }
/* preco: preto forte, sem competir com o resto */
.preco-wrap .valor, .preco-wrap .rs, .preco-wrap .centavos{ color:#111 !important; }
/* O nome SELETO tinha uma faixa so dele, ocupando a largura inteira, e a busca
caia numa segunda linha — o "buraco enorme" que o Victor apontou em
21/09/2026. Agora nome e busca dividem a MESMA linha. */
body.tem-dono header .header-marca{
border-bottom:none !important; padding:0 !important; margin-bottom:0 !important;
width:auto !important; flex:0 0 auto !important;
}
/* ===================== VITRINE (a home) =====================
Victor mandou o print em 16/09: o miolo ja estava no papel, mas a vitrine
continuava meio preta meio clara — que e pior que os dois. Aqui fecham os
quatro pontos: prateleiras, atalhos da equipe, banner e categorias. */
/* prateleiras "Mais vendidos" / "Acabou de chegar": o card tinha rodape preto
com preco amarelo. Vira branco com preco preto e marca em cinza. */
.vt-prateleira .card, .vt-secao .card, .vt-item, .vt-produto{
background-color:var(--pp-painel) !important; border-color:var(--pp-borda) !important; }
.vt-item .preco, .vt-produto .preco, .vt-preco-linha, .vt-item .valor{
background-color:var(--pp-painel) !important; color:#111 !important; }
.vt-item .marca, .vt-produto .marca{ color:var(--pp-fraco) !important; background:none !important;
border:none !important; }
.vt-de{ color:#9a968e !important; }
/* atalhos da equipe */
.vt-eq{ background-color:var(--pp-painel) !important; border:1px solid var(--pp-borda) !important;
color:var(--pp-texto) !important; }
.vt-eq .n, .vt-eq b, .vt-eq span{ color:var(--pp-texto) !important; }
.vt-eq.alerta{ background:#fdf6e8 !important; border-color:#f0dfc0 !important; color:#6b4f00 !important; }
.vt-eq.alerta b, .vt-eq.alerta span{ color:#6b4f00 !important; }
.vt-grade{ background:none !important; }
/* banner: a arte continua escura (e foto de produto), mas o botao deixa de ser
limao — vira branco com texto preto, que combina com o resto */
.vt-cta{ background:#fff !important; color:#111 !important; border-color:#fff !important; }
.vt-dots .on, .vt-dots span.on{ background:#111 !important; }
.vt-slide.vt-claro{ background-color:var(--pp-painel) !important; color:var(--pp-texto) !important; }
/* categorias: o rotulo fica sobre a foto, entao ganha faixa branca em vez de
gradiente preto */
.vt-cat .rot, .vt-cats .rot, .vt-cat span{ background:rgba(255,255,255,.92) !important;
color:#111 !important; }
.vt-secao h3, .vt-titulo-secao, .vt-secao .tit{ color:var(--pp-texto) !important; }
.vt-tudo{ background-color:var(--pp-painel) !important; border-color:var(--pp-borda) !important;
color:var(--pp-texto) !important; }
/* as prateleiras usam o prefixo `vi-` (nao `vt-`): sem isto o preco continuava
amarelo-limao sobre o card branco, ilegivel (visto no print de 16/09) */
.vi-card, .vi-corpo, .vi-item{ background-color:var(--pp-painel) !important;
border-color:var(--pp-borda) !important; color:var(--pp-texto) !important; }
.vi-preco{ color:#111 !important; }
.vi-de, .vi-preco s{ color:#9a968e !important; }
.vi-marca{ color:var(--pp-fraco) !important; }
.vi-nome, .vi-titulo{ color:var(--pp-texto) !important; }
.vi-off, .vi-tag-off{ background:#111 !important; color:#fff !important; }
/* pastilha de contagem dentro dos atalhos da equipe */
.vt-eq > span, .vt-eq .qt, .vt-eq b{ background:#f1efea !important; color:#1a1a1a !important;
border:1px solid var(--pp-borda) !important; }
.vt-eq.alerta > span, .vt-eq.alerta b{ background:#f7ecd4 !important; color:#6b4f00 !important;
border-color:#e8d5ab !important; }
/* ============ CHECKUP 16/09: o que a varredura achou fora do tema ============
Medido no proprio DOM (cor de fundo x cor de texto de cada elemento visivel):
1. `.ctrl-select` (o ORDENAR) estava com texto #1a1a1a sobre #161616 —
preto no preto, ilegivel;
2. o painel "Filtrar e ordenar" (`.pf-*`) continuava inteiro escuro;
3. os chips de desconto (`.off-chip`, `.vt-off`) e as abas `.tb-btn`
seguiam pretos com limao.
Referencia conferida ao vivo: Artwalk, Nike e adidas — todos com fundo
branco e PRECO EM PRETO. Nenhum usa cor no preco; cor fica pra desconto. */
/* 1. o seletor de ordenar */
.ctrl-select, select.ctrl-select, .controles-dir select{
background-color:var(--pp-painel) !important; color:var(--pp-texto) !important;
border:1px solid var(--pp-borda) !important; }
/* 2. painel de filtros inteiro */
.painel-filtros, .pf, .pf-cabeca, .pf-corpo, .pf-rodape, .pf-secao, .pf-grupo{
background-color:var(--pp-painel) !important; color:var(--pp-texto) !important;
border-color:var(--pp-borda) !important; }
.pf-limpar{ background-color:var(--pp-painel) !important; color:var(--pp-texto) !important;
border:1px solid var(--pp-borda) !important; }
.pf-aplicar{ background:#111 !important; color:#fff !important; border-color:#111 !important; }
.pf-item, .pf-op, .pf-check{ color:var(--pp-texto) !important; }
.pf-fundo, .fundo-painel{ background:rgba(0,0,0,.35) !important; }
/* 3. chips de desconto e abas internas */
.off-chip, .tb-btn, .mf-btn{ background-color:var(--pp-painel) !important;
color:var(--pp-texto) !important; border:1px solid var(--pp-borda) !important; }
.off-chip.on, .tb-btn.active, .mf-btn.on, .modo-btn.active{
background:#111 !important; color:#fff !important; border-color:#111 !important; }
.vt-off{ background:#111 !important; color:#fff !important; }
/* 4. HIERARQUIA DO CARD (P2): marca pequena em cinza, nome regular, preco
forte — a ordem que Artwalk, Nike e adidas usam. */
.vi-marca, .vt-item .marca{ font-size:10.5px !important; letter-spacing:.6px !important;
text-transform:uppercase !important; color:var(--pp-fraco) !important; }
.vi-nome{ font-weight:400 !important; color:#2b2b2b !important; }
.vi-preco{ font-weight:700 !important; font-size:16px !important; color:#111 !important; }
.preco-wrap .valor{ font-weight:700 !important; }
/* 5. o banner deixa de ser uma caixa preta: a arte continua, a moldura sai */
.vt-banner{ background:none !important; border:none !important; }
.vt-slide.vt-escuro{ border-radius:14px !important; }
/* ============ LOTE 2 APROVADO (16/09) ============
1 emoji fora · 2 busca na lateral (opcao C) · 3 ordenar em chips · 4 banner A */
/* busca dentro da coluna de filtros */
.lado-busca{ width:100%; background:#fff !important; border:1px solid var(--pp-borda) !important;
color:var(--pp-texto) !important; border-radius:7px; padding:5px 9px;
font:400 12px 'DM Sans'; margin-bottom:8px; outline:none; }
.lado-busca:focus{ border-color:#111 !important; }
/* a lista sem emoji precisa de outra ancoragem: numero alinhado a direita,
em fonte tabular, e o ativo com barra preta em vez de fundo cheio */
.lado-dono .tabs > *{ display:flex !important; justify-content:space-between !important;
align-items:center; gap:8px; font-variant-numeric:tabular-nums; }
.lado-dono .tabs > *.on, .lado-dono .tabs > *.ativo{
background:#fff !important; color:#111 !important;
border-left:3px solid #111 !important; border-radius:0 7px 7px 0 !important;
font-weight:700 !important; }
/* ordenar em chips */
.ord-chips{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.ord-chip{ background:#fff; border:1px solid var(--pp-borda); color:var(--pp-texto);
border-radius:999px; padding:5px 11px; font:500 12px 'DM Sans'; cursor:pointer; }
.ord-chip.on{ background:#111; color:#fff; border-color:#111; font-weight:700; }
.ord-chip:hover{ border-color:#111; }
/* separa os criterios que so o dono tem (estoque, grade, markup) dos que
valem pra qualquer um — ele mesmo apontou que sao publicos diferentes */
.ord-sep{ color:var(--pp-fraco); font-size:9.5px; text-transform:uppercase;
letter-spacing:.8px; padding-left:6px; border-left:1px solid var(--pp-borda); }
/* banner A: faixa clara, sem caixa preta, com o numero em marca d'agua */
.vt-slide.vt-escuro, .vt-slide{ background:#fff !important; color:#1a1a1a !important;
border:1px solid var(--pp-borda) !important; }
.vt-slide .vt-titulo, .vt-slide .vt-sub, .vt-slide .vt-eyebrow{ color:#1a1a1a !important; }
.vt-slide .vt-sub{ color:#6b6862 !important; }
.vt-cta{ background:#111 !important; color:#fff !important; border-color:#111 !important; }
.vt-eco, .vt-halo{ opacity:.06 !important; color:#111 !important; }
/* ============ LEGIBILIDADE DA GRADE (17/09) ============
Victor: *"essa cor ta horrivel, da nem para ler"*. O numero de VENDA estava
em dourado #8a6d00 com 9.5px sobre fundo quase branco — contraste de menos
pra fonte desse tamanho. O padrao que ele aprovou em 15/09 era "branco =
estoque, amarelo = vendeu"; no tema claro o amarelo nao sobrevive, entao a
distincao passa a ser TOM: estoque preto forte, venda marrom escuro. */
.grade-dono td i{ color:#5c4700 !important; font-size:10.5px !important; font-weight:700 !important; }
.grade-dono td b{ color:#111 !important; font-size:10.5px !important; }
.grade-dono td s{ color:#cdcac3 !important; }
.grade-dono tr.sub th{ font-size:8px !important; color:#6b6862 !important; }
.grade-dono tr.sub th i{ color:#5c4700 !important; font-size:8px !important; }
.grade-dono tr.sub th b{ color:#111 !important; font-size:8px !important; }
.grade-dono tr.total th, .grade-dono tr.total td{ color:#111 !important; }
.grade-dono td{ font-size:10.5px !important; }
/* venda PRECISA saltar (Victor, 17/09: "a cor de venda tem que ser mais obvia,
parece que esta quase a mesma cor"). Distinguir so por tom nao bastou:
agora o numero de venda ganha PASTILHA de fundo — mantem a memoria do
"amarelo = vendeu" que ele aprovou em 15/09, sem o limao do tema escuro. */
.grade-dono td i{ color:#4a3800 !important; background:#f6e7b8 !important;
border-radius:4px !important; padding:0 4px !important; margin-left:3px !important;
font-size:10.5px !important; font-weight:700 !important; }
.grade-dono tr.sub th i{ background:#f6e7b8 !important; color:#4a3800 !important;
padding:0 3px !important; }
.grade-dono td s{ display:none !important; } /* o traco perde a funcao com a pastilha */
/* o total da rede vazava pro lado quando o tamanho e longo (36/7, 44/5):
a primeira coluna tinha largura fixa de 38px. Agora ela cabe o par. */
.grade-dono tr th:first-child{ width:auto !important; min-width:52px !important;
white-space:nowrap !important; padding-right:6px !important; }
.tam-tot{ margin-left:3px !important; padding:0 4px !important; }
/* o grid tinha teto de 1400px: numa tela de ~1990 sobrava uma faixa morta a
direita (Victor, 17/09: "alguma estrategia para ficar sobrando o canto da
tela?"). Na visao do dono o teto sai — ele trabalha em tela cheia e cada
card a mais por fileira e um produto a menos pra rolar. */
body.tem-dono .grid{ max-width:none !important; padding-right:16px !important; }
/* ⚠️ LARGURA MINIMA DO CARD DO DONO (17/09)
Tirar o teto de 1400px deixou 6 cards por fileira — e a tabela NAO CABE em
272px: sao 9 colunas (tamanho + 4 lojas + FALTA + VEM + ADI + QTD). Os
cabecalhos colaram ("FALTAVEM") e o campo de digitar ficou cortado.
A conta: 52 (tam) + 4x34 (lojas) + 30 + 46 + 42 + 34 = ~340px.
O grid continua se adaptando a qualquer tela — o minimo e que subiu. */
body.tem-dono .grid{ grid-template-columns:repeat(auto-fill,minmax(342px,1fr)) !important; }
.grade-dono th, .grade-dono td{ white-space:nowrap !important; }
.grade-dono th.rep-h{ padding:3px 4px !important; }
.grade-dono td.rep-falta{ min-width:28px !important; }
.grade-dono td.rep-vem{ min-width:46px !important; }
.grade-dono td.rep-ad{ min-width:40px !important; }
.grade-dono td.rep-q{ min-width:36px !important; }
/* ============ ARRUMAR A TABELA (17/09) ============
Victor: *"cor do detalhe por loja esta horrivel. os numeros estao todos
empilhados no outro e tem espaco sobrando"*. Tres causas:
1. o titulo "DETALHE POR LOJA" continuava no amarelo-limao do tema escuro;
2. a sub-linha "vend - est" repetia o rotulo em CADA loja, empurrando as
colunas e criando a sensacao de numero em cima de numero;
3. `table-layout:fixed` dividia a largura por igual, entao as colunas de
loja ficavam apertadas e sobrava espaco nas de reposicao. */
/* 1. o titulo */
.ver-detalhe{ color:#1a1a1a !important; background:none !important;
border:none !important; font-weight:700 !important; letter-spacing:.4px !important; }
.ver-detalhe span{ color:#8b877f !important; }
.ver-detalhe:hover{ color:#000 !important; }
/* 2. o rotulo "vend - est" aparece UMA vez, no canto, e nao em cada loja */
.grade-dono tr.sub th{ font-size:0 !important; padding:0 !important; }
.grade-dono tr.sub th:first-child{ font-size:8px !important; color:#8b877f !important;
padding:0 4px 3px 0 !important; }
/* "est" foi lido como ESTIMATIVA por um tempo (Victor, 18/09). Abreviacao de
tres letras em rotulo de tabela nao vale o espaco que economiza. */
.grade-dono tr.sub th:first-child::after{ content:'vendeu · estoque'; }
/* 3. a largura passa a seguir o conteudo */
.grade-dono{ table-layout:auto !important; }
.grade-dono td, .grade-dono th{ padding:2px 3px !important; }
.grade-dono td.cel, .grade-dono td.vazia{ min-width:34px !important; }
/* o traco VOLTA entre venda e estoque (Victor, 17/09: "o numero da venda e
estoque estao colados, coloca um - em cada um"). Eu tinha escondido quando
a venda ganhou pastilha — e sem ele os dois numeros viram um so. */
.grade-dono td s{ display:inline !important; color:#8f887a !important;
margin:0 2px !important; text-decoration:none !important; }
.grade-dono td i{ margin-left:0 !important; }
/* A TABELA TEM QUE CABER NO CARD — o campo de digitar nunca pode ficar fora
(Victor, 17/09: "nao tem que arrastar para o lado para digitar").
Medido: 412px de tabela dentro de 397px de card. Aperto onde nao custa
leitura: padding lateral e largura minima das celulas. */
.grade-dono{ width:100% !important; }
.grade-dono td, .grade-dono th{ padding:2px 1px !important; }
.grade-dono td.cel, .grade-dono td.vazia{ min-width:30px !important; }
.grade-dono tr th:first-child{ min-width:44px !important; padding-right:3px !important; }
.grade-dono td.rep-falta{ min-width:24px !important; }
.grade-dono td.rep-vem{ min-width:40px !important; }
.grade-dono td.rep-ad{ min-width:30px !important; }
.grade-dono td.rep-q{ min-width:32px !important; padding-left:2px !important; }
.rep-qtd{ width:28px !important; }
.grade-dono td em{ font-size:8px !important; }
/* um card com mais lojas ainda estourava por 5px: aperto final */
.grade-dono td.cel, .grade-dono td.vazia{ min-width:27px !important; }
.grade-dono tr th:first-child{ min-width:40px !important; }
.grade-dono td.rep-vem{ min-width:36px !important; }
.grade-dono td, .grade-dono th{ padding:2px 0 !important; }
.grade-dono td.rep-q{ padding:2px 1px !important; }
/* ⚠️ A TABELA NUNCA MAIS VAZA (17/09)
Apertar por pixel nao resolvia: card com 5 lojas estourava de novo (16 de 50
ainda cortavam o campo de digitar). A solucao e estrutural — `fixed` com
larguras em PORCENTAGEM: a tabela ocupa 100% do card e as colunas dividem o
que existe. Se tiver muita loja, as colunas de loja encolhem; o campo de
digitar nao sai do lugar. */
.grade-dono{ width:100% !important; table-layout:fixed !important; }
.grade-dono tr th:first-child{ width:13% !important; min-width:0 !important; }
.grade-dono td.rep-falta{ width:9% !important; min-width:0 !important; }
.grade-dono td.rep-vem{ width:13% !important; min-width:0 !important; }
.grade-dono td.rep-ad{ width:9% !important; min-width:0 !important; }
.grade-dono td.rep-q{ width:11% !important; min-width:0 !important; }
.grade-dono td.cel, .grade-dono td.vazia{ min-width:0 !important; }
.grade-dono th.rep-h{ font-size:8px !important; }
.rep-qtd{ width:100% !important; max-width:30px !important; }
/* COMPRAR e mais largo que QTD: a coluna cresce e o cabecalho nao quebra.
E o cursor vira "?" em todo cabecalho pra sinalizar que tem explicacao. */
.grade-dono td.rep-q{ width:15% !important; }
.grade-dono th[title]{ cursor:help !important; }
.grade-dono th.rep-h{ font-size:7.5px !important; letter-spacing:.2px !important; }
.grade-dono tr.sub th:first-child{ font-size:7.5px !important; white-space:nowrap !important;
letter-spacing:0 !important; }
/* ============ FORA A LINHA "vend est" (18/09) ============
Ela voltou a aparecer embaixo de CADA loja: eu tinha zerado a fonte do | ,
mas as regras que davam cor aos filhos (, ) devolviam o tamanho —
filho nao herda font-size:0. Em vez de caçar isso, a linha sai inteira: o
que ela explicava ("vendeu · estoque") agora esta no hover do cabecalho de
cada loja, escrito por extenso. Com ela fora, COMPRAR para de ser cortado. */
.grade-dono tr.sub{ display:none !important; }
.grade-dono td.rep-q{ width:17% !important; }
.grade-dono th.rep-h{ font-size:8px !important; }
/* ⚠️ EM `table-layout:fixed` A LARGURA VEM DA PRIMEIRA LINHA (os | ), nao
das celulas. Eu estava dimensionando `td.rep-q` e por isso o cabecalho
COMPRAR continuava com 32px e cortado (18/09). As larguras agora sao
aplicadas nos | da linha de cabecalho, contados do fim pro comeco. */
.grade-dono tr:first-child th:first-child{ width:13% !important; }
.grade-dono tr:first-child th:nth-last-child(4){ width:9% !important; } /* FALTA */
.grade-dono tr:first-child th:nth-last-child(3){ width:13% !important; } /* VEM */
.grade-dono tr:first-child th:nth-last-child(2){ width:9% !important; } /* DISP */
.grade-dono tr:first-child th:last-child{ width:17% !important; } /* COMPRAR */
/* FALTA ainda cortava com 9%: e a unica com 5 letras entre colunas estreitas */
.grade-dono tr:first-child th:nth-last-child(4){ width:11% !important; }
.grade-dono tr:first-child th:nth-last-child(2){ width:8% !important; }
/* barra da lista de reposicao: so aparece quando ha algo digitado */
#repor-barra{ position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:95;
background:#111; color:#fff; border-radius:999px; padding:10px 14px 10px 20px;
display:flex; align-items:center; gap:12px; font:500 13px 'DM Sans';
box-shadow:0 10px 30px rgba(0,0,0,.28); }
#repor-barra b{ color:#fff; font-weight:700; }
.rb-bt{ background:#fff; color:#111; border:none; border-radius:999px; padding:7px 14px;
font:700 12px 'DM Sans'; cursor:pointer; }
.rb-bt:hover{ background:#e8e8e8; }
.rb-lim{ background:transparent; color:#b9b9b9; padding:7px 6px; font-weight:500; }
.rb-lim:hover{ background:transparent; color:#fff; }
/* O balão das datas abria pra CIMA (`bottom:100%`) e, na primeira linha da
tabela, saía do card — que tem `overflow:hidden` e cortava tudo. Por isso o
hover "não aparecia" (Victor, 18/09). Agora abre pra BAIXO, onde sempre há
card embaixo (tabela fica no meio, com rodapé e preço depois). */
.rep-pop{ bottom:auto !important; top:100% !important; right:auto !important; left:0 !important;
margin-top:2px !important; }
.grade-dono td.rep-vem{ position:relative !important; }
/* O rodapé da tabela (custo real / aviso de encomenda) estava CORTADO: eu
tinha posto `white-space:nowrap` na tabela toda pra alinhar os números, e o
texto longo do rodapé herdou isso (Victor, 18/09). Só ele volta a quebrar. */
.grade-dono tr.total th.rep-rod, .grade-dono th.rep-rod{
white-space:normal !important; line-height:1.25 !important; text-align:right !important;
font-size:8.5px !important; padding:4px 2px !important; }
/* LINHA TOTAL: os números são de 2-3 dígitos (22, 18) e `22 - 5` não cabia na
mesma célula estreita — o estoque saía cortado (Victor, 18/09: "embolou no
total, precisa criar um formato pra caber no quadrado").
Nas linhas de tamanho o formato lado a lado continua (números de 1 dígito);
só no TOTAL a venda vai em cima e o estoque embaixo. */
.grade-dono tr.total td{ line-height:1.15 !important; padding:2px 1px !important; }
.grade-dono tr.total td i{ display:block !important; margin:0 auto !important;
padding:0 3px !important; font-size:9.5px !important; }
.grade-dono tr.total td s{ display:none !important; }
.grade-dono tr.total td b{ display:block !important; font-size:9.5px !important; }
/* ============ O DESTAQUE DO REMANEJAMENTO VOLTA (18/09) ============
Victor: *"antes quando eu colocava o mouse para onde ia remanejar ele ficava
com uma corzinha... nem passando nem clicando fica com cor mais"*.
Causa: eu pus `background !important` em TODA célula da grade pro tema claro,
e isso passou por cima do realce (`.sai` / `.entra` / `.recebe` / `.manda`),
que eram desenhados no tema escuro com amarelo-limão e vinho.
Refeitos na paleta clara, com prioridade acima da regra do tema. */
/* quem MANDA a peça: contorno e fundo azul claro */
.grade-dono td.sai, .grade-dono td.cel.sai{
background:#e8f1fb !important; color:#123a63 !important;
box-shadow:inset 0 0 0 2px #1d5fa8 !important; border-radius:3px !important; }
/* quem RECEBE: fundo verde claro */
.grade-dono td.entra, .grade-dono td.cel.entra{
background:#e4f4ea !important; color:#14572c !important;
box-shadow:inset 0 0 0 2px #1e6b3a !important; border-radius:3px !important; }
/* os riscos laterais que marcam candidatos (sem hover) */
.grade-dono td.recebe{ box-shadow:inset 3px 0 0 #1e6b3a !important; }
.grade-dono td.manda{ box-shadow:inset 3px 0 0 #1d5fa8 !important; }
.grade-dono td.manda:hover{ border-color:#1d5fa8 !important; }
/* a peça já pedida (fundo azul do "já existe pedido").
⚠️ MAIS FORTE em 18/09/2026 — Victor: *"quando o produto esta em
transferencia precisa ficar um pouco mais forte o azul do fundo, passou
despercebido por mim"*. O #eaf2fb era quase branco ao lado do bege do tema;
numa grade cheia ninguém via. Agora o fundo é chapado e ganha contorno, que
é o que separa "tem pedido rolando" de "célula comum". */
.grade-dono td.movendo{ background:#bcd8f2 !important;
box-shadow:inset 0 0 0 1px #6ca4de !important; border-radius:3px !important; }
.grade-dono td.movendo.manda{ box-shadow:inset 3px 0 0 #1d5fa8, inset 0 0 0 1px #6ca4de !important; }
.grade-dono td.movendo.recebe{ box-shadow:inset 3px 0 0 #1e6b3a, inset 0 0 0 1px #6ca4de !important; }
.grade-dono td u.entra{ color:#14572c !important; background:none !important; }
.grade-dono td u.sai{ color:#b3261e !important; background:none !important; }
/* o botão da sugestão acende junto */
.sugestoes .sug:hover{ background:#111 !important; color:#fff !important;
border-color:#111 !important; }
/* O marcador de movimento (+1 chega / -1 sai) dividia a célula com
"vendeu - estoque" e ficava cortado (Victor, 18/09: "aqui parece que ficou
comido também"). Ele desce pra própria linha, miúdo — a célula não cresce
em largura, que é o que não temos. */
.grade-dono td u{ display:block !important; font-size:8px !important;
line-height:1.1 !important; margin:1px 0 0 !important; padding:0 !important;
text-decoration:none !important; font-weight:700 !important; background:none !important; }
.grade-dono td u.entra{ color:#14572c !important; }
.grade-dono td u.sai{ color:#b3261e !important; }
/* "aqui parece que ficou comido" (Victor, 18/09) — segunda causa. Nao era so
o marcador de remanejamento: a propria celula `venda - estoque` estourava.
Medido: 31,1px de conteudo em 29,8px de espaco, em 59 celulas. O gasto
estava na pastilha (4px de padding de cada lado pra UM digito) e na margem
do traco. Apertando 1px em cada, sobra folga e a pastilha continua visivel. */
.grade-dono td i{ padding:0 3px !important; }
.grade-dono td s{ margin:0 1px !important; }
/* ainda sobravam 5 celulas comidas: as de estoque com DOIS digitos (`4-16`).
Duas economias sem perder leitura:
1. pastilha mais justa (2px de cada lado em vez de 4);
2. venda ZERO nao ganha pastilha — o amarelo existe pra destacar o que
vendeu, e um zero destacado so ocupava espaco. */
.grade-dono td i{ padding:0 2px !important; }
.grade-dono td i.z{ background:none !important; padding:0 !important;
color:#a8a49c !important; font-weight:400 !important; }
.grade-dono tr th:first-child{ min-width:46px !important; }
/* TRAVA DE TRANSITO (Victor, 18/09: "nao pode nao sugerir, tambem tem que
deixar travado para eu pedir"). Onde ja tem peca minha a caminho o campo
de digitar some e entra um selo cinza "N vindo" — nao e um campo vazio
que da pra preencher por engano, e ainda diz QUANTAS pecas sao. */
.grade-dono td.rep-q .rep-travado{ display:block !important; font-size:8px !important;
line-height:1.15 !important; color:#6b6760 !important; background:#efece6 !important;
border:1px solid var(--pp-borda) !important; border-radius:3px !important;
padding:2px 1px !important; text-align:center !important; cursor:help !important;
white-space:nowrap !important; font-weight:700 !important; }
/* a explicacao das 4 colunas entrou na legenda que JA existia ("? o que
significa"), em vez de tela nova — Victor, 18/09: "se puder usar o mesmo
padrao que ja estamos em vez de criar um novo melhor ainda". */
.grade-legenda .lg-travado{ display:inline-block; font-size:8px; font-weight:700;
color:#6b6760; background:#efece6; border:1px solid var(--pp-borda);
border-radius:3px; padding:0 3px; }
/* A TRAVA VIRA BOTAO (18/09): ele clica e o campo abre. Antes era um selo
morto e o produto inteiro ficava sem onde digitar — "o comprar agora nao ta
dando opcao de digitar mais". */
.grade-dono td.rep-q .rep-travado{ cursor:pointer !important; }
.grade-dono td.rep-q .rep-travado:hover{ background:#e3dfd6 !important;
border-color:#b9b4a8 !important; color:#3d3a34 !important; }
/* campo aberto POR CIMA de uma trava: laranja, pra nao esquecer que ali ja
tem peca vindo */
.grade-dono td.rep-q .rep-qtd.rep-forcado{ border-color:#c07b2a !important;
background:#fdf3e6 !important; color:#7a4a10 !important; }
/* O BALAO DAS DATAS TAMBEM NO CLIQUE (18/09: "no vem eu nao consigo mais
clicar e ver as datas?"). O hover continua, mas agora clicar FIXA o balao
aberto — mesmo padrao do "? o que significa". */
.grade-dono td.rep-vem.tem-pop{ cursor:pointer !important; }
.grade-dono td.rep-vem.aberta .rep-pop{ display:block !important; }
.grade-dono td.rep-vem.aberta{ z-index:9 !important; position:relative !important; }
/* A DATA LIMITE DO PEDIDO, embaixo do número da falta (18/09: *"o `sem` e o
número está meio vago"*). O número diz QUANTO; esta linha diz ATÉ QUANDO —
é o dia em que a prateleira zera menos os 30 dias de entrega. */
.grade-dono td.rep-falta{ line-height:1.05 !important; }
.grade-dono td.rep-falta .rep-quando{ display:block !important; font-size:7.5px !important;
font-style:normal !important; font-weight:700 !important; letter-spacing:0 !important;
color:#8a4b06 !important; margin-top:1px !important; white-space:nowrap !important; }
/* campo de um tamanho que JÁ TEM peça vindo: laranja discreto, sem texto */
.grade-dono td.rep-q .rep-qtd.rep-forcado{ border-color:#d9a05c !important;
background:#fdf6ec !important; color:#7a4a10 !important; }
/* QUANTIDADE + DATA na mesma célula (18/09). A data só aparece quando ele
digita alguma quantidade — enquanto está vazio, a coluna continua limpa,
como ele aprovou. */
.grade-dono td.rep-q .rep-data{ display:none !important; }
.grade-dono td.rep-q.tem-pedido .rep-data{ display:block !important;
width:100% !important; margin-top:2px !important; font-size:7.5px !important;
padding:0 !important; border:1px solid var(--pp-borda) !important;
border-radius:3px !important; background:#fff !important; color:#4a463f !important;
font-family:inherit !important; text-align:center !important; cursor:pointer !important; }
.grade-dono td.rep-q.tem-pedido .rep-qtd{ border-color:#1d5fa8 !important;
background:#eef5fd !important; color:#123a63 !important; font-weight:700 !important; }
.grade-dono td.rep-q .rep-data::-webkit-calendar-picker-indicator{
padding:0 !important; margin:0 !important; opacity:.5 !important; }
/* PAINEL DE PROGRAMAÇÃO DE ENTREGA (18/09) — três campos não cabem na célula,
então a célula mostra só o resumo e o painel abre no clique. */
.prog-fundo{ position:fixed; inset:0; background:rgba(30,28,24,.35); z-index:99999;
display:flex; align-items:center; justify-content:center; padding:16px; }
.prog-caixa{ background:var(--pp-painel,#fff); color:var(--pp-texto,#1a1a1a);
border:1px solid var(--pp-borda,#ddd); border-radius:8px; padding:16px 18px;
width:min(340px,92vw); box-shadow:0 10px 40px rgba(0,0,0,.2); font-size:13px; }
.prog-caixa h4{ margin:0 0 12px; font-size:13px; letter-spacing:.4px; text-transform:uppercase; }
.prog-caixa label{ display:block; margin:0 0 9px; font-size:11.5px; color:#6b6760; }
.prog-caixa input, .prog-caixa select{ display:block; width:100%; margin-top:3px;
padding:5px 7px; font-size:13px; font-family:inherit; border:1px solid var(--pp-borda,#ddd);
border-radius:4px; background:#fff; color:var(--pp-texto,#1a1a1a); }
.prog-previa{ background:#f4f1ea; border-radius:5px; padding:8px 10px; margin:11px 0;
font-size:11.5px; line-height:1.5; max-height:130px; overflow:auto; }
.prog-bt{ display:flex; gap:8px; justify-content:space-between; }
.prog-caixa button{ padding:7px 14px; border-radius:4px; font-size:12px; font-weight:700;
font-family:inherit; cursor:pointer; border:1px solid var(--pp-borda,#ddd); background:#fff; }
.prog-caixa .prog-ok{ background:#1a1a1a; color:#fff; border-color:#1a1a1a; }
.prog-caixa .prog-apagar{ color:#b3261e; }
/* o resumo dentro da célula */
.grade-dono td.rep-q.tem-pedido .rep-data{ display:block !important; width:100% !important;
margin-top:2px !important; font-size:7.5px !important; line-height:1.3 !important;
padding:1px 0 !important; border:1px solid var(--pp-borda) !important; border-radius:3px !important;
background:#fff !important; color:#4a463f !important; font-family:inherit !important;
font-weight:700 !important; text-align:center !important; cursor:pointer !important;
white-space:nowrap !important; }
.grade-dono td.rep-q.tem-pedido .rep-data:hover{ background:#f0ece4 !important; }
/* LISTA DE ENTREGAS EDITÁVEL (18/09) — cada linha é uma entrega com a sua
própria quantidade; a divisão por igual virou atalho, escondida no
"dividir em parcelas iguais". */
.prog-lista{ max-height:200px; overflow:auto; margin-bottom:8px; }
.prog-linha{ display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.prog-linha input[type=number]{ width:62px; margin:0; text-align:center; font-weight:700; }
.prog-linha input[type=date]{ flex:1; margin:0; }
.prog-linha span{ font-size:11px; color:#6b6760; white-space:nowrap; }
.prog-x{ border:none !important; background:none !important; color:#b3261e !important;
font-size:17px !important; line-height:1 !important; padding:0 4px !important; cursor:pointer; }
.prog-mais{ width:100%; border:1px dashed var(--pp-borda,#ddd) !important; background:none !important;
color:#6b6760 !important; font-size:11.5px !important; padding:6px !important; }
.prog-total{ background:#f4f1ea; border-radius:5px; padding:7px 10px; margin:10px 0;
font-size:12px; text-align:center; }
.prog-auto{ border-top:1px solid var(--pp-borda,#eee); padding-top:9px; margin-bottom:11px; }
.prog-auto summary{ font-size:11.5px; color:#6b6760; cursor:pointer; margin-bottom:8px; }
.prog-auto label{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.prog-auto label input, .prog-auto label select{ width:150px; margin-top:0; }
.prog-auto #pg_gerar{ width:100%; margin-top:6px; }
/* ENTREGA POR GATILHO ("assim que aparecer") e RELATIVA ("30 dias depois da
1ª") — 18/09. Produto esgotado no fornecedor não tem data pra escolher. */
.prog-linha select{ flex:1; margin:0 !important; font-size:11.5px !important; padding:4px 5px !important; }
.prog-gatilho{ flex:1; font-size:10.5px !important; color:#8a4b06; background:#fdefdc;
border-radius:3px; padding:4px 6px; text-align:center; white-space:nowrap; }
.prog-rel{ display:flex; align-items:center; gap:4px; font-size:11px; color:#6b6760; }
.prog-rel input{ width:52px !important; margin:0 !important; text-align:center; }
/* VALIDADE DA ENCOMENDA (18/09) — "se não aparecer até tal dia, cancela". */
.prog-limite{ display:block !important; border-top:1px solid var(--pp-borda,#eee);
padding-top:10px; margin-top:4px; font-size:11.5px; color:#6b6760; }
.prog-limite input{ width:100% !important; margin-top:4px !important; }
.prog-limite small{ display:block; margin-top:4px; font-size:10px; color:#8f8a80; line-height:1.4; }
/* A CARTEIRA DENTRO DO PAINEL (18/09) — as entregas que já vêm viram âncora
pra ele programar "um ritmo até a 1ª entrega e outro até a 2ª". */
.prog-carteira{ background:#eef5fd; border:1px solid #cfe0f5; border-radius:5px;
padding:8px 10px; margin-bottom:11px; font-size:11px; color:#123a63; }
.prog-carteira b{ display:block; font-size:9.5px; letter-spacing:.6px;
text-transform:uppercase; color:#4a7ab0; margin-bottom:4px; }
.prog-carteira span{ display:block; line-height:1.5; }
.prog-ancora{ flex:1; font-size:10.5px !important; color:#123a63; background:#eef5fd;
border-radius:3px; padding:4px 6px; text-align:center; white-space:nowrap; }
/* PAINEL v3 (18/09) — sem seletor: a carteira dele desenha as janelas e ele
só preenche quanto precisa em cada uma. As duas versões anteriores tinham
um select de 5 opções e ele disse "tá meio confuso isso". */
.prog-aviso{ font-size:11px; line-height:1.5; color:#8a4b06; background:#fdefdc;
border-radius:5px; padding:8px 10px; margin:0 0 12px; }
.prog-aviso.ok{ color:#14572c; background:#e4f4ea; }
.prog-janela{ display:flex; align-items:center; gap:10px; padding:9px 0;
border-bottom:1px solid var(--pp-borda,#eee); }
.prog-janela:last-of-type{ border-bottom:none; }
.prog-janela input{ width:62px !important; margin:0 !important; text-align:center;
font-size:16px !important; font-weight:700; padding:7px 4px !important; }
.prog-janela div{ flex:1; }
.prog-janela b{ display:block; font-size:12px; color:var(--pp-texto,#1a1a1a); }
.prog-janela small{ display:block; font-size:10.5px; color:#8f8a80; margin-top:2px; line-height:1.4; }
/* v4: a DATA volta a ser um campo (18/09 — "como eu coloco as datas que eu
quero que o produto chegue?"). Duas coisas por linha: quantas e até quando. */
.prog-janela label{ display:block !important; font-size:10.5px !important;
color:#6b6760 !important; margin:0 !important; }
.prog-janela label input[type=date]{ width:100% !important; margin-top:2px !important;
font-size:12px !important; padding:4px 6px !important; }
.prog-janela small{ margin-top:3px !important; }
/* v5: COMPRAR e RECEBER são duas perguntas, cada uma com o seu rótulo (18/09).
Misturar as duas num campo só foi o que deixou as versões anteriores
confusas. */
.prog-janela{ align-items:flex-start !important; gap:12px !important; }
.pj-qtd{ text-align:center; }
.pj-qtd input{ width:58px !important; margin:0 !important; text-align:center;
font-size:16px !important; font-weight:700; padding:7px 4px !important; }
.pj-qtd span{ display:block; font-size:9.5px; color:#8f8a80; margin-top:2px; }
.pj-campos{ flex:1; }
.pj-campos label{ display:block !important; font-size:10.5px !important; color:#6b6760 !important;
margin:0 0 6px !important; }
.pj-campos label input, .pj-campos label select{ width:100% !important; margin-top:2px !important;
font-size:12px !important; padding:4px 6px !important; }
.pj-rel{ display:flex; align-items:center; gap:5px; margin-top:4px; font-size:11px; color:#6b6760; }
.pj-rel input{ width:56px !important; margin:0 !important; text-align:center; }
/* SETAS VISÍVEIS de + e − (18/09). As nativas foram escondidas em 16/09 porque
sumiam no fundo; estas são desenhadas, com borda e contraste. */
.grade-dono td.rep-q .rep-campo{ display:flex !important; align-items:stretch !important;
gap:1px !important; }
.grade-dono td.rep-q .rep-campo .rep-qtd{ flex:1 !important; min-width:0 !important; }
.grade-dono td.rep-q .rep-setas{ display:flex !important; flex-direction:column !important;
gap:1px !important; }
.grade-dono td.rep-q .rep-setas button{ width:13px !important; height:11px !important;
padding:0 !important; margin:0 !important; border:1px solid var(--pp-borda) !important;
border-radius:2px !important; background:#f4f1ea !important; color:#4a463f !important;
font-size:9px !important; line-height:1 !important; font-weight:700 !important;
font-family:inherit !important; cursor:pointer !important; display:flex !important;
align-items:center !important; justify-content:center !important; }
.grade-dono td.rep-q .rep-setas button:hover{ background:#1a1a1a !important; color:#fff !important;
border-color:#1a1a1a !important; }
/* a linha escrita por extenso — duas datas soltas confundiam (18/09) */
.pj-frase{ color:#4a463f !important; font-weight:700 !important; font-size:10.5px !important;
background:#f4f1ea; border-radius:3px; padding:3px 6px; margin-top:4px !important; }
/* ===================== SOBRAS DO TEMA ESCURO (21/09/2026) =====================
Victor: "essas combinacoes de cores do site esta muito ruim". Varri a tela
com o computador e sobraram pecas que o tema papel nunca cobriu, mais as que
eu mesmo criei hoje ja no preto/limao antigo. A regra da paleta continua a
mesma de 16/09: realce por PESO e CONTORNO — preto e branco —, e cor SO com
significado (vermelho falta, verde tem, azul faturado). */
/* a faixa de quem esta logado: era verde-oliva com letra limao */
.barra-sessao{ background-color:var(--pp-painel) !important; color:var(--pp-fraco) !important;
border-bottom:1px solid var(--pp-borda) !important; }
.barra-sessao b{ color:var(--pp-texto) !important; }
.barra-sessao button{ background:none !important; border:1px solid var(--pp-borda) !important;
color:var(--pp-fraco) !important; }
.barra-sessao button:hover{ border-color:#1a1a1a !important; color:#1a1a1a !important; }
/* o dropdown de marca, criado hoje: nasceu preto com limao */
.marca-bt{ background-color:var(--pp-painel) !important; border:1px solid var(--pp-borda) !important;
color:var(--pp-texto) !important; }
.marca-bt:hover{ border-color:#1a1a1a !important; color:#1a1a1a !important; }
.marca-bt.on{ background:#1a1a1a !important; border-color:#1a1a1a !important; color:#fff !important; }
.marca-menu{ background-color:var(--pp-painel) !important; border-color:var(--pp-borda) !important;
box-shadow:0 12px 32px rgba(0,0,0,.14) !important; }
.marca-op{ color:var(--pp-texto) !important; }
.marca-op:hover{ background-color:var(--pp-tenue) !important; border-color:var(--pp-borda) !important; }
.marca-op.on{ background:#1a1a1a !important; color:#fff !important; }
.marca-op i{ color:var(--pp-fraco) !important; }
/* o "?" do cabecalho era uma bolinha preta no papel */
.btn-ajuda{ background-color:var(--pp-painel) !important; border:1px solid var(--pp-borda) !important;
color:var(--pp-fraco) !important; }
.btn-ajuda:hover{ border-color:#1a1a1a !important; color:#1a1a1a !important; }
/* contador do "Filtrar e ordenar" e os iconezinhos limao do botao.
:not(.ctrl-badge) e obrigatorio — sem ele o contador herdava o preto do
botao e ficava preto no preto (medido em 21/09/2026, razao de contraste 1). */
.ctrl-badge{ background:#1a1a1a !important; color:#fff !important; }
.ctrl-btn > span:not(.ctrl-badge), .ctrl-btn > i{ color:inherit !important; }
/* a bolha de enviar link: e a acao principal da tela, entao vira o preto da
marca em vez do limao — o limao brigava com o preco e com a foto */
.bolha-link{ background:#1a1a1a !important; color:#fff !important;
box-shadow:0 6px 20px rgba(0,0,0,.28) !important; }
.bolha-link small, .bolha-link b{ color:#fff !important; }
.bolha-link:hover{ background:#000 !important; }
/* "ver todos" da vitrine e outros links que ficaram limao sobre papel */
.vt-mais, .vt-secao .vt-mais, a.vt-mais{ color:var(--pp-texto) !important; }
/* ---- CONTRASTE MEDIDO (21/09/2026) ----
Victor: "nem dando para ler vai continuar? voce nao conseguiu avaliar?".
Ele estava certo: eu tinha listado as cores em vez de MEDIR. Rodei o
calculo de contraste (o mesmo criterio de acessibilidade: 4.5 pra texto
miudo) em cada texto da tela e corrigi todos os que passavam despercebidos.
O script ficou em `contraste.js` pra rodar de novo a qualquer mudanca. */
.vt-tit button{ color:var(--pp-texto) !important; font-weight:800 !important; }
.off-chip b, .barra-envio .conta b, .busca-info b, .filtro-aviso b,
.lupa-info b, .remanejar-dica b, .stats b, .sug i, .mv-aqui b,
.hist-linha b, .transf-item .ti-qtd b{ color:var(--pp-texto) !important; }
.pf-fechar, .pf-titulo, .pf-contagem, .pf-limpar-topo{ color:var(--pp-fraco) !important; }
.vi-de, .vi-preco s, .vt-de{ color:#7a756c !important; }
.ctrl-btn span{ color:var(--pp-fraco) !important; }
.ctrl-btn .ctrl-badge{ color:#fff !important; }
.ctrl-select, .ctrl-select span{ color:var(--pp-fraco) !important; }
/* ===================== A BASE DE COR, REFEITA (21/09/2026) =====================
Victor: "o branco doi os olhos... voce nao esta agindo como um especialista".
Estava certo. O tema papel tinha fundo #f4f2ee e TUDO em cima dele em branco
puro: cabecalho, cards, area da foto. Branco sobre quase-branco nao e papel,
e clarao — e ainda apagava a hierarquia (nao dava pra ver onde um card
comeca). No meio disso, uma faixa de pastilhas PRETAS gritando.
A base agora tem TRES niveis de superficie, como papel de verdade:
mesa (fundo) -> folha (card) -> recorte (area da foto)
Cada um um degrau mais claro que o anterior, nenhum deles branco puro. E o
preto do texto vira um preto quente, que nao vibra contra o papel. */
:root{
--pp-fundo:#e7e3da; /* a mesa: bege de verdade, nao quase-branco */
--pp-painel:#fbfaf7; /* a folha: branco quebrado */
--pp-borda:#d8d2c6;
--pp-texto:#232019; /* preto quente: preto puro vibra no bege */
--pp-fraco:#6b6559;
--pp-tenue:#f2efe8; /* recorte: onde a foto senta */
}
/* a area da foto nao pode ser branco puro: a foto do fornecedor JA e recorte
em branco, entao ela se fundia com o card e o card com a pagina */
/* background-COLOR, nunca o atalho `background`: com !important o atalho
zera o background-image que o JS escreve inline em cada bloco, e as fotos
somem (Victor, 22/09/2026 — vitrine inteira em branco). */
.img-wrap, .card .img-wrap, .vt-item .vi-foto, .vt-cat, .vt-cat i{
background-color:var(--pp-tenue) !important; }
.card{ box-shadow:0 1px 2px rgba(60,50,35,.06) !important; }
/* as pastilhas de motivo eram uma faixa preta atravessando a pagina.
Viram papel com contorno; a escolhida e que fica escura. */
.esg-btn{ background-color:var(--pp-painel) !important; border:1px solid var(--pp-borda) !important;
color:var(--pp-texto) !important; box-shadow:none !important; }
.esg-btn:hover{ border-color:var(--pp-texto) !important; }
.esg-btn.active{ background:var(--pp-texto) !important; border-color:var(--pp-texto) !important;
color:var(--pp-painel) !important; }
.esg-btn .tab-count{ background:rgba(0,0,0,.07) !important; color:var(--pp-fraco) !important; }
.esg-btn.active .tab-count{ background:rgba(255,255,255,.18) !important; color:#fff !important; }
.esg-filtro{ background:none !important; }
/* o que sobrou de branco puro pintado a mao vira a folha quebrada */
header, .header-linha, .barra-periodo, .barra-controle, .barra-voltar,
.marcas-fixas, .lado-dono, .est-bloco, .barra-baixo, .card, .painel-filtros,
.marca-menu, .vt-item, .vt-prateleira .card{ background-color:var(--pp-painel) !important; }
/* ---- segunda rodada de medicao, agora na tela do DONO (21/09/2026) ----
A primeira rodada mediu so a vitrine do cliente. Na tela interna sobraram
estes — inclusive a pastilha de sugestao de remanejamento, que continuava
escura do tema antigo e por isso ficou texto preto no preto quando eu
troquei a cor do texto. Medido, nao olhado. */
.sug{ background-color:var(--pp-tenue) !important; border:1px solid var(--pp-borda) !important;
color:var(--pp-texto) !important; }
.sug b{ color:var(--pp-texto) !important; }
.sug i{ color:var(--pp-fraco) !important; }
.remanejar-dica, .pag-conta, .per-livre, .per-resumo, .per-resumo b,
.ord-mais, .rot, .bv-onde, .carimbo{ color:var(--pp-fraco) !important; }
.remanejar-dica b{ color:var(--pp-texto) !important; }
/* os tracinhos de "essa loja nao tem" precisam ser visiveis, nao invisiveis */
.vazia, .grade-loja s, .est-tab s{ color:#9c9587 !important; }
/* especificidade dobrada: havia regra mais forte segurando o cinza claro */
.vazia.vazia, td.vazia, .est-tab td.vazia, .est-tab s, .grade-loja s, s.s{ color:#8f887a !important; }
.est-tab .vazia, .est-bloco .vazia{ color:#8f887a !important; }
.adiar-label, .btn-adiar-dias, .preco-de, .preco-wrap s, .card s,
.detalhe-seta, .est-bloco span.seta{ color:var(--pp-fraco) !important; }
/* ---- O MOSAICO DE BRANCOS (22/09/2026) ----
As fotos vem de fontes diferentes e cada uma traz o SEU fundo: umas em
branco puro, outras num azulado ou cinza de estudio. Lado a lado viram um
mosaico. Como a foto e sempre recorte sobre fundo claro, `multiply` faz o
fundo dela se dissolver no papel: branco x papel = papel. O que sobra e a
peca. Nao mexe em arquivo de imagem nenhum.
SO nos blocos de CATEGORIA, que sao decorativos. Nos cards de produto eu
testei e tirei: multiply tinge a peca com o tom do papel, e uma camiseta
branca passaria a parecer creme — num catalogo a COR da peca nao pode
mentir. */
.vt-cat i{ mix-blend-mode:multiply; }
/* TITULO DE BLOCO DA FARM (24/09/2026).
Ficou `color:#e8ff00` do tema escuro antigo: no fundo claro deu contraste
1,07:1 — o minimo legivel e 4,5:1. Ele: *"essa cor ta muito ruim"*, e estava
certo, o titulo era praticamente invisivel. A contagem entre parenteses
continua discreta, mas agora legivel. */
.cor-header{color:var(--pp-texto,#232019);font-weight:700}
.cor-header .qtd{color:var(--pp-fraco,#6b6559)}
.sub-est{color:var(--pp-texto,#232019)}
/* Varredura de contraste da aba Farm (24/09/2026) — o titulo amarelo me fez
medir a pagina inteira e apareceram mais quatro, todos abaixo do minimo
legivel (4,5:1 pra texto normal, 3:1 pra texto grande). */
/* contagem dentro do botao ATIVO: texto escuro em cima de fundo escuro (1:1) */
.esg-btn.active .tab-count,
.tb-btn.active .tab-count{color:#fff}
/* "adicionar imagem" no lugar da foto: cinza em cima de cinza (3,21:1) */
.no-img .txt{color:#cfc9bb}
/* a setinha de "detalhe por loja" (3,43:1) */
.card .ver-detalhe span,.ver-detalhe span{color:var(--pp-fraco,#6b6559) !important}
/* PROMOÇÃO (a peca esta com desconto ha mais de 7 dias) x NEW PROMO (entrou
agora). Cores diferentes pra dar pra separar de longe. */
.novo-tag.promo-tag{background-color:#1a1a1a;color:#fff}
/* "tirar todas" na aba Ja na transferencia: acao destrutiva nao se confunde
com as outras, mas tambem nao grita — fica vermelha so no contorno. */
.lixo-carrinho{border-color:#c98a84 !important;color:#8a2a22 !important}
.lixo-carrinho:hover{background-color:#fdeceb !important}
|