/* Painel da Conforto Já.
A tabela semântica de cor é definida UMA vez, aqui. Nenhuma tela inventa tom. */
:root {
--tinta: #1c1917;
--tinta-suave: #57534e;
--tinta-fraca: #8b8781;
--papel: #ffffff;
--fundo: #faf9f7;
--linha: #e7e3dd;
/* marca */
--marca: #b4884a;
--marca-escura: #8f6a37;
--marca-fraca: #fdf6ea;
/* semântica de risco e estado — usada por grupo de abas e por avisos */
--ok: #2f6f4f;
--ok-fundo: #eef7f1;
--atencao: #8a6100;
--atencao-fundo: #fdf6e3;
--perigo: #9b2c2c;
--perigo-fundo: #fdf0ef;
--neutro-fundo: #f2f0ed;
--raio: 8px;
--sombra: 0 1px 2px rgba(28, 25, 23, .06), 0 4px 12px rgba(28, 25, 23, .04);
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--fundo);
color: var(--tinta);
font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
a { color: var(--marca-escura); }
/* --- cabeçalho e navegação ------------------------------------------------ */
header.topo {
background: var(--papel);
border-bottom: 1px solid var(--linha);
padding: .9rem 1.5rem;
display: flex;
align-items: center;
gap: 1rem;
}
header.topo .marca { font-weight: 650; letter-spacing: -.01em; }
header.topo .quem { margin-left: auto; color: var(--tinta-suave); font-size: .9rem; }
.layout { display: flex; align-items: flex-start; gap: 1.5rem; padding: 1.5rem; }
nav.lateral { width: 16rem; flex: none; }
nav.lateral .grupo { margin-bottom: 1.25rem; }
nav.lateral .grupo > .rotulo {
display: flex; align-items: center; gap: .4rem;
font-size: .75rem; text-transform: uppercase; letter-spacing: .06em;
color: var(--tinta-fraca); margin-bottom: .4rem;
}
nav.lateral .grupo .explica {
font-size: .78rem; color: var(--tinta-fraca); margin: 0 0 .5rem; line-height: 1.4;
}
nav.lateral a {
display: block; padding: .45rem .6rem; border-radius: 6px;
color: var(--tinta); text-decoration: none; font-size: .93rem;
}
nav.lateral a:hover { background: var(--neutro-fundo); }
nav.lateral a.ativo { background: var(--marca-fraca); color: var(--marca-escura); font-weight: 600; }
/* O nome da área é link e cabeçalho ao mesmo tempo: as cinco áreas do `docs/35` §2.5 são
navegação, não rótulo decorativo. Herda o tamanho do `.rotulo` para não competir com os
itens de tela abaixo dele. */
nav.lateral .grupo > .rotulo > .titulo-da-area {
display: block; padding: 0; font-size: inherit; letter-spacing: inherit;
text-transform: inherit; color: inherit; font-weight: 700;
}
nav.lateral .grupo > .rotulo > .titulo-da-area:hover { background: none; color: var(--marca-escura); }
nav.lateral .grupo > .rotulo > .titulo-da-area.ativo { background: none; color: var(--marca-escura); }
/* Para quem ainda não vê o painel inteiro (11/09/2026): o que está em desenvolvimento fica
no tom fraco e o que já abre fica no escuro — a barra diz onde há o que ver antes do
clique. O ativo continua ganhando, porque é a tela em que a pessoa está. O nome da área
precisa da cadeia inteira do seletor dele, senão o `color: inherit` acima vence. */
nav.lateral a.fechada:not(.ativo) { color: var(--tinta-fraca); }
nav.lateral a.liberada:not(.ativo) { color: var(--tinta); }
nav.lateral .grupo > .rotulo > .titulo-da-area.liberada:not(.ativo) { color: var(--tinta); }
.selo {
font-size: .68rem; padding: .1rem .4rem; border-radius: 999px;
text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
.selo.baixo { background: var(--ok-fundo); color: var(--ok); }
.selo.medio { background: var(--atencao-fundo); color: var(--atencao); }
.selo.alto { background: var(--perigo-fundo); color: var(--perigo); }
/* --- conteúdo ------------------------------------------------------------- */
main { flex: 1; min-width: 0; max-width: 52rem; }
h1 { font-size: 1.45rem; margin: 0 0 .25rem; letter-spacing: -.015em; }
h2 { font-size: 1.05rem; margin: 1.75rem 0 .5rem; }
.subtitulo { color: var(--tinta-suave); margin: 0 0 1.25rem; }
.cartao {
background: var(--papel); border: 1px solid var(--linha);
border-radius: var(--raio); padding: 1.25rem; box-shadow: var(--sombra);
margin-bottom: 1rem;
}
.campo { margin-bottom: 1.1rem; }
.campo > label { display: block; font-weight: 600; margin-bottom: .3rem; font-size: .93rem; }
.campo .ajuda { color: var(--tinta-suave); font-size: .84rem; margin: 0 0 .4rem; }
input[type=text], input[type=email], input[type=password], textarea, select {
width: 100%; padding: .55rem .7rem; font: inherit; color: var(--tinta);
background: var(--papel); border: 1px solid var(--linha); border-radius: 6px;
}
textarea { resize: vertical; min-height: 4.5rem; }
/* A seta nativa do select gruda na borda direita, e o Chrome não deixa afastá-la: a seta
* vira desenho próprio, com o mesmo respiro do texto do lado esquerdo (Tiago, 03/10/2026). */
select {
appearance: none; -webkit-appearance: none; padding-right: 2.2rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%2378716c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right .8rem center; background-size: .75rem;
}
input:focus, textarea:focus, select:focus {
outline: 2px solid var(--marca); outline-offset: -1px; border-color: var(--marca);
}
/* Botões de um mesmo grupo têm a MESMA largura. A hierarquia é a cor. */
.botoes { display: flex; gap: .6rem; align-items: center; margin-top: 1rem; }
.botoes > button, .botoes > .botao { flex: 0 0 11rem; }
/* Um botão que precisa de POST próprio vem embrulhado num form. O form é que vira o
item do flex, senão o botão dele escapa da medida do grupo. */
.botoes > form { flex: 0 0 11rem; margin: 0; }
.botoes > form > button { width: 100%; }
button, .botao {
display: inline-flex; align-items: center; justify-content: center;
padding: .55rem 1rem; font: inherit; font-weight: 600; cursor: pointer;
border-radius: 6px; border: 1px solid transparent; text-decoration: none;
}
/* `.botao` é a versão link do botão (um `` que age como botão). A regra primária
valia só para `button`, e um `` saía como texto dourado —
a ação principal de uma tela parecendo um link. */
button.primario, .botao.primario { background: var(--marca); color: #fff; }
button.primario:hover, .botao.primario:hover { background: var(--marca-escura); color: #fff; }
button.secundario, .botao.secundario {
background: var(--papel); color: var(--tinta); border-color: var(--linha);
}
button.secundario:hover { background: var(--neutro-fundo); }
button.discreto { background: transparent; color: var(--tinta-suave); border-color: var(--linha); }
/* --- avisos --------------------------------------------------------------- */
.aviso { padding: .8rem 1rem; border-radius: var(--raio); margin-bottom: 1rem; font-size: .93rem; }
.aviso.ok { background: var(--ok-fundo); color: var(--ok); }
.aviso.atencao { background: var(--atencao-fundo); color: var(--atencao); }
.aviso.perigo { background: var(--perigo-fundo); color: var(--perigo); }
.aviso.neutro { background: var(--neutro-fundo); color: var(--tinta-suave); }
.aviso.neutro strong { display: block; color: var(--tinta); margin-bottom: .2rem; }
.aviso ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.aviso-protecoes {
background: var(--perigo-fundo); border: 1px solid #f3d3d0;
border-left: 4px solid var(--perigo); color: #7a2323;
padding: 1rem 1.15rem; border-radius: var(--raio); margin-bottom: 1.25rem;
}
.aviso-protecoes strong { display: block; margin-bottom: .35rem; }
.marca-critica {
font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
color: var(--perigo); background: var(--perigo-fundo);
padding: .1rem .4rem; border-radius: 999px; margin-left: .4rem;
}
.porque {
color: var(--tinta-suave); font-size: .85rem; margin: .4rem 0 0;
padding-left: .7rem; border-left: 2px solid var(--linha);
}
/* --- listas e tabelas ----------------------------------------------------- */
.lista-limpa { list-style: none; margin: 0; padding: 0; }
.lista-limpa li { padding: .55rem 0; border-bottom: 1px solid var(--linha); }
.lista-limpa li:last-child { border-bottom: 0; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--linha); }
th { color: var(--tinta-fraca); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.linha-faq { display: grid; grid-template-columns: 1fr; gap: .5rem; padding: .9rem 0; border-bottom: 1px solid var(--linha); }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 720px) { .par { grid-template-columns: 1fr; } .layout { flex-direction: column; } nav.lateral { width: 100%; } }
.pilha-testar { background: var(--neutro-fundo); border-radius: var(--raio); padding: 1rem; margin-top: 1.25rem; }
.pilha-testar .linha-de-teste { display: flex; gap: .6rem; }
.pilha-testar .linha-de-teste input { flex: 1; }
.pilha-testar .linha-de-teste button { flex: 0 0 11rem; }
.balao {
background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio);
padding: .8rem 1rem; margin-top: .8rem; white-space: pre-wrap;
}
.detalhes-do-teste { color: var(--tinta-suave); font-size: .84rem; margin-top: .5rem; }
.vazio { color: var(--tinta-fraca); font-style: italic; }
.rodape-da-aba { color: var(--tinta-fraca); font-size: .82rem; margin-top: .5rem; }
/* --- tela de entrada ------------------------------------------------------ */
/* A única tela escura do painel. Tudo aqui é escopado por `.entrada` de
propósito: `.cartao` e `.selo` já existem na tabela acima com outro
significado, e reusar o nome faria o vidro escuro vazar para as telas de
dentro. O fundo do body acompanha a cena para o intervalo entre o primeiro
pixel e o iframe carregar não piscar branco. */
body.sem-sessao { background: #262336; }
.entrada {
position: fixed; inset: 0; overflow: hidden; background: #262336;
/* Os verdes NÃO são invenção: saem do botão "Print receipt" dentro da cena.
O dourado da marca é a cor do painel de dentro, e sobre este fundo ele
brigava com a animação. Ficam escopados aqui — nenhuma tela de dentro os
enxerga.
Não é o tom exato da cena, e sim ele **fechado um passo**: o `#3fbe4a`
cru é o verde de um botão de 90px dentro de uma animação, e num botão de
22rem de largura a mesma saturação grita. Matiz preservado, saturação e
luz descidas. */
--cena-verde: #4f9e5c;
--cena-verde-escuro: #43884e;
--cena-verde-tenue: rgba(79, 158, 92, .55);
}
/* A cena preenche o iframe, então o tamanho dela É o tamanho do iframe: +20%
nas duas medidas, com `top` e `left` negativos puxando de volta para o
centro. O deslocamento horizontal é em % e não em px de propósito — em px,
uma tela estreita jogaria o assunto da cena por cima do cartão. */
.entrada .cena {
position: absolute; top: -10%; left: -14%;
width: calc(120% + 408px); height: 120%;
border: 0; opacity: 0; transition: opacity .9s ease;
}
.entrada .cena.pronta { opacity: 1; }
/* Escurece a esquerda, onde mora o cartão, e deixa a direita limpa para a cena. */
.entrada .veu {
position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(115% 100% at 0% 50%,
rgba(20, 18, 30, .90) 0%, rgba(20, 18, 30, .74) 30%,
rgba(20, 18, 30, .32) 62%, rgba(20, 18, 30, 0) 88%);
}
/* Aliviado junto com o vidro: o cartão mora na faixa de 8% a 32% da largura, e
a 0,88 ali o véu apagava a cena ANTES de o vidro amostrá-la — não adianta
afinar o blur se não sobra nada atrás para atravessar. O cartão traz o
próprio escurecimento e não depende mais dele. */
@media (min-width: 820px) {
.entrada .veu {
background: radial-gradient(72% 100% at 0% 50%,
rgba(20, 18, 30, .46) 0%, rgba(20, 18, 30, .32) 34%,
rgba(20, 18, 30, .12) 66%, rgba(20, 18, 30, 0) 88%);
}
}
/* Sem o bloco do título acima dele, o cartão é o único conteúdo: centro
vertical de verdade, sem o `padding-bottom` que compensava a altura da marca. */
.entrada .trilho {
position: absolute; inset: 0; z-index: 2; pointer-events: none;
display: flex; align-items: center; justify-content: center;
padding: 1.5rem;
}
@media (min-width: 820px) {
.entrada .trilho { justify-content: flex-start; padding-left: 11vw; }
}
.entrada .bloco { pointer-events: auto; width: 100%; max-width: 22rem; }
/* Vidro que deixa ver o que passa atrás. Três coisas decidem isso, e o blur é
a que mais pesa: a 26px uma linha fina da órbita virava um borrão do tamanho
do cartão, ou seja, nada. A 10px ela continua sendo uma linha.
E o tingimento é ESCURO, não branco: o texto do cartão é claro, então
escurecer o que atravessa preserva o contraste, enquanto clarear o apagaria
pelo outro lado. Mexer nestes dois números é o botão de mais/menos
transparente. */
.entrada .vidro {
border-radius: 22px; padding: 1.25rem;
background: rgba(20, 22, 32, .14);
-webkit-backdrop-filter: blur(3px) saturate(140%);
backdrop-filter: blur(3px) saturate(140%);
border: 1px solid rgba(255, 255, 255, .16);
box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .16);
}
/* Cápsula, como o botão da cena. O raio do painel (`--raio`, 8px) é do mundo
de dentro; aqui a forma tem que rimar com a animação. */
.entrada form { display: flex; flex-direction: column; gap: .65rem; }
.entrada input[type=email], .entrada input[type=password] {
height: 44px; padding: 0 1.1rem; border-radius: 999px; color: #fafafa;
background: rgba(255, 255, 255, .08);
border: 1px solid var(--cena-verde-tenue);
}
.entrada input::placeholder { color: rgba(255, 255, 255, .58); }
/* Foco é a borda acendendo, mais um halo difuso. O contorno de 2px com folga
desenhava um segundo anel destacado do campo, e dois traços verdes com um
vão no meio leem como borda grossa. */
.entrada input:focus {
background: rgba(255, 255, 255, .14);
border-color: var(--cena-verde);
outline: none;
box-shadow: 0 0 0 3px rgba(79, 158, 92, .22);
}
.entrada button.primario {
height: 44px; width: 100%; margin-top: .25rem; border-radius: 999px;
background: var(--cena-verde); color: #fff;
}
.entrada button.primario:hover { background: var(--cena-verde-escuro); }
/* O aviso da tabela é claro sobre claro; dentro do vidro escuro ele viraria
adesivo aceso. Mesma semântica de perigo, materializada para o escuro. */
/* Mesma altura dos campos e do botão: o `padding` da tabela é para o aviso
largo das telas de dentro, e aqui ele empilhava uma cápsula mais alta que
todas as outras. `min-height` em vez de `height` para uma mensagem longa
poder crescer em vez de vazar. */
.entrada .aviso.perigo {
/* o aviso é irmão do form, não filho: o `gap` de lá não o alcança, e o
espaçamento até o primeiro campo tem que ser escrito aqui */
min-height: 44px; margin-bottom: .65rem; padding: .5rem 1.1rem;
display: flex; align-items: center; justify-content: center;
border-radius: 999px; text-align: center;
background: rgba(235, 77, 61, .16);
border: 1px solid rgba(235, 77, 61, .40);
color: #ffb9b1;
}
/* Não há como pedir calma à cena do Spline, então quem pede menos movimento
recebe o fundo e o cartão, sem ela. */
@media (prefers-reduced-motion: reduce) {
.entrada .cena { display: none; }
.entrada { background: radial-gradient(120% 100% at 70% 45%, #343150 0%, #262336 60%, #1d1b2a 100%); }
}
/* --- Agente de Vendas: os números, e o interruptor de canal ao lado --------
Cinco telas viraram uma (19/08/2026). A leitura fica em cima, e o que se edita fica em
dobra fechada — quem abre a página para olhar não esbarra em formulário. */
/* Os dois cartões com a mesma altura (11/09/2026): o de canais é o mais alto, e o de
conversas estica até ele, com os números crescendo para ocupar o vão em vez de deixar
um buraco branco embaixo. */
.agente-topo { display: grid; grid-template-columns: 1fr 17rem; gap: 1rem; align-items: stretch; }
.agente-topo > .cartao:first-child { display: flex; flex-direction: column; }
.agente-topo > .cartao:first-child .numeros { flex: 1; grid-auto-rows: 1fr; }
@media (max-width: 860px) { .agente-topo { grid-template-columns: 1fr; } }
/* Título e ação na mesma linha: a ação da tela não fica caçando o rodapé. */
.cartao-topo { display: flex; align-items: center; justify-content: space-between;
gap: 1rem; margin-bottom: .9rem; }
.cartao-topo h2 { margin: 0; }
.cartao-topo .botao { flex: 0 0 9rem; }
/* Um número por cartão, e o rótulo embaixo dele em caixa alta pequena — a mesma família
dos chips da conferência de markup, sem virar botão: aqui nada filtra nada.
**`.numero`, não `.num`** (11/09/2026): `num` é a classe da coluna numérica das tabelas,
e o cartão com esse nome transformou cada célula de custo, venda, markup e estoque da
conferência numa caixa de 7rem empilhada. Classe que veste célula não ganha regra solta
de caixa — `tests/test_painel_estaticos.py` reprova. */
.numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
@media (max-width: 560px) { .numeros { grid-template-columns: repeat(2, 1fr); } }
.numero { display: flex; flex-direction: column; justify-content: center; min-height: 7rem;
border: 1px solid var(--linha); border-radius: var(--raio); background: var(--fundo);
padding: 1rem 1.1rem; }
.numero b { display: block; font-size: 2.2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.numero span { display: block; font-size: .78rem; color: var(--tinta-fraca);
text-transform: uppercase; letter-spacing: .04em; line-height: 1.3; margin-top: .35rem; }
.cartao-canais h2 { margin: 0 0 .2rem; font-size: 1rem; }
.cartao-canais .ajuda { color: var(--tinta-suave); font-size: .8rem; margin: 0 0 .6rem; }
.canais-lista { border-top: 1px solid var(--linha); }
.canal-linha { display: flex; align-items: center; gap: .5rem; padding: .45rem 0;
border-bottom: 1px solid var(--linha); }
.canal-nome { flex: 1; min-width: 0; font-size: .9rem; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
.canal-espera { font-size: .7rem; font-weight: 600; color: var(--marca-escura);
background: var(--marca-fraca); border-radius: 999px; padding: .05rem .4rem; }
.canal-detalhe { color: var(--tinta-suave); font-size: .88rem; margin: .3rem 0 0; }
.cartao-canais .canal-detalhe { font-size: .78rem; margin: -.1rem 0 .5rem; }
.atencao-texto { color: var(--atencao); }
.aviso.mini { padding: .5rem .6rem; font-size: .8rem; margin-bottom: .6rem; }
.conferido { color: var(--tinta-fraca); font-size: .82rem; margin-top: .8rem; }
.cartao-canais .conferido { font-size: .74rem; line-height: 1.4; }
/* O interruptor. Um clique, dois estados, e um terceiro que não é clicável: canal sem
caixa de entrada não tem o que ligar. O tamanho é em px porque a distância que o botão
percorre é a largura menos a bolinha menos as folgas — em rem isso vira arredondamento. */
.interruptor { position: relative; flex: none; width: 42px; height: 24px; padding: 0;
border: 0; border-radius: 999px; background: var(--linha); cursor: pointer;
transition: background .15s; }
.interruptor::after { content: ""; position: absolute; top: 3px; left: 3px;
width: 18px; height: 18px; border-radius: 50%; background: #fff;
box-shadow: 0 1px 2px rgba(28, 25, 23, .3); transition: transform .15s; }
.interruptor[aria-checked="true"] { background: var(--ok); }
.interruptor[aria-checked="true"]::after { transform: translateX(18px); }
.interruptor:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.interruptor[disabled] { background: var(--neutro-fundo); border: 1px solid var(--linha);
cursor: not-allowed; }
.interruptor[disabled]::after { top: 2px; left: 2px; background: #ece9e4; box-shadow: none; }
/* Explicação no hover. Mora no invólucro, e não no botão, porque controle desabilitado não
recebe evento de mouse — o `title` nele nunca apareceria. */
.dica { position: relative; display: inline-flex; }
.dica::after {
content: attr(data-dica); position: absolute; right: 0; bottom: calc(100% + .4rem);
z-index: 8; width: 13rem; padding: .45rem .6rem; border-radius: 6px;
background: var(--tinta); color: #fff; font-size: .76rem; line-height: 1.35;
white-space: normal; text-align: left; opacity: 0; pointer-events: none;
transition: opacity .12s;
}
.dica:hover::after, .dica:focus-within::after { opacity: 1; }
/* --- as dobras: fechadas por padrão --------------------------------------- */
details.dobra { padding: 0; }
details.dobra > summary {
display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
padding: 1rem 1.25rem; cursor: pointer; list-style: none;
}
details.dobra > summary::-webkit-details-marker { display: none; }
details.dobra > summary::before {
content: "▸"; color: var(--tinta-fraca); transition: transform .15s;
display: inline-block; font-size: .9rem;
}
details.dobra[open] > summary::before { transform: rotate(90deg); }
details.dobra > summary:hover { background: var(--fundo); }
details.dobra[open] > summary { border-bottom: 1px solid var(--linha); }
.dobra-titulo { font-size: 1.05rem; font-weight: 650; }
.dobra-ajuda { color: var(--tinta-suave); font-size: .85rem; }
.dobra-corpo { padding: 1.25rem; }
.secao-do-robo { padding-top: 1.25rem; margin-top: 1.25rem; border-top: 1px solid var(--linha); }
.secao-do-robo:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.secao-do-robo > h3 { margin: 0 0 .8rem; font-size: 1rem; }
/* A lista de quem fala com a Gabi: uma linha de formulário é uma LINHA. */
.linha-de-form { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
margin-top: .9rem; }
.linha-de-form > form { display: flex; gap: .6rem; }
.linha-de-form input { width: auto; flex: 1 1 12rem; }
.linha-de-form span { color: var(--tinta-suave); font-size: .85rem; flex: 1 1 16rem; }
table.lista tr.inativo td { color: var(--tinta-fraca); }
table.lista td.acoes { text-align: right; }
table.lista td.acoes button { font-size: .8rem; padding: .3rem .6rem;
border-color: var(--linha); background: var(--papel); }
.htmx-indicator { opacity: 0; transition: opacity .2s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
/* --- conferência de markup (docs/47) --------------------------------------
Esta tela é uma PLANILHA, não um relatório: 401 linhas, 8 colunas e uma decisão
por linha. Por isso ela é a única do painel com `main.largo`, com densidade
alta e com a cor vivendo num sinal pequeno em vez de no fundo da linha — em
76% das linhas fora da faixa, pintar o fundo inteiro deixa o olho cego para o
próprio aviso. As cores continuam saindo da tabela semântica do painel. */
main.largo { max-width: none; }
/* --- cabeçalho e os chips que são atalho, não enfeite --------------------- */
.pagina-topo { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start;
justify-content: space-between; margin-bottom: 1rem; }
.pagina-topo h1 { margin: 0 0 .15rem; }
.pagina-topo .subtitulo { margin: 0; }
.chips-resumo { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Cada chip filtra a tabela: o número não é só informação, é o caminho até ele. */
.chip-num { display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: .1rem; padding: .5rem .85rem; min-width: 7.5rem;
border: 1px solid var(--linha); border-radius: var(--raio);
background: var(--papel); cursor: pointer; line-height: 1.15;
font: inherit; color: var(--tinta); transition: border-color .12s, background .12s; }
.chip-num b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.chip-num span { font-size: .68rem; color: var(--tinta-fraca); text-transform: uppercase;
letter-spacing: .04em; }
.chip-num:hover { border-color: var(--marca); }
.chip-num.ativo { border-color: var(--marca); background: var(--marca-fraca); }
/* Vermelho aqui lia como "306 coisas erradas". Eles são recortes de trabalho: o que
pede olhada, não o que quebrou. Dourado destaca sem acusar. */
.chip-num.perigo b { color: var(--marca-escura); }
.chip-num.neutro b { color: var(--tinta-suave); }
/* --- filtros: uma linha, tudo da mesma altura, sem buraco no fim ---------- */
/* **Grade de quatro colunas iguais.** Era flex com a largura negociada item a item,
e cada quebra de linha alinhava diferente. Na grade toda célula mede o mesmo; o que
precisa de mais espaço pede COLUNAS, não pixels. */
.barra-filtros { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem;
align-items: center; padding: .7rem 1rem; margin-bottom: .75rem; }
.barra-filtros > * { min-width: 0; } /* sem isto o conteúdo estoura a coluna */
.barra-filtros > input, .barra-filtros > select, .barra-filtros > button {
width: 100%; height: 2.2rem; padding: 0 .6rem; border: 1px solid var(--linha);
border-radius: var(--raio); background-color: var(--papel); font-size: .88rem; margin: 0; }
.barra-filtros > select { padding-right: 2.2rem; }
/* Mesma moldura dos selects ao lado: quadrado de cantos arredondados. A pílula
redonda fazia o único elemento clicável da linha parecer de outra família. */
.barra-filtros .chip { display: flex; align-items: center; gap: .35rem; height: 2.2rem;
padding: 0 .7rem; border: 1px solid var(--linha);
border-radius: var(--raio);
background: var(--papel); font-size: .85rem; white-space: nowrap;
cursor: pointer; }
/* --- a faixa de markup: dois cursores, um trilho ------------------------- */
/* Não existe range duplo em HTML. São dois `input[type=range]` empilhados sobre o
mesmo trilho: o trilho e os campos ficam sem eventos, e só os botões redondos
recebem o clique — senão o range de cima engoliria o cursor do de baixo. */
/* **Duas colunas**, entre o seletor de produto/kit e o botão global: a segunda linha
fecha as quatro colunas da primeira. Numa coluna só, os ~360 passos cabiam em ~130px e
um pixel de arraste andava 0,03x. */
.faixa-markup { grid-column: span 2; display: flex; align-items: center; gap: .6rem;
height: 2.2rem; padding: 0 .75rem; border: 1px solid var(--linha);
border-radius: var(--raio); background: var(--papel); }
.faixa-markup .rotulo { font-size: .78rem; color: var(--tinta-fraca); white-space: nowrap; }
.faixa-markup output { font-size: .76rem; color: var(--tinta); white-space: nowrap;
font-variant-numeric: tabular-nums; min-width: 6.5rem; text-align: right; }
.faixa-markup .deslizante { position: relative; flex: 1 1 auto; height: 1.1rem; min-width: 9rem; }
.faixa-markup .trilho { position: absolute; top: 50%; left: 0; right: 0; height: 3px;
transform: translateY(-50%); background: var(--linha);
border-radius: 999px; }
.faixa-markup .preenchido { position: absolute; height: 100%; background: var(--marca);
border-radius: 999px; }
.faixa-markup input[type="range"] { position: absolute; top: 0; left: 0; width: 100%;
height: 100%; margin: 0; padding: 0; background: none;
appearance: none; -webkit-appearance: none;
pointer-events: none; }
.faixa-markup input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none;
pointer-events: auto; width: 13px; height: 13px; border-radius: 50%;
background: var(--papel); border: 2px solid var(--marca); cursor: grab; }
.faixa-markup input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 13px;
height: 13px; border-radius: 50%; background: var(--papel);
border: 2px solid var(--marca); cursor: grab; }
/* O contorno de foco global dos campos emoldurava o trilho inteiro depois do arraste;
no teclado, quem mostra o foco é o próprio cursor. */
.faixa-markup input[type="range"]:focus { outline: none; }
.faixa-markup input[type="range"]:focus-visible::-webkit-slider-thumb { background: var(--marca-fraca); }
.faixa-markup input[type="range"]:focus-visible::-moz-range-thumb { background: var(--marca-fraca); }
.faixa-markup input[type="range"]::-webkit-slider-runnable-track { background: none; }
.faixa-markup input[type="range"]::-moz-range-track { background: none; }
.barra-filtros .chip:has(input:checked) { border-color: var(--marca); background: var(--marca-fraca); }
.barra-filtros .chip input { width: auto; margin: 0; }
.barra-filtros .separa { display: none; }
/* O botão que mexe em centenas de etiquetas se distingue dos outros — mas na cor da
marca, não em vermelho: o alarme é o que a tela mostra DEPOIS do clique (o aviso com
a simulação inteira), não o convite para abri-lo. */
.barra-filtros > button.perigo { border-color: var(--marca); color: var(--marca-escura);
font-weight: 600; }
.barra-filtros > button.perigo:hover { background: var(--marca); color: #fff; }
.aviso.perigo-forte { background: var(--perigo-fundo); border: 1px solid var(--perigo);
border-radius: var(--raio); padding: .7rem .85rem; margin: .5rem 0; }
/* --- a tabela ------------------------------------------------------------- */
.tabela-cartao { padding: 0; overflow: hidden; }
.legenda-tabela { margin: 0; padding: .55rem 1rem; font-size: .76rem; color: var(--tinta-suave);
background: var(--fundo); border-bottom: 1px solid var(--linha); }
.legenda-tabela b:first-child { color: var(--atencao); font-size: .9rem; }
.rolagem { overflow-x: auto; }
table.markup { width: 100%; border-collapse: collapse; font-size: .82rem; min-width: 56rem; }
table.markup thead th { position: sticky; top: 0; z-index: 2; background: var(--papel);
border-bottom: 1px solid var(--linha); cursor: pointer;
user-select: none; white-space: nowrap; font-size: .68rem;
text-transform: uppercase; letter-spacing: .05em;
color: var(--tinta); padding: .6rem .5rem; text-align: center; }
table.markup thead th:first-child { padding-left: 1rem; }
table.markup td { padding: .3rem .5rem; border-bottom: 1px solid var(--linha);
white-space: nowrap; vertical-align: middle; }
table.markup td:first-child { padding-left: calc(1rem - 3px); }
/* Só os DADOS alinham à direita. O título fica centrado sobre a coluna — e precisa
da mesma especificidade da regra que ele substitui, senão perde para `th.num`. */
table.markup td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.markup thead th.num { text-align: center; font-variant-numeric: tabular-nums; }
table.markup td.sku { font-size: .76rem; color: var(--tinta-suave); }
/* O nome ocupa a folga e NUNCA quebra: `max-width:0` num td com `width:100%` é o
único jeito de o ellipsis funcionar dentro de tabela. */
table.markup td.sku .etiqueta-kit { margin-left: .4rem; padding: 0 .35rem; border-radius: var(--raio);
background: var(--marca-fraca); color: var(--marca-escura); font-size: .7rem; cursor: help; }
table.markup td.nome { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; }
table.markup td.custo abbr { text-decoration: none; color: var(--atencao); cursor: help;
margin-left: .1rem; }
table.markup tbody tr:hover td { background: var(--fundo); }
table.markup tr[hidden] { display: none; }
table.markup.compacta { min-width: 0; font-size: .84rem; }
/* A cor mora na borda e na pílula do markup — não no fundo da linha. */
.linha-markup { border-left: 3px solid transparent; }
.linha-markup.cor-verde { border-left-color: var(--ok); }
.linha-markup.cor-amarelo { border-left-color: var(--atencao); }
.linha-markup.cor-vermelho_baixo, .linha-markup.cor-vermelho_alto { border-left-color: var(--perigo); }
.pill { display: inline-block; min-width: 3.4rem; padding: .12rem .45rem; border-radius: 999px;
font-weight: 600; text-align: center; background: var(--neutro-fundo); }
.cor-verde .pill { background: var(--ok-fundo); color: var(--ok); }
.cor-amarelo .pill { background: var(--atencao-fundo); color: var(--atencao); }
.cor-vermelho_baixo .pill, .cor-vermelho_alto .pill { background: var(--perigo-fundo); color: var(--perigo); }
/* MC abaixo do piso é a régua que diz se o produto paga a própria venda. */
/* Quantidade inteira, curta e sem decimal: centrada lê melhor que encostada na borda,
e é a última coluna antes da divisória de ação. O seletor precisa casar o peso de
`table.markup td.num` (0,2,2) — `.linha-markup td.saldo` é 0,2,1 e perdia. */
table.markup td.saldo { color: var(--tinta-fraca); text-align: center; }
.linha-markup.mexida { background: var(--marca-fraca); }
.linha-markup.mexida td { background: var(--marca-fraca); }
table.markup td.preco-atual.mudou { color: var(--marca-escura); font-weight: 700; }
/* --- a coluna de ação: fechada por padrão, aberta pelo lápis -------------- */
/* **A divisória entre ler e agir.** À esquerda dela tudo é leitura; à direita, tudo
escreve. Uma linha clara basta: quem trabalha na tabela para de procurar onde
começa o que ele pode mexer. */
th.acao-col, td.acao { width: 1%; white-space: nowrap; padding-right: 1rem;
border-left: 1px solid var(--linha); }
table.markup thead th.acao-col { border-left-color: var(--linha); }
.acao-fechada, .acao-aberta { display: flex; align-items: center; gap: .4rem; justify-content: flex-end; }
.acao-aberta[hidden], .acao-fechada[hidden] { display: none; }
.acao .marca-ok { color: var(--ok); font-weight: 700; }
/* Vermelho não ganha check: o que ele mostra é o lápis, em destaque. */
.cor-vermelho_baixo .acao .marca-ok, .cor-vermelho_alto .acao .marca-ok { visibility: hidden; }
.acao-fechada[hidden], .acao-aberta[hidden] { display: none; }
.ico { width: 1.75rem; height: 1.75rem; display: inline-flex; align-items: center;
justify-content: center; padding: 0; border: 1px solid var(--linha);
border-radius: var(--raio); background: var(--papel); cursor: pointer;
font-size: .8rem; line-height: 1; color: var(--tinta-suave); }
.ico:hover { border-color: var(--marca); color: var(--marca-escura); }
.cor-vermelho_baixo .ico.editar, .cor-vermelho_alto .ico.editar {
border-color: var(--perigo); color: var(--perigo); }
/* Preenchido, para não se confundir com o ✓ solto que só diz "esta linha está
dentro da faixa" — um é estado, o outro é um botão que grava. */
.ico.salvar { border-color: var(--ok); background: var(--ok-fundo); color: var(--ok);
font-weight: 700; }
.ico.salvar:hover { background: var(--ok); color: #fff; border-color: var(--ok); }
.acao-aberta input { width: 4.8rem; height: 1.75rem; padding: 0 .4rem; font-size: .8rem;
border: 1px solid var(--linha); border-radius: var(--raio);
font-variant-numeric: tabular-nums; }
.acao-aberta input { text-align: center; }
.acao-aberta input::placeholder { font-size: .7rem; color: var(--tinta-fraca); }
.acao .travado { color: var(--tinta-fraca); cursor: help; }
/* --- a barra de salvar ---------------------------------------------------- */
/* `hidden` sozinho perde para `display:flex` — sem isto a barra fica no ar desde
que a página abre, dizendo que há alterações quando não há nenhuma. */
.barra-salvar[hidden] { display: none; }
.barra-salvar { position: sticky; bottom: 0; z-index: 6; display: flex; gap: .75rem;
align-items: center; justify-content: flex-end; padding: .7rem 1rem;
margin-top: .75rem; background: var(--papel);
border: 1px solid var(--linha); border-radius: var(--raio);
box-shadow: 0 -4px 16px rgba(28, 25, 23, .1); }
.barra-salvar #resumo-alteracoes { margin-right: auto; font-weight: 600; font-size: .9rem; }
.barra-salvar > button { flex: 0 1 11rem; height: 2.3rem; }
.barra-salvar > #btn-revisar { background: var(--marca); border-color: var(--marca);
color: #fff; font-weight: 600; }
/* --- o popup de confirmação ---------------------------------------------- */
.modal-fundo { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center;
justify-content: center; background: rgba(28, 25, 23, .45); padding: 1rem; }
.modal { background: var(--papel); border-radius: var(--raio); box-shadow: var(--sombra);
padding: 1.25rem; max-width: 56rem; width: 100%; max-height: 85vh; overflow: auto; }
.modal h2 { margin-top: 0; }
.modal .rolagem { max-height: 42vh; overflow: auto; }
/* O botão que grava não pode ficar abaixo da dobra de uma lista de 400 linhas. */
.modal form .botoes { position: sticky; bottom: -1.25rem; background: var(--papel);
padding: .75rem 0 1.25rem; margin-top: .25rem;
border-top: 1px solid var(--linha); }
/* Sem esta folga o último aceite fica atrás da barra fixa — e um aceite que não se lê
é um aceite que se marca sem ler. */
.modal form { padding-bottom: .25rem; }
.modal .aceite:last-of-type { margin-bottom: .75rem; }
.modal tr.baixa td { background: var(--atencao-fundo); }
.modal tr.bloqueada td { background: var(--neutro-fundo); color: var(--tinta-fraca); }
.modal .aceite { display: block; margin: .75rem 0; padding: .6rem .75rem;
background: var(--atencao-fundo); border: 1px solid var(--atencao);
border-radius: var(--raio); }
/* O motivo de um bloqueio é a frase que decide se a pessoa entende por que a linha
não vai — cortá-la no meio é pior que não mostrá-la. */
.modal td.motivo { white-space: normal; min-width: 14rem; line-height: 1.3; }
.modal td.motivo .canal-detalhe { white-space: normal; }
/* Botão de um grupo tem a medida do grupo; a hierarquia é a cor, não o tamanho. */
.modal .botoes { display: flex; gap: .5rem; }
.modal .botoes > button { flex: 0 1 12rem; justify-content: center; }
.modal .botoes > button[type="submit"]:not([disabled]) { background: var(--marca);
border-color: var(--marca); color: #fff; font-weight: 600; }
.selo.perigo { background: var(--perigo-fundo); color: var(--perigo); }
.selo.atencao { background: var(--atencao-fundo); color: var(--atencao); }
.selo.legado { background: var(--neutro-fundo); color: var(--tinta-suave); }
@media (max-width: 1000px) {
/* `dense`: o botão global sobe para o lado do seletor de produto/kit, e nenhuma
fileira fica com buraco. */
.barra-filtros { grid-template-columns: repeat(2, 1fr); grid-auto-flow: row dense; }
}
@media (max-width: 720px) {
.pagina-topo { flex-direction: column; }
.barra-filtros { grid-template-columns: 1fr; }
.faixa-markup { grid-column: span 1; }
}
/* --- financeiro ----------------------------------------------------------- */
/* As três cores do gráfico. A receita ganha um azul próprio porque o par
verde/vermelho da paleta semântica é indistinguível para daltonismo do tipo
deutan (ΔE 5,1 medido) — custo e linha do fixo seguem sendo os tons do painel. */
:root {
--fin-receita: #1d6fb8;
--fin-custo: var(--perigo);
--fin-fixo: var(--tinta-fraca);
--fin-lucro: rgba(47, 111, 79, .12);
/* A linha do que já foi vendido: o verde do painel, que só ela usa como traço. */
--fin-real: var(--ok);
}
/* Os dois botões têm a mesma medida em qualquer largura: mesma base, e encolhem
juntos em tela estreita em vez de estourar a página. */
.fin-acoes { margin-bottom: 1rem; flex-wrap: wrap; }
.fin-acoes > .botao { flex: 0 1 17.5rem; }
.fin-parametros { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.fin-parametros fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.fin-parametros legend { padding: 0; font-size: .78rem; text-transform: uppercase;
letter-spacing: .05em; color: var(--tinta-fraca); font-weight: 700; }
.fin-parametros label { display: block; margin-top: .7rem; font-size: .86rem;
color: var(--tinta-suave); }
.fin-parametros input[type=text] { margin-top: .2rem; font-variant-numeric: tabular-nums; }
.fin-parametros input[readonly] { background: var(--neutro-fundo); color: var(--tinta-suave); }
.fin-parametros label.fin-toggle { display: flex; align-items: flex-start; gap: .45rem;
line-height: 1.35; }
.fin-parametros label.fin-toggle input { width: auto; margin-top: .15rem; }
/* O mix por forma de pagamento fica recolhido: é a explicação da taxa, não a taxa. */
.fin-mix { grid-column: 1 / -1; border-top: 1px solid var(--linha); padding-top: .8rem; }
.fin-mix summary { cursor: pointer; font-size: .86rem; color: var(--tinta-suave); font-weight: 600; }
.fin-mix .ajuda { margin: .5rem 0; }
.fin-mix-tabela { width: auto; margin: .1rem 0 .9rem 1.55rem; font-size: .82rem;
font-variant-numeric: tabular-nums; }
.fin-mix-tabela th, .fin-mix-tabela td { border: 0; padding: .15rem .8rem .15rem 0; }
.fin-mix-tabela th { text-transform: none; letter-spacing: 0; font-size: .78rem; }
.fin-origem { grid-column: 1 / -1; margin: 0; display: flex; flex-wrap: wrap; gap: .2rem 1.2rem;
font-size: .82rem; color: var(--tinta-suave); }
.fin-graficos h2 { margin: 0 0 .6rem; }
.fin-graficos .fin-legenda-barras { margin: 1rem 0 .2rem; }
.fin-graficos .fin-cobertura { margin: .8rem 0 0; padding-top: .6rem;
border-top: 1px solid var(--linha); }
.fin-kpis { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.fin-kpis .cartao { margin-bottom: 0; padding: .9rem 1rem; }
.fin-kpis h3 { margin: 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
color: var(--tinta-fraca); font-weight: 700; }
.fin-kpis h3 { white-space: nowrap; }
.fin-kpis strong { display: block; margin: .25rem 0 .3rem; font-size: 1.35rem; line-height: 1.2;
white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin-kpis span { display: block; font-size: .8rem; color: var(--tinta-suave); line-height: 1.35; }
.positivo { color: var(--ok); }
.negativo { color: var(--perigo); }
.fin-rolagem { margin-top: 1rem; overflow-x: auto; }
.fin-regua { font-variant-numeric: tabular-nums; }
.fin-regua caption { text-align: left; font-size: .78rem; text-transform: uppercase;
letter-spacing: .05em; color: var(--tinta-fraca); font-weight: 700;
padding-bottom: .5rem; }
.fin-regua th { white-space: nowrap; }
.fin-regua tbody th { color: var(--tinta); font-size: .92rem; text-transform: none;
letter-spacing: 0; }
.fin-regua td { text-align: right; }
.fin-avisos { margin: 1rem 0 0; padding-left: 1.1rem; color: var(--tinta-suave);
font-size: .84rem; line-height: 1.45; }
.fin-avisos li { margin-bottom: .3rem; }
/* A DRE é planilha, não leitura: 12 meses + ano de largura, e a primeira coluna
acompanha a rolagem porque um número sem o nome da linha não diz nada. */
.dre-anos { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.dre-anos > .botao { flex: 0 0 7rem; }
.dre-anos strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.dre-rolagem { overflow-x: auto; background: var(--papel); border: 1px solid var(--linha);
border-radius: var(--raio); box-shadow: var(--sombra); }
table.dre { font-variant-numeric: tabular-nums; font-size: .88rem; }
table.dre th, table.dre td { white-space: nowrap; padding: .3rem .5rem; }
table.dre thead th { text-align: right; }
table.dre thead th:first-child, table.dre tbody th { text-align: left; }
/* O canto também gruda: sem isto o rótulo do mês passa POR BAIXO da coluna de nomes
e aparece cortado na borda esquerda enquanto se rola. */
table.dre thead th:first-child { position: sticky; left: 0; z-index: 2;
background: var(--papel); }
table.dre tbody th { position: sticky; left: 0; z-index: 1; background: var(--papel);
color: var(--tinta); font-size: .86rem; text-transform: none;
letter-spacing: 0; font-weight: 500; }
table.dre td { text-align: right; }
table.dre td span { display: block; padding: .25rem .1rem; }
table.dre input[type=text] { width: 6.2rem; text-align: right; padding: .25rem .35rem;
border-color: transparent; background: var(--marca-fraca);
font-variant-numeric: tabular-nums; }
table.dre input[type=text]:hover { border-color: var(--linha); }
table.dre tr.dre-total th, table.dre tr.dre-total td { font-weight: 700;
background: var(--neutro-fundo); }
table.dre td.dre-ano { border-left: 1px solid var(--linha); font-weight: 600; }
/* --- Sandbox (12/09/2026) -------------------------------------------------
A tela de teste da Gabi. Bolha de conversa, a régua de medida embaixo da resposta
(modelo, tempo, tokens, ferramentas, travas) e a caixa de escrita. Tudo nos tokens do
painel: nenhuma cor nova nasce aqui. */
.sb-bolha {
max-width: 40rem;
margin: 0 0 .75rem;
padding: .7rem .9rem;
border: 1px solid var(--linha);
border-radius: var(--raio);
}
/* Só o texto guarda as quebras do modelo: na bolha inteira, as quebras do HTML viravam
buraco branco (12/09/2026). */
.sb-texto { white-space: pre-wrap; }
.sb-bolha.cliente {
margin-left: auto;
background: var(--neutro-fundo);
}
.sb-bolha.gabi { background: var(--papel); }
.sb-bolha.pensando { border-style: dashed; }
.sb-medida {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .5rem;
margin-top: .6rem;
padding-top: .5rem;
border-top: 1px solid var(--linha);
color: var(--tinta-fraca);
font-size: .8rem;
}
.sb-detalhe { margin-top: .4rem; font-size: .8rem; color: var(--tinta-suave); }
.sb-detalhe pre { overflow-x: auto; background: var(--fundo); padding: .6rem; border-radius: var(--raio); }
.sb-nota { display: flex; gap: .25rem; }
.sb-nota button {
background: none;
border: 1px solid transparent;
border-radius: var(--raio);
padding: .1rem .35rem;
cursor: pointer;
}
.sb-nota button.marcada { border-color: var(--marca); background: var(--marca-fraca); }
.sb-escrita { margin-top: 1rem; border-top: 1px solid var(--linha); padding-top: 1rem; }
.sb-linha-modelo { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.sb-linha-modelo select { flex: 0 1 22rem; }
.sb-linha-envio { display: flex; gap: .5rem; align-items: stretch; }
.sb-linha-envio textarea { flex: 1; resize: vertical; }
/* A foto que iria junto da resposta no WhatsApp. Miniatura: o que se confere aqui é se ela
é a foto certa do produto certo, não o enquadramento. */
.sb-fotos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.sb-fotos img {
width: 7.5rem;
height: 7.5rem;
object-fit: cover;
border: 1px solid var(--linha);
border-radius: var(--raio);
background: var(--fundo);
}
/* A anotação de qualidade fica aberta ao lado dos dedos: é ela que se relê depois para
entender por que uma resposta perdeu. */
.sb-comentario {
flex: 1 1 14rem;
min-width: 8rem;
font-size: .8rem;
padding: .25rem .5rem;
border: 1px solid var(--linha);
border-radius: var(--raio);
background: var(--papel);
color: var(--tinta);
}
.sb-comentario::placeholder { color: var(--tinta-fraca); }
.sb-nota { flex: 1 1 18rem; align-items: center; }
/* --- preço por canal: a gaveta da conferência de markup -------------------- */
table.markup td.nome .abre-canais {
all: unset; display: block; width: 100%; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; cursor: pointer;
}
table.markup td.nome .abre-canais:hover { color: var(--marca-escura); text-decoration: underline; }
table.markup tr.gc-ativa td { background: var(--marca-fraca); }
.gaveta-canais {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 50;
width: min(46rem, 100vw); overflow-y: auto;
background: var(--papel); border-left: 1px solid var(--linha);
box-shadow: -8px 0 24px rgba(28, 25, 23, .08);
padding: 1.25rem 1.5rem 2rem;
font-size: .82rem; /* a mesma da tabela de markup ao lado */
}
.gaveta-canais[hidden] { display: none; }
.gaveta-canais > header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.75rem; }
.gaveta-canais > header > div { flex: 1; min-width: 0; }
.gaveta-canais .gc-titulo { margin: 0 0 .6rem; font-size: 1.15rem; line-height: 1.3; font-weight: 600; color: var(--marca-escura); }
.gaveta-canais h2 { margin: 0 0 .2rem; font-size: .95rem; line-height: 1.35; }
/* SKU and kit pieces share one size and one colour: the kit SKU once, its pieces below. */
.gaveta-canais .gc-sku { margin: 0; font-size: .72rem; color: var(--tinta-suave); }
.gaveta-canais ul.gc-pecas { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .72rem;
color: var(--tinta-suave); line-height: 1.5; }
.gaveta-canais ul.gc-pecas[hidden] { display: none; }
.gaveta-canais .ajuda { margin: 0; color: var(--tinta-suave); font-size: inherit; }
#gc-fechar { background: none; border: 1px solid var(--linha); border-radius: 6px;
width: 2.2rem; height: 2.2rem; cursor: pointer; color: var(--tinta-suave); }
/* Margem e preço por canal (Tiago, 03/10/2026): dois campos em cada linha, no desenho dos
* campos do painel. O de margem fica vermelho abaixo de 20%, o piso da faixa segura. */
input.gc-in {
height: 2.2rem; padding: 0 .5rem; font: inherit; color: var(--tinta); text-align: right;
border: 1px solid var(--linha); border-radius: 6px; background: var(--papel);
font-variant-numeric: tabular-nums; box-sizing: border-box; vertical-align: middle;
}
input.gc-in:focus { outline: 2px solid var(--marca); outline-offset: -1px; border-color: var(--marca); }
input.gc-in.baixa { color: var(--perigo); }
input.gc-in::placeholder { color: var(--tinta-suave); text-align: center; }
table.canais .gc-campo { width: 1%; text-align: center; white-space: nowrap; }
table.canais .gc-campo input.gc-in { width: 4.2rem; }
table.canais td.card input.gc-in { width: 6.6rem; }
table.canais { width: 100%; border-collapse: separate; border-spacing: 0; font-size: inherit; }
table.canais th { text-align: left; font-weight: 600; font-size: inherit; color: var(--tinta-suave);
text-transform: none; letter-spacing: 0; padding: .6rem .5rem; border-bottom: 1px solid var(--linha); }
/* Every row the same height and every cell the same text, buttons or not. */
table.canais td { padding: .6rem .5rem; height: 3.4rem; border-bottom: 1px solid var(--linha);
vertical-align: middle; font-weight: 400; }
table.canais td:first-child { white-space: nowrap; }
table.canais .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.canais .pill { background: var(--ok-fundo); color: var(--ok); }
table.canais tr.negativa .pill { background: var(--perigo-fundo); color: var(--perigo); }
table.canais td.inalcancavel { color: var(--tinta-suave); }
/* The minimum price column reads as one card: 1px dotted, rounded at both ends, only as
* wide as its content, everything centred. Each channel's sum opens inside it. */
/* Custo, Bling and the price card share one width and centre their figures, so the
* gaps between the three read equal. */
table.canais .valor { width: 1%; text-align: center; }
table.canais .card { width: 1%; white-space: nowrap; text-align: center;
border-left: 1px dotted var(--tinta); border-right: 1px dotted var(--tinta); }
table.canais th.card { border-top: 1px dotted var(--tinta); border-radius: var(--raio) var(--raio) 0 0; }
table.canais tfoot td { border-bottom: 0; padding: 0; height: .4rem; }
table.canais tfoot td.card { border-bottom: 1px dotted var(--tinta); border-radius: 0 0 var(--raio) var(--raio); }
table.canais .gc-margem-loja { display: block; margin-top: .2rem; font-size: .72rem; color: var(--ok); }
table.canais .gc-margem-loja.baixa { color: var(--perigo); }
table.canais .gc-sem-loja { color: var(--tinta-suave); }
table.canais td.card .preco { font-variant-numeric: tabular-nums; }
.gc-seta { border: 0; background: none; padding: 0; margin-left: .25rem; cursor: pointer;
color: var(--tinta-suave); line-height: 0; vertical-align: middle; transition: transform .15s; }
.gc-seta svg { display: block; }
.gc-seta[aria-expanded="true"] { transform: rotate(180deg); }
ul.gc-deducao { list-style: none; margin: .7rem 0 .2rem; padding: 0; font-size: .72rem;
display: grid; grid-template-columns: auto auto auto; justify-content: center; column-gap: .5rem;
row-gap: .35rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
ul.gc-deducao[hidden] { display: none; }
ul.gc-deducao li { display: contents; }
ul.gc-deducao li span { text-align: left; }
ul.gc-deducao li b { font-weight: 500; color: var(--tinta); text-align: right; }
ul.gc-deducao li small { font-size: inherit; color: var(--tinta-fraca); text-align: right; }
.gc-nota { margin: .5rem 0 0; font-size: .72rem; color: var(--tinta-fraca); }
/* Ações: two square buttons per store, green applies and red undoes, both one size. */
table.canais .gc-acoes { width: 1%; white-space: nowrap; text-align: center; }
table.canais th.gc-acoes { text-align: center; }
.gc-par { display: inline-flex; gap: .4rem; }
button.gc-acao { width: 2.2rem; height: 2.2rem; padding: 0; color: #fff; border: 0; }
button.gc-acao.aplicar { background: var(--ok); }
button.gc-acao.desfazer { background: var(--perigo); }
button.gc-acao:hover:not([disabled]) { filter: brightness(.88); }
button.gc-acao[disabled] { opacity: .3; cursor: not-allowed; }
button.gc-acao svg { display: block; }
table.canais .gc-acoes .gc-sem-loja { display: inline-block; width: 4.8rem; font-size: .8rem; }
.dica.curta::after { width: auto; white-space: nowrap; }
.gc-status:not(:empty) { margin-top: 1rem; }
.gc-status .aviso { margin-bottom: .5rem; }
.gc-status .aviso button { margin-left: .5rem; padding: .15rem .6rem; }
.gc-nota .gc-faixa-ok { color: var(--ok); }
.gc-nota .gc-faixa-alerta { color: var(--perigo); }
@media (max-width: 640px) {
.gaveta-canais { padding: 1rem; }
}