/* ============== OS TRÊS TEMAS (05/08) ==============
claro = "Lado da Luz" — fundo claro, acento ciano, Hoth no horizonte
escuro = "Painel Imperial" — chumbo sólido e sóbrio, acento vermelho tático
galaxia = "Hiperespaço" — o céu estrelado com cartões de vidro fosco */
:root {
--tinta: #24303f;
--tinta-forte: #0c1420;
--tinta-fraca: #64748b;
--fundo: #f6f8fb;
--cartao: #ffffff;
--borda: #dbe2ec;
--acento: #0b7bc4;
--acento-claro: #e6f2fb;
--neon: rgba(11, 123, 196, .28);
--topo-fundo: #14202e;
--registro-fundo: #14202e;
--registro-tinta: #cfe0f5;
--cab-tabela: #eef1f5;
--ok: #1e7e34;
--ok-fundo: #e3f3e8;
--alerta: #9a6700;
--alerta-fundo: #fff3d6;
--ruim: #b02a37;
--ruim-fundo: #f8e2e5;
color-scheme: light;
--rosa: #d81b7a; /* Onda 3: o botão do Relatório do Alex */
--rosa-brilho: #ff5fae;
--rosa-neon: rgba(216,27,122,.45);
--rosa-tinta: #fff;
}
:root[data-tema="escuro"] {
/* Painel Imperial: nada de galáxia — chumbo sólido, foco total */
--tinta: #dbe3ee;
--tinta-forte: #f4f7fb;
--tinta-fraca: #8b98ab;
--fundo: #0f1420;
--cartao: #151c2a;
--borda: #293449;
--acento: #e25563;
--acento-claro: #2c1b26;
--neon: rgba(226, 85, 99, .30);
--topo-fundo: #0a0e18;
--registro-fundo: #0a0e18;
--registro-tinta: #e8b8c0;
--cab-tabela: #1a2334;
--ok: #4ecb6a;
--ok-fundo: #15321d;
--alerta: #e5b64d;
--alerta-fundo: #37300f;
--ruim: #ef7683;
--ruim-fundo: #3a1a1f;
color-scheme: dark;
--rosa: #ff2d84;
--rosa-brilho: #ff86bd;
--rosa-neon: rgba(255,45,132,.5);
}
:root[data-tema="galaxia"] {
/* Hiperespaço: o tema clássico do Holocron, agora com vidro fosco */
--tinta: #e2e8f0;
--tinta-forte: #ffffff;
--tinta-fraca: #94a3b8;
--fundo: #0b0f1a;
--cartao: rgba(15, 21, 35, .68);
--borda: rgba(125, 145, 185, .30);
--acento: #55a0ec;
--acento-claro: rgba(60, 110, 180, .20);
--neon: rgba(85, 160, 236, .35);
--topo-fundo: rgba(8, 12, 22, .8);
--registro-fundo: rgba(8, 12, 22, .8);
--registro-tinta: #9fc3ec;
--cab-tabela: rgba(26, 36, 56, .85);
--ok: #4ecb6a;
--ok-fundo: rgba(30, 80, 45, .45);
--alerta: #e5b64d;
--alerta-fundo: rgba(80, 68, 18, .45);
--ruim: #ef7683;
--ruim-fundo: rgba(88, 36, 44, .45);
color-scheme: dark;
--rosa: #f0409a;
--rosa-brilho: #ff9ad0;
--rosa-neon: rgba(240,64,154,.55);
}
* { box-sizing: border-box; }
/* o atributo hidden SEMPRE vence: qualquer display de classe (label block,
popup flex...) o atropelaria em silêncio — já mordeu duas vezes em 30/07 */
[hidden] { display: none !important; }
body {
margin: 0;
font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
color: var(--tinta);
background: var(--fundo);
font-size: 15px;
}
main { max-width: 1180px; margin: 0 auto; padding: 16px 20px 48px; }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
/* títulos com a fonte de "monitor tático" (Rajdhani), levemente espaçados */
h1, h2, h3 {
font-family: "Rajdhani", "Inter", "Segoe UI", sans-serif;
letter-spacing: 0.02em;
color: var(--tinta-forte, var(--tinta));
}
h1 { font-size: 1.55rem; margin: .6em 0 .4em; font-weight: 600; }
h2 { font-size: 1.18rem; margin: 1.6em 0 .5em; font-weight: 600; }
h3 { font-size: 1.05rem; }
code { background: var(--acento-claro); padding: 1px 6px; border-radius: 4px; }
/* (o topo horizontal virou menu lateral — ver .menu-lateral no fim) */
.avisos { max-width: 1180px; margin: 12px auto 0; padding: 0 20px; }
.aviso {
background: var(--acento-claro);
border: 1px solid var(--acento);
border-radius: 6px;
padding: 8px 12px;
margin-bottom: 6px;
}
.painel-busca { margin: 14px 0 10px; }
.busca { display: flex; gap: 8px; flex-wrap: wrap; }
.busca input[type=search] {
flex: 1; min-width: 240px;
padding: 9px 12px; border: 1px solid var(--borda); border-radius: 6px; font-size: 15px;
}
.busca select, .busca button {
padding: 9px 14px; border: 1px solid var(--borda); border-radius: 6px;
background: var(--cartao); font-size: 14px; cursor: pointer;
}
.busca button { background: var(--acento); color: #fff; border-color: var(--acento); }
.resumo { margin-top: 8px; color: var(--tinta-fraca); font-size: .9rem; }
.tabela {
width: 100%; border-collapse: collapse; background: var(--cartao);
border: 1px solid var(--borda); border-radius: 8px; overflow: hidden;
}
.tabela th, .tabela td { padding: 8px 10px; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: middle; }
.tabela thead th { background: var(--cab-tabela); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tinta-fraca); }
.tabela tbody tr:hover { background: var(--acento-claro); cursor: pointer; }
.tabela.sem-clique tbody tr:hover { background: inherit; cursor: default; }
.rolagem-x { overflow-x: auto; }
.titulo-bloco { font-weight: 700; color: var(--tinta); margin-bottom: 4px; }
.par-parametro { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .86rem; }
.par-parametro strong { color: var(--tinta); }
.campo-parametro { width: 90px; padding: 4px 8px; border: 1px solid var(--borda); border-radius: 5px; text-align: right; font-size: .86rem; }
.linha-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--cartao); border: 1px solid var(--borda); border-radius: 8px; padding: 10px 14px; margin: 10px 0; }
.linha-form input { padding: 7px 10px; border: 1px solid var(--borda); border-radius: 6px; }
.linha-form button { background: var(--acento); color: #fff; border: none; border-radius: 6px; padding: 8px 16px; cursor: pointer; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela .atencao { color: var(--alerta); font-weight: 700; }
.tabela tr.apagado td { color: var(--tinta-fraca); background: transparent; cursor: default; }
.mini img { width: 76px; height: 76px; object-fit: cover; border-radius: 8px; display: block; }
.sem-foto { font-size: .7rem; color: var(--tinta-fraca); display: inline-block; width: 76px; text-align: center; }
.paginacao { display: flex; gap: 16px; align-items: center; justify-content: center; margin: 18px 0; color: var(--tinta-fraca); }
.migalha { margin: 12px 0 0; font-size: .9rem; }
.cabecalho-sku { background: var(--cartao); border: 1px solid var(--borda); border-radius: 8px; padding: 14px 16px; margin-top: 10px; }
.cabecalho-sku h1 { margin: 0 0 8px; }
.sku { font-size: .95rem; margin-left: 8px; }
.fatos { display: flex; gap: 18px; flex-wrap: wrap; font-size: .92rem; }
.fonte { color: var(--tinta-fraca); font-size: .82rem; }
.etiqueta {
display: inline-block; padding: 2px 10px; border-radius: 999px;
font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
}
.etiqueta.ativo { background: var(--ok-fundo); color: var(--ok); }
.etiqueta.pausado { background: var(--alerta-fundo); color: var(--alerta); }
.etiqueta.encerrado { background: var(--ruim-fundo); color: var(--ruim); }
.etiqueta.desconhecido { background: #eceff3; color: var(--tinta-fraca); }
.etiqueta.revisao { background: #fdeee7; color: #a4522e; }
/* ------- painel ------- */
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 14px 0 6px; }
.cartao-num {
background: var(--cartao); border: 1px solid var(--borda); border-radius: 8px;
padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; font-size: .88rem;
color: var(--tinta-fraca);
}
.cartao-num .num-grande { font-size: 1.9rem; font-weight: 700; color: var(--tinta); line-height: 1.1; }
.cartao-num.borda-alerta { border-color: #fab219; }
.legenda { display: flex; gap: 16px; flex-wrap: wrap; margin: 6px 0 10px; font-size: .84rem; color: var(--tinta-fraca); }
.leg-item { display: inline-flex; align-items: center; gap: 6px; }
.leg-cor { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
/* status: ordem validada ativo→pausado→encerrado→revisao (dataviz) */
.st-ativo { background: #0ca30c; }
.st-pausado { background: #fab219; }
.st-encerrado { background: #98a1ad; }
.st-revisao { background: #ec835a; }
.st-desconhecido { background: #d5dae1; }
.seg.cob { background: #2a78d6; }
.grafico-barras { background: var(--cartao); border: 1px solid var(--borda); border-radius: 8px; padding: 12px 16px; }
.linha-barra { display: grid; grid-template-columns: 300px 1fr 60px; gap: 10px; align-items: center; padding: 5px 0; }
.rotulo-barra { font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trilha { display: flex; gap: 2px; min-height: 18px; align-items: center; }
.seg {
height: 18px; border-radius: 4px; min-width: 3px;
font-size: .72rem; font-weight: 600; color: #fff;
display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.seg.st-pausado, .seg.st-desconhecido { color: #4a3d10; }
.seg.st-encerrado { color: #2c333c; }
.total-barra { font-size: .84rem; color: var(--tinta-fraca); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .linha-barra { grid-template-columns: 1fr; gap: 3px; } .total-barra { text-align: left; } }
.ruim { color: var(--ruim); font-weight: 600; }
/* semáforo da margem nos cartões do SKU:
verde ≥ margem-alvo · amarelo entre a mínima e o alvo · vermelho < mínima
(o seletor .mkt-linhas strong.… é necessário: .mkt-linhas strong pinta a
tinta padrão com mais especificidade e engoliria a cor do semáforo) */
.margem-verde, .mkt-linhas strong.margem-verde { color: var(--ok); font-weight: 700; }
.margem-amarelo, .mkt-linhas strong.margem-amarelo { color: var(--alerta); font-weight: 700; }
.margem-vermelho, .mkt-linhas strong.margem-vermelho { color: var(--ruim); font-weight: 700; }
.mkt-linhas strong.ruim { color: var(--ruim); }
/* pulso de confirmação quando o preço manual salva sem recarregar */
.cartao-mkt.cartao-salvo { box-shadow: 0 0 0 2px var(--ok); transition: box-shadow .3s; }
/* dropdown de categorias no catálogo (multi-seleção) */
.filtro-categorias { position: relative; }
.filtro-categorias summary { list-style: none; cursor: pointer; padding: 8px 12px;
border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo);
color: var(--tinta); font-size: .9rem; user-select: none; white-space: nowrap; }
.filtro-categorias summary::-webkit-details-marker { display: none; }
.filtro-categorias[open] summary { border-color: var(--acento); }
.lista-categorias { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0;
min-width: 240px; background: var(--cartao); border: 1px solid var(--borda);
border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.lista-categorias label { display: flex; align-items: center; gap: 8px;
font-size: .9rem; color: var(--tinta); cursor: pointer; white-space: nowrap; }
.lista-categorias a.discreto { font-size: .82rem; color: var(--acento); margin-top: 4px; }
.lista-categorias .aplicar-cats { margin-top: 8px; padding: 6px 12px; font-size: .88rem; }
/* rotinas do mês: faixa-lembrete no topo + cartões de checklist */
.faixa-rotinas { display: block; margin: 10px 0 0; padding: 10px 16px; border-radius: 10px;
background: var(--alerta-fundo); color: var(--alerta); border: 1px solid var(--alerta);
text-decoration: none; font-size: .95rem; }
.faixa-rotinas:hover { filter: brightness(1.05); }
.rot-meses { display: flex; align-items: center; gap: 14px; margin: 10px 0 18px; }
.rot-meses strong { font-size: 1.1rem; }
.grade-rotinas { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 16px; margin-bottom: 26px; }
.cartao-rotina { background: var(--cartao); border: 1px solid var(--borda);
border-left: 4px solid var(--alerta); border-radius: 12px; padding: 14px 16px; }
.cartao-rotina.rotina-completa { border-left-color: var(--ok); }
.rot-topo { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.rot-progresso { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rot-placar { font-size: .9rem; white-space: nowrap; }
.rot-trilha { flex: 1; height: 8px; border-radius: 5px; background: var(--cab-tabela); overflow: hidden; }
.rot-barra { height: 100%; background: var(--ok); transition: width .25s; }
.rot-itens { display: flex; flex-direction: column; gap: 4px; }
.rot-item { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px;
padding: 4px 6px; border-radius: 7px; cursor: pointer; font-size: .92rem; }
.rot-item:hover { background: var(--acento-claro); }
.rot-item.feito .rot-nome { color: var(--tinta-fraca); text-decoration: line-through; }
.rot-nome { flex: 1 1 auto; min-width: 60%; }
.rot-quem { margin-left: auto; white-space: nowrap; font-size: .78rem; }
.rot-editar { margin-top: 10px; }
.rot-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.rot-form input[type=text], .rot-form input[type=number], .rot-form textarea {
width: 100%; padding: 6px 10px; border: 1px solid var(--borda); border-radius: 7px;
background: var(--fundo); color: var(--tinta); }
.rot-acoes { display: flex; gap: 10px; align-items: center; }
/* tela de planilhas: tiles de marketplace = "radios de painel" (06/08) —
todos do mesmo tamanho, apagados; o escolhido ACENDE em neon da marca */
.rotulo-tiles { margin: 12px 0 6px; }
.tiles-plataforma { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.tile-plataforma {
flex: 1 1 0; min-width: 108px; display: flex; align-items: center;
justify-content: center; padding: 11px 10px;
border-radius: 10px; cursor: pointer; border: 1px solid var(--borda);
background: transparent; color: var(--tinta-fraca);
font-family: "Rajdhani", "Inter", sans-serif; font-weight: 600;
letter-spacing: .04em; text-transform: uppercase; font-size: .88rem;
transition: color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.tile-plataforma input { position: absolute; opacity: 0; pointer-events: none; }
.tile-plataforma:hover { color: var(--tinta); border-color: var(--tinta-fraca); }
.tile-plataforma:has(input:checked) {
color: var(--mkt); border-color: var(--mkt);
box-shadow: 0 0 12px color-mix(in srgb, var(--mkt) 38%, transparent),
inset 0 0 10px color-mix(in srgb, var(--mkt) 10%, transparent);
text-shadow: 0 0 8px color-mix(in srgb, var(--mkt) 55%, transparent);
}
/* a dropzone do arquivo (06/08): nada de input nativo à mostra */
.dropzone {
display: flex; align-items: center; justify-content: center; gap: 12px;
padding: 20px 16px; margin: 4px 0 4px;
border: 1.5px dashed color-mix(in srgb, var(--acento) 55%, transparent);
border-radius: 12px; cursor: pointer; position: relative;
color: var(--tinta); text-align: center;
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.dropzone .icone { width: 1.8em; height: 1.8em; color: var(--acento); }
.dropzone .dz-texto { display: flex; flex-direction: column; gap: 2px; }
.dropzone:hover, .dropzone.dz-arrastando {
border-color: var(--acento); background: var(--acento-claro);
box-shadow: 0 0 14px var(--neon);
}
.dropzone.dz-carregada {
border-style: solid; border-color: color-mix(in srgb, var(--ok) 60%, transparent);
}
.dropzone.dz-carregada .icone { color: var(--ok); }
/* o input fica invisível mas focável — a validação do required ainda fala */
.dropzone input[type="file"] {
position: absolute; opacity: 0; width: 2px; height: 2px; pointer-events: none;
}
/* hierarquia: só UM botão sólido por tela; o secundário é fantasma no acento */
.fantasma-acento {
border-color: color-mix(in srgb, var(--acento) 55%, transparent);
color: var(--acento);
}
.biblioteca-mes .botao { box-shadow: 0 0 14px var(--neon); }
.avancado { margin: 8px 0 14px; }
.avancado-opcoes { display: flex; flex-direction: column; gap: 6px; padding: 10px 4px; }
/* o popup dos jedi (preenchimento em andamento) */
.popup-fundo { position: fixed; inset: 0; z-index: 60; background: rgba(5, 8, 14, .72);
display: flex; align-items: center; justify-content: center; }
/* o display: flex acima atropelaria o atributo hidden — esta regra devolve a
palavra final ao hidden (foi assim que o popup nasceu aberto em 30/07) */
.popup-fundo[hidden] { display: none; }
.popup-caixa { background: var(--cartao); border: 1px solid var(--borda);
border-radius: 14px; padding: 22px 26px; text-align: center; min-width: 340px; }
.popup-caixa h3 { margin: 0 0 12px; }
/* v2 (03/08): as animacoes dos popups viraram vetoriais com luz — os canvas
rodam em 2x e encolhem para ficar nitidos em qualquer tela (nada de 8-bit) */
#canvas-jedi { width: 280px; height: 90px; }
#canvas-falcon { width: 460px; height: 130px; }
#canvas-r2 { width: 420px; height: 170px; }
.pop-trilha { height: 12px; border-radius: 7px; background: var(--cab-tabela);
overflow: hidden; margin: 12px 0 6px; }
.pop-barra { height: 100%; width: 0; background: var(--ok); transition: width .4s; }
.pop-pct { font-variant-numeric: tabular-nums; color: var(--tinta-fraca); }
/* padrão da casa: popup de carregamento NÃO fecha sozinho nos 100% —
este botão aparece e só o clique fecha (e recarrega) */
.pop-concluido { margin-top: 14px; }
/* 05/08: histórico/log recolhidos (última linha + botão expandir à direita) */
.linha-log { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.linha-log .expande { margin-left: auto; white-space: nowrap; }
/* popup com formulário dentro (nova rotina, aviso do frescor) */
.popup-caixa.caixa-form { max-width: 560px; text-align: left; }
.popup-caixa.caixa-form h3 { text-align: center; }
/* 06/08: os dois TERMINAIS DE COMANDO da tela Sincronizar e Importar */
.terminais {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
margin: 14px 0 8px; min-width: 0;
}
.terminais .widget { min-width: 0; }
.terminal-corpo {
padding: 4px 16px 14px; display: flex; flex-direction: column; gap: 10px;
flex: 1 1 auto;
}
.terminal-corpo p { margin: 0; }
.terminal-corpo form { margin-top: auto; display: flex;
flex-direction: column; gap: 10px; }
.dropzone-slim { padding: 14px 12px; }
/* o botão principal brilha SEMPRE; o desarmado é fantasma apagado */
.botao-brilho { box-shadow: 0 0 14px var(--neon); }
.fantasma[disabled] { opacity: .5; cursor: default; }
.fantasma[disabled]:hover { border-color: var(--borda); color: var(--tinta);
box-shadow: none; }
@media (max-width: 1100px) {
.terminais { display: block; }
.terminais .widget { margin-bottom: 14px; }
}
/* ====================================================================
O SISTEMA DE DESIGN "PAINEL TÁTICO" (05/08, pedido do Leandro)
==================================================================== */
/* --- os ícones vetoriais (icones.svg) no lugar dos emojis --- */
.icone { width: 1.1em; height: 1.1em; vertical-align: -0.18em; flex: none; }
.icone-acento { color: var(--acento); }
h1 .icone, h2 .icone { width: 1em; height: 1em; margin-right: 2px; }
/* --- tipografia de tabela: cabeçalho "leitura de radar" + números tabulares --- */
table { font-variant-numeric: tabular-nums; }
th {
text-transform: uppercase;
font-size: 0.74rem;
letter-spacing: 0.06em;
font-weight: 600;
color: var(--tinta-fraca);
}
/* --- barras de rolagem do tema, finas e discretas --- */
html { scrollbar-color: var(--borda) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--borda); border-radius: 6px;
border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--acento); background-clip: content-box; }
/* --- badges com LED: bolinha acesa antes do texto --- */
.etiqueta {
display: inline-flex; align-items: center; gap: 6px;
padding: 2px 10px; border-radius: 999px;
font-size: 0.78rem; font-weight: 500;
background: transparent; border: 1px solid var(--borda);
color: var(--tinta);
}
.etiqueta::before {
content: ""; width: 7px; height: 7px; border-radius: 50%;
background: var(--tinta-fraca); flex: none;
}
.etiqueta.ativo { border-color: color-mix(in srgb, var(--ok) 45%, transparent); color: var(--ok); }
.etiqueta.ativo::before { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.etiqueta.pausado { border-color: color-mix(in srgb, var(--alerta) 45%, transparent); color: var(--alerta); }
.etiqueta.pausado::before { background: var(--alerta); box-shadow: 0 0 6px var(--alerta); }
.etiqueta.encerrado { color: var(--tinta-fraca); }
.etiqueta.revisao { border-color: color-mix(in srgb, var(--ruim) 45%, transparent); color: var(--ruim); }
.etiqueta.revisao::before { background: var(--ruim); box-shadow: 0 0 6px var(--ruim); }
/* o LED solto (semáforos): */
.led { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
vertical-align: baseline; margin-right: 2px; }
.led.verde { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.led.amarelo { background: var(--alerta); box-shadow: 0 0 6px var(--alerta); }
.led.vermelho { background: var(--ruim); box-shadow: 0 0 6px var(--ruim); }
/* --- botões: o principal brilha ao passar o mouse; o resto é fantasma --- */
.botao { transition: box-shadow .18s ease, transform .1s ease, background .18s ease; }
.botao:hover { box-shadow: 0 0 14px var(--neon); }
.fantasma {
background: transparent; border: 1px solid var(--borda);
color: var(--tinta); border-radius: 8px; padding: 8px 14px; cursor: pointer;
transition: border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.fantasma:hover { border-color: var(--acento); color: var(--acento);
box-shadow: 0 0 10px var(--neon); }
/* --- caixas de marcar com borda neon (sem o "V" azul do navegador) --- */
input[type="checkbox"] {
appearance: none; -webkit-appearance: none;
width: 16px; height: 16px; flex: none;
border: 1px solid var(--tinta-fraca); border-radius: 4px;
background: transparent; cursor: pointer; position: relative;
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
vertical-align: -3px;
}
input[type="checkbox"]:hover { border-color: var(--acento); }
input[type="checkbox"]:checked {
border-color: var(--acento); background: var(--acento);
box-shadow: 0 0 8px var(--neon);
}
input[type="checkbox"]:checked::after {
content: ""; position: absolute; left: 4.5px; top: 1.5px;
width: 4px; height: 8px;
border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
input[type="radio"] { accent-color: var(--acento); }
/* --- selects do tema (seta própria, nada de padrão do Windows) --- */
select {
appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 10px center;
padding-right: 28px !important;
color: var(--tinta);
}
/* --- input de arquivo: o botão do navegador vira botão do tema --- */
input[type="file"] { color: var(--tinta-fraca); font-size: .9rem; }
input[type="file"]::file-selector-button {
background: transparent; border: 1px solid var(--acento);
color: var(--acento); border-radius: 8px; padding: 7px 14px;
margin-right: 10px; cursor: pointer; font-family: inherit; font-size: .9rem;
transition: box-shadow .18s ease, background .18s ease;
}
input[type="file"]::file-selector-button:hover {
box-shadow: 0 0 10px var(--neon); background: var(--acento-claro);
}
/* --- estado vazio com radar, em vez de tela muda --- */
.vazio {
display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 26px 16px; color: var(--tinta-fraca); text-align: center;
}
.vazio::before {
content: ""; width: 40px; height: 40px; opacity: .5;
background-color: var(--tinta-fraca);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
/* --- avisos como TOASTS: deslizam no canto, com borda neon --- */
.avisos {
position: fixed; top: 16px; right: 16px; z-index: 200;
max-width: 420px; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.aviso {
background: var(--cartao); border: 1px solid var(--acento);
border-left-width: 3px; border-radius: 10px;
padding: 10px 14px; margin: 0;
box-shadow: 0 6px 22px rgba(0, 0, 0, .35), 0 0 12px var(--neon);
animation: toast-entra .25s ease;
pointer-events: auto; font-size: .92rem;
}
.aviso.erro { border-color: var(--ruim);
box-shadow: 0 6px 22px rgba(0, 0, 0, .35), 0 0 12px rgba(220, 60, 80, .35); }
.aviso.some { opacity: 0; transform: translateX(16px);
transition: opacity .4s ease, transform .4s ease; }
@keyframes toast-entra {
from { opacity: 0; transform: translateX(24px); }
to { opacity: 1; transform: none; }
}
/* --- a trilha de navegação (breadcrumb de diretório) --- */
.trilha {
font-size: .78rem; letter-spacing: .05em; text-transform: uppercase;
color: var(--tinta-fraca); margin: 10px 0 -4px;
font-family: "Rajdhani", "Inter", sans-serif;
}
.trilha strong { color: var(--acento); font-weight: 600; }
/* --- cantos chanfrados: o corte de 45° dos painéis sci-fi --- */
.envio, .popup-caixa, .cartao-mkt, .cartao-rotina {
clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
}
/* --- tooltip escuro no [ i ]: i --- */
.dica {
display: inline-flex; align-items: center; justify-content: center;
width: 15px; height: 15px; border-radius: 50%;
border: 1px solid var(--tinta-fraca); color: var(--tinta-fraca);
font-size: .68rem; font-style: normal; cursor: help; position: relative;
vertical-align: 2px;
}
.dica:hover { border-color: var(--acento); color: var(--acento); }
.dica:hover::after {
content: attr(data-dica); position: absolute; z-index: 90;
bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
width: max-content; max-width: 320px; white-space: normal;
background: var(--registro-fundo); color: var(--registro-tinta);
border: 1px solid var(--borda); border-radius: 8px;
padding: 8px 12px; font-size: .8rem; line-height: 1.4; text-align: left;
box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}
/* --- barras de dados com energia: pontas arredondadas + brilho --- */
.pop-barra, .rot-barra {
border-radius: 4px;
background-image: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(0, 0, 0, .08));
box-shadow: 0 0 8px var(--neon);
}
.pop-trilha, .rot-trilha { height: 9px; border-radius: 6px; }
/* ====================================================================
O PAINEL TÁTICO SEM ROLAGEM (06/08): a página trava em 100vh e cada
widget rola por dentro. Linha 1 = KPIs · 2 = gráficos · 3 = alertas.
==================================================================== */
body:has(main.painel-tatico) { overflow: hidden; }
/* a trilha (e a faixa de rotinas) moram ACIMA do main: o contêiner vira uma
coluna de 100vh e o main ocupa o resto — nada estoura a tela */
body:has(main.painel-tatico) .conteudo {
height: 100vh; display: flex; flex-direction: column; overflow: hidden;
}
main.painel-tatico {
flex: 1 1 0; min-height: 0; max-width: none;
padding: 6px 22px 14px;
display: flex; flex-direction: column; gap: 10px;
overflow: hidden;
}
.pt-topo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; flex: none; }
.pt-topo h1 { margin: 0; }
.pt-topo .fonte { margin: 0; }
.botao-fontes { margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
font-size: .85rem; }
.painel-tatico .cartoes { flex: none; margin: 0; }
.pt-meio {
display: grid; grid-template-columns: 3fr 2fr; gap: 12px;
flex: 11 1 0; min-height: 0;
}
.pt-alertas { flex: 9 1 0; min-height: 0; }
.widget {
background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px;
display: flex; flex-direction: column; min-height: 0; overflow: hidden;
clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
}
:root[data-tema="galaxia"] .widget { backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
.widget-cab { padding: 10px 16px 6px; display: flex; align-items: baseline; gap: 12px;
flex-wrap: wrap; flex: none; }
.widget-cab h2 { margin: 0; }
.widget-corpo { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 4px 16px 12px; }
/* as abas da Central de Alertas */
.abas { display: flex; align-items: center; gap: 4px; padding: 8px 12px 0;
border-bottom: 1px solid var(--borda); flex: none; flex-wrap: wrap; }
.abas-titulo {
font-family: "Rajdhani", "Inter", sans-serif; font-weight: 600;
text-transform: uppercase; letter-spacing: .06em; font-size: .8rem;
color: var(--tinta-fraca); margin-right: 10px; padding-bottom: 8px;
}
.aba {
background: transparent; border: 1px solid transparent; border-bottom: none;
color: var(--tinta-fraca); padding: 7px 14px 9px; cursor: pointer;
border-radius: 9px 9px 0 0;
font-family: "Rajdhani", "Inter", sans-serif; font-weight: 600;
font-size: .95rem; letter-spacing: .03em;
display: inline-flex; align-items: center; gap: 7px;
transition: color .15s ease, background .15s ease;
}
.aba:hover { color: var(--tinta); }
.aba.ativa {
color: var(--acento); background: var(--acento-claro);
border-color: var(--borda);
box-shadow: inset 0 2px 0 var(--acento);
}
.conta-aba { font-size: .72rem; border: 1px solid currentColor; border-radius: 999px;
padding: 0 7px; opacity: .85; }
.aba-nota { margin: 6px 0 8px; }
/* diferença de preço é RISCO: vermelho neon, não amarelo */
.risco { color: var(--ruim); font-weight: 600;
text-shadow: 0 0 10px color-mix(in srgb, var(--ruim) 45%, transparent); }
/* a gaveta do terminal (fontes do Arquivo) */
.gaveta-fundo { position: fixed; inset: 0; background: rgba(4, 6, 12, .5); z-index: 120; }
.gaveta {
position: fixed; top: 0; right: 0; bottom: 0; width: min(500px, 92vw);
background: var(--cartao); border-left: 1px solid var(--borda); z-index: 121;
padding: 16px 20px; overflow-y: auto;
box-shadow: -12px 0 40px rgba(0, 0, 0, .45);
animation: gaveta-entra .22s ease;
}
:root[data-tema="galaxia"] .gaveta { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
@keyframes gaveta-entra { from { transform: translateX(36px); opacity: 0; } }
.gaveta-cab { display: flex; justify-content: space-between; align-items: center; }
.gaveta-cab h3 { margin: 6px 0; }
/* barras mais elegantes dentro do painel */
.painel-tatico .grafico-barras .trilha { height: 15px; border-radius: 4px; }
.painel-tatico .grafico-barras .seg { box-shadow: 0 0 6px rgba(0, 0, 0, .2); }
/* ---- Comissões e fretes: a central de calibragem (06/08) ---- */
.coluna-params { display: flex; flex-direction: column; gap: 10px;
flex: 1 1 0; min-height: 0; }
/* 06/08 (pedido do Leandro): o console é TRAVADO no tamanho do conteúdo —
não estica nem encolhe ao trocar de aba; o painel de tabelas preenche o
espaço restante da tela, e SÓ ele; a rolagem nasce DENTRO da aba ativa */
.params-console { flex: none; }
/* dentro do console travado, o corpo mede pelo CONTEÚDO (flex-basis 0 num pai
de altura automática colapsaria a zero) — com teto para telas baixas */
.params-console .widget-corpo { flex: none; max-height: 44vh; }
.params-abas { flex: 1 1 0; min-height: 0; }
/* 06/08: EIXO HORIZONTAL TRAVADO — tabela larga transborda POR DENTRO do
cartão, nunca alarga o painel. min-width:0 quebra a pressão do conteúdo
sobre os itens de flex; a barra horizontal nasce no corpo da aba. */
/* o main é ITEM do flex do .conteudo — e o `margin: 0 auto` global CANCELA o
stretch (item com margem auto mede pelo conteúdo!): no modo tático a margem
morre e a largura é explícita */
main.painel-tatico { min-width: 0; width: 100%; margin: 0; }
.coluna-params, .params-console, .params-abas { min-width: 0; max-width: 100%; }
.painel-tatico .widget { min-width: 0; max-width: 100%; width: 100%; }
.painel-tatico .widget-corpo { min-width: 0; }
.params-abas .widget-corpo { overflow-x: auto; }
.params-abas .rolagem-x { overflow-x: auto; max-width: 100%; }
.params-abas .tabela { width: 100%; min-width: 100%; }
.tabela-frete th, .tabela-frete td { white-space: nowrap; }
.botao-salvar-params { margin-left: auto; display: inline-flex;
align-items: center; gap: 8px; }
.grade-console { display: grid;
grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 10px; }
.grade-console .mkt-topo { padding: 7px 12px; font-size: .92rem; }
.grade-console .mkt-logo { width: 22px; height: 22px; font-size: .78rem; }
.grade-console .mkt-corpo { padding: 8px 12px 10px; }
.grade-console .mkt-linhas { font-size: .8rem; gap: 3px; }
.campo-parametro {
background: transparent; border: 1px solid var(--borda); border-radius: 6px;
color: var(--tinta); padding: 3px 8px; width: 84px; text-align: right;
font-size: .84rem; font-variant-numeric: tabular-nums;
transition: border-color .15s ease, box-shadow .15s ease;
}
.campo-parametro:focus { border-color: var(--acento);
box-shadow: 0 0 8px var(--neon); outline: none; }
.foco-magalu { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
margin: 4px 0 6px; }
.foco-magalu .fantasma { text-decoration: none; display: inline-flex;
align-items: center; gap: 7px; font-size: .85rem; }
/* ---- Rotinas do mês: o kanban tático de 4 semanas (06/08) ---- */
.botao-nova-rotina { margin-left: auto; display: inline-flex;
align-items: center; gap: 8px; }
.pt-topo .rot-meses { margin: 0; display: flex; align-items: center; gap: 10px; }
.kanban {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
flex: 1 1 0; min-height: 0; min-width: 0;
}
.kanban-col {
background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px;
display: flex; flex-direction: column; min-height: 0; min-width: 0;
overflow: hidden;
clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
}
:root[data-tema="galaxia"] .kanban-col { backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
.kanban-cab {
flex: none; padding: 10px 14px 0;
border-bottom: 1px solid color-mix(in srgb, var(--acento) 55%, transparent);
}
.kanban-titulo {
font-family: "Rajdhani", "Inter", sans-serif; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.1em; font-size: .92rem;
color: var(--tinta-forte, var(--tinta));
}
.kanban-dias { font-size: .7rem; color: var(--tinta-fraca); letter-spacing: .05em;
margin-left: 6px; }
.kanban-pct {
float: right;
font-family: "Rajdhani", "Inter", sans-serif; font-weight: 600;
font-size: .78rem; letter-spacing: .05em; color: var(--acento);
}
.kanban-laser {
height: 3px; margin-top: 8px; border-radius: 2px;
background: color-mix(in srgb, var(--borda) 60%, transparent);
overflow: hidden;
}
.kanban-laser-cheio {
height: 100%; border-radius: 2px; background: var(--acento);
box-shadow: 0 0 8px var(--neon), 0 0 3px var(--acento);
transition: width .35s ease;
}
.kanban-lista {
flex: 1 1 0; min-height: 0; overflow-y: auto;
padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 10px;
}
.kanban-lista .cartao-rotina { margin: 0; }
.vazio-mini { padding: 18px 8px; font-size: .82rem; }
.vazio-mini::before { width: 26px; height: 26px; }
/* gestão de foco: o feito apaga e risca — o pendente salta aos olhos */
.rot-item.feito { opacity: 0.45; }
.rot-item.feito .rot-nome { text-decoration: line-through; }
/* tela estreita: o no-scroll vira rolagem normal, empilhado */
@media (max-width: 1100px) {
body:has(main.painel-tatico) { overflow: auto; }
body:has(main.painel-tatico) .conteudo { height: auto; display: block; overflow: visible; }
main.painel-tatico { height: auto; display: block; overflow: visible; }
.pt-meio { display: block; }
.widget { margin-bottom: 14px; }
.widget-corpo { overflow: visible; }
.kanban { display: block; }
.kanban-col { margin-bottom: 14px; }
.kanban-lista { overflow: visible; }
}
/* --- o vidro fosco do Hiperespaço: a galáxia atravessa, o texto fica --- */
:root[data-tema="galaxia"] .envio,
:root[data-tema="galaxia"] .popup-caixa,
:root[data-tema="galaxia"] .cartao-mkt,
:root[data-tema="galaxia"] .cartao-rotina,
:root[data-tema="galaxia"] .tabela,
:root[data-tema="galaxia"] .painel-busca {
backdrop-filter: blur(9px);
-webkit-backdrop-filter: blur(9px);
}
.botao-baixar { padding: 5px 12px; font-size: .86rem; white-space: nowrap; }
/* colunas de preço em vigor no catálogo */
.col-vigor { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cont-canal { display: block; font-size: .72rem; color: var(--tinta-fraca);
margin-top: 1px; line-height: 1.2; }
.col-vigor .cadeado { font-size: .72rem; margin-left: 2px; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-top: 10px; }
.cartao-img { margin: 0; background: var(--cartao); border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; }
.cartao-img img { width: 100%; height: 150px; object-fit: cover; display: block; }
.cartao-img figcaption { padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; }
.nome-img { font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acoes { display: flex; gap: 10px; align-items: center; font-size: .84rem; }
.acoes form { display: inline; margin: 0; }
.discreto { background: none; border: none; color: var(--ruim); cursor: pointer; font-size: .84rem; padding: 0; }
.discreto:hover { text-decoration: underline; }
.envio { background: var(--cartao); border: 1px solid var(--borda); border-radius: 8px; padding: 14px 16px; margin-top: 18px; }
.envio label { display: block; margin-bottom: 10px; font-size: .92rem; }
.envio input[type=text], .envio input[type=file], .envio select {
display: block; margin-top: 4px; padding: 8px 10px;
border: 1px solid var(--borda); border-radius: 6px; width: 100%; max-width: 460px;
background: var(--fundo); color: var(--tinta);
}
input[type=file]::file-selector-button {
background: var(--acento); color: #fff; border: none; border-radius: 6px;
padding: 7px 14px; margin-right: 12px; cursor: pointer; font-size: .9rem;
}
select, option { background: var(--cartao); color: var(--tinta); }
/* 06/08: a regra genérica NÃO pinta mais os fantasmas/discretos/abas —
hierarquia de botões: um sólido por tela, o resto é fantasma */
.envio button:not(.fantasma):not(.discreto):not(.aba):not(.expande), .botao {
display: inline-block; background: var(--acento); color: #fff !important;
border: none; border-radius: 6px; padding: 9px 18px; font-size: 14px; cursor: pointer;
}
.botao:hover { text-decoration: none; filter: brightness(1.1); }
.envio button[disabled], .botao[disabled] { background: var(--tinta-fraca); cursor: default; }
.registro {
background: var(--registro-fundo); color: var(--registro-tinta); border-radius: 8px; padding: 12px 14px;
font-size: .82rem; max-height: 320px; overflow: auto; white-space: pre-wrap;
}
.vazio { color: var(--tinta-fraca); background: var(--cartao); border: 1px dashed var(--borda); border-radius: 8px; padding: 16px; }
.rodape { max-width: 1180px; margin: 0 auto; padding: 14px 20px 28px; color: var(--tinta-fraca); font-size: .8rem; }
/* ------- login, tema e cartoes de marketplace ------- */
.botao-tema {
background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff;
border-radius: 999px; width: 30px; height: 30px; cursor: pointer; font-size: 15px;
margin-left: 14px; vertical-align: middle;
}
.quem-sou { color: #9fc3ec; margin-left: 14px; font-size: .85rem; }
.topo nav a.sair { color: #f0b9c0; }
.caixa-login {
max-width: 360px; margin: 9vh auto 0; background: var(--cartao);
border: 1px solid var(--borda); border-radius: 12px; padding: 26px 28px;
box-shadow: 0 12px 40px rgba(0,0,0,.12);
}
.caixa-login h1 { margin: 0 0 4px; }
.caixa-login label { display: block; margin: 14px 0 0; font-size: .9rem; color: var(--tinta-fraca); }
.caixa-login input {
display: block; width: 100%; margin-top: 5px; padding: 10px 12px;
border: 1px solid var(--borda); border-radius: 7px; background: var(--fundo); color: var(--tinta);
}
.caixa-login .botao { width: 100%; margin-top: 18px; border: none; padding: 11px; font-size: 15px; }
.grade-mkt { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin: 12px 0 4px; }
.cartao-mkt {
border-radius: 12px; overflow: hidden; background: var(--cartao);
border: 1px solid var(--borda); box-shadow: 0 3px 14px rgba(0,0,0,.07);
}
/* 05/08: acento tático no lugar do bloco de cor — o fundo é do tema, a marca
vive num fio neon no topo e no chip do logo */
.mkt-topo {
display: flex; align-items: center; gap: 10px; padding: 10px 14px;
font-weight: 600; letter-spacing: .02em;
font-family: "Rajdhani", "Inter", sans-serif; font-size: 1.02rem;
background: transparent; color: var(--tinta);
border-bottom: 1px solid var(--borda);
box-shadow: inset 0 2px 0 var(--mkt), 0 6px 14px -12px var(--mkt);
}
.mkt-logo {
width: 26px; height: 26px; border-radius: 7px; display: inline-flex;
align-items: center; justify-content: center; font-weight: 800; font-size: .9rem;
background: var(--mkt); color: var(--mkt-tinta);
}
.mkt-corpo { padding: 12px 14px 14px; }
.mkt-venda { font-size: 1.5rem; font-weight: 800; color: var(--tinta); }
.mkt-venda span { display: block; font-size: .72rem; font-weight: 400; color: var(--tinta-fraca); text-transform: uppercase; letter-spacing: .05em; }
.mkt-linhas { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: .86rem; color: var(--tinta-fraca); }
.mkt-linhas span { display: flex; justify-content: space-between; gap: 8px; }
.mkt-linhas strong { color: var(--tinta); font-variant-numeric: tabular-nums; }
.mkt-linhas .travado { border-top: 1px dashed var(--borda); padding-top: 6px; margin-top: 4px; }
/* a cor viva da marca (o fio + o chip); a tinta é a do texto dentro do chip */
.mkt-ml { --mkt: #ffe600; --mkt-tinta: #2d3277; }
.mkt-shopee { --mkt: #ee4d2d; --mkt-tinta: #ffffff; }
.mkt-magalu { --mkt: #0086ff; --mkt-tinta: #ffffff; }
.mkt-amazon { --mkt: #ff9900; --mkt-tinta: #232f3e; }
/* o ciano do TikTok se confundia com o azul do Magalu no fio da conta
(07/08/2026) — virou roxo, que nao disputa com nenhum outro canal */
.mkt-tiktok { --mkt: #a259ff; --mkt-tinta: #ffffff; }
.mkt-shopify { --mkt: #96bf48; --mkt-tinta: #10300f; }
/* capa do produto no cabecalho */
.cabecalho-sku { display: flex; gap: 16px; align-items: flex-start; }
.cabecalho-texto { flex: 1; min-width: 0; }
.capa-produto { flex: 0 0 auto; }
.capa-produto img { width: 128px; height: 128px; object-fit: cover; border-radius: 10px; border: 1px solid var(--borda); display: block; }
.capa-vazia {
width: 128px; height: 128px; border-radius: 10px; border: 1px dashed var(--borda);
display: flex; align-items: center; justify-content: center; text-align: center;
color: var(--tinta-fraca); font-size: .8rem;
}
@media (max-width: 600px) { .cabecalho-sku { flex-direction: column; } }
/* cartao neutro (Funcionario / imposto) e ajustes dos parametros */
.mkt-func { --mkt: #5b6472; --mkt-tinta: #ffffff; }
.mkt-fisica { --mkt: #0e8a7a; --mkt-tinta: #ffffff; }
.dupla { display: inline-flex; gap: 4px; }
.cartao-mkt .rolagem-x { padding: 0; }
.cartao-mkt .tabela-frete { border: none; border-radius: 0; }
/* catalogo: ordenacao e paginacao */
.tabela thead th a.ordenar { color: var(--tinta-fraca); text-decoration: none; }
.tabela thead th a.ordenar:hover { color: var(--acento); }
.seta { color: var(--acento); font-size: .7rem; }
.paginacao { flex-wrap: wrap; }
.paginacao a, .pagina-atual {
min-width: 32px; text-align: center; padding: 5px 8px; border-radius: 6px;
border: 1px solid var(--borda); background: var(--cartao); display: inline-block;
}
.paginacao a:hover { border-color: var(--acento); text-decoration: none; }
.pagina-atual { background: var(--acento); color: #fff; border-color: var(--acento); font-weight: 700; }
.ir-para { display: inline-flex; gap: 6px; align-items: center; margin-left: 14px; }
.ir-para input[type=number] { width: 64px; padding: 5px 8px; border: 1px solid var(--borda); border-radius: 6px; background: var(--cartao); color: var(--tinta); }
.ir-para button { padding: 5px 12px; border: none; border-radius: 6px; background: var(--acento); color: #fff; cursor: pointer; }
.filtro-caixa { display: inline-flex; gap: 6px; align-items: center; padding: 9px 10px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 6px; font-size: .88rem; cursor: pointer; }
/* chips de anuncios por conta */
.chips-mkt { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.chip-mkt {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px; border-radius: 999px; font-size: .88rem; font-weight: 600;
background: var(--mkt, var(--cartao)); color: var(--mkt-tinta, var(--tinta));
border: 2px solid transparent; text-decoration: none;
}
.chip-mkt:hover { text-decoration: none; filter: brightness(1.06); }
.chip-mkt .mkt-logo { width: 22px; height: 22px; font-size: .78rem; }
.chip-mkt strong { background: rgba(0,0,0,.18); border-radius: 999px; padding: 1px 9px; }
.chip-mkt.chip-ativo { border-color: var(--tinta); box-shadow: 0 0 0 2px var(--fundo); }
.chip-limpar { background: var(--cartao); color: var(--tinta); border: 1px solid var(--borda); }
.chip-mkt.chip-vazio { opacity: .45; font-weight: 500; }
.chip-mkt.chip-vazio:hover { opacity: .8; }
/* preco manual + destaques */
.mkt-secundario { font-size: .85rem; color: var(--tinta-fraca); margin-top: 2px; }
.linha-cadastro { background: var(--acento-claro); border-radius: 6px; padding: 2px 8px; margin: 0 -8px; }
.linha-cadastro strong { color: var(--acento); }
.form-manual { display: flex; gap: 6px; align-items: center; border-top: 1px dashed var(--borda); padding-top: 6px; margin-top: 4px; }
.form-manual input[type=text] { flex: 1; min-width: 60px; padding: 4px 8px; border: 1px solid var(--borda); border-radius: 5px; text-align: right; background: var(--fundo); color: var(--tinta); font-size: .86rem; }
.form-manual button { border: none; background: var(--acento); color: #fff; border-radius: 5px; padding: 4px 9px; cursor: pointer; }
.escolha-semaforo label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
/* ================= menu lateral com icones ================= */
#galaxia { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.conteudo { position: relative; z-index: 1; margin-left: 68px; }
.menu-lateral {
position: fixed; left: 0; top: 0; bottom: 0; width: 68px; z-index: 60;
display: flex; flex-direction: column; align-items: center;
padding: 12px 0; gap: 6px;
background: color-mix(in srgb, var(--topo-fundo) 92%, transparent);
border-right: 1px solid rgba(255,255,255,.08);
backdrop-filter: blur(6px);
}
.menu-itens { display: flex; flex-direction: column; gap: 6px; flex: 1; margin-top: 10px; }
.menu-rodape { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.menu-item {
position: relative; width: 44px; height: 44px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 20px; color: #cfe0f5; text-decoration: none;
border: none; background: transparent; cursor: pointer;
}
.menu-item:hover { background: rgba(255,255,255,.10); text-decoration: none; }
.menu-item.ativo { background: rgba(85,160,236,.25); box-shadow: inset 0 0 0 1px rgba(85,160,236,.5); }
.marca-menu { font-size: 24px; color: #fff; font-weight: 700; }
.quem-bolinha { background: var(--acento); color: #fff; border-radius: 50%; width: 36px; height: 36px; font-size: 15px; font-weight: 700; }
.menu-item.sair { color: #f0b9c0; }
.menu-item::after {
content: attr(data-nome);
position: absolute; left: 56px; top: 50%; transform: translateY(-50%) translateX(-6px);
background: var(--topo-fundo); color: #fff; padding: 6px 12px; border-radius: 8px;
font-size: 13px; font-family: "Segoe UI", system-ui, sans-serif; font-weight: 500;
white-space: nowrap; opacity: 0; pointer-events: none;
transition: opacity .15s ease, transform .15s ease;
box-shadow: 0 4px 16px rgba(0,0,0,.3); z-index: 70;
}
.menu-item:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (max-width: 640px) {
.menu-lateral { width: 56px; }
.conteudo { margin-left: 56px; }
}
/* cabecalho do catalogo fixo ao rolar
(o overflow: hidden herdado de .tabela MATA o sticky — aqui ele é visible) */
.tabela-fixa { overflow: visible; }
.tabela-fixa thead th {
position: sticky; top: 0; z-index: 5;
box-shadow: 0 1px 0 var(--borda);
}
/* o catálogo usa a tela inteira (13 colunas não cabem em 1180px) */
main.largura-cheia { max-width: none; }
main.largura-cheia .tabela-fixa th,
main.largura-cheia .tabela-fixa td { padding: 6px 8px; }
/* no catálogo, os números ficam CENTRALIZADOS (SKU e Produto seguem à esquerda) */
main.largura-cheia .tabela-fixa .num { text-align: center; }
/* divisórias verticais SÓ no bloco de preços em vigor */
.tabela th.col-vigor, .tabela td.col-vigor { border-left: 1px solid var(--borda); }
.tabela th.col-vigor-fim, .tabela td.col-vigor-fim { border-right: 1px solid var(--borda); }
/* semáforo da margem nas células de preço do catálogo: verde = célula limpa;
amarelo/vermelho = fundo bem leve (translúcido: o hover atravessa) */
main.largura-cheia td.marg-amarelo { background: color-mix(in srgb, var(--alerta) 13%, transparent); }
main.largura-cheia td.marg-vermelho { background: color-mix(in srgb, var(--ruim) 15%, transparent); }
/* identidade das colunas de preço: SEM fundo colorido (o Leandro vetou as
tonalidades, 30/07) — só um fio de 3px com a cor da marca no topo do
cabeçalho. Amazon e TikTok têm marca escura: usa a cor de destaque delas.
O fio vai junto no box-shadow para sobreviver ao cabeçalho fixo. */
.tabela-fixa thead th.vigor-ml { box-shadow: inset 0 3px 0 #ffe600, 0 1px 0 var(--borda); }
.tabela-fixa thead th.vigor-shopee { box-shadow: inset 0 3px 0 #ee4d2d, 0 1px 0 var(--borda); }
.tabela-fixa thead th.vigor-magalu { box-shadow: inset 0 3px 0 #0086ff, 0 1px 0 var(--borda); }
.tabela-fixa thead th.vigor-amazon { box-shadow: inset 0 3px 0 #ff9900, 0 1px 0 var(--borda); }
.tabela-fixa thead th.vigor-tiktok { box-shadow: inset 0 3px 0 #25f4ee, 0 1px 0 var(--borda); }
.tabela-fixa thead th.vigor-shopify { box-shadow: inset 0 3px 0 #96bf48, 0 1px 0 var(--borda); }
/* painel repaginado */
.cartoes { gap: 14px; }
.cartao-num {
border-radius: 12px; padding: 16px 18px; position: relative; overflow: hidden;
box-shadow: 0 3px 14px rgba(0,0,0,.06);
border-left: 4px solid var(--realce, var(--acento));
}
.cartao-num .num-grande { font-size: 2.1rem; }
.cartao-num .icone-tile { position: absolute; right: 10px; top: 8px; font-size: 1.75rem; opacity: 1; }
.cartao-num:nth-child(1) { --realce: #2a78d6; }
.cartao-num:nth-child(2) { --realce: #7a5bd6; }
.cartao-num:nth-child(3) { --realce: #1baf7a; }
.cartao-num:nth-child(4) { --realce: #0ca30c; }
.cartao-num:nth-child(5) { --realce: #fab219; }
/* ==================================================================== */
/* ---- Onda 1: vendas & margem (08/2026) ---- */
/* o grupo do menu com flyout — o PRIMEIRO do site. O ícone é um menu-item
normal; a lista abre ao lado no hover/foco. O tooltip ::after do item
morre aqui, senão abririam os dois juntos. As cores literais são as do
próprio menu lateral, que é sempre escuro em qualquer tema. */
.menu-grupo { cursor: pointer; }
.menu-grupo::after { content: none; }
.menu-flyout {
position: absolute; left: 56px; top: 50%; transform: translateY(-50%);
display: none; flex-direction: column; gap: 2px; min-width: 190px;
background: var(--topo-fundo); border-radius: 10px; padding: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, .3); z-index: 70;
}
/* a ponte invisível cobre o vão de 12px entre o ícone e o flyout — sem ela
o mouse "cai" no caminho e o flyout fecha antes do clique */
.menu-flyout::before { content: ""; position: absolute; left: -14px; top: 0;
bottom: 0; width: 14px; }
.menu-grupo:hover .menu-flyout,
.menu-grupo:focus-within .menu-flyout { display: flex; }
.flyout-titulo {
font-family: "Rajdhani", "Inter", sans-serif; font-weight: 600;
text-transform: uppercase; letter-spacing: .07em; font-size: .72rem;
color: rgba(255, 255, 255, .55); padding: 3px 10px 6px; white-space: nowrap;
}
.menu-flyout a {
color: inherit; font-size: 13px; padding: 6px 10px; border-radius: 7px;
white-space: nowrap; text-decoration: none;
}
.menu-flyout a:hover { color: var(--acento);
background: rgba(255, 255, 255, .08); text-decoration: none; }
.menu-flyout a.ativo { color: var(--acento);
background: color-mix(in srgb, var(--acento) 22%, transparent); }
/* o canvas do X-wing (pertence às medidas dos outros canvas, ~linhas
326-328 — mora aqui porque CSS novo entra sempre no fim do arquivo) */
#canvas-xwing { width: 460px; height: 130px; }
/* topo tático de vendas: navegação do dia + bloco da direita */
.nav-dia { display: inline-flex; align-items: center; gap: 8px; }
.pt-direita { margin-left: auto; display: flex; align-items: center; gap: 10px;
flex-wrap: wrap; }
.pt-direita form { margin: 0; }
.pt-topo a.fantasma { text-decoration: none; display: inline-flex;
align-items: center; }
.pt-topo a.fantasma:hover { text-decoration: none; }
/* o widget que ocupa o resto da tela tática; a nota curta entre blocos */
.pt-cheia { flex: 1 1 0; min-height: 0; }
.pt-nota { margin: 0; flex: none; }
/* linha de pedido cancelado/devolvido: apagada, mas o badge segue legível */
.ped-cancelado td { opacity: .5; }
.ped-cancelado .etiqueta { opacity: 1; }
/* o selo de pedido auditado (ícone checagem na linha e na ficha) */
.selo-auditado { color: var(--ok); }
/* chips de filtro neutros (Full, abaixo da mínima, período, agrupamento) */
.chip-filtro { background: var(--cartao); color: var(--tinta);
border: 1px solid var(--borda); }
.chip-filtro.chip-ativo { border-color: var(--acento); color: var(--acento);
box-shadow: 0 0 10px var(--neon); }
/* o separador fino entre grupos de chips */
.sep-chips { display: inline-block; width: 1px; align-self: stretch;
background: var(--borda); margin: 0 4px; }
/* a ficha do pedido: grade de pares rótulo/valor */
.ficha-pedido { display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 10px 20px; margin: 6px 0 4px; }
.ficha-pedido dt { text-transform: uppercase; font-size: .72rem;
letter-spacing: .06em; color: var(--tinta-fraca); margin: 0 0 2px;
font-weight: 600; }
.ficha-pedido dd { margin: 0; font-size: .95rem; }
/* o widget da ficha mede pelo conteúdo (flex-basis 0 num pai de altura
automática colapsaria a zero — mesma lição do params-console) */
.widget-ficha .widget-corpo { flex: none; }
/* separador vertical entre o bloco geral e o bloco Full nos agregados */
.tabela th.col-sep, .tabela td.col-sep { border-left: 1px solid var(--borda); }
/* linha de totais (tfoot) das tabelas de vendas */
.tabela tfoot td { border-top: 2px solid var(--borda);
background: var(--cab-tabela); font-weight: 600; }
/* os dois widgets lado a lado da auditoria (padrão /situacao) */
.pt-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
flex: 1 1 0; min-height: 0; min-width: 0; }
.pt-duplo .widget { min-width: 0; }
@media (max-width: 1100px) {
.pt-duplo { display: block; }
.pt-duplo .widget { margin-bottom: 14px; }
}
/* o formulário da auditoria: dropzone + botão que arma, empilhados */
.form-auditoria { display: flex; flex-direction: column; gap: 10px;
margin: 10px 0 0; }
/* o botão de expandir o log quando mora num widget-cab */
.widget-cab .expande { margin-left: auto; white-space: nowrap; }
/* estado vazio grande (a carga histórica ainda não rodou) */
.vazio-grande { padding: 44px 18px; font-size: 1rem; gap: 12px; }
/* o atributo hidden SEMPRE vence os displays das classes novas (a lição
que já mordeu duas vezes — regra da casa) */
.menu-flyout[hidden], .pt-direita[hidden], .nav-dia[hidden],
.ficha-pedido[hidden], .pt-duplo[hidden], .form-auditoria[hidden],
.sep-chips[hidden] { display: none !important; }
/* ---- Onda 2: trafego & ads (08/2026) ---- */
.form-ads { display: flex; flex-direction: column; gap: 10px; }
.form-ads label { display: flex; flex-direction: column; gap: 4px;
font-size: .82rem; color: var(--tinta-fraca); }
.form-ads input[type="text"], .form-ads select {
background: transparent; border: 1px solid var(--borda); border-radius: 6px;
padding: 7px 9px; color: var(--tinta); font: inherit; min-width: 0; }
.form-ads input[type="text"]:focus, .form-ads select:focus {
outline: none; border-color: var(--acento); box-shadow: 0 0 8px var(--neon); }
.form-ads-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; }
.form-ads-atalhos { display: flex; gap: 14px; margin-top: -4px; }
.form-ads-atalhos .discreto { color: var(--acento); }
.form-inline-ads { display: inline; }
#canvas-hiper { width: 420px; height: 140px; }
/* A tela de Ads NÃO é painel-tático: é formulário + log. A página rola normal
e cada cartão tem a altura do próprio conteúdo — no modo tático os campos
apareciam esmagados (correção pedida em 06/08). */
.pagina-ads .pt-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
align-items: start; margin-bottom: 14px; }
.pagina-ads .widget { overflow: visible; height: auto; min-height: min-content; }
.pagina-ads .widget-corpo { flex: none; min-height: min-content; overflow: visible; }
.pagina-ads .cartoes { margin-bottom: 14px; }
.pagina-ads .pt-topo { display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.pagina-ads .rolagem-tabela { overflow-x: auto; }
@media (max-width: 1100px) {
.pagina-ads .pt-duplo { display: block; }
.pagina-ads .pt-duplo .widget { margin-bottom: 14px; }
}
/* ---- Onda 3: Relatório do Alex (08/2026) ----
O botão principal desta tela é ROSA NEON (pedido do Leandro). O `color`
precisa de !important porque a regra do .botao marca `color:#fff !important`;
o `background` não precisa — empata em especificidade e ganha pela ordem. */
.botao-rosa { display: inline-flex; align-items: center; gap: 8px;
background-color: var(--rosa); color: var(--rosa-tinta) !important;
border: 1px solid transparent; border-radius: 8px; padding: 10px 18px;
font-weight: 600; letter-spacing: .02em; cursor: pointer;
box-shadow: 0 0 16px var(--rosa-neon);
transition: box-shadow .18s ease, transform .1s ease, background .18s ease; }
.botao-rosa:hover { background-color: var(--rosa-brilho);
box-shadow: 0 0 26px var(--rosa-neon), 0 0 7px var(--rosa-brilho); filter: none; }
.botao-rosa:active { transform: translateY(1px); }
.botao-rosa[disabled] { background-color: transparent; background-image: none; color: var(--tinta-fraca) !important;
border: 1px dashed var(--borda); box-shadow: none; cursor: not-allowed; }
/* a tela do relatório: editor à esquerda, números travados à direita */
.pagina-relatorio { padding-bottom: 40px; }
.rel-topo { display: flex; align-items: flex-end; justify-content: space-between;
gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.rel-topo-esq h1 { margin: 0 0 2px; }
.rel-topo-dir { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rel-form-mes { display: flex; align-items: center; gap: 8px; margin: 0; }
.rel-rotulo { font-size: .82rem; color: var(--tinta-fraca); }
.rel-form-mes select { background: transparent; border: 1px solid var(--borda);
border-radius: 6px; padding: 8px 10px; color: var(--tinta); font: inherit; }
.rel-nota { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.rel-vazio { margin-top: 10px; }
.rel-avisos { background: var(--alerta-fundo); border: 1px solid var(--alerta);
border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }
.rel-avisos summary { cursor: pointer; font-weight: 600; color: var(--alerta);
display: flex; align-items: center; gap: 8px; }
.rel-avisos ul { margin: 10px 0 2px; padding-left: 20px; }
.rel-avisos li { margin-bottom: 7px; font-size: .9rem; line-height: 1.5; }
.rel-editor { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 16px;
align-items: start; }
.rel-folha { background: var(--cartao); border: 1px solid var(--borda);
border-radius: 12px; padding: 26px 30px; min-width: 0; }
.rel-cabecalho { border-bottom: 1px solid var(--borda); padding-bottom: 14px;
margin-bottom: 20px; }
.rel-marca { font-family: "Rajdhani", sans-serif; text-transform: uppercase;
letter-spacing: .08em; font-size: .78rem; color: var(--tinta-fraca); }
.rel-titulo { font-size: 1.5rem; margin: 6px 0 4px; outline: none; }
.rel-bloco { margin-bottom: 22px; }
.rel-bloco-cab { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.rel-bloco-cab h3 { margin: 0; }
.rel-estado { font-size: .74rem; color: var(--tinta-fraca);
text-transform: uppercase; letter-spacing: .05em; }
.rel-estado[data-estado="editado"] { color: var(--acento); }
/* o chanfro do cartão corta sombra externa: o foco é glow INSET */
.rel-texto, .rel-titulo { border-radius: 8px; padding: 8px 10px; margin-left: -10px;
font-family: "Inter", "Segoe UI", system-ui; line-height: 1.65;
white-space: pre-wrap; transition: background .15s ease, box-shadow .15s ease; }
.rel-texto:hover, .rel-titulo:hover { background: var(--acento-claro); }
.rel-texto:focus, .rel-titulo:focus { outline: none; background: var(--acento-claro);
box-shadow: inset 0 0 0 1px var(--acento), inset 0 0 12px var(--neon); }
.rel-vazio-texto::before { content: attr(data-placeholder); color: var(--tinta-fraca);
font-style: italic; }
.rel-lateral { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rel-lateral .widget { overflow: visible; height: auto; }
.rel-lateral .widget-corpo { flex: none; overflow: visible; }
.rel-numeros { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px;
margin: 0 0 12px; font-size: .9rem; }
.rel-numeros dt { color: var(--tinta-fraca); }
.rel-numeros dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.rel-whats { background: var(--registro-fundo); color: var(--registro-tinta);
border-radius: 8px; padding: 12px; font-size: .8rem; line-height: 1.5;
white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto;
margin: 0 0 10px; font-family: "Inter", system-ui; }
@media (max-width: 1100px) {
.rel-editor { display: block; }
.rel-lateral { margin-top: 16px; }
}
/* a visão de impressão: na tela é uma folha; no papel, o papel */
.rel-barra { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
margin-bottom: 16px; }
.rel-barra-dir { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.rel-papel { background: var(--cartao); border: 1px solid var(--borda);
border-radius: 12px; padding: 34px 40px; max-width: 900px; margin: 0 auto;
font-family: "Inter", "Segoe UI", system-ui; line-height: 1.68; }
.rel-papel-cab { border-bottom: 2px solid var(--borda); padding-bottom: 16px;
margin-bottom: 22px; }
.rel-papel-marca { font-family: "Rajdhani", sans-serif; text-transform: uppercase;
letter-spacing: .1em; font-size: .8rem; color: var(--tinta-fraca); }
.rel-papel-cab h1 { margin: 8px 0 8px; font-size: 1.75rem; }
.rel-papel-sub { font-size: .84rem; color: var(--tinta-fraca); line-height: 1.6; }
.rel-painel-numeros { display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
gap: 12px; margin-bottom: 26px; }
.rel-painel-numeros > div { border: 1px solid var(--borda); border-radius: 10px;
padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.rel-num-rot { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
color: var(--tinta-fraca); }
.rel-num-val { font-size: 1.24rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.rel-num-sub { font-size: .82rem; color: var(--tinta-fraca); }
.rel-papel-bloco { margin-bottom: 24px; break-inside: avoid; page-break-inside: avoid; }
.rel-papel-bloco h2 { font-size: 1.12rem; margin: 0 0 8px;
border-bottom: 1px solid var(--borda); padding-bottom: 5px; }
.rel-papel-texto { white-space: pre-wrap; }
.rel-papel-rodape { margin-top: 34px; padding-top: 16px;
border-top: 1px solid var(--borda); font-size: .8rem; color: var(--tinta-fraca); }
.rel-whats-oculto[hidden] { display: none !important; }
@media (max-width: 900px) {
.rel-painel-numeros { grid-template-columns: repeat(2, minmax(0,1fr)); }
.rel-papel { padding: 22px 20px; }
}
/* a ressalva que viaja COM o papel (mês incompleto, Ads parcial) */
.rel-ressalva { border: 2px solid var(--alerta); border-radius: 10px;
padding: 12px 16px; margin-bottom: 22px; break-inside: avoid;
page-break-inside: avoid; }
.rel-ressalva strong { display: block; margin-bottom: 6px; color: var(--alerta); }
.rel-ressalva ul { margin: 0; padding-left: 20px; }
.rel-ressalva li { margin-bottom: 5px; }
/* ==================================================================== */
/* ---- Onda 4: Afiliados, Lives e Redes Sociais (08/2026) ----
Como a /ads, estas três telas NÃO são painel-tático: são formulário +
lista, a página rola normalmente e cada cartão tem a altura do próprio
conteúdo. No modo tático os campos ficam esmagados (lição de 06/08). */
/* o par de widgets lado a lado; o espaçamento de baixo é do próprio widget */
.pagina-lives .pt-duplo, .pagina-live .pt-duplo, .pagina-conteudos .pt-duplo {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
align-items: start; margin-bottom: 0; }
.pagina-lives .widget, .pagina-live .widget, .pagina-conteudos .widget {
overflow: visible; height: auto; min-height: min-content; margin-bottom: 14px; }
.pagina-lives .widget-corpo, .pagina-live .widget-corpo,
.pagina-conteudos .widget-corpo {
flex: none; min-height: min-content; overflow: visible; }
.pagina-lives .cartoes, .pagina-live .cartoes { margin-bottom: 14px; }
/* os KPIs desta tela carregam [ i ] explicando de onde vem cada número — e o
overflow:hidden do cartão cortaria o tooltip pela metade. Aqui não há
.icone-tile posicionado, então soltar o overflow não muda mais nada. */
.pagina-lives .cartao-num { overflow: visible; }
.pagina-lives .pt-topo, .pagina-live .pt-topo, .pagina-conteudos .pt-topo {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 12px; margin-bottom: 6px; }
.pagina-lives .rolagem-tabela, .pagina-live .rolagem-tabela,
.pagina-conteudos .rolagem-tabela { overflow-x: auto; }
.lv-topo-dir { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lv-topo-dir a.fantasma { text-decoration: none; display: inline-flex;
align-items: center; gap: 6px; }
.lv-topo-dir a.fantasma:hover { text-decoration: none; }
/* o formulário das telas da Onda 4 (mesmo desenho do .form-ads, nome próprio
para poder evoluir sem mexer na tela de Ads) */
.form-lv { display: flex; flex-direction: column; gap: 10px; }
.form-lv label { display: flex; flex-direction: column; gap: 4px;
font-size: .82rem; color: var(--tinta-fraca); }
.form-lv input[type="text"], .form-lv select, .form-lv textarea {
background: transparent; border: 1px solid var(--borda); border-radius: 6px;
padding: 7px 9px; color: var(--tinta); font: inherit; min-width: 0; }
.form-lv input[type="text"]:focus, .form-lv select:focus, .form-lv textarea:focus {
outline: none; border-color: var(--acento); box-shadow: 0 0 8px var(--neon); }
.form-lv-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
min-width: 0; }
.form-lv-acoes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* tiles sem marca (tipo de comissão, status): o "aceso" usa o acento do tema */
.tiles-neutro { --mkt: var(--acento); }
.tiles-neutro .tile-plataforma { flex: 1 1 0; min-width: 92px; font-size: .8rem; }
#canvas-live { width: 420px; height: 130px; }
/* ---- O CORAÇÃO DA TELA DA LIVE: as duas fontes lado a lado, NUNCA somadas.
A da plataforma é FATO (destaque no acento). A janela é CONTEXTO da loja
(sóbria, tracejada) — medido em 07/08 a live foi ~11% do que passou ali. */
.duas-fontes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
align-items: stretch; margin: 4px 0 14px; }
.cartao-fonte { background: var(--cartao); border: 1px solid var(--borda);
border-radius: 12px; padding: 14px 18px 12px; min-width: 0;
display: flex; flex-direction: column; gap: 8px;
clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px); }
:root[data-tema="galaxia"] .cartao-fonte {
backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
.cartao-fonte h2 { margin: 0; font-size: 1.08rem; }
.cartao-fonte .fonte-rodape { margin-top: auto; padding-top: 10px;
border-top: 1px dashed var(--borda); }
.fonte-fato { border-color: var(--acento); box-shadow: 0 0 16px var(--neon); }
.fonte-contexto { border-style: dashed; }
.fonte-selo { font-family: "Rajdhani", "Inter", sans-serif; font-weight: 600;
text-transform: uppercase; letter-spacing: .08em; font-size: .72rem;
color: var(--tinta-fraca); }
.fonte-fato .fonte-selo { color: var(--acento); }
.fonte-numeros { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 2px 0; }
.fonte-num { display: flex; flex-direction: column; gap: 1px; }
.fonte-num strong { font-size: 1.65rem; font-weight: 700; line-height: 1.1;
color: var(--tinta-forte, var(--tinta)); font-variant-numeric: tabular-nums; }
.fonte-num span { font-size: .74rem; text-transform: uppercase;
letter-spacing: .05em; color: var(--tinta-fraca); }
.fonte-contexto .fonte-num strong { font-size: 1.3rem; font-weight: 600;
color: var(--tinta); }
/* a conta da live: rótulo → valor, empilhado, com a líquida em destaque */
.conta-live { display: flex; flex-direction: column; margin: 2px 0 6px; }
.conta-linha { display: flex; align-items: baseline; justify-content: space-between;
gap: 16px; padding: 8px 0; border-bottom: 1px dashed var(--borda);
font-size: .95rem; }
.conta-linha:last-child { border-bottom: none; }
.conta-rot { color: var(--tinta-fraca); }
.conta-val { font-variant-numeric: tabular-nums; font-weight: 600;
white-space: nowrap; }
.conta-linha.conta-menos .conta-val { color: var(--tinta-fraca); }
.conta-linha.conta-total { border-top: 2px solid var(--borda); border-bottom: none;
margin-top: 6px; padding-top: 12px; }
.conta-total .conta-rot { color: var(--tinta); font-weight: 600; }
.conta-total .conta-val { font-size: 1.55rem; }
/* o funil da audiência (o que a analista vê sem ver dinheiro nenhum) */
.funil-live { display: grid;
grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px 20px;
margin: 2px 0 4px; }
.funil-passo { display: flex; flex-direction: column; gap: 1px; }
.funil-passo strong { font-size: 1.45rem; font-weight: 700; line-height: 1.15;
color: var(--tinta-forte, var(--tinta)); font-variant-numeric: tabular-nums; }
.funil-passo span { font-size: .74rem; text-transform: uppercase;
letter-spacing: .05em; color: var(--tinta-fraca); }
/* ---- o kanban do calendário de conteúdo: mesmo desenho do /rotinas, mas numa
página que rola — cada coluna tem teto e rola por dentro ---- */
/* o número de colunas é o número de STATUS que existem no Notion dela — o
Arquivo não impõe fluxo de trabalho, então a grade se ajusta sozinha */
.pagina-conteudos .kanban { display: grid;
grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 12px;
align-items: start; margin: 6px 0 16px; }
.pagina-conteudos .kanban-col { max-height: 74vh; margin-bottom: 0; }
.cartao-conteudo { background: var(--cartao); border: 1px solid var(--borda);
border-left: 3px solid var(--acento); border-radius: 10px; padding: 10px 12px;
display: flex; flex-direction: column; gap: 6px;
clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px); }
.cartao-conteudo strong { font-size: .94rem; line-height: 1.35;
color: var(--tinta-forte, var(--tinta)); }
.ct-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
font-size: .78rem; color: var(--tinta-fraca); }
.ct-meta .chip-mkt { padding: 1px 9px; font-size: .72rem; font-weight: 600; }
.ct-meta a { display: inline-flex; align-items: center; gap: 4px; }
.ct-editar { margin-top: 2px; }
.ct-editar summary { cursor: pointer; font-size: .78rem; color: var(--tinta-fraca); }
.ct-editar summary:hover { color: var(--acento); }
.ct-editar .form-lv { margin-top: 8px; gap: 8px; }
/* as cores das redes sociais: mesma exceção dos .mkt-* dos marketplaces — a
cor da marca É a marca, não muda com o tema; ela só alimenta --mkt/--mkt-tinta.
Rede que o Arquivo não conhece cai no chip neutro (o var() tem fallback). */
.mkt-instagram { --mkt: #e1306c; --mkt-tinta: #ffffff; }
.mkt-youtube { --mkt: #ff0033; --mkt-tinta: #ffffff; }
.mkt-facebook { --mkt: #1877f2; --mkt-tinta: #ffffff; }
.mkt-kwai { --mkt: #ff5000; --mkt-tinta: #ffffff; }
.mkt-pinterest { --mkt: #e60023; --mkt-tinta: #ffffff; }
.mkt-linkedin { --mkt: #0a66c2; --mkt-tinta: #ffffff; }
.mkt-whatsapp { --mkt: #25d366; --mkt-tinta: #08351a; }
.mkt-blog { --mkt: #7a5bd6; --mkt-tinta: #ffffff; }
/* o atributo hidden SEMPRE vence os displays das classes novas (regra da casa
— a lição que já mordeu três vezes) */
.duas-fontes[hidden], .cartao-fonte[hidden], .fonte-numeros[hidden],
.fonte-num[hidden], .conta-live[hidden], .conta-linha[hidden],
.funil-live[hidden], .funil-passo[hidden], .form-lv[hidden],
.form-lv-linha[hidden], .form-lv-acoes[hidden], .lv-topo-dir[hidden],
.cartao-conteudo[hidden], .ct-meta[hidden] { display: none !important; }
@media (max-width: 1100px) {
.pagina-lives .pt-duplo, .pagina-live .pt-duplo,
.pagina-conteudos .pt-duplo { display: block; }
.duas-fontes { display: block; }
.cartao-fonte { margin-bottom: 12px; }
.pagina-conteudos .kanban { display: block; }
.pagina-conteudos .kanban-col { max-height: none; margin-bottom: 14px; }
.pagina-conteudos .kanban-lista { overflow: visible; }
}
/* ==================================================================== */
/* ---- Onda 5: Cobranças e Central de Ideias (08/2026) ----
Como a /ads e as telas da Onda 4, estas DUAS telas NÃO são painel-tático:
são formulário + lista/kanban, a página rola normalmente e cada cartão tem
a altura do próprio conteúdo (no modo tático os campos ficam esmagados —
lição de 06/08). */
.pagina-cobrancas .widget, .pagina-ideias .widget {
overflow: visible; height: auto; min-height: min-content; margin-bottom: 14px; }
.pagina-cobrancas .widget-corpo, .pagina-ideias .widget-corpo {
flex: none; min-height: min-content; overflow: visible; }
.pagina-cobrancas .cartoes, .pagina-ideias .cartoes { margin-bottom: 14px; }
.pagina-cobrancas .cartao-num, .pagina-ideias .cartao-num { overflow: visible; }
.pagina-cobrancas .pt-topo, .pagina-ideias .pt-topo {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 12px; margin-bottom: 6px; }
.pagina-cobrancas .rolagem-tabela, .pagina-ideias .rolagem-tabela { overflow-x: auto; }
/* a .pt-nota nasce com margin 0 (é item de flex no painel tático); numa
página que rola ela precisa respirar antes do widget seguinte */
.pagina-cobrancas .pt-nota, .pagina-ideias .pt-nota { margin: 4px 0 12px; }
.pagina-cobrancas .pt-duplo, .pagina-ideias .pt-duplo {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
align-items: start; margin-bottom: 0; }
/* ---- A REGRA DE OURO, escrita na tela e não implícita: o Arquivo mostra e
lembra, nunca manda mensagem nem cobra ninguém. O bloco é o primeiro que se
lê depois do título, com a borda no acento do tema. ---- */
.regra-ouro {
display: flex; align-items: flex-start; gap: 12px;
border: 1px solid var(--acento); border-left: 4px solid var(--acento);
border-radius: 12px; background: var(--acento-claro);
padding: 12px 16px; margin: 4px 0 14px;
clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
}
.regra-ouro > .icone { width: 1.35em; height: 1.35em; flex: none;
color: var(--acento); margin-top: 2px; }
.regra-ouro-texto { display: flex; flex-direction: column; gap: 4px;
font-size: .92rem; line-height: 1.55; }
.regra-ouro-texto strong { color: var(--tinta-forte, var(--tinta)); }
.regra-ouro-texto p { margin: 0; }
/* ---- a tabela do "O que estou cobrando" ---- */
/* a ação positiva não pode ser vermelha: o .discreto nasce em var(--ruim)
(é o botão de apagar), e "registrei um toque" não apaga nada */
.discreto-acento { color: var(--acento); }
.cob-acoes { display: flex; gap: 12px; align-items: center;
justify-content: flex-end; flex-wrap: wrap; }
.cob-acoes form { margin: 0; }
.cob-ultimo { display: flex; flex-direction: column; gap: 1px; line-height: 1.35; }
.cob-desde { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
/* a gaveta da linha: nasce escondida e abre no clique (nada de modal — o
painel abre DEBAIXO da própria cobrança, com a largura toda) */
.linha-gaveta > td { background: var(--acento-claro);
border-bottom: 1px solid var(--borda); }
.cob-painel { display: flex; flex-direction: column; gap: 10px;
padding: 10px 2px 12px; max-width: 900px; }
.cob-painel h3 { margin: 0; font-size: .98rem; }
.cob-painel .form-lv { gap: 9px; }
.cob-grade { display: grid;
grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 10px;
min-width: 0; }
/* ---- o widget de LEITURA do estado do Chewbacca ---- */
.cob-chew { display: flex; flex-direction: column; gap: 14px; }
.cob-chew-bloco { border: 1px dashed var(--borda); border-radius: 10px;
padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.cob-chew-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cob-chew-cab h3 { margin: 0; font-size: .96rem; }
.cob-chew-cab .cob-chew-quando { margin-left: auto; white-space: nowrap; }
/* ---- as devoluções candidatas: material para escolher, não lista de culpados ---- */
.cob-material { border: 1px solid var(--borda); border-left: 3px solid var(--acento);
border-radius: 10px; padding: 10px 14px; margin: 2px 0 12px;
font-size: .9rem; line-height: 1.55; }
.cob-material strong { color: var(--tinta-forte, var(--tinta)); }
/* ---- Central de Ideias: o kanban do /rotinas numa página que rola, com o
número de colunas vindo dos status que o servidor manda ---- */
.pagina-ideias .kanban { display: grid;
grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 12px;
align-items: start; margin: 6px 0 16px; }
.pagina-ideias .kanban-col { max-height: 74vh; margin-bottom: 0; }
.cartao-ideia { background: var(--cartao); border: 1px solid var(--borda);
border-left: 3px solid var(--acento); border-radius: 10px; padding: 10px 12px;
display: flex; flex-direction: column; gap: 6px;
clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px); }
.cartao-ideia > strong { font-size: .94rem; line-height: 1.35;
color: var(--tinta-forte, var(--tinta)); }
.id-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
font-size: .78rem; color: var(--tinta-fraca); }
.id-meta .etiqueta { font-size: .7rem; padding: 1px 8px; }
.id-detalhe summary { cursor: pointer; font-size: .78rem; color: var(--tinta-fraca); }
.id-detalhe summary:hover { color: var(--acento); }
.id-detalhe p { margin: 6px 0 0; font-size: .86rem; line-height: 1.5;
white-space: pre-wrap; }
.id-gestor { display: flex; flex-direction: column; gap: 6px; margin-top: 2px;
padding-top: 8px; border-top: 1px dashed var(--borda); }
/* o `flex-direction: row` é obrigatório: este form também é .form-lv, que é
coluna — sem isto o botão desce para baixo do select */
.id-mover { display: flex; flex-direction: row; align-items: flex-end;
gap: 8px; margin: 0; }
.id-mover .fantasma { padding: 6px 12px; font-size: .84rem; white-space: nowrap; }
.id-mover label { flex: 1 1 auto; min-width: 0; }
.id-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
/* o atributo hidden SEMPRE vence os displays das classes novas (regra da casa
— a lição que já mordeu quatro vezes) */
.regra-ouro[hidden], .regra-ouro-texto[hidden], .cob-acoes[hidden],
.cob-ultimo[hidden], .cob-desde[hidden], .cob-painel[hidden], .cob-grade[hidden],
.cob-chew[hidden], .cob-chew-bloco[hidden], .cob-chew-cab[hidden],
.cob-material[hidden], .linha-gaveta[hidden], .cartao-ideia[hidden],
.id-meta[hidden], .id-gestor[hidden], .id-mover[hidden],
.id-acoes[hidden] { display: none !important; }
@media (max-width: 1100px) {
.pagina-cobrancas .pt-duplo, .pagina-ideias .pt-duplo { display: block; }
.pagina-cobrancas .pt-duplo .widget,
.pagina-ideias .pt-duplo .widget { margin-bottom: 14px; }
.pagina-ideias .kanban { display: block; }
.pagina-ideias .kanban-col { max-height: none; margin-bottom: 14px; }
.pagina-ideias .kanban-lista { overflow: visible; }
}
/* ---- A FOLHA DE IMPRESSÃO. Este bloco fica SEMPRE no fim do arquivo: os
temas moram em :root[data-tema] e só se vencem por ordem de origem, não
por especificidade — media query não soma especificidade. ---- */
/* ================================================================
Refinamento da tela de Vendas (07/08/2026): conta enxuta com fio
da marca, linha-sanfona, workflow de revisão, HUD de triagem e
paginação de radar. CSS novo entra sempre no fim do arquivo.
================================================================ */
/* --- 1. a coluna Conta: só o apelido, com o fio da plataforma --- */
.ped-conta {
display: inline-flex; align-items: center; gap: 7px;
font-weight: 600; white-space: nowrap;
}
.ped-conta .ped-fio {
width: 4px; height: 15px; border-radius: 2px; flex: none;
background: var(--mkt, var(--tinta-fraca));
box-shadow: 0 0 6px var(--mkt, transparent);
}
/* --- 2. a coluna Itens: o nome grande do e-commerce não estica a linha --- */
.tabela-sanfona .col-itens { max-width: 320px; }
.ped-item {
display: inline-block; max-width: 100%; vertical-align: bottom;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ped-mais {
margin-left: 6px; font-size: .76rem; font-weight: 700; white-space: nowrap;
color: var(--acento); border: 1px solid var(--borda);
border-radius: 999px; padding: 0 7px;
}
/* --- 3. a linha-sanfona --- */
.tabela-sanfona tbody tr.ped-linha { cursor: pointer; }
.sanfona-seta {
display: inline-block; margin-left: 6px; color: var(--tinta-fraca);
transition: transform .16s ease, color .16s ease;
}
.ped-linha.ped-aberta .sanfona-seta { transform: rotate(90deg); color: var(--acento); }
.ped-linha.ped-aberta > td {
background: var(--acento-claro);
box-shadow: inset 0 2px 0 var(--acento);
}
.tabela-sanfona tr.ped-sanfona:hover { background: inherit; }
.tabela-sanfona tr.ped-sanfona > td {
padding: 0; background: var(--cab-tabela);
border-bottom: 2px solid var(--acento);
}
.sanf-grade {
display: grid; gap: 16px; padding: 14px 16px 16px;
grid-template-columns: minmax(0, 2.1fr) minmax(190px, .9fr) minmax(210px, 1fr);
}
@media (max-width: 1100px) { .sanf-grade { grid-template-columns: 1fr; } }
.sanf-bloco { min-width: 0; }
.sanf-bloco h4 {
margin: 0 0 8px; font-family: "Rajdhani", "Inter", sans-serif;
text-transform: uppercase; letter-spacing: .07em; font-size: .78rem;
color: var(--tinta-fraca);
}
.tabela-mini { width: 100%; border-collapse: collapse; font-size: .84rem; }
.tabela-mini th {
text-align: left; font-weight: 600; color: var(--tinta-fraca);
font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
padding: 2px 8px 5px; border-bottom: 1px solid var(--borda);
}
.tabela-mini td { padding: 4px 8px; border-bottom: 1px solid var(--borda); }
.tabela-mini tr:last-child td { border-bottom: none; }
.tabela-mini .num { text-align: right; font-variant-numeric: tabular-nums; }
.sanf-dl { margin: 0; display: flex; flex-direction: column; gap: 5px; font-size: .86rem; }
.sanf-dl > div { display: flex; gap: 8px; align-items: baseline; }
.sanf-dl dt { color: var(--tinta-fraca); min-width: 108px; flex: none; }
.sanf-dl dd { margin: 0; }
.sanf-ficha .fantasma { margin-top: 10px; display: inline-flex; text-decoration: none; }
/* a matemática aberta: uma linha por parcela, o total destacado */
.conta-aberta { list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 3px; font-size: .86rem; }
.conta-aberta li { display: flex; justify-content: space-between; gap: 10px; }
.conta-aberta span { color: var(--tinta-fraca); }
.conta-aberta em { font-style: normal; }
.conta-aberta strong { font-variant-numeric: tabular-nums; }
.conta-aberta .conta-soma {
border-top: 1px dashed var(--borda); margin-top: 5px; padding-top: 6px;
}
.conta-aberta .conta-soma span { color: var(--tinta); font-weight: 600; }
.sanf-conta p.fonte { margin: 8px 0 0; }
/* --- 4. o workflow de revisão --- */
.rev-caixa {
display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
font-size: .78rem; font-weight: 600; color: var(--ruim);
white-space: nowrap; user-select: none;
}
.rev-caixa input[type="checkbox"] { border-color: var(--ruim); }
.rev-caixa input[type="checkbox"]:checked {
border-color: var(--ok); background: var(--ok);
box-shadow: 0 0 9px color-mix(in srgb, var(--ok) 60%, transparent);
}
.rev-caixa:hover input[type="checkbox"] { border-color: var(--acento); }
/* tratado: a linha apaga, mas continua legível e o check fica vivo */
.ped-linha.ped-revisado > td { opacity: .45; }
.ped-linha.ped-revisado > td:last-child,
.ped-linha.ped-revisado .rev-caixa { opacity: 1; }
.ped-linha.ped-revisado .rev-caixa { color: var(--ok); }
.ped-linha.ped-revisado.ped-aberta > td { opacity: 1; }
/* --- 5. o HUD de triagem --- */
.hud-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; flex: none; }
.hud {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 14px; border-radius: 8px; text-decoration: none;
font-family: "Rajdhani", "Inter", sans-serif; font-weight: 600;
letter-spacing: .03em; font-size: .92rem;
color: var(--tinta-fraca); background: transparent;
border: 1px solid var(--borda);
transition: color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.hud:hover { text-decoration: none; color: var(--tinta); border-color: var(--tinta-fraca); }
.hud b {
font-variant-numeric: tabular-nums; padding: 0 7px; border-radius: 999px;
background: var(--cab-tabela); color: var(--tinta); font-size: .82rem;
}
.hud-ativo { color: var(--acento); border-color: var(--acento);
box-shadow: 0 0 12px var(--neon); }
.hud-ruim.hud-ativo { color: var(--ruim); border-color: var(--ruim);
box-shadow: 0 0 12px color-mix(in srgb, var(--ruim) 45%, transparent); }
.hud-ok.hud-ativo { color: var(--ok); border-color: var(--ok);
box-shadow: 0 0 12px color-mix(in srgb, var(--ok) 45%, transparent); }
/* --- 6. paginação de radar: fica no pé do widget, fora da rolagem --- */
.pag-radar {
flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 8px 16px; border-top: 1px solid var(--borda);
background: var(--cab-tabela);
}
.pag-radar a.fantasma, .pag-radar button.fantasma {
padding: 2px 12px; line-height: 1.5; text-decoration: none;
}
.pag-radar a.fantasma:hover { text-decoration: none; }
.pag-marca { font-family: "Rajdhani", "Inter", sans-serif; letter-spacing: .04em;
font-size: .92rem; white-space: nowrap; }
.pag-marca strong { color: var(--acento); font-variant-numeric: tabular-nums; }
.pag-total { margin-left: 4px; }
.pag-pp { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
font-size: .82rem; }
.pag-pp a {
padding: 1px 9px; border-radius: 6px; border: 1px solid var(--borda);
text-decoration: none; color: var(--tinta-fraca);
}
.pag-pp a:hover { text-decoration: none; border-color: var(--acento); color: var(--acento); }
.pag-pp a.pp-ativo { background: var(--acento); border-color: var(--acento); color: #fff; }
/* o dia em que a rotina nascida de uma ideia comeca a lembrar */
.id-dia { display: inline-flex; align-items: center; gap: 6px;
font-size: .78rem; color: var(--tinta-fraca); }
.id-dia input { width: 3.2em; background: transparent; border: 1px solid var(--borda);
border-radius: 6px; padding: 3px 6px; color: var(--tinta); font: inherit;
text-align: center; }
.id-dia[hidden] { display: none !important; }
/* ================================================================
Usuários, permissões e a tela do próprio (08/2026).
Duas telas: /usuarios (só gestor) e /eu (qualquer um logado).
A REGRA que desenha as duas: o Arquivo nunca mostra senha de
ninguém. Não há aqui estilo para "campo de senha alheia" porque
esse campo não existe — o gestor só reseta para a padrão, e a
confirmação é a senha DELE.
================================================================ */
/* nenhuma das duas é painel-tático: são formulário + tabela, a página rola
normalmente e cada cartão tem a altura do próprio conteúdo (lição de 06/08) */
.pagina-usuarios .widget, .pagina-eu .widget {
overflow: visible; height: auto; min-height: min-content; margin-bottom: 14px; }
.pagina-usuarios .widget-corpo, .pagina-eu .widget-corpo {
flex: none; min-height: min-content; overflow: visible; }
.pagina-usuarios .pt-topo, .pagina-eu .pt-topo {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 12px; margin-bottom: 6px; }
.pagina-usuarios .pt-nota, .pagina-eu .pt-nota { margin: 4px 0 12px; }
.pagina-usuarios .rolagem-tabela { overflow-x: auto; }
.pagina-eu .pt-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
align-items: start; margin-bottom: 0; }
/* estas duas telas são de leitura confortável, não de radar de 13 colunas */
main.pagina-usuarios, main.pagina-eu { max-width: 1180px; }
/* o campo de senha ainda não existia no .form-lv (as telas anteriores não
pediam nenhuma): mesmo desenho do input de texto do formulário */
.form-lv input[type="password"] {
background: transparent; border: 1px solid var(--borda); border-radius: 6px;
padding: 7px 9px; color: var(--tinta); font: inherit; min-width: 0; }
.form-lv input[type="password"]:focus {
outline: none; border-color: var(--acento); box-shadow: 0 0 8px var(--neon); }
/* --- o login: texto FIXO, nunca campo. O chip tracejado diz isso sem
precisar de frase — ele é referência em rotinas, trilhas e no sync_log --- */
.us-login {
display: inline-block; padding: 1px 9px; border-radius: 7px;
border: 1px dashed var(--borda); color: var(--tinta-fraca);
font-size: .86rem; letter-spacing: .02em; white-space: nowrap;
}
h3 .us-login { font-size: .8rem; vertical-align: 2px; margin-left: 6px; }
/* --- a bolinha da pessoa na tabela (foto ou inicial) --- */
.us-avatar {
width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: none;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: .92rem; line-height: 1;
background: var(--acento-claro); color: var(--acento);
border: 1px solid var(--borda);
}
.us-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.us-avatar.us-avatar-vazio { background: var(--cab-tabela); color: var(--tinta-fraca); }
/* --- chips das categorias (neutros: categoria não é marca) --- */
.us-chips, .eu-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.us-cat {
display: inline-flex; align-items: center; padding: 1px 9px;
border-radius: 999px; border: 1px solid var(--borda);
font-size: .74rem; color: var(--tinta); white-space: nowrap;
}
.us-situacao { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.us-descricao { display: block; max-width: 380px; line-height: 1.45; }
.us-acoes { display: flex; gap: 12px; align-items: center;
justify-content: flex-end; flex-wrap: wrap; }
.us-acoes form { margin: 0; }
/* --- a gaveta da linha (mesmo padrão da /cobrancas: abre DEBAIXO da pessoa,
com a largura toda, nada de modal) --- */
.us-painel { display: flex; flex-direction: column; gap: 10px;
padding: 10px 2px 12px; max-width: 900px; }
.us-painel h3 { margin: 0; font-size: .98rem; }
.us-painel .form-lv { gap: 9px; }
.us-grade { display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px;
min-width: 0; }
/* --- caixas de marcar com explicação embaixo. O `flex-direction: row` é
obrigatório: estes labels são filhos de .form-lv, que é coluna — sem isto
o texto desce para baixo da caixinha (mesma pegadinha do .id-mover).
E o seletor precisa do `.form-lv label` inteiro: `.form-lv label` é (0,1,1)
e engoliria um `.us-caixa` solto, que é (0,1,0) — a direção voltaria a
coluna e a cor/tamanho da letra continuariam os do rótulo de campo. */
.us-caixas { display: flex; flex-direction: column; gap: 10px; }
.us-caixa, .form-lv label.us-caixa {
display: flex; flex-direction: row; align-items: flex-start; gap: 10px;
cursor: pointer; font-size: .9rem; color: var(--tinta);
}
.us-caixa input[type="checkbox"] { margin-top: 3px; }
.us-caixa > span { display: flex; flex-direction: column; gap: 2px; line-height: 1.4; }
.us-caixa-perigo {
border: 1px solid var(--borda); border-left: 3px solid var(--ruim);
border-radius: 10px; padding: 10px 12px; margin-top: 2px;
}
.us-caixa-perigo input[type="checkbox"] { border-color: var(--ruim); }
.us-caixa-perigo input[type="checkbox"]:checked {
border-color: var(--ruim); background: var(--ruim);
box-shadow: 0 0 9px color-mix(in srgb, var(--ruim) 60%, transparent); }
/* --- as categorias reais do catálogo, uma caixa cada (nunca texto livre) --- */
.us-cats {
display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
gap: 6px 14px; max-height: 260px; overflow-y: auto;
border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px;
}
.us-cat-caixa, .form-lv label.us-cat-caixa {
display: flex; flex-direction: row; align-items: center; gap: 8px;
cursor: pointer; font-size: .84rem; color: var(--tinta); min-width: 0;
}
.us-cat-caixa > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.us-nota-painel { margin: 0; display: flex; align-items: center; gap: 7px; }
/* --- o bloco do reset: o que vai acontecer, em palavras, antes do campo --- */
.us-reset {
border: 1px solid var(--alerta); border-left: 3px solid var(--alerta);
border-radius: 10px; background: var(--alerta-fundo);
padding: 10px 14px; font-size: .9rem; line-height: 1.55;
}
.us-reset p { margin: 0 0 6px; }
.us-reset p:last-child { margin-bottom: 0; }
/* --- criar grupo novo: recolhido, para não competir com a tabela --- */
.us-novo-grupo { margin-top: 14px; border-top: 1px dashed var(--borda); padding-top: 10px; }
.us-novo-grupo summary { cursor: pointer; font-size: .88rem; color: var(--acento);
display: flex; align-items: center; gap: 7px; width: max-content; }
.us-novo-grupo summary:hover { text-decoration: underline; }
.us-novo-grupo .form-lv { margin-top: 10px; max-width: 720px; }
.us-form-novo { max-width: 900px; }
/* ---------------------------------------------------------------- a tela /eu */
/* o aviso da senha temporária: mesma anatomia da .regra-ouro, na cor de alerta.
Não é erro — é uma pendência da própria pessoa, e ela some sozinha ao trocar */
.eu-aviso {
display: flex; align-items: flex-start; gap: 12px;
border: 1px solid var(--alerta); border-left: 4px solid var(--alerta);
border-radius: 12px; background: var(--alerta-fundo);
padding: 12px 16px; margin: 4px 0 14px;
clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
}
.eu-aviso > .icone { width: 1.35em; height: 1.35em; flex: none;
color: var(--alerta); margin-top: 2px; }
.eu-quem { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
gap: 12px 22px; margin: 4px 0 12px; }
.eu-quem dt { text-transform: uppercase; font-size: .72rem; letter-spacing: .06em;
color: var(--tinta-fraca); margin: 0 0 3px; font-weight: 600; }
/* align-items: flex-start é obrigatório — sem ele o chip tracejado do login
(um inline-block virado item de flex) estica pela largura toda da coluna */
.eu-quem dd { margin: 0; font-size: .95rem;
display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.eu-abre-rotulo { margin: 10px 0 6px; text-transform: uppercase;
letter-spacing: .06em; font-size: .72rem; font-weight: 600; }
.eu-abre { list-style: none; margin: 0 0 10px; padding: 0;
display: flex; flex-direction: column; gap: 7px; font-size: .92rem; line-height: 1.5; }
.eu-abre > li { display: flex; align-items: flex-start; gap: 8px; }
.eu-abre > li > .icone { margin-top: .22em; color: var(--acento); }
.eu-abre li.eu-chips { display: flex; padding-left: 26px; }
.eu-regras { margin: 2px 0 4px; padding-left: 20px; line-height: 1.6; }
.eu-foto-bloco { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.eu-avatar {
width: 92px; height: 92px; border-radius: 50%; overflow: hidden; flex: none;
display: inline-flex; align-items: center; justify-content: center;
font-family: "Rajdhani", "Inter", sans-serif;
font-weight: 700; font-size: 2.4rem; line-height: 1;
background: var(--acento-claro); color: var(--acento);
border: 1px solid var(--borda);
}
.eu-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eu-avatar.us-avatar-vazio { background: var(--cab-tabela); color: var(--tinta-fraca); }
/* --- a bolinha do menu virou LINK para /eu, e ganha foto quando houver.
Ela vive numa barra de 68px: a foto cobre o círculo e não estoura. --- */
.quem-bolinha.com-foto { padding: 0; overflow: hidden; background: transparent;
box-shadow: inset 0 0 0 1px var(--borda); }
.quem-bolinha img { width: 100%; height: 100%; object-fit: cover;
border-radius: 50%; display: block; }
.quem-bolinha.ativo { box-shadow: 0 0 0 2px var(--acento); }
/* o atributo hidden SEMPRE vence os displays das classes novas (regra da casa
— a lição que já mordeu cinco vezes) */
.us-acoes[hidden], .us-painel[hidden], .us-grade[hidden], .us-caixas[hidden],
.us-caixa[hidden], .us-cats[hidden], .us-cat-caixa[hidden], .us-cat[hidden],
.us-chips[hidden], .us-situacao[hidden], .us-nota-painel[hidden],
.us-reset[hidden], .us-avatar[hidden], .us-login[hidden],
.eu-aviso[hidden], .eu-quem[hidden], .eu-abre[hidden], .eu-chips[hidden],
.eu-foto-bloco[hidden], .eu-avatar[hidden] { display: none !important; }
@media (max-width: 1100px) {
.pagina-eu .pt-duplo { display: block; }
.pagina-eu .pt-duplo .widget { margin-bottom: 14px; }
.us-cats { max-height: none; }
}
/* ================================================================
Vendas, 2ª rodada (08/08/2026): busca, seletores no HUD, colunas
ordenáveis, percentuais na conta aberta e o botão de copiar.
================================================================ */
/* --- o HUD agora tem duas fileiras: a vista e os filtros --- */
.hud-filtros { flex-direction: column; align-items: stretch; gap: 8px; }
.hud-grupo { display: flex; flex-wrap: wrap; gap: 8px; }
.hud-seletores { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.hud-seletores select {
padding: 6px 30px 6px 12px; border-radius: 8px; font-size: .88rem;
border: 1px solid var(--borda); background-color: transparent; color: var(--tinta);
font-family: "Rajdhani", "Inter", sans-serif; font-weight: 600; cursor: pointer;
}
.hud-seletores select:hover { border-color: var(--acento); }
.hud-seletores .fantasma { padding: 5px 14px; text-decoration: none; }
.hud-seletores a.fantasma:hover { text-decoration: none; }
.hud-busca {
display: inline-flex; align-items: center; gap: 6px; flex: 1 1 260px; max-width: 420px;
padding: 4px 12px; border-radius: 8px; border: 1px solid var(--borda);
background: transparent;
}
.hud-busca:focus-within { border-color: var(--acento); box-shadow: 0 0 10px var(--neon); }
.hud-busca .lupa { color: var(--tinta-fraca); font-size: 1.1rem; line-height: 1; }
.hud-busca input {
flex: 1; min-width: 0; border: none; background: transparent; color: var(--tinta);
padding: 4px 0; font-size: .9rem; outline: none;
}
.hud-busca input::placeholder { color: var(--tinta-fraca); }
/* --- cabeçalho ordenável --- */
.tabela-sanfona thead th a.ordenar {
color: var(--tinta-fraca); text-decoration: none; display: inline-flex;
align-items: center; gap: 4px; white-space: nowrap;
}
.tabela-sanfona thead th a.ordenar:hover { color: var(--acento); text-decoration: none; }
.tabela-sanfona thead th a.ordenar-ativo { color: var(--acento); }
.tabela-sanfona thead th.num a.ordenar { justify-content: flex-end; }
/* --- percentuais na conta aberta --- */
.conta-aberta .conta-pct {
font-style: normal; font-weight: 500; font-size: .76rem; color: var(--tinta-fraca);
margin-left: 7px; font-variant-numeric: tabular-nums;
}
.conta-titulo {
margin: 12px 0 6px; font-family: "Rajdhani", "Inter", sans-serif;
text-transform: uppercase; letter-spacing: .07em; font-size: .74rem;
color: var(--tinta-fraca); border-top: 1px solid var(--borda); padding-top: 9px;
}
/* o "não sei" é cor de alerta, nunca de erro: falta o dado, não falhou nada */
.conta-fora .nao-sei { color: var(--alerta); font-weight: 600; cursor: help; }
.conta-fora strong.fonte { font-weight: 500; }
/* --- o botão de copiar o nº do pedido --- */
.sanf-botoes { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.sanf-ficha .sanf-botoes .fantasma { margin-top: 0; }
.botao-copiar { font-family: inherit; white-space: nowrap; }
.botao-copiar.copiou { color: var(--ok); border-color: var(--ok);
box-shadow: 0 0 10px color-mix(in srgb, var(--ok) 45%, transparent); }
/* A FOLHA DE IMPRESSAO FICA SEMPRE POR ULTIMO. Ela redefine as
variaveis de :root para o papel, e so vence os temas por ORDEM DE
ORIGEM — media query nao soma especificidade. Todo CSS novo entra
ACIMA deste bloco. (reposicionada em 07/08/2026) */
@media print {
:root, :root[data-tema="claro"], :root[data-tema="escuro"], :root[data-tema="galaxia"] {
--fundo: #fff; --cartao: #fff; --tinta: #14181f; --tinta-forte: #000;
--tinta-fraca: #55606f; --borda: #b9c1cc; --acento: #14181f;
--acento-claro: transparent; --neon: transparent;
--cab-tabela: #f0f2f5; --registro-fundo: #f5f6f8; --registro-tinta: #14181f;
color-scheme: light;
}
@page { margin: 16mm 14mm; }
/* OS GRAFICOS DO RELATORIO PRECISAM SAIR COLORIDOS NO PAPEL.
Sem `print-color-adjust: exact` o navegador descarta cor de fundo na
impressao — e uma barra sem preenchimento nao e um grafico, e uma linha
em branco. E o que motivou fazer tudo em HTML/CSS: com canvas nem isso
salvaria. */
.rel-barra-cheio, .rel-casc-trilha i, .rel-par-linha i, .rel-regua-cheio,
.rel-barra-trilha, .rel-casc-trilha, .rel-regua-trilha, .rel-kpi {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
/* no papel o acento vira quase-preto; a cascata precisa de contraste entre
os degraus, senao viram quatro barras iguais */
.casc-fat { background: #2b3a52 !important; }
.casc-custo { background: #9aa4b2 !important; }
.casc-margem, .casc-liquida { background: #1e7e34 !important; }
.casc-ads { background: #b8860b !important; }
.casc-negativa { background: #b02a37 !important; }
.par-agora { background: #2b3a52 !important; }
.par-antes { background: #b9c1cc !important; }
/* um grafico nao pode ser partido ao meio pela quebra de pagina */
.rel-graf, .rel-kpi, .rel-regua, .rel-cascata { break-inside: avoid; }
.rel-graficos { grid-template-columns: 1fr 1fr; gap: 14px; }
.rel-kpis { grid-template-columns: repeat(3, 1fr); }
html, body { background: #fff !important; }
body, .conteudo, main { overflow: visible !important; height: auto !important; }
/* tudo que é do site some: sobra o relatório */
.menu-lateral, .trilha, .faixa-rotinas, .avisos, .rel-barra, .nao-imprime,
#galaxia, .popup-fundo, .gaveta, .gaveta-fundo { display: none !important; }
.conteudo { margin-left: 0 !important; }
main { max-width: none !important; margin: 0 !important; padding: 0 !important; }
.rel-papel { border: none !important; border-radius: 0 !important;
box-shadow: none !important; padding: 0 !important; max-width: none !important;
backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.widget, .rel-folha, .rel-painel-numeros > div {
backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
clip-path: none !important; box-shadow: none !important; overflow: visible !important; }
.rel-papel-cab h1 { font-size: 20pt; }
.rel-papel, .rel-papel-texto { font-size: 10.5pt; line-height: 1.55; }
.rel-papel-bloco h2 { font-size: 12pt; }
.rel-num-val { font-size: 13pt; }
.rel-papel-rodape { font-size: 8.5pt; }
.rel-ressalva { border-color: #000 !important; }
.rel-ressalva strong { color: #000 !important; }
a[href]::after { content: ""; }
}
/* ================================================================
3ª rodada (07/08/2026): menu por assunto, HUD com símbolos, e a
caça ao bug do dropdown no hiperespaço.
================================================================ */
/* --- O DROPDOWN DE CATEGORIAS SUMIA ATRÁS DOS PREÇOS, e SÓ no hiperespaço ---
Não era z-index pequeno: a lista já era 30 e o cabeçalho da tabela é 5.
Era CONTEXTO DE EMPILHAMENTO. No tema galáxia o `.widget` ganha
`backdrop-filter`, e backdrop-filter cria um contexto próprio — o widget
passa a se pintar inteiro depois da barra de busca, e o z-index 30 da lista
só valia dentro da própria barra. Nos outros temas não há filtro, não há
contexto, e por isso o bug não aparecia.
A cura é dar à barra de busca um contexto seu, acima do widget. */
.painel-busca { position: relative; z-index: 40; }
/* --- os símbolos do HUD (no lugar dos emojis) --- */
.hud-sinal {
font-style: normal; font-size: .95rem; line-height: 1;
opacity: .85; margin-right: 1px;
}
.hud-ruim .hud-sinal { color: var(--ruim); opacity: 1; }
.hud-ok .hud-sinal { color: var(--ok); opacity: 1; }
/* --- o seletor de período e a troca do miolo sem recarregar (07/08) --- */
.sel-periodo {
padding: 5px 28px 5px 10px; border-radius: 8px; font-size: .85rem;
border: 1px solid var(--borda); background-color: transparent; color: var(--tinta);
font-family: "Rajdhani", "Inter", sans-serif; font-weight: 600; cursor: pointer;
margin-left: 6px;
}
.sel-periodo:hover { border-color: var(--acento); }
/* --- o calendário do dia e o atalho "hoje" (10/08/2026) ---
As setas ‹ › só existem no recorte de um dia — e some no recorte de mês, o
que deixava o dia congelado naquele em que se entrou no mês. O calendário
alcança QUALQUER data (inclusive hoje) de dentro de qualquer recorte. */
.sel-dia {
padding: 4px 8px; border-radius: 8px; font-size: .82rem;
border: 1px solid var(--borda); background-color: transparent; color: var(--tinta);
font-family: "Rajdhani", "Inter", sans-serif; font-weight: 600; cursor: pointer;
margin-left: 4px;
}
.sel-dia:hover, .sel-dia:focus { border-color: var(--acento); outline: none; }
/* o `color-scheme` de cada tema (linhas 25/52/78) é herdado pelo campo — é ele
que faz o calendário nativo e o iconezinho nascerem claros no tema escuro.
Não pintar o ícone à mão: filtro aqui brigaria com o do tema hiperespaço. */
.sel-dia::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .7; }
.sel-dia:hover::-webkit-calendar-picker-indicator { opacity: 1; }
.nav-hoje { font-size: .82rem; }
/* o miolo trocando: um respiro, não um spinner — a troca leva ~50ms */
#vendas-corpo { display: contents; }
#vendas-corpo.trocando { opacity: .55; transition: opacity .12s ease; }
.ped-data { font-weight: 600; }
/* --- o botão do Relatório do Alex passa a SEGUIR O TEMA (07/08/2026) ---
As variáveis --rosa já mudavam por tema, mas de rosa para outro rosa: no
tema claro ele ficava rosa choque no meio de uma tela azul. O Leandro pediu
que acompanhe o acento. Redefinir as variáveis (e não a regra) mantém de pé
os 3 templates que usam .botao-rosa. */
:root, :root[data-tema="escuro"], :root[data-tema="galaxia"] {
--rosa: var(--acento);
--rosa-brilho: color-mix(in srgb, var(--acento) 72%, #fff);
--rosa-neon: var(--neon);
--rosa-tinta: #fff;
}
/* --- margens por categoria em duas colunas (07/08/2026) --- */
.margens-duplas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px;
align-items: start; max-width: 900px; }
.margens-duplas .tabela { margin: 0; }
@media (max-width: 900px) { .margens-duplas { grid-template-columns: 1fr; } }
/* ---------- Rotinas: a vista de CALENDÁRIO (07/08/2026) ---------- */
.rot-vistas { display: inline-flex; gap: 6px; margin-left: 12px; }
.rot-vistas .hud { padding: 4px 12px; font-size: .85rem; }
.rot-calendario { flex: 1 1 0; min-height: 0; display: grid; gap: 16px;
grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); }
@media (max-width: 1000px) { .rot-calendario { grid-template-columns: 1fr; } }
.cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
align-content: start; }
.cal-cabeca { text-align: center; font-family: "Rajdhani", "Inter", sans-serif;
text-transform: uppercase; letter-spacing: .08em; font-size: .7rem;
color: var(--tinta-fraca); padding-bottom: 2px; }
.cal-dia { position: relative; min-height: 74px; padding: 6px 8px;
border: 1px solid var(--borda); border-radius: 10px; background: var(--cartao);
color: var(--tinta); text-align: left; cursor: pointer; font: inherit;
display: flex; flex-direction: column; gap: 4px;
transition: border-color .15s ease, box-shadow .15s ease; }
.cal-dia[disabled] { cursor: default; opacity: .5; background: transparent; }
.cal-vazio { border: none; background: none; min-height: 0; }
.cal-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-placar { font-size: .74rem; color: var(--tinta-fraca);
font-variant-numeric: tabular-nums; }
.cal-trilha { margin-top: auto; height: 4px; border-radius: 3px;
background: var(--cab-tabela); overflow: hidden; display: block; }
.cal-trilha i { display: block; height: 100%; background: var(--ok); }
.cal-tem { border-color: var(--acento); }
.cal-ok .cal-trilha i { background: var(--ok); }
.cal-atrasado { border-color: var(--ruim); }
.cal-atrasado .cal-trilha i { background: var(--ruim); }
.cal-hoje { box-shadow: inset 0 0 0 2px var(--acento); }
.cal-dia:not([disabled]):hover { border-color: var(--acento); }
.cal-aberto { box-shadow: 0 0 0 2px var(--acento), 0 0 14px var(--neon); }
.cal-painel { min-height: 0; overflow-y: auto; padding-right: 4px; }
.cal-dia-detalhe h3 { margin: 0 0 10px; font-size: 1.05rem; }
.cal-rotina { border: 1px solid var(--borda); border-radius: 10px;
padding: 10px 12px; margin-bottom: 10px; background: var(--cartao); }
.cal-rotina > strong { display: block; }
.cal-rotina.rotina-completa { opacity: .6; }
/* ---------- Usuários: separar a ação comum da ação de risco (07/08/2026) ----
'editar' e 'resetar a senha' eram dois `discreto discreto-acento` colados —
mesma cor, mesmo peso, nada entre eles, e um dos dois derruba a sessão da
pessoa. Agora eles não se parecem. */
.us-acoes { display: inline-flex; align-items: center; gap: 10px; }
.us-fio { width: 1px; height: 18px; background: var(--borda); flex: none; }
.botao-acao {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 12px; border-radius: 7px; cursor: pointer;
font: inherit; font-size: .84rem; font-weight: 600;
background: transparent; color: var(--acento);
border: 1px solid var(--borda);
transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.botao-acao:hover { border-color: var(--acento); background: var(--acento-claro); }
.botao-acao .icone { width: 14px; height: 14px; }
.botao-acao-risco { color: var(--ruim); }
.botao-acao-risco:hover { border-color: var(--ruim); color: var(--ruim);
background: color-mix(in srgb, var(--ruim) 12%, transparent); }
.botao.botao-risco { background-color: var(--ruim); border-color: var(--ruim); }
.botao.botao-risco:hover { background-color: var(--ruim); filter: brightness(1.1); }
/* ---------- Ads: filtros, saldo e reposição (07/08/2026) ---------- */
.ads-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--borda);
border-radius: 10px; background: var(--cartao); }
.ads-filtros label { display: flex; flex-direction: column; gap: 4px;
font-size: .8rem; color: var(--tinta-fraca); }
.ads-filtros select, .ads-filtros input[type=date] {
padding: 6px 10px; border-radius: 7px; border: 1px solid var(--borda);
background-color: transparent; color: var(--tinta); font-size: .88rem; }
.ads-filtros select { padding-right: 28px; }
.ads-filtros .fantasma { padding: 6px 14px; text-decoration: none; }
.ads-filtros a.fantasma:hover { text-decoration: none; }
.widget-saldo { margin-bottom: 16px; }
.tabela-saldo th, .tabela-saldo td { vertical-align: middle; }
.tabela-saldo .ped-conta { font-size: .9rem; }
.tabela-saldo .campo-parametro { width: 104px; text-align: right; }
/* a urgência colore a BORDA da linha, não o fundo: fundo colorido em tabela
financeira compete com o semáforo da margem e confunde os dois */
.tabela-saldo tr.saldo-estourado td:first-child { box-shadow: inset 3px 0 0 var(--ruim); }
.tabela-saldo tr.saldo-critico td:first-child { box-shadow: inset 3px 0 0 var(--ruim); }
.tabela-saldo tr.saldo-atencao td:first-child { box-shadow: inset 3px 0 0 var(--alerta); }
.tabela-saldo tr.saldo-ok td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.tabela-saldo tr.saldo-nao_sei td:first-child { box-shadow: inset 3px 0 0 var(--tinta-fraca); }
.tabela-saldo tfoot td { border-top: 2px solid var(--borda); padding-top: 10px; }
.saldo-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--borda); }
.saldo-acoes form { margin: 0; }
.saldo-acoes .botao-rosa { text-decoration: none; }
.saldo-acoes .botao-rosa:hover { text-decoration: none; }
/* ================================================================
O Relatório do Alex vira PAINEL (07/08/2026): KPIs com comparação,
régua da margem, cascata do dinheiro e barras por canal/conta.
Tudo em HTML/CSS de propósito — este papel vira PDF por Ctrl+P, e
canvas costuma sair em branco na impressão.
================================================================ */
/* --- KPIs --- */
.rel-kpis { display: grid; gap: 12px; margin: 18px 0 20px;
grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.rel-kpi { border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px;
display: flex; flex-direction: column; gap: 2px; background: var(--cartao); }
.rel-kpi-rot { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
color: var(--tinta-fraca); font-family: "Rajdhani", "Inter", sans-serif; }
.rel-kpi-val { font-size: 1.5rem; font-weight: 800; line-height: 1.15;
font-variant-numeric: tabular-nums; }
.rel-kpi-sub { font-size: .82rem; color: var(--tinta-fraca);
font-variant-numeric: tabular-nums; }
.rel-kpi-delta { font-size: .78rem; font-weight: 600; margin-top: 4px;
font-variant-numeric: tabular-nums; }
.rel-kpi-delta em { font-style: normal; font-weight: 400; color: var(--tinta-fraca);
font-size: .72rem; display: block; }
.delta-bom { color: var(--ok); }
.delta-ruim { color: var(--ruim); }
.delta-mudo { color: var(--tinta-fraca); font-weight: 500; }
/* --- a régua da margem: realizado × mínima × alvo --- */
.rel-regua { margin: 0 0 22px; display: flex; flex-direction: column; gap: 6px; }
.rel-regua-rot { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
color: var(--tinta-fraca); font-family: "Rajdhani", "Inter", sans-serif; }
.rel-regua-trilha { position: relative; height: 18px; border-radius: 5px;
background: var(--cab-tabela); border: 1px solid var(--borda); overflow: hidden; }
.rel-regua-cheio { display: block; height: 100%; max-width: 100%;
background: currentColor; opacity: .85; }
.rel-regua-marca { position: absolute; top: -2px; bottom: -2px; width: 2px;
background: var(--tinta); opacity: .55; }
.rel-regua-leg { font-size: .8rem; color: var(--tinta-fraca); }
/* --- os gráficos --- */
.rel-graficos { display: grid; gap: 20px; margin: 4px 0 24px;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rel-graf-largo { grid-column: 1 / -1; }
.rel-graf h3 { margin: 0 0 10px; font-size: .95rem;
font-family: "Rajdhani", "Inter", sans-serif; letter-spacing: .03em; }
.rel-graf h3 .fonte { font-weight: 400; }
.rel-barras { display: flex; flex-direction: column; gap: 5px; }
.rel-barra-linha { display: grid; grid-template-columns: minmax(90px, 210px) 1fr auto;
gap: 10px; align-items: center; }
.rel-barra-rot { font-size: .82rem; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; }
.rel-barra-trilha { display: block; height: 14px; border-radius: 4px;
background: var(--cab-tabela); overflow: hidden; }
.rel-barra-cheio { display: block; height: 100%; border-radius: 4px;
background: var(--mkt, var(--acento)); }
.rel-barra-val { font-size: .82rem; font-weight: 600; white-space: nowrap;
font-variant-numeric: tabular-nums; }
.rel-barra-nota { font-style: normal; font-weight: 400; color: var(--tinta-fraca);
margin-left: 6px; font-size: .76rem; }
.rel-barras-resto { margin: 6px 0 0; }
/* --- a cascata do dinheiro --- */
.rel-cascata { display: flex; flex-direction: column; gap: 7px; }
.rel-casc-passo { display: grid; grid-template-columns: minmax(120px, 230px) 1fr auto;
gap: 10px; align-items: center; }
.rel-casc-rot { font-size: .82rem; }
.rel-casc-trilha { display: block; height: 16px; border-radius: 4px;
background: var(--cab-tabela); overflow: hidden; }
.rel-casc-trilha i { display: block; height: 100%; border-radius: 4px; }
.rel-casc-val { font-size: .84rem; font-weight: 600; white-space: nowrap;
font-variant-numeric: tabular-nums; }
.casc-fat { background: var(--acento); }
.casc-custo { background: var(--tinta-fraca); }
.casc-margem { background: var(--ok); }
.casc-ads { background: var(--alerta); }
.casc-liquida { background: var(--ok); }
.casc-negativa { background: var(--ruim); width: 100% !important; }
.rel-casc-fim { border-top: 1px dashed var(--borda); padding-top: 8px; }
/* --- mês contra mês --- */
.rel-pares { display: grid; gap: 14px;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.rel-par-rot { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
color: var(--tinta-fraca); font-family: "Rajdhani", "Inter", sans-serif; }
.rel-par-barras { display: flex; flex-direction: column; gap: 5px; margin-top: 5px; }
.rel-par-linha { display: block; }
.rel-par-linha i { display: block; height: 13px; border-radius: 4px; min-width: 2px; }
.rel-par-linha em { font-style: normal; font-size: .76rem; color: var(--tinta-fraca);
font-variant-numeric: tabular-nums; }
.par-antes { background: var(--tinta-fraca); opacity: .55; }
.par-agora { background: var(--acento); }
/* --- correções depois de olhar a tela (07/08/2026) ---------------------
1) "R$ 8.154.810,78" a 24px NÃO cabe num cartão de 196px: o valor quebrava
em duas linhas e empurrava todo o painel para 173px de altura. O valor
passa a não quebrar e a encolher junto com o cartão.
2) A cascata tem rótulos longos ("− Custo, comissão, frete e imposto"):
num cartão de 399px sobravam 38px para a barra. Ela vai para a linha
inteira, e o rótulo perde a coluna fixa. */
.rel-kpis { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }
.rel-kpi-val { white-space: nowrap; font-size: clamp(1.05rem, 2.1vw, 1.45rem); }
.rel-kpi-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel-kpi-delta em { display: inline; margin-left: 4px; }
.rel-graf-cascata { grid-column: 1 / -1; }
.rel-casc-passo { grid-template-columns: minmax(110px, 250px) minmax(120px, 1fr) auto; }
.rel-congelado { border-left: 3px solid var(--alerta); padding-left: 10px;
margin-top: 10px; }
.rel-congelado .icone { width: 14px; height: 14px; color: var(--alerta);
vertical-align: -2px; }
/* ====================================================================
VENDAS & MARGEM — o RESUMO FINANCEIRO no topo (10/08/2026)
Pedido do Leandro, a partir da tela do Mercado Turbo: cartões e a
composição do faturamento primeiro, os pedidos ao rolar.
A tela saiu do `painel-tatico` (100vh travado, tabela rolando por
dentro) e passou a ROLAR. As outras telas táticas não foram tocadas.
==================================================================== */
main.pagina-vendas { display: flex; flex-direction: column; gap: 10px;
padding-bottom: 26px; }
/* a lista agora cresce com o conteúdo: quem rola é a página.
`overflow-x: auto` e NÃO `visible`: o `.widget` tem `overflow: hidden`, então
com o corpo em `visible` a tabela não rolava — ela era CORTADA. Medido a
1100px: a tabela pede 1.016px, o corpo tem 980, e a última coluna (o selo de
auditado) simplesmente sumia, sem barra nenhuma para alcançá-la.
Na vertical não há barra: sem altura fixa, o corpo cresce e nunca estoura. */
.pagina-vendas .pt-cheia { flex: none; }
.pagina-vendas .pt-cheia > .widget-corpo { overflow-x: auto; flex: none; }
/* --- a linha de cartões coloridos ---
Fundo em tom bem lavado + FIO GROSSO à esquerda na cor da fatia. O fio é o
que identifica; o fundo é só clima. (A regra da tela de Ads — "colore a
borda, não o fundo" — nasceu para TABELA financeira, onde fundo colorido
compete com o semáforo da margem. Aqui não há semáforo, e o tom lavado a 10%
não disputa com nada.) */
.ct-linha { display: grid; gap: 12px; margin: 4px 0 2px;
/* 236px, medido e nao chutado: a tela dos analistas e 1366, e ali a faixa
util (fora a barra lateral e o respiro) da 1.248px. Cinco cartoes com 12px
de vao precisam de 5x236+48 = 1.228 — cabem. A 250 sobrava um cartao
sozinho na segunda linha. Nas telas largas o `auto-fit` estica os mesmos
cinco ate ~370px cada, e o `@container` abaixo devolve o formato de duas
colunas quando ha espaco. */
grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); }
.ct {
--ct-cor: var(--tinta-fraca);
display: flex; gap: 12px; justify-content: space-between; align-items: flex-start;
background: color-mix(in srgb, var(--ct-cor) 10%, var(--cartao));
border: 1px solid color-mix(in srgb, var(--ct-cor) 26%, var(--borda));
border-left: 4px solid var(--ct-cor);
border-radius: 10px; padding: 12px 14px; min-width: 0;
container-type: inline-size; flex-wrap: wrap;
}
.ct-esq { min-width: 0; flex: 1 1 auto;
display: flex; flex-direction: column; gap: 1px; }
/* O CARTÃO ESTREITO SE REORGANIZA — não se espreme (medido em 1366px, que é a
tela dos analistas: cinco valores saíam cortados pela metade). Abaixo de
~334px de CARTÃO — não de tela, por isso é `@container` — a coluna da direita
desce e vira linha, com rótulo à esquerda e valor à direita.
A quebra vem de `flex-basis: 100%` na COLUNA, e não de `flex-direction` no
cartão, porque uma `@container` não pode reestilizar o próprio contêiner que
ela consulta — só os descendentes dele. Sem isso a regra não pegava nada, em
silêncio, e os números continuavam cortados.
272px é o CONTEÚDO, não o cartão: a consulta mede a caixa interna, já sem os
28px de recheio e as bordas. Com o limiar no número de fora, o cartão de
351px (tela de 1920) media 317 por dentro e empilhava também — as duas
colunas nunca apareciam.
O valor grande nunca quebra em duas linhas (lição do Relatório do Alex, 07/08:
"R$ 8.154.810,78" quebrando empurrava o painel inteiro) — ele encolhe junto
com o cartão, em `cqw`, e é por isso que o `clamp` tem um piso baixo. */
@container (max-width: 272px) {
.ct-dir { flex-basis: 100%; text-align: left; }
.ct-dir li { flex-direction: row; justify-content: space-between;
align-items: baseline; gap: 12px; margin-bottom: 2px; }
}
.ct-rot { font-family: "Rajdhani", "Inter", sans-serif; font-weight: 600;
text-transform: uppercase; letter-spacing: .05em; font-size: .74rem;
color: var(--tinta-fraca); }
.ct-num { font-size: clamp(1.02rem, 9.5cqw, 1.55rem); font-weight: 700;
color: var(--tinta); line-height: 1.15; white-space: nowrap; }
.ct-sub { font-size: .78rem; color: var(--tinta-fraca); }
.ct-dir { list-style: none; margin: 0; padding: 0; text-align: right;
font-size: .76rem; color: var(--tinta-fraca); min-width: 0; }
.ct-dir li { display: flex; flex-direction: column; margin-bottom: 4px; }
.ct-dir b { color: var(--tinta); font-size: .84rem; white-space: nowrap; }
.ct-nota { font-style: normal; font-size: .7rem; opacity: .85; }
.ct-dir li > span { min-width: 0; }
.ct-dir b.fonte { color: var(--tinta-fraca); font-weight: 600; font-size: .74rem; }
.ct-dir .dica { vertical-align: 1px; margin-left: 2px; }
.ct-faturamento { --ct-cor: var(--acento); }
.ct-custo { --ct-cor: var(--fatia-custo); }
.ct-comissao{ --ct-cor: var(--fatia-comissao); }
.ct-frete { --ct-cor: var(--fatia-frete); }
.ct-margem { --ct-cor: var(--fatia-margem); }
/* --- a FAIXA de KPIs secundários ---
Eram cinco caixotes de 70px para dizer cinco números curtos: muito vazio para
pouca informação, e disputando atenção com os cartões de cima, que são os que
importam. Viraram um cartão só, dividido por fios — número à esquerda, rótulo
em duas linhas à direita. Mesma informação, um terço da altura. */
.kpi-fita {
display: flex; flex-wrap: wrap; align-items: stretch;
background: var(--cartao); border: 1px solid var(--borda);
border-radius: 10px; overflow: hidden;
}
.kf { flex: 1 1 190px; min-width: 0; display: flex; align-items: center; gap: 9px;
padding: 9px 14px; border-left: 1px solid var(--borda); }
.kf:first-child { border-left: none; }
.kf b { font-size: 1.22rem; font-weight: 700; color: var(--tinta);
line-height: 1.1; white-space: nowrap; }
.kf > span { font-size: .74rem; line-height: 1.25; color: var(--tinta-fraca);
min-width: 0; }
.kf em { font-style: normal; }
.kf-alerta { box-shadow: inset 3px 0 0 var(--alerta); }
.kf-alerta b { color: var(--alerta); }
/* --- a fila do meio: a rosca e a receita por canal ---
`flex: none` no corpo NÃO é enfeite: o `.widget-corpo` global é `flex: 1 1 0`,
e com base ZERO ele não contribui altura nenhuma para um widget que se mede
pelo conteúdo. O widget desabava para a altura do cabeçalho (109px medidos) e
o miolo — rosca, legenda, canais — VAZAVA por cima do texto de baixo. Era o
"tudo cortado" que o Leandro viu em 10/08. Aqui quem manda na altura é o
conteúdo, com um piso para o gráfico ter presença de gráfico. */
/* O RESUMO JÁ OCUPOU A DOBRA (10/08: `min-height: calc(100svh - 112px)` no
vd-topo, para os pedidos começarem só depois de uma tela). REVOGADO em
12/08, pelo mesmo Leandro: em monitor grande a regra fabricava um vazio
entre os gráficos e o HUD de filtros — "tire o espaço para ficar tudo na
sequência". Agora a coluna tem a altura do conteúdo, e quem tem tela grande
vê resumo E lista sem rolar. */
.vd-topo { display: flex; flex-direction: column; gap: 10px; }
.vd-meio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 12px; align-items: stretch; }
@media (max-width: 1150px) { .vd-meio { grid-template-columns: minmax(0, 1fr); } }
/* O TETO E O QUE SEGURA O CARTAO CHEIO. Sem ele, numa tela de 1080 o widget ia
a 726px e a tabela de canais (283px) nadava em 234px de vazio DENTRO do
cartao — meio cartao vazio le como defeito. Com o teto, a sobra fica FORA:
vira respiro de pagina antes da lista, que ninguem enxerga como buraco.
`stretch` + `max-height` tambem iguala os dois: cartoes de alturas diferentes
lado a lado ficam tortos. */
.vd-meio .widget { min-height: 292px; max-height: 440px; }
.vd-meio .widget-corpo { overflow: visible; flex: 1 1 auto; }
.wd-baixar { margin-left: auto; display: inline-flex; gap: 6px; }
.wd-baixar a { text-decoration: none; font-size: .8rem; }
/* --- AS CORES DAS SEIS FATIAS ---
Não são escolha de gosto: são a única atribuição que passa nos SEIS pares
vizinhos da rosca (a última fatia encosta na primeira) nos TRÊS fundos da
casa, mantendo a ordem em que a conta é lida. Enumeradas 20.160
possibilidades; 1.560 passam; esta é a que preserva cinco das seis cores
desejadas. O custo é o que abre mão do laranja: laranja↔verde é justamente
o par que some para quem tem protanopia (ΔE 3,2 contra o piso 8), e o verde
da margem não se negocia. NÃO TROCAR UMA COR SOZINHA — revalidar o anel. */
:root {
--fatia-custo: #e87ba4; --fatia-comissao: #eda100; --fatia-frete: #2a78d6;
--fatia-imposto: #e34948; --fatia-afiliado: #4a3aa7; --fatia-margem: #008300;
}
:root[data-tema="escuro"], :root[data-tema="galaxia"] {
--fatia-custo: #d55181; --fatia-comissao: #c98500; --fatia-frete: #3987e5;
--fatia-imposto: #e66767; --fatia-afiliado: #9085e9; --fatia-margem: #008300;
}
.fatia-custo { color: var(--fatia-custo); background: var(--fatia-custo); }
.fatia-comissao { color: var(--fatia-comissao); background: var(--fatia-comissao); }
.fatia-frete { color: var(--fatia-frete); background: var(--fatia-frete); }
.fatia-imposto { color: var(--fatia-imposto); background: var(--fatia-imposto); }
.fatia-afiliado { color: var(--fatia-afiliado); background: var(--fatia-afiliado); }
.fatia-margem { color: var(--fatia-margem); background: var(--fatia-margem); }
.rosca-corpo { display: flex; align-items: center; justify-content: center;
gap: clamp(14px, 2.4vw, 30px); flex-wrap: wrap; height: 100%; }
.rosca-fig { margin: 0; flex: 0 0 auto; }
/* a rosca cresce com o espaço que o widget ganhou: numa fila de 500px de altura
um anel de 178px fica boiando. Amarrada às DUAS dimensões (`vw` e `vh`) para
não estourar nem numa tela larga e baixa, nem numa estreita e alta. */
.rosca { width: clamp(170px, min(17vw, 24vh), 268px);
height: clamp(170px, min(17vw, 24vh), 268px); display: block; }
.rosca-trilha { fill: none; stroke: var(--borda); stroke-width: 5; opacity: .5; }
.rosca-fatia {
fill: none; stroke-width: 26; stroke: currentColor; background: none;
transition: stroke-width .12s ease;
}
.rosca-fatia:hover { stroke-width: 30; cursor: help; }
.rosca-hero { text-anchor: middle; font-family: "Rajdhani", "Inter", sans-serif;
font-weight: 700; font-size: 25px; fill: var(--tinta); }
.rosca-hero-rot { text-anchor: middle; font-size: 10px; fill: var(--tinta-fraca);
text-transform: uppercase; letter-spacing: .09em; }
/* a legenda NÃO é enfeite: é a table view que a régua de dataviz exige, porque
duas das seis cores ficam abaixo de 3:1 de contraste no tema claro */
.rosca-legenda { flex: 1 1 240px; border-collapse: collapse; font-size: .86rem;
min-width: 226px; max-width: 340px; }
.rosca-legenda th { font-size: .7rem; text-transform: uppercase;
letter-spacing: .05em; color: var(--tinta-fraca); font-weight: 600;
text-align: left; padding: 0 8px 5px 0; border-bottom: 1px solid var(--borda); }
.rosca-legenda td { padding: 5px 8px 5px 0; font-variant-numeric: tabular-nums;
white-space: nowrap; }
.rosca-legenda .num { text-align: right; }
.rosca-legenda .leg-bolinha { width: 18px; padding-right: 0; }
.rosca-legenda .leg-cor { width: 11px; height: 11px; border-radius: 3px;
display: inline-block; }
.rosca-legenda .leg-margem { border-top: 1px solid var(--borda); font-weight: 700; }
.rosca-legenda .leg-margem td { color: var(--tinta); padding-top: 7px; }
.rosca-pe { margin: 0; padding: 10px 16px 12px; line-height: 1.45; flex: none;
border-top: 1px solid var(--borda); }
/* --- receita por canal: a barra é o FUNDO da célula do nome ---
Antes era uma tira embaixo do nome, e cada canal comia 74px de altura: seis
canais não cabiam no widget. Como fundo, o canal cabe numa linha de ~34px e
a leitura é a mesma — comprimento proporcional à receita. A cor segue a
ENTIDADE (a marca), como no resto do site: filtrar a lista não repinta
ninguém. As classes .mkt-* não pintam sozinhas, elas declaram `--mkt`. */
.tabela-canais td { vertical-align: middle; }
.tabela-canais .cn-nome { position: relative; min-width: 168px;
isolation: isolate; }
.cn-fundo { position: absolute; z-index: -1; left: 0; top: 3px; bottom: 3px;
border-radius: 4px; min-width: 4px; display: block;
background: color-mix(in srgb, var(--mkt, var(--tinta-fraca)) 26%, transparent); }
.tabela-canais .ped-conta { font-size: .88rem; }
.cn-ped { font-style: normal; font-size: .72rem; color: var(--tinta-fraca);
margin-left: 7px; }
.tabela-canais .conta-pct { display: block; font-size: .72rem;
color: var(--tinta-fraca); font-style: normal; }
.tabela-canais .num { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* o botão de baixar enquanto o servidor monta o arquivo (o mês inteiro leva
~19s): fica apagado e não aceita segundo clique — dois cliques faziam o
servidor montar a planilha duas vezes, e ninguém via nada acontecer */
.wd-baixar a.baixando { opacity: .6; pointer-events: none; cursor: progress; }
/* o aviso do crachá vencido do Nexus: é a única falha da fila do financeiro
que precisa de gente, então é a única que se pinta */
.esc-aviso { color: var(--alerta); font-weight: 600; }
.esc-aviso .icone { width: 13px; height: 13px; vertical-align: -2px; }
/* --- de onde veio a margem (11/08/2026) ---
Estimativa do motor e número real da plataforma tinham a mesma cara na tela.
O selo marca só quem JÁ tem o número real: é o que muda de estado, e marcar
a estimativa pintaria a tela inteira enquanto a fila de 47 mil não anda. */
.marg-real { font-style: normal; color: var(--ok); font-weight: 700;
margin-left: 5px; cursor: help; font-size: .82em; }
.pe-real { color: var(--ok); }
.sanf-conta .pe-real strong { color: var(--ok); }
/* --- filtros novos de /vendas (11/08/2026) ---
Categorias (gaveta no HUD), ano (no seletor de período) e o INTERVALO
escolhido no calendário, que só filtra no botão.
AS DUAS GAVETAS SÃO FLUTUANTES, e o que está embaixo delas é sólido — no
tema hiperespaço o `.widget` ganha `backdrop-filter` e com ele um contexto
de empilhamento próprio (a lição de 07/08, que custou caro para ser
entendida). Por isso as duas ÂNCORAS ganham `position: relative` e um
z-index acima do conteúdo: a `.lista-categorias` tem z-index 30 dentro da
sua âncora, e sem a âncora esse 30 não vale contra o widget de fora.
O topo fica ACIMA do HUD porque a gaveta do intervalo abre por cima dele. */
.pt-topo { position: relative; z-index: 50; }
.hud-filtros { position: relative; z-index: 40; }
/* a gaveta de categorias no HUD acompanha a altura dos seletores ao lado
(6px, não os 8px do catálogo) — senão ela nasce 4px mais alta que os vizinhos
e a fileira inteira fica torta */
.hud-seletores .filtro-categorias summary { padding: 6px 12px; font-size: .88rem;
font-family: "Rajdhani", "Inter", sans-serif; font-weight: 600; }
.hud-seletores .filtro-categorias summary:hover { border-color: var(--acento); }
.hud-seletores .lista-categorias { right: auto; }
.cats-n strong { color: var(--acento); }
/* o intervalo: gaveta na barra de tempo, com o mesmo desenho da de categorias */
.filtro-intervalo summary { padding: 4px 10px; font-size: .82rem;
font-family: "Rajdhani", "Inter", sans-serif; font-weight: 600; }
.caixa-intervalo { min-width: 210px; gap: 8px; }
.caixa-intervalo label { justify-content: space-between; gap: 10px; }
.caixa-intervalo input[type=date] {
padding: 4px 8px; border-radius: 8px; font-size: .82rem;
border: 1px solid var(--borda); background-color: transparent; color: var(--tinta);
font-family: "Rajdhani", "Inter", sans-serif; font-weight: 600; cursor: pointer;
}
.caixa-intervalo input[type=date]:hover,
.caixa-intervalo input[type=date]:focus { border-color: var(--acento); outline: none; }
.caixa-intervalo .int-filtrar { margin-top: 2px; }
/* o recado de "faltou uma data" é alerta, não decoração — e some quando resolve */
.int-recado { color: var(--alerta); font-weight: 600; }
.int-recado[hidden] { display: none !important; }
/* o botão do intervalo acende quando ELE é o recorte em vigor — é o único
sinal que ele dá, já que o resumo não repete as datas do rótulo ao lado */
.filtro-intervalo summary.int-ativo { border-color: var(--acento); color: var(--acento); }
/* --- clicar no canal filtra a tela (11/08/2026) ---
O alvo é o link, não a linha: `
` não pode ser link (HTML inválido) e, se
fosse, engoliria a seleção dos números ao lado — que é justamente o que se
quer copiar de uma tabela financeira. O link cobre o nome e a barra, que já
ocupavam a célula inteira, então o alvo é grande sem roubar nada.
`z-index: 1` porque a barra (.cn-fundo) é z-index -1 dentro do `isolation`
da célula: sem isso o clique pega na barra, não no link. */
.cn-link { display: flex; align-items: center; text-decoration: none;
color: inherit; position: relative; z-index: 1; padding: 3px 6px 3px 0;
border-radius: 6px; }
/* o hover é da COR DA MARCA do canal (--mkt já está declarado na célula), não
um cinza qualquer: a linha inteira já é daquela marca, e um realce neutro
brigaria com ela nos três temas */
.cn-link:hover { text-decoration: none;
background: color-mix(in srgb, var(--mkt, var(--acento)) 18%, transparent); }
.cn-link:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
/* o canal ESCOLHIDO fica aceso e ganha o × — o mesmo gesto liga e desliga, e o
× é o que diz que clicar de novo desfaz (sem ele, o clique parece só repetir) */
.tabela-canais tr.cn-aceso { background: color-mix(in srgb, var(--acento) 10%, transparent); }
.tabela-canais tr.cn-aceso .cn-nome { font-weight: 700; }
.cn-x { font-style: normal; margin-left: 8px; color: var(--acento);
font-weight: 700; font-size: .9rem; }
.cn-todos { color: var(--acento); }
/* --- o selo da CONFERÊNCIA por planilha, ao lado da receita (11/08/2026) ---
Ele existia desde a Onda 1, mas num ícone da última coluna — 5.512 pedidos
conferidos e nenhum sinal onde a pessoa olha. Veio para a linha, ao lado do
número que a planilha compara (o total do pedido), e não da margem: a
planilha do seller center não traz comissão nem frete.
A COR SEPARA TRÊS COISAS, e nenhuma delas é gosto:
· verde (--ok) é do ✓ do NÚMERO REAL da plataforma, e continua só dele;
· neutro (--tinta-fraca) é a conferência que bateu — fato, não elogio;
· alerta (--alerta) é a que NÃO bateu, que é a única que pede ação.
O `--acento` está fora de propósito: no tema escuro ele é #e25563, vermelho,
e um check vermelho ao lado do dinheiro lê como erro em toda linha conferida. */
.aud-selo { margin-left: 5px; cursor: help; display: inline-flex;
vertical-align: -2px; color: var(--tinta-fraca); font-style: normal; }
.aud-selo .icone { width: 13px; height: 13px; }
.aud-corrigido { color: var(--acento); }
.aud-diverge { color: var(--alerta); font-weight: 700; font-size: .95em; }
.pe-conf { color: var(--tinta-fraca); }
.pe-diverge { color: var(--alerta); }
.pe-conf .icone, .pe-diverge .icone { width: 13px; height: 13px; vertical-align: -2px; }
.sanf-conta .pe-diverge strong { color: var(--alerta); }
/* O SELO NÃO PODE CAIR PARA A LINHA DE BAIXO. Medido em 1366px: a coluna Receita
nasce com 93px (77 de conteúdo), o número ocupa 70 e o selo pede mais 18 — os
46 selos da página caíram todos para uma segunda linha, e um sinal desgarrado
do número que ele qualifica não é sinal, é sujeira. Esta tabela NÃO é
`table-layout: fixed` (o `.tabela-fixa` só gruda o cabeçalho), então proibir a
quebra faz a própria coluna crescer, e a folga sai da coluna Itens — que já é
cortada por reticências e tem 373px. */
.tabela-sanfona td.col-receita { white-space: nowrap; }
/* --- as lojas do canal (11/08/2026) ---
Só aparecem com um canal escolhido, dentro do mesmo widget: é o espaço que
sobra quando a tabela de canais cai para uma linha, e é onde a pergunta
seguinte nasce ("qual loja está puxando isto para baixo?"). A barra AQUI é
proporcional à maior LOJA, não ao maior canal — dentro de um canal ela volta
a discriminar, ao contrário da barra do canal filtrado, que some. */
.lj-titulo { margin: 14px 0 6px; font-size: .92rem; font-weight: 700;
color: var(--tinta); display: flex; align-items: baseline; gap: 8px;
border-top: 1px solid var(--borda); padding-top: 12px; }
.lj-titulo .fonte { font-weight: 400; }
.tabela-lojas .cn-nome { cursor: help; }
/* a estrelinha das categorias do próprio analista (11/08/2026): com o menu
aberto a todos, cinco caixas marcadas não dizem se foi ele que marcou ou se
é o padrão dele. A estrela diz. */
.cat-minha { font-weight: 600; }
.cat-estrela { font-style: normal; color: var(--acento); font-size: .8em;
margin-left: 2px; }
/* O TETO DE 440px CEDE QUANDO AS LOJAS APARECEM (11/08/2026). Medido em 1366:
com as 5 lojas do ML, o corpo do widget passa 25px do teto e a última loja
fica atrás de uma rolagem de 25px — que ninguém percebe que existe. O teto
nasceu para impedir MEIO CARTÃO VAZIO; aqui o problema é o oposto, então ele
sai de cena, e a sobra vira respiro antes da lista, como o próprio comentário
do teto já previa.
O `:has` fica na FILA e não no widget: soltar o teto só do cartão das lojas
deixava os dois lado a lado com 440 e 477px — tortos, que é exatamente o que
o `stretch + max-height` existe para evitar. */
.vd-meio:has(.tabela-lojas) .widget { max-height: none; }
/* a loja clicável (12/08): o link cobre o nome, a linha ativa ganha realce e o
✕ diz "clique para desfazer" — filtro invisível é filtro que ninguém tira */
.lj-link { text-decoration: none; color: inherit; position: relative; z-index: 1; }
.lj-link:hover .ped-conta { text-decoration: underline; }
.tabela-lojas tr.loja-ativa td { background: color-mix(in srgb, var(--acento, #e33) 12%, transparent); }
.lj-marca { font-style: normal; font-size: .75rem; margin-left: 6px; opacity: .8; }
/* --- O POPUP DA SEXTA (12/08/2026) ---------------------------------------
Flutuante no canto, acima de tudo: na sexta a partir das 12h ele cobra as
planilhas da semana e vai se preenchendo sozinho conforme os uploads entram.
As cores vem dos tokens do tema — nada de cor nova. */
.sexta-pop { position: fixed; right: 18px; bottom: 18px; z-index: 90;
width: 320px; max-height: 70vh; overflow-y: auto;
background: var(--fundo-widget, #14151d); border: 1px solid var(--borda, #2a2c38);
border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.45); padding: 12px 14px; }
.sexta-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sexta-placar { margin-left: auto; font-size: .8rem; opacity: .85; }
.sexta-placar.completo { color: var(--verde, #35c46f); font-weight: 700; }
.sexta-fechar { background: none; border: none; color: inherit; font-size: 1.1rem;
cursor: pointer; opacity: .6; padding: 0 2px; }
.sexta-fechar:hover { opacity: 1; }
.sexta-itens { list-style: none; margin: 0; padding: 0; display: flex;
flex-direction: column; gap: 4px; }
.sexta-itens li { display: flex; align-items: center; gap: 8px; font-size: .84rem;
padding: 3px 4px; border-radius: 6px; }
.sexta-itens li.feito .sexta-nome { opacity: .55; text-decoration: line-through; }
.sexta-check { width: 20px; height: 20px; border-radius: 5px; flex: none;
display: inline-flex; align-items: center; justify-content: center;
font-size: .8rem; font-style: normal; }
.sexta-check.auto { color: var(--verde, #35c46f);
background: color-mix(in srgb, var(--verde, #35c46f) 16%, transparent); }
.sexta-check.manual { cursor: pointer; border: 1px solid var(--borda, #3a3d4d);
background: transparent; color: var(--verde, #35c46f); }
.sexta-check.manual.ok {
background: color-mix(in srgb, var(--verde, #35c46f) 16%, transparent); }
.sexta-pe { margin: 8px 0 0; font-size: .74rem; }
@media (max-width: 720px) { .sexta-pop { left: 12px; right: 12px; width: auto; } }
/* A FAIXA DA SEXTA em /rotinas — no FIM da página (12/08, segundo pedido do
Leandro: no topo ela disputava altura com o kanban e saía esmagada). A
página é painel-tatico (overflow hidden, kanban com flex 1 1 0), então a
armadura é tripla: `flex: none` (não encolhe na conta do flex), `min-height`
(piso duro mesmo que alguma regra futura tente), e rolagem interna acima do
teto. O `.widget` base tem `min-height: 0` — o piso daqui vence por ser mais
específico, e é ele que garante as caixinhas visíveis em qualquer tela. */
.rot-sexta { flex: none; min-height: 128px; max-height: 220px; }
/* o mesmo assassino do pv-vendas: corpo base `flex: 1 1 0` some em cartao de
conteudo — aqui tambem, `1 1 auto` */
.rot-sexta .widget-corpo { flex: 1 1 auto; overflow-y: auto; padding-top: 6px; }
.sexta-itens-pagina { flex-direction: row !important; flex-wrap: wrap;
gap: 4px 16px !important; }
.sexta-itens-pagina li { min-width: 230px; flex: 0 1 auto; }
.sexta-completo { color: var(--verde, #35c46f); }
/* --- VENDAS NO PAINEL (12/08/2026) ---------------------------------------
O dinheiro na primeira tela: KPIs (hoje/ontem/7d/mes) + 30 dias de barras.
A pagina e painel-tatico (100vh, overflow hidden): `flex: none` com altura
propria, como a faixa da sexta — quem cede sao os widgets de baixo, que ja
rolam por dentro. Receita em azul, margem em verde (--fatia-margem): o par
azul/verde ja e vizinho validado na rosca de /vendas. Identidade nunca so
pela cor: a legenda nomeia as duas. */
/* Segunda rodada (12/08, tarde): a v1 cortava as barras — o SVG mantinha a
proporcao do viewBox, crescia alem do widget e o fundo do grafico (onde as
barras moram) sumia. A cura: `preserveAspectRatio="none"` no SVG + ALTURA
FIXA aqui, e os rotulos de data FORA do SVG (esticados junto, deformariam).
Com "Anuncios por conta" e "Cobertura" movidos para as abas da Central, o
grafico e a unica peca de meio de pagina — flex none, altura propria. */
.pv-vendas { flex: none; }
/* O ASSASSINO MEDIDO NO NAVEGADOR (12/08, 16h): o `.widget-corpo` base e
`flex: 1 1 0` — base ZERO nao contribui altura, o widget encolhia para 58px
(so a testeira) mesmo com `flex: none` no cartao. E a MESMA armadilha ja
paga em 10/08 nos widgets de /vendas: em cartao dimensionado pelo conteudo,
o corpo tem de ser `1 1 auto`. */
.pv-vendas .widget-corpo { flex: 1 1 auto; overflow: visible; }
.pv-vendas .widget-cab { flex-wrap: wrap; row-gap: 4px; }
.pv-corpo { padding-top: 4px; }
.pv-tiles { display: flex; gap: 18px 26px; flex-wrap: wrap; margin: 2px 0 10px; }
.pv-kpi { display: inline-flex; flex-direction: column; align-items: flex-start;
line-height: 1.3; }
.pv-kpi i { font-style: normal; font-size: .68rem; opacity: .65;
text-transform: uppercase; letter-spacing: .04em; }
.pv-kpi strong { font-size: 1.05rem; }
.pv-kpi strong.margem-vermelho { color: var(--fatia-imposto); }
.pv-kpi em { font-style: normal; font-size: .74rem; color: var(--fatia-margem); }
.pv-kpi em.margem-vermelho { color: var(--fatia-imposto); }
.pv-comp { font-weight: 700; margin-left: 6px; }
.pv-sobe { color: var(--fatia-margem); }
.pv-cai { color: var(--fatia-imposto); }
/* Terceira rodada (12/08): grafico de LINHA. O wrap segura o SVG esticavel e
as etiquetas HTML por cima (texto dentro de SVG esticado deforma — pago duas
vezes hoje). O eixo de R$ mora numa coluna propria a direita. */
.pv-linha-wrap { display: flex; gap: 6px; }
.pv-wrap { position: relative; flex: 1 1 auto; height: 176px; min-width: 0; }
.pv-grafico { position: absolute; inset: 0; width: 100%; height: 176px; display: block; }
.pv-fundo { fill: transparent; }
.pv-dia:hover .pv-fundo { fill: color-mix(in srgb, currentColor 7%, transparent); }
.pv-fds-fundo { fill: color-mix(in srgb, currentColor 5%, transparent); }
.pv-grade { stroke: color-mix(in srgb, currentColor 14%, transparent);
stroke-width: 1; vector-effect: non-scaling-stroke; }
.pv-grade-mg { stroke-dasharray: 3 4; }
.pv-linha-rec { fill: none; stroke: var(--fatia-frete); stroke-width: 2.2;
stroke-linejoin: round; stroke-linecap: round; }
.pv-linha-mg { fill: none; stroke: var(--fatia-margem); stroke-width: 2;
stroke-linejoin: round; stroke-linecap: round; }
.pv-mg-etq { position: absolute; transform: translateX(-50%);
font-size: .62rem; line-height: 1; color: var(--fatia-margem);
pointer-events: none; white-space: nowrap; }
/* a etiqueta do faturamento em MIL, dia a dia (12/08) — espelho da margem, na
cor da linha azul */
.pv-rec-etq { position: absolute; transform: translateX(-50%);
font-size: .62rem; line-height: 1; color: var(--fatia-frete);
pointer-events: none; white-space: nowrap; }
.pv-eixo-y { position: relative; flex: none; width: 64px; height: 176px;
font-size: .68rem; opacity: .75; }
.pv-eixo-y span { position: absolute; left: 0; white-space: nowrap; }
.pv-eixo-y .pv-eixo-mg { color: var(--fatia-margem); opacity: .9; }
.pv-eixo { display: flex; margin-top: 2px; padding-right: 70px; }
.pv-eixo-dia { flex: 1 1 0; text-align: center; font-size: .68rem; opacity: .6;
white-space: nowrap; overflow: visible; }
.pv-nota { display: block; margin-top: 4px; font-size: .72rem; }
.pv-legenda { display: inline-flex; align-items: center; gap: 8px;
font-size: .78rem; margin-left: auto; }
.pv-cor { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.pv-cor-rec { background: var(--fatia-frete); }
.pv-cor-mg { background: var(--fatia-margem); margin-left: 10px; }