/* ClickGold Painel — design system.
Conceito: sala de controle / mesa de operações. O bot trabalha 24/7 sozinho, então
o painel é um posto de observação: denso em dado, calmo em cor, com o dourado da
marca reservado pro que exige ação ou atenção. Nada de gradiente decorativo — cor
forte aqui significa alguma coisa.
Tipografia auto-hospedada (56KB, sem CDN — o static/ é go:embed, então vai junto no
binário e não depende de rede externa): Manrope pra interface, JetBrains Mono pra
todo número, horário e log — dado alinha em coluna, texto não.
Tema claro e escuro: os tokens abaixo são a única fonte de cor. Nenhum componente
escreve hex direto — trocar o tema é trocar o bloco de tokens, nada mais. */
@font-face {
font-family: 'Manrope';
src: url('/static/fonts/manrope.woff2') format('woff2-variations'),
url('/static/fonts/manrope.woff2') format('woff2');
font-weight: 400 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'JetBrains Mono';
src: url('/static/fonts/jetbrains-mono.woff2') format('woff2-variations'),
url('/static/fonts/jetbrains-mono.woff2') format('woff2');
font-weight: 400 600;
font-style: normal;
font-display: swap;
}
/* ---------------------------------------------------------------------------
Tokens
--------------------------------------------------------------------------- */
:root {
/* Escuro é o padrão: o painel fica aberto em segundo plano por horas. */
--bg: #0a0b0d;
--bg-sunken: #07080a;
--surface: #121418;
--surface-2: #171a1f;
--surface-hover: #1d2027;
--border: #23262d;
--border-strong: #333741;
--text: #eceae6;
--text-dim: #9ba1ac;
--text-faint: #6b7280;
--gold: #f0b429;
--gold-soft: #ffd166;
--gold-ink: #14100a;
--gold-wash: rgba(240, 180, 41, 0.10);
--gold-line: rgba(240, 180, 41, 0.28);
--green: #4ade80;
--green-wash: rgba(74, 222, 128, 0.12);
--red: #f87171;
--red-wash: rgba(248, 113, 113, 0.12);
--amber: #fbbf24;
--amber-wash: rgba(251, 191, 36, 0.12);
--blue: #60a5fa;
--blue-wash: rgba(96, 165, 250, 0.12);
--purple: #a78bfa;
--purple-wash: rgba(167, 139, 250, 0.12);
--shopee: #F05D40;
--mercadolivre: #ffe600;
--amazon: #FF9900;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
--radius-sm: 6px;
--radius: 10px;
--radius-lg: 14px;
--font: 'Manrope', ui-sans-serif, system-ui, sans-serif;
--mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
--sidebar-w: 236px;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
}
:root[data-theme="light"] {
/* Off-white levemente quente — branco puro brigava com o dourado. */
--bg: #f7f5f1;
--bg-sunken: #edeae4;
--surface: #ffffff;
--surface-2: #faf8f5;
--surface-hover: #f2efe9;
--border: #e2ddd4;
--border-strong: #cec7ba;
--text: #1b1a17;
--text-dim: #5f5a52;
--text-faint: #8d8679;
--gold: #a97400;
--gold-soft: #c68f10;
--gold-ink: #ffffff;
--gold-wash: rgba(169, 116, 0, 0.09);
--gold-line: rgba(169, 116, 0, 0.26);
--green: #15803d;
--green-wash: rgba(21, 128, 61, 0.10);
--red: #b91c1c;
--red-wash: rgba(185, 28, 28, 0.09);
--amber: #a16207;
--amber-wash: rgba(161, 98, 7, 0.11);
--blue: #1d4ed8;
--blue-wash: rgba(29, 78, 216, 0.09);
--purple: #7c3aed;
--purple-wash: rgba(124, 58, 237, 0.10);
--shopee: #F05D40;
--mercadolivre: #ffe600;
--amazon: #FF9900;
--shadow-sm: 0 1px 2px rgba(60, 50, 30, 0.06);
--shadow: 0 4px 18px rgba(60, 50, 30, 0.09);
--shadow-lg: 0 12px 36px rgba(60, 50, 30, 0.13);
}
* { box-sizing: border-box; }
/* O atributo hidden SEMPRE esconde. Sem esta regra, qualquer classe que declare display
(flex, grid...) vence o [hidden] nativo do navegador -- mesma especificidade, e a folha
do autor carrega depois -- e o elemento aparece com hidden=true no DOM. Já foram cinco
casos corrigidos um a um (rodapé do modal 28/08, bolinha 30/08, "marcar todas" 31/08,
.field-row 19/08 e o QR do WhatsApp em 23/09/2026, que ficava na tela com o aparelho
conectado). O !important é o que fecha a classe inteira de bug de uma vez. */
[hidden] { display: none !important; }
html {
/* Evita o flash de tema errado: o app.js escreve data-theme antes da pintura. */
color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font);
font-size: 14px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
::selection { background: var(--gold); color: var(--gold-ink); }
/* Barra de rolagem discreta — o painel tem tabelas e logs longos. */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: content-box; }
/* Todo dado numérico alinha em coluna. */
.mono, .stat-value, td.mono, .tabular { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.2px; }
/* ---------------------------------------------------------------------------
Layout
--------------------------------------------------------------------------- */
.layout { display: flex; min-height: 100vh; }
.sidebar {
width: var(--sidebar-w);
flex-shrink: 0;
background: var(--surface);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
padding: 18px 0 14px;
position: sticky;
top: 0;
height: 100vh;
}
.sidebar-brand {
display: flex;
align-items: center;
gap: 11px;
padding: 0 18px 18px;
margin-bottom: 6px;
border-bottom: 1px solid var(--border);
}
.sidebar-brand .coin {
width: 30px; height: 30px; border-radius: 7px;
background: url('/static/favicon.png') center/cover no-repeat;
box-shadow: 0 0 10px rgba(240, 180, 41, 0.25);
flex-shrink: 0;
}
.sidebar-brand strong { font-size: 16px; font-weight: 800; letter-spacing: -0.3px; }
.sidebar nav { display: flex; flex-direction: column; gap: 1px; padding: 10px 10px; flex: 1; overflow-y: auto; }
.sidebar nav a {
position: relative;
display: flex; align-items: center; gap: 10px;
color: var(--text-dim);
padding: 9px 12px 9px 14px;
border-radius: var(--radius-sm);
font-size: 13.5px;
font-weight: 600;
letter-spacing: -0.1px;
transition: background 0.14s var(--ease), color 0.14s var(--ease);
}
.sidebar nav a svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.75; }
.sidebar nav a.active svg { opacity: 1; }
.sidebar nav a:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
/* Item ativo: fundo lavado + régua dourada à esquerda. */
.sidebar nav a.active { background: var(--gold-wash); color: var(--gold); }
.sidebar nav a.active::before {
content: "";
position: absolute; left: 0; top: 50%;
width: 3px; height: 17px;
transform: translateY(-50%);
background: var(--gold);
border-radius: 0 3px 3px 0;
}
.sidebar-footer { padding: 12px 16px 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.sidebar-user { font-size: 12.5px; color: var(--text-dim); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-footer form { margin: 0; }
.sidebar-footer .logout {
background: none; border: none; color: var(--text-faint); cursor: pointer;
font-size: 12.5px; font-weight: 600; padding: 4px 0; width: 100%;
/* justify-content vem do estilo base de button e centralizaria o texto. */
justify-content: flex-start;
font-family: var(--font);
}
.sidebar-footer .logout:hover { color: var(--red); }
/* Largura: 1280px deixava um vão morto em monitor grande. 1660px aproveita a tela
sem esticar linha de texto além do legível, e o auto centraliza o que sobrar. */
.main { flex: 1; min-width: 0; padding: 18px 24px 44px; max-width: 1660px; margin: 0 auto; width: 100%; }
/* ---------------------------------------------------------------------------
Cabeçalho de página
--------------------------------------------------------------------------- */
.page-header {
display: flex; align-items: flex-start; justify-content: space-between;
margin-bottom: 15px; gap: 14px; flex-wrap: wrap;
}
.page-header h1 { font-size: 19px; font-weight: 800; margin: 0; letter-spacing: -0.6px; }
.page-header p { color: var(--text-dim); font-size: 13px; margin: 3px 0 0; max-width: 68ch; }
.page-header-actions { display: flex; align-items: center; gap: 8px; }
/* Migalha de volta em página filha (ex.: Minhas Conexões -> Shopee). */
.voltar {
display: inline-block; color: var(--text-faint); font-size: 12px;
text-decoration: none; margin-bottom: 6px; transition: color 0.15s var(--ease);
}
.voltar:hover { color: var(--gold); }
/* Botão de tema */
.theme-toggle {
display: inline-grid; place-items: center;
width: 34px; height: 34px; padding: 0;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-sm); cursor: pointer; color: var(--text-dim);
transition: color 0.14s, border-color 0.14s, background 0.14s;
}
.theme-toggle:hover { color: var(--gold); border-color: var(--gold-line); background: var(--surface-hover); }
.theme-toggle svg { width: 16px; height: 16px; display: block; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }
/* ---------------------------------------------------------------------------
Cards de métrica
--------------------------------------------------------------------------- */
.grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 15px; }
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px 14px;
}
/* Card de métrica: rótulo pequeno em cima, número grande, contexto embaixo. */
.metric {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px 14px 13px;
overflow: hidden;
transition: border-color 0.16s var(--ease), transform 0.16s var(--ease);
}
.metric:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.metric-label {
font-size: 11px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase;
color: var(--text-faint); margin-bottom: 6px; display: flex; align-items: center; gap: 6px;
}
.metric-value {
font-family: var(--mono); font-variant-numeric: tabular-nums;
font-size: 24px; font-weight: 600; line-height: 1.05; letter-spacing: -1.2px;
color: var(--text);
}
.metric-value.is-gold { color: var(--gold); }
.metric-value.is-time { font-size: 19px; letter-spacing: -0.6px; }
.metric-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 5px; font-weight: 500; }
.metric-sub .mono { font-size: 11.5px; }
/* Fio de destaque no topo — só nos cards que merecem o olho primeiro. */
.metric.is-accent::after {
content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
background: linear-gradient(90deg, var(--gold), transparent 75%);
}
/* Compat com o markup antigo de stats */
.stat-label { font-size: 11px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.stat-value { font-family: var(--mono); font-size: 25px; font-weight: 600; letter-spacing: -1px; color: var(--text); }
.stat-value.gold { color: var(--gold); }
.stat-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 5px; }
/* Barra de progresso do ciclo */
.cycle-track { height: 3px; background: var(--bg-sunken); border-radius: 99px; overflow: hidden; margin-top: 10px; }
.cycle-fill { height: 100%; background: linear-gradient(90deg, var(--gold-soft), var(--gold)); border-radius: 99px; transition: width 1s linear; }
/* Distribuição (canais / marketplaces): barra segmentada + legenda */
.split-bar { display: flex; height: 6px; border-radius: 99px; overflow: hidden; background: var(--bg-sunken); margin: 12px 0 11px; }
.split-seg { height: 100%; transition: opacity 0.15s; }
.split-seg:hover { opacity: 0.75; }
.split-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.split-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-dim); font-weight: 600; }
.split-item .swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.split-item .count { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text); margin-left: auto; }
/* Ranking por valor (item 18/KAN-7: top categorias/produtos) — barra cheia por linha,
largura relativa ao maior valor da lista (pctMax), não uma barra só dividida em
fatias como .split-bar (aqui cada linha é seu próprio produto/categoria). */
.ranking-lista { display: flex; flex-direction: column; gap: 11px; }
.ranking-linha { display: grid; grid-template-columns: minmax(90px, 200px) 1fr auto; align-items: center; gap: 14px; }
.ranking-nome { font-size: 12.5px; font-weight: 600; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-barra { height: 8px; border-radius: 99px; background: var(--bg-sunken); overflow: hidden; }
.ranking-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--gold-soft), var(--gold)); }
.ranking-valor { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
@media (max-width: 520px) {
.ranking-linha { grid-template-columns: 1fr auto; }
.ranking-barra { grid-column: 1 / -1; order: 3; }
}
/* ---------------------------------------------------------------------------
Painéis
--------------------------------------------------------------------------- */
.panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 12px;
overflow: hidden;
}
.panel-header {
padding: 10px 14px;
border-bottom: 1px solid var(--border);
font-size: 13px; font-weight: 700; letter-spacing: -0.1px;
display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.panel-header .hint { font-size: 11.5px; font-weight: 500; color: var(--text-faint); }
.panel-body { padding: 13px 14px; }
.panel-body > :last-child { margin-bottom: 0; }
/* Card de grupo de config: título + descrição, campos dentro */
.group-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.group-card > header { padding: 10px 14px 9px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.group-card > header h3 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: -0.1px; }
.group-card > header p { margin: 2px 0 0; font-size: 11.5px; color: var(--text-faint); }
.group-card .group-body { padding: 13px 14px; }
.group-card .group-body > :last-child { margin-bottom: 0; }
/* Manual geral (KAN-86): índice de âncoras + corpo de texto corrido, bem diferente do
resto do painel (formulário denso) — aqui é leitura, precisa de espaço pra respirar. */
.manual-indice { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.manual-indice strong { flex-basis: 100%; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-faint); margin-top: 10px; }
.manual-indice strong:first-child { margin-top: 0; }
.manual-indice a { font-size: 13px; }
.manual-texto p { margin: 0 0 12px; line-height: 1.65; }
.manual-texto ul { margin: 0 0 12px; padding-left: 20px; line-height: 1.65; }
.manual-texto li { margin-bottom: 4px; }
.manual-texto code { font-family: var(--mono); background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; font-size: 12.5px; }
.manual-dica { background: var(--gold-wash); border: 1px solid var(--gold-line); border-radius: var(--radius-sm); padding: 10px 13px; font-size: 13px; }
/* Item 19/KAN-8: mockup de celular pra pré-visualizar o TEMPLATE_POST enquanto o
cliente digita — silhueta simples, o conteúdo é que muda. */
.phone-mock {
width: min(280px, 100%); margin: 0 auto;
border: 8px solid var(--surface-2); border-radius: 30px;
background: var(--bg); box-shadow: 0 0 0 1px var(--border);
}
.phone-mock-tela { min-height: 220px; padding: 18px 14px; }
.phone-mock-msg {
background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
padding: 10px 12px; font-size: 12.5px; line-height: 1.55; color: var(--text);
white-space: pre-wrap; word-break: break-word;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
/* ---------------------------------------------------------------------------
Tabelas
--------------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
text-align: left; color: var(--text-faint); font-weight: 700;
font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.7px;
padding: 10px 16px; border-bottom: 1px solid var(--border);
background: var(--surface-2); white-space: nowrap;
}
td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.12s; }
tbody tr:hover td { background: var(--surface-hover); }
td.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.cell-title { font-weight: 600; color: var(--text); }
/* Nome de produto é longo demais pra caber inteiro — corta com reticências. */
.cell-clamp { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Tabela em tela estreita: linhas viram cartões empilhados (cada | ganha o rótulo
da coluna via data-label) em vez de rolagem horizontal com coluna espremida --
achado ao vivo (print do Davi, 19/08/2026): sem min-width nenhuma, a tabela só
encolhia até ficar ilegível (nome de plano/preço/status cortados um em cima do
outro) porque table{width:100%} deixa .table-scroll's overflow-x:auto nunca entrar
em ação. Cada | que participa disso marca data-label="";
coluna de ação sem cabeçalho (th vazio) fica sem data-label de propósito -- os
próprios botões já se explicam. */
@media (max-width: 760px) {
.table-scroll { overflow-x: visible; }
.table-scroll table, .table-scroll tbody, .table-scroll tr, .table-scroll td { display: block; width: 100%; }
.table-scroll thead { display: none; }
.table-scroll tbody tr {
border: 1px solid var(--border); border-radius: var(--radius-sm);
background: var(--surface-2); margin-bottom: 12px; padding: 4px 14px;
}
.table-scroll tbody tr:last-child { margin-bottom: 0; }
.table-scroll td {
border-bottom: 1px solid var(--border); padding: 9px 0; white-space: normal;
}
.table-scroll tr td:last-child { border-bottom: none; }
.table-scroll td[data-label]::before {
content: attr(data-label); display: block;
font-size: 10.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.7px; color: var(--text-faint); margin-bottom: 4px;
}
.table-scroll td.num { text-align: left; }
}
/* ---------------------------------------------------------------------------
Vitrine de produtos (aba Postados de /produtos) — grid de cards em vez de
tabela, no mesmo padrão visual de catálogo que Pelando/DescontosTop/Achadinho
Pro usam (imagem, preço em destaque, badge de desconto).
--------------------------------------------------------------------------- */
.produtos-grid {
display: grid;
gap: 14px;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
padding: 17px;
}
/* KAN-52: rodapé do catálogo ao vivo — botão "Carregar mais produtos" centralizado,
mesmo espaçamento lateral do grid acima pra não parecer solto. */
.catalogo-carregar-mais { display: flex; justify-content: center; padding: 0 17px 17px; }
.produto-card {
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
transition: border-color 0.16s var(--ease), transform 0.16s var(--ease);
}
.produto-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.produto-card-img { position: relative; aspect-ratio: 1 / 1; background: var(--surface-2); overflow: hidden; }
.produto-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.produto-card-img.sem-imagem { display: grid; place-items: center; color: var(--text-faint); }
.produto-card-img.sem-imagem svg { width: 32px; height: 32px; }
.produto-card-desconto {
position: absolute; top: 8px; left: 8px;
background: var(--gold); color: var(--gold-ink);
font-family: var(--mono); font-size: 11px; font-weight: 800;
padding: 3px 7px; border-radius: 999px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.produto-card-body { padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.produto-card-titulo {
font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
min-height: 2.8em;
}
.produto-card-preco { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 700; color: var(--gold); }
.produto-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.produto-card-canais { display: flex; gap: 4px; flex-wrap: wrap; }
.produto-card-quando { font-size: 10.5px; color: var(--text-faint); white-space: nowrap; }
.produto-card-cta {
display: block; text-align: center; margin-top: 2px;
padding: 7px 10px; border-radius: var(--radius-sm);
background: var(--surface-2); border: 1px solid var(--border-strong);
font-size: 12px; font-weight: 700; color: var(--text);
transition: border-color 0.14s, background 0.14s, color 0.14s;
}
.produto-card-cta:hover { background: var(--gold-wash); border-color: var(--gold-line); color: var(--gold); text-decoration: none; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
/* Uma oferta pode sair em mais de um canal — um selo por canal, não a string crua. */
.canal-selos { display: flex; gap: 5px; flex-wrap: wrap; }
/* Percentual de desconto: quanto maior, mais quente */
.pct { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.pct.hot { color: var(--gold); }
/* ---------------------------------------------------------------------------
Formulários
--------------------------------------------------------------------------- */
label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="time"], select, textarea {
width: 100%;
background: var(--bg-sunken);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
color: var(--text);
padding: 9px 11px;
font-size: 13.5px;
font-family: var(--font);
transition: border-color 0.14s, box-shadow 0.14s, background 0.14s;
}
:root[data-theme="light"] input[type="text"],
:root[data-theme="light"] input[type="password"],
:root[data-theme="light"] input[type="email"],
:root[data-theme="light"] input[type="number"],
:root[data-theme="light"] input[type="time"],
:root[data-theme="light"] select,
:root[data-theme="light"] textarea { background: #fff; }
/* O ícone de relógio do input nativo vem preto e some no tema escuro — invert deixa
ele claro sem precisar de ícone próprio. */
input[type="time"] { font-family: var(--mono); font-variant-numeric: tabular-nums; }
input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }
:root[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator { filter: none; }
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 3px var(--gold-wash);
}
/* Campos de valor numérico ficam em mono pra bater com o resto do painel. */
input[data-config-key], input[type="number"] { font-family: var(--mono); font-variant-numeric: tabular-nums; }
textarea { font-family: var(--mono); font-size: 12.5px; resize: vertical; min-height: 84px; line-height: 1.6; }
select {
appearance: none;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%239ba1ac' d='M6 8.2 2.4 4.6l.8-.8L6 6.6l2.8-2.8.8.8z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 30px;
}
.field { margin-bottom: 12px; }
.field:last-child { margin-bottom: 0; }
.field-help { font-size: 11.5px; color: var(--text-faint); margin-top: 5px; line-height: 1.5; }
/* Campo "somente leitura" (ex.: tag do afiliado descoberta sozinha, KAN-65/KAN-60) —
mesma caixa visual do input, mas sem borda de foco/cursor de edição, pra não parecer
editável. */
.field-somente-leitura {
width: 100%; box-sizing: border-box;
background: var(--surface-2); border: 1px solid var(--border);
border-radius: var(--radius-sm); color: var(--text-dim);
padding: 9px 11px; font-size: 13.5px;
}
.field-somente-leitura .field-vazio { color: var(--text-faint); font-style: italic; }
.field-row { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
/* Regra explícita pelo mesmo motivo documentado em .fb-contato (mais abaixo): .field-row
é classe do autor e carrega DEPOIS da folha nativa, então o display:flex vencia o
[hidden] do navegador -- o bloco ficava com hidden=true no DOM e visível na tela.
Deu na cara em "Editar plano": ao desmarcar "Dividir limite por meio de comunicação",
os campos por canal continuavam aparecendo junto com o de limite combinado (achado
pelo Davi, 19/08/2026). */
.field-row[hidden] { display: none; }
/* Checkbox + rótulo numa linha só, sem esticar (item 16/KAN-5: "bloquear globalmente"). */
.checkbox-inline {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12.5px; color: var(--text-dim); white-space: nowrap;
}
.checkbox-inline input { width: auto; }
/* Checkbox de aceite de termos (KAN, cadastro) -- texto longo com links, precisa
quebrar linha dentro do card em vez do nowrap de .checkbox-inline (que estourava a
largura do .login-card, achado ao vivo: o rótulo saía por cima da borda do card). */
.checkbox-termos {
display: flex; align-items: flex-start; gap: 8px;
font-size: 12.5px; color: var(--text-dim); line-height: 1.45;
margin: 2px 0 4px;
}
.checkbox-termos input { width: auto; flex-shrink: 0; margin-top: 3px; }
.field-suffix { color: var(--text-faint); font-size: 12px; font-weight: 600; white-space: nowrap; font-family: var(--mono); }
.field[data-disabled="true"] { opacity: 0.38; pointer-events: none; }
/* Grade de campos — 12 colunas, cada campo declarando quanto ocupa.
---------------------------------------------------------------------------
A versão anterior era `repeat(auto-fit, minmax(260px, 1fr))`: o número de colunas
dependia só da largura da tela, e todo campo valia o mesmo. Medido na tela do
Mercado Livre a 1900px (25/08/2026, reclamação do Davi: "parece um puxadinho"):
- virava 5 colunas de 295px, em TODA aba — inclusive na aba "Avançado", que tem
um campo só (1 campo ocupando 1/5 da linha e 4/5 de vazio);
- linha de grade tem altura única, então o campo mais alto esticava os quatro
vizinhos junto: o campo de digitar "8" ficava 295x293px, quase tudo vazio.
Agora a largura é do CAMPO, não da tela: quem declara "curto" (número, horário)
ocupa 3 de 12; o padrão ocupa 6 (dois por linha); "largo" toma a linha inteira.
align-items:start é o que impede um campo alto de inflar os vizinhos. */
.field-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 18px 20px;
align-items: start;
}
.field-grid .field { margin-bottom: 0; min-width: 0; }
.field-grid .field.campo-curto { grid-column: span 3; }
.field-grid .field.campo-medio { grid-column: span 6; }
.field-grid .field.campo-largo,
.field-grid .field.is-wide { grid-column: 1 / -1; }
/* O controle não acompanha a célula: um campo de 6 colunas pode ter 780px numa tela
larga, e input de 780px pra escrever "35" é o mesmo desperdício de antes, só que
dentro da célula. */
.field-grid .field input[type="text"],
.field-grid .field input[type="password"],
.field-grid .field input[type="time"],
.field-grid .field select { max-width: 420px; }
.field-grid .field.campo-curto input { max-width: 130px; }
.field-grid .field .field-help { max-width: 68ch; }
/* Lista de prioridade entre marketplaces (KAN-90) -- reusa o mesmo desenho de linha
com borda de .destino-lista/.destino, só que com botões de mover em vez de chips. */
.ordem-marketplace-lista { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.ordem-marketplace-item {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.ordem-marketplace-item:last-child { border-bottom: none; }
.ordem-marketplace-nome { font-size: 13px; font-weight: 600; }
.ordem-marketplace-acoes { display: flex; align-items: center; gap: 8px; }
.ordem-marketplace-acoes button { width: 28px; padding: 4px 0; margin-top: 0; font-size: 11px; }
/* Toggle liga/desliga inline por marketplace (KAN-177) -- variante compacta de .switch
pra caber na linha estreita da lista de prioridade, junto das setas de mover. */
.switch-sm { width: 30px; height: 18px; }
.switch-sm .switch-track::before { width: 12px; height: 12px; }
.switch-sm input:checked + .switch-track::before { transform: translateX(12px); }
/* Histórico de prompts de IA (KAN-131) -- mesma moldura em lista de .ordem-marketplace-lista, cada item empilha o texto do prompt em cima e a observação/data/ação embaixo. */
.prompt-historico-lista { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.prompt-historico-item { padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.prompt-historico-item:last-child { border-bottom: none; }
.prompt-historico-texto { font-size: 13px; white-space: pre-wrap; margin: 0; }
.prompt-historico-rodape { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.prompt-historico-acoes { display: flex; gap: 6px; }
/* Switch */
.switch { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-track { position: absolute; inset: 0; background: var(--border-strong); border-radius: 999px; transition: background 0.18s var(--ease); cursor: pointer; }
.switch-track::before {
content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px;
background: #fff; border-radius: 50%;
transition: transform 0.18s var(--ease);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.switch input:checked + .switch-track { background: var(--gold); }
.switch input:checked + .switch-track::before { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px var(--gold-wash); }
.field-boolean { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.field-boolean label { margin: 0; }
.field-boolean .field-help { margin-top: 0; }
.field-boolean.warn label { color: var(--amber); }
/* Booleano com ajuda embaixo do rótulo, alinhado à esquerda do switch */
.field-boolean .bool-text { display: flex; flex-direction: column; gap: 1px; }
/* Dentro da grade, o interruptor toma a linha inteira (ver larguraDoCampo) — sem uma
moldura ele ficava boiando no meio do vazio, que foi exatamente o que apareceu no
print da aba Cupons: o "Postar lista de cupons de tempos em tempos" solto entre duas
colunas de campos, sem pertencer a nenhuma. A caixa é o que diz "isto é uma linha". */
.field-grid .field.field-boolean {
align-items: flex-start; gap: 12px;
padding: 12px 14px; margin-bottom: 0;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.field-grid .field.field-boolean .switch { margin-top: 1px; }
.field-grid .field.field-boolean .bool-text { gap: 3px; }
/* ---------------------------------------------------------------------------
Botões
--------------------------------------------------------------------------- */
button, .btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
background: var(--surface-2);
border: 1px solid var(--border-strong);
color: var(--text);
padding: 8px 14px;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 600;
font-family: var(--font);
cursor: pointer;
transition: border-color 0.14s, background 0.14s, color 0.14s, transform 0.1s;
white-space: nowrap;
}
button:hover, .btn:hover { border-color: var(--border-strong); background: var(--surface-hover); text-decoration: none; }
button:active, .btn:active { transform: translateY(1px); }
button:disabled, .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-primary {
background: var(--gold); border-color: var(--gold); color: var(--gold-ink); font-weight: 700;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.btn-primary:hover:not(:disabled) { background: var(--gold-soft); border-color: var(--gold-soft); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn-ghost:hover { background: var(--surface-hover); color: var(--text); }
.btn-danger { color: var(--red); }
.btn-danger:hover { border-color: var(--red); background: var(--red-wash); }
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 5px; }
/* btn-avancar: o caminho pra frente. Não é o botão mais forte da tela (esse é o
.btn-primary, dourado cheio, reservado pra confirmar/salvar) — é o segundo nível,
com a cor da marca só no texto e no contorno. Existe porque "Filtros e cupons →"
tinha exatamente o mesmo peso visual de "desconectar" no rodapé do card: o Davi
precisou circular esse botão de vermelho no print pra mostrar onde tinha clicado. */
.btn-avancar {
background: var(--gold-wash); border-color: var(--gold-line); color: var(--gold);
font-weight: 700;
}
.btn-avancar:hover { background: var(--gold-wash); border-color: var(--gold); color: var(--gold-soft); }
/* Destrutivo secundário: some do fluxo de leitura e só ganha contorno ao passar o
mouse. Um botão de desconectar não deve competir com o caminho principal — mas
também não pode ficar escondido, então continua com alvo de toque cheio. */
.btn-texto-perigo {
background: transparent; border-color: transparent; color: var(--text-faint);
padding: 5px 8px; font-size: 12px; font-weight: 600;
}
.btn-texto-perigo:hover { background: var(--red-wash); border-color: var(--red-wash); color: var(--red); }
/* ---------------------------------------------------------------------------
Badges
--------------------------------------------------------------------------- */
.badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 9px; border-radius: 999px;
font-size: 11px; font-weight: 700; letter-spacing: 0.2px;
border: 1px solid transparent;
}
.badge-green { background: var(--green-wash); color: var(--green); border-color: var(--green-wash); }
.badge-red { background: var(--red-wash); color: var(--red); border-color: var(--red-wash); }
.badge-amber { background: var(--amber-wash); color: var(--amber); border-color: var(--amber-wash); }
.badge-blue { background: var(--blue-wash); color: var(--blue); border-color: var(--blue-wash); }
.badge-gold { background: var(--gold-wash); color: var(--gold); border-color: var(--gold-line); }
.badge-purple { background: var(--purple-wash); color: var(--purple); border-color: var(--purple-wash); }
.badge-gray { background: var(--surface-hover); color: var(--text-dim); border-color: var(--border); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
/* Pulso só no que está vivo agora (conectado, streaming). */
.dot.pulse { animation: pulse 2s var(--ease) infinite; }
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
50% { box-shadow: 0 0 0 4px transparent; opacity: 0.65; }
}
/* ---------------------------------------------------------------------------
Abas
---------------------------------------------------------------------------
Usadas em Configuração, Produtos, Equipes e Feedback. Estas regras base sumiram por
um dia (08/09/2026) quando a Configuração trocou as abas por uma coluna lateral e
levou junto o estilo que as outras três telas também usavam -- elas ficaram com as
abas sem formatação nenhuma. Voltaram pra cá, fora de qualquer tela específica, que
é onde estilo compartilhado tem que morar. */
.tabs {
display: flex; gap: 3px; border-bottom: 1px solid var(--border);
margin-bottom: 20px; flex-wrap: wrap;
}
.tab {
padding: 9px 13px; font-size: 13px; font-weight: 600;
color: var(--text-dim); border-bottom: 2px solid transparent;
cursor: pointer; margin-bottom: -1px;
transition: color 0.14s, border-color 0.14s;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--gold); border-bottom-color: var(--gold); }
/* Largura de leitura do formulário de configuração.
---------------------------------------------------------------------------
Sem teto, o formulário herdava a largura inteira do conteúdo num monitor grande e os
campos se espalhavam por toda essa faixa — a reclamação literal do Davi foi
"componentes espalhados". Formulário se lê de cima pra baixo: o que ajuda é uma
coluna densa, não uma faixa larga. 1180px comporta os dois campos por linha do
.field-grid sem esticar nenhum. */
#config-tabs, .config-conteudo, .config-panel { max-width: 1180px; }
/* Resumo de hierarquia no topo da aba Publicação (08/09/2026).
---------------------------------------------------------------------------
Uma linha, lida dos valores salvos (resumoPublicacao, config.go): "a cada 60 min (±20)
· até 2 ofertas por vez · dentro desse total: Mercado Livre no máximo 1 · nada entre
00:00 e 07:00". Os campos abaixo dizem o valor de cada coisa; esta linha é a única
que diz como elas se encaixam — que era a pergunta real ("saber qual configuração
afeta o quê"). */
.config-resumo {
margin: 0 0 14px; padding: 9px 13px;
background: var(--surface-2); border: 1px solid var(--border);
border-left: 3px solid var(--gold); border-radius: var(--radius-sm);
font-size: 12.5px; line-height: 1.5; color: var(--text-dim);
}
/* Seletor de loja dentro de um assunto (Filtros da Shopee × do Mercado Livre).
---------------------------------------------------------------------------
Empilhar as lojas foi o que o Davi recusou em 08/09/2026 ("um embaixo do outro sem
opção de recolher/expandir"), e colunas lado a lado também — elas espremem quando
entrar o terceiro marketplace. Um seletor custa a mesma altura com 2 ou com 5 lojas. */
/* Rótulo do seletor de loja (17/09/2026). O seletor desceu do topo da aba pra junto dos
blocos que ele realmente controla; sem um rótulo, essa troca de contexto ficava muda --
nada dizia que dali pra baixo o assunto passa a ser de UMA loja por vez, enquanto o que
está acima vale pra conta inteira. */
.lojas-rotulo {
margin: 20px 0 8px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em;
text-transform: uppercase; color: var(--text-dim);
}
.lojas-seletor { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.loja-chip {
padding: 5px 12px; font-size: 12.5px; font-weight: 600;
color: var(--text-dim); background: var(--surface-2);
border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
transition: color 0.14s, background-color 0.14s, border-color 0.14s;
}
.loja-chip:hover { color: var(--text); }
.loja-chip.is-ativa { color: var(--gold); border-color: var(--gold); background: var(--gold-wash); }
/* Densidade da Configuração (08/09/2026) -- virou global em 09/09.
---------------------------------------------------------------------------
Começou como exceção só desta tela e o Davi pediu o mesmo pra aplicação inteira
("tem muito espaçamento em toda a tela do sistema"): o padding dos cards, do painel e
da grade foi apertado nas regras BASE, lá em cima. Sobrou aqui só o que continua
sendo específico -- a grade de campos e as linhas de liga/desliga, que aparecem em
quantidade nesta tela e em nenhuma outra. */
.config-panel .field-grid { gap: 12px 16px; }
.config-panel .field-boolean { margin-bottom: 9px; }
/* ---------------------------------------------------------------------------
Barra de salvar (aparece só com alteração pendente)
--------------------------------------------------------------------------- */
.save-bar {
position: fixed; left: calc(var(--sidebar-w) + 24px); right: 24px; bottom: 20px;
z-index: 60;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 11px 14px 11px 18px;
background: var(--surface);
border: 1px solid var(--gold-line);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
transform: translateY(140%);
opacity: 0;
visibility: hidden;
transition: transform 0.26s var(--ease), opacity 0.26s var(--ease), visibility 0.26s;
max-width: 1232px;
}
.save-bar.is-visible { transform: translateY(0); opacity: 1; visibility: visible; }
.save-bar-text { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 9px; }
.save-bar-count { font-family: var(--mono); color: var(--gold); }
.save-bar-actions { display: flex; gap: 8px; }
/* Campo alterado ganha marca lateral — mostra o que exatamente está pendente. */
.field.is-dirty { position: relative; }
.field.is-dirty::before {
content: ""; position: absolute; left: -11px; top: 2px; bottom: 2px;
width: 2px; background: var(--gold); border-radius: 2px;
}
/* ---------------------------------------------------------------------------
Chips (palavras bloqueadas)
--------------------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 8px 6px 12px;
border-radius: 99px;
background: var(--surface-2);
border: 1px solid var(--border-strong);
font-size: 12.5px; font-weight: 600;
}
.chip button {
background: none; border: none; padding: 0;
width: 18px; height: 18px; border-radius: 50%;
display: grid; place-items: center;
color: var(--text-faint); font-size: 15px; line-height: 1; cursor: pointer;
}
.chip button:hover { background: var(--red-wash); color: var(--red); }
/* Item 19/KAN-47: chips de variável (botão, não remoção) e dicas de formatação do
TEMPLATE_POST. */
.var-chip-btn {
font-family: var(--mono); color: var(--gold); cursor: pointer;
transition: background 0.14s var(--ease), border-color 0.14s var(--ease);
}
.var-chip-btn:hover { background: var(--gold-wash); border-color: var(--gold-line); }
.format-dicas {
display: flex; flex-wrap: wrap; gap: 10px 20px;
font-size: 12.5px; color: var(--text-dim);
}
.format-dicas code {
font-family: var(--mono); background: var(--surface-2); border: 1px solid var(--border);
border-radius: 5px; padding: 1px 6px; color: var(--text);
}
/* ---------------------------------------------------------------------------
Fluxo
--------------------------------------------------------------------------- */
.fluxo-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 22px; align-items: start; }
@media (max-width: 900px) { .fluxo-layout { grid-template-columns: 1fr; } }
.fluxo { list-style: none; margin: 0; padding: 0; position: relative; }
/* Fio vertical ligando os passos — deixa a sequência óbvia sem setas soltas. */
.fluxo::before {
content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px;
width: 2px; background: var(--border);
}
.fluxo-passo {
position: relative;
display: flex; gap: 14px; align-items: flex-start;
padding: 0 0 14px;
}
.fluxo-passo:last-child { padding-bottom: 0; }
.fp-marca {
position: relative; z-index: 1; flex-shrink: 0;
width: 32px; height: 32px; border-radius: 50%;
display: grid; place-items: center;
background: var(--gold-wash); color: var(--gold);
border: 1px solid var(--gold-line);
font-family: var(--mono); font-size: 13px; font-weight: 600;
}
.fluxo-passo.is-cond .fp-marca {
background: var(--surface-2); color: var(--text-faint); border-color: var(--border-strong);
}
.fp-corpo {
flex: 1; min-width: 0;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 12px 15px;
}
.fluxo-passo.is-cond .fp-corpo { border-style: dashed; }
.fp-titulo { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 13.5px; font-weight: 700; }
.fluxo-passo.is-cond .fp-titulo { color: var(--text-dim); font-weight: 600; }
.fp-desc { font-size: 12.5px; color: var(--text-dim); margin-top: 4px; line-height: 1.6; }
/* KAN-151: bloco por marketplace dentro de um passo (ex.: "Filtra as ofertas de cada
marketplace" — cada fonte conectada tem sua própria régua de filtro). Barra lateral
dourada em vez de repetir o card cheio do passo pai, pra ficar claro que é um
detalhamento DENTRO dele, não uma etapa nova da sequência. */
.fp-sub-lista { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.fp-sub { padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-sm); border-left: 2px solid var(--gold-line); }
.fp-sub-titulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--gold); margin-bottom: 3px; }
.fp-sub .fp-desc { margin-top: 0; }
/* "mudar isso →" — link de volta pra âncora certa na tela central de Configuração. */
.fp-link { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--gold); }
.fp-link:hover { text-decoration: underline; }
.fluxo-lado { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 24px; }
@media (max-width: 900px) { .fluxo-lado { position: static; } }
/* ---------------------------------------------------------------------------
Avisos de estado
--------------------------------------------------------------------------- */
.aviso {
display: flex; align-items: flex-start; gap: 13px;
padding: 14px 16px; margin-bottom: 18px;
border: 1px solid var(--border); border-radius: var(--radius);
background: var(--surface); font-size: 13px; line-height: 1.6;
}
.aviso .badge { flex-shrink: 0; margin-top: 1px; }
.aviso ul { margin: 8px 0 0; padding-left: 18px; color: var(--text-dim); }
.aviso li { margin-bottom: 3px; }
.aviso-alerta { border-color: var(--amber-wash); background: var(--amber-wash); }
.aviso-ok { border-color: var(--green-wash); background: var(--green-wash); }
.teste-resultado {
margin-top: 13px; padding: 11px 13px;
border-radius: var(--radius-sm);
font-family: var(--mono); font-size: 12px; line-height: 1.6;
word-break: break-word;
}
.teste-resultado.is-ok { background: var(--green-wash); color: var(--green); }
.teste-resultado.is-erro { background: var(--red-wash); color: var(--red); }
/* ---------------------------------------------------------------------------
Modal
--------------------------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 150; display: block; }
.modal[hidden] { display: none; }
.modal-backdrop {
position: absolute; inset: 0;
background: rgba(0, 0, 0, 0.6);
animation: fade-in 0.18s var(--ease);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal-panel {
position: relative;
width: min(480px, calc(100vw - 28px));
margin: min(9vh, 90px) auto 0;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
max-height: 82vh; display: flex; flex-direction: column;
animation: modal-in 0.2s var(--ease);
}
@keyframes modal-in { from { opacity: 0; transform: translateY(-10px) scale(0.985); } to { opacity: 1; transform: none; } }
.modal-panel > header {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 15px 18px; border-bottom: 1px solid var(--border);
}
.modal-panel > header h3 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.2px; }
.modal-panel form { display: contents; }
.modal-body { padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; }
.modal-body .field { margin: 0; }
.modal-panel > form > footer, .modal-panel > footer {
display: flex; justify-content: flex-end; gap: 9px;
padding: 13px 18px; border-top: 1px solid var(--border); background: var(--surface-2);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
/* O estilo padrão do rodapé declara display:flex e tem precedência sobre o [hidden]
nativo. Sem esta regra explícita, rodapés de telas inativas do modal continuam
aparecendo e dão a impressão de haver dois envios. */
.modal-panel > footer[hidden] { display: none; }
/* Bolinha de pendências no atalho de suporte (KAN-136). Ancorada no botão, que precisa
virar contexto de posicionamento -- sem o position:relative ela se prenderia na
sidebar inteira e apareceria longe do ícone. */
.fb-atalho { position: relative; }
/* Mesma âncora pro sino da central de notificação (KAN-147) -- esquecer esta regra foi
exatamente o bug acima, de novo: a bolinha nasceu grudada no topo da página em vez do
sino, achado ao vivo no browser (não pegaria em teste de render, que só olha o HTML). */
[data-abre-notificacoes] { position: relative; }
.fb-bolinha {
position: absolute; top: -4px; right: -4px;
min-width: 16px; height: 16px; padding: 0 4px;
display: flex; align-items: center; justify-content: center;
background: var(--red); color: #fff;
font-size: 10px; font-weight: 700; line-height: 1;
border-radius: 99px;
/* Borda da cor do fundo: separa a bolinha do ícone quando ela cai por cima dele. */
border: 2px solid var(--surface);
pointer-events: none;
}
/* Mesmo caso do rodapé do modal: o display declarado acima vence o [hidden] nativo, então
sem esta regra a bolinha aparecia com "0" mesmo sem nada pendente (achado do Davi em
produção, 30/08/2026). É a segunda vez que isto morde neste arquivo -- quem adicionar
outro elemento que nasce hidden e tem display próprio precisa da linha equivalente. */
.fb-bolinha[hidden] { display: none; }
/* Anexos de imagem no feedback (30/08/2026). Grade que se adapta à largura: no celular
cai pra uma coluna sozinha, sem media query. */
.fb-anexos { margin-bottom: 14px; }
.fb-anexos-titulo { font-size: 11.5px; font-weight: 700; color: var(--text-faint); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.4px; }
.fb-anexos-grade {
display: grid; gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.fb-anexo {
border: 1px solid var(--border); border-radius: var(--radius-sm);
overflow: hidden; background: var(--surface-2);
}
.fb-anexo img {
display: block; width: 100%; height: 110px; object-fit: cover;
background: var(--surface); transition: opacity 0.14s var(--ease);
}
.fb-anexo a:hover img { opacity: 0.85; }
/* Imagem que não carregou (anexo apagado, sessão expirada): esconde o quadro quebrado e
deixa só o nome com o link de baixar, que ainda pode funcionar. */
.fb-anexo.is-quebrada img { display: none; }
.fb-anexo-rodape {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 6px 8px; font-size: 11px; border-top: 1px solid var(--border);
}
.fb-anexo-rodape span {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-faint);
}
.fb-anexo-baixar { color: var(--gold); font-weight: 600; text-decoration: none; white-space: nowrap; }
.fb-anexo-baixar:hover { text-decoration: underline; }
/* Prévia local, antes de enviar: sai do próprio navegador (o arquivo ainda não subiu). */
.fb-anexos-previa { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.fb-anexo-previa {
display: flex; align-items: center; gap: 10px;
padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm);
background: var(--surface-2); font-size: 12px;
}
.fb-anexo-previa img { width: 38px; height: 38px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.fb-anexo-previa span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); }
.fb-anexo-tirar {
border: none; background: transparent; color: var(--text-faint);
cursor: pointer; font-size: 13px; padding: 4px 6px; border-radius: 4px;
}
.fb-anexo-tirar:hover { color: var(--red); background: var(--surface); }
/* O seletor de arquivo nativo é feio em todo navegador; o botão dele ganha a mesma cara
dos outros da aplicação. */
.field input[type="file"] {
width: 100%; font-family: inherit; font-size: 12.5px; color: var(--text-dim);
}
.field input[type="file"]::file-selector-button {
font-family: inherit; font-size: 12.5px; font-weight: 600;
padding: 7px 14px; margin-right: 10px;
border: 1px solid var(--border-strong); border-radius: 99px;
background: var(--surface-2); color: var(--text); cursor: pointer;
}
.field input[type="file"]::file-selector-button:hover { background: var(--gold-wash); color: var(--gold); }
/* Índice de feedbacks (30/08/2026): cada item é um LINK pra tela do assunto. A linha
inteira é clicável -- alvo grande, e ctrl+clique abre em outra aba como qualquer link,
coisa que um div com onclick não daria. */
.fb-item-link {
display: block; text-decoration: none; color: inherit;
transition: border-color 0.14s var(--ease), background 0.14s var(--ease);
}
.fb-item-link:hover { border-color: var(--gold); background: var(--gold-wash); }
.fb-item-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.fb-item-resumo {
margin: 6px 0 0; font-size: 13px; color: var(--text-dim);
/* Uma linha só: resumo de altura variável faria a lista "pular" e perder o ritmo. */
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fb-item-rodape {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin-top: 8px; font-size: 11.5px;
}
.fb-item-vez { color: var(--text-faint); font-weight: 600; }
.fb-item-abrir { color: var(--gold); font-weight: 600; opacity: 0; transition: opacity 0.14s var(--ease); }
.fb-item-link:hover .fb-item-abrir, .fb-item-link:focus-visible .fb-item-abrir { opacity: 1; }
/* Tela de UM assunto. */
.fb-detalhe-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fb-detalhe-quem {
display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
font-size: 12.5px; color: var(--text-faint);
padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border);
}
.fb-detalhe-quem strong { color: var(--text); }
/* Altura generosa mas limitada: conversa longa rola dentro da caixa, sem empurrar a
caixa de resposta pra fora da tela. */
.fb-detalhe-thread { max-height: 46vh; overflow-y: auto; }
.fb-detalhe-responder {
display: flex; gap: 10px; align-items: flex-end;
padding: 14px 18px; border-top: 1px solid var(--border); background: var(--surface-2);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.fb-detalhe-responder textarea { flex: 1; resize: vertical; min-height: 44px; }
/* No menu do celular o item é uma linha, não um ícone: a bolinha acompanha o texto em vez
de flutuar sobre o desenho. */
.nav-sheet-feedback { position: relative; }
.fb-bolinha-mobile { position: static; margin-left: auto; border: none; }
/* O aviso de feedback novo é clicável (abre o modal), ao contrário dos toasts comuns
que só informam -- daí o cursor e o realce na borda. */
.toast-item.toast-clicavel { cursor: pointer; border-left-color: var(--gold); }
.toast-item.toast-clicavel:hover { background: var(--surface-2); }
/* Suporte/Feedback como chat (MVP, 28/08/2026) */
/* O painel de Feedback/Suporte é maior que um modal comum (30/08/2026, pedido do Davi):
ele deixou de ser "um formulário" e virou a caixa de entrada de onde o master lê e
responde tudo, com abas, busca e paginação. Largura maior e altura generosa, mas presas
à viewport pra não estourar em tela pequena nem no celular. */
/* O painel de Feedback/Suporte é o maior da aplicação: virou a caixa de entrada de onde o
master lê, busca e responde, e a tela de onde o assinante acompanha os assuntos dele.
Largura em min() pra ocupar a tela grande sem estourar no celular. */
.modal-panel-chat { max-width: 1080px; width: min(1080px, 94vw); }
.modal-panel-chat .modal-body {
max-height: min(78vh, 780px);
/* min-height resolve o oposto do problema de altura: com a lista vazia ou com dois
assuntos, o painel encolhia até ficar mais baixo que o próprio cabeçalho, e a caixa
parecia desproporcional (achado do Davi, 30/08/2026). O min() garante que isso não
force rolagem em tela baixa -- notebook de 768px de altura, celular deitado. */
min-height: min(420px, 52vh);
}
/* Abas de status (só master). Mesma família visual do filtro de período das Métricas, pra
a aplicação não ter dois desenhos de aba diferentes. */
.fb-abas {
display: flex; gap: 4px; margin-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.fb-aba {
padding: 7px 14px; border: none; background: transparent;
font-family: inherit; font-size: 12.5px; font-weight: 600;
color: var(--text-faint); cursor: pointer;
border-bottom: 2px solid transparent; margin-bottom: -1px;
transition: color 0.14s var(--ease), border-color 0.14s var(--ease);
}
.fb-aba:hover { color: var(--text); }
.fb-aba.is-ativa { color: var(--gold); border-bottom-color: var(--gold); }
/* "Meus assuntos" não é mais um filtro da caixa de entrada -- é a outra tela. O empurrão
pra direita e o separador dizem isso sem precisar de rótulo explicando. */
.fb-aba-meus {
margin-left: auto;
padding-left: 18px;
border-left: 1px solid var(--border);
}
.fb-aba:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 4px 4px 0 0; }
.fb-barra-busca { display: flex; gap: 8px; margin-bottom: 12px; }
.fb-barra-busca input[type="search"] {
flex: 1; min-width: 0;
padding: 8px 12px; border: 1px solid var(--border-strong);
border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text);
font-family: inherit; font-size: 13px;
}
.fb-barra-busca input[type="search"]:focus-visible { outline: 2px solid var(--gold); outline-offset: -1px; }
.fb-barra-busca .btn-sm { white-space: nowrap; }
/* Linha de contexto do item na lista do master: quem mandou e de quem é a vez. É o que
ele lê pra decidir o que abrir primeiro. */
.fb-item-sub { font-size: 11.5px; color: var(--text-faint); }
/* Topo da conversa: voltar de um lado, ações do master do outro. */
.fb-chat-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.fb-chat-acoes { display: flex; align-items: center; gap: 8px; }
.fb-chat-quem { font-size: 12px; color: var(--text-faint); margin-bottom: 10px; }
.fb-chat-quem[hidden] { display: none; }
/* A paginação do modal reusa .paginacao das Métricas, mas sem a borda superior (aqui ela
fica logo abaixo da lista, não no rodapé de um painel). */
.modal-panel-chat .paginacao { border-top: none; padding: 12px 0 0; }
.modal-panel-chat .paginacao[hidden] { display: none; }
.fb-chat-lista { display: flex; flex-direction: column; gap: 8px; }
.fb-chat-item {
display: flex; flex-direction: column; gap: 3px; text-align: left; width: 100%;
padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md);
background: var(--surface-2); cursor: pointer;
}
/* min-width:0 é o que deixa o ellipsis funcionar dentro de flex -- sem isso o item
filho nunca encolhe abaixo do próprio conteúdo, e um assunto comprido estoura a
largura do card com barra de rolagem horizontal em vez de cortar com "..." (achado
do Davi em produção, 28/08/2026, antes do campo Título existir). */
.fb-chat-item strong.fb-item-preview {
font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
min-width: 0; flex: 1;
}
.fb-chat-mensagens { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.fb-msg { max-width: 80%; padding: 8px 11px; border-radius: 12px; font-size: 13.5px; line-height: 1.4; white-space: pre-wrap; }
.fb-msg-cliente { align-self: flex-end; background: var(--accent-2, #2f6fed); color: #fff; border-bottom-right-radius: 3px; }
.fb-msg-equipe { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 3px; }
.fb-msg-quando { font-size: 10.5px; opacity: .7; margin-top: 2px; display: block; }
/* O rodapé de conversa mantém os campos lado a lado somente quando está ativo. A regra
acima para footer[hidden] impede que ele ou o rodapé de novo assunto vazem para outra
tela do modal. */
#fb-footer-chat:not([hidden]) { display: flex; gap: 8px; }
.fb-reply { display: flex; gap: 8px; margin-top: 8px; }
.fb-reply textarea { flex: 1; resize: none; min-height: 34px; }
/* Botão de ajuda (KAN-87): ícone "?" pequeno, discreto até passar o mouse — não pode
competir visualmente com o conteúdo real da tela, só estar ali quando precisar.
vertical-align:text-top (não o padrão "baseline") alinha ele ao TOPO do texto ao
lado em vez de flutuar na altura da linha de base — achado real olhando a tela
(Gustavo, 06/08/2026): ao lado de um |