/* ===========================================================================
Nexus · identidade Underdogz (12/10/2026): marinho profundo, luz azul-gelo,
retícula e Barlow Condensed + Barlow — a mesma do Raio-X, do Diário e do
Painel. As variáveis mantêm os nomes históricos (--blue*) por
compatibilidade com todo o CSS existente: --blue é a cor de destaque (a luz
no escuro, o azul no claro). O escuro é o tema da marca; o claro é a versão
"papel", para quem preferir.
=========================================================================== */
:root, :root[data-theme="light"] {
--page: #eef3f9;
--surface: #ffffff;
--border: #d5e0ec;
--text-primary: #0a1628;
--text-secondary: #3d5273;
--text-muted: #6b84a1;
--blue: #0057ff;
--blue-dark: #003fbf;
--blue-tint: #e4ecff;
--blue-tint-2: #c6d7ff;
--accent-solid: #0046cc; /* fundo de botão com texto branco (≥4,5:1) */
--aqua: #0f9d8a;
--yellow: #d98b00;
/* Séries dos gráficos: identidade de série, nunca estado (verde e vermelho
ficam só para bom e ruim). Validadas em fundo branco pelo validador do
método de dataviz em 12/10/2026 (banda de luminosidade, croma, daltonismo,
contraste). 1 = série principal; a ordem é a de uso. */
--serie-1: #0057ff;
--serie-2: #d96f2a;
--serie-3: #0f9d8a;
--serie-4: #c2185b;
--serie-5: #5c8a00;
--serie-6: #6d4ad8;
--serie-linha: #0a1628;
--serie-linha-2: #6b84a1;
--serie-gasto: #d96f2a;
--kpi-brilho: 11%;
--good: #0a8f3c;
--good-tint: #e4f6ea;
--bad: #c9302c;
--bad-tint: #fdeceb;
--warn: #b86a00;
--warn-tint: #fdf3e6;
--radius: 10px;
--shadow: 0 1px 2px rgba(10, 22, 40, 0.06);
--font: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
/* Brilho só existe no escuro. Sombra transparente, e NÃO `none`: estes
tokens entram em listas de box-shadow, e `none` no meio de uma lista
invalida a declaração inteira. */
--glow-accent: 0 0 0 0 rgba(0, 0, 0, 0);
--glow-accent-soft: 0 0 0 0 rgba(0, 0, 0, 0);
--glow-good: 0 0 0 0 rgba(0, 0, 0, 0);
--glow-bad: 0 0 0 0 rgba(0, 0, 0, 0);
--page-glow: none;
--surface-2: #e4ebf4;
--border-strong: #b7c8dc;
--chart-line-glow: none;
--glow-text: none;
--sombra-card: 0 1px 2px rgba(10, 22, 40, 0.05), 0 10px 24px -18px rgba(10, 22, 40, 0.28);
--sombra-linha: drop-shadow(0 1px 2px rgba(10, 22, 40, 0.22));
--texto-marca: #003fbf;
}
/* ---------- Tema escuro: a identidade ---------- */
:root[data-theme="dark"] {
--page: #0a1628;
--surface: #122a47;
--border: #1f3b60;
--text-primary: #e8f1f8;
--text-secondary: #a9bdd3;
--text-muted: #7f98b5;
--blue: #87ceeb; /* a luz azul-gelo da marca */
--blue-dark: #b0e0ff; /* texto de destaque mais claro */
--blue-tint: #163356; /* "tint" no escuro = chapa mais clara */
--blue-tint-2: #1f4a7a;
--accent-solid: #0057ff; /* botão primário: azul com texto branco (≥4,5:1) */
--aqua: #2ecb93;
--yellow: #f3c97a;
/* Validadas sobre a chapa (#122a47) em 12/10/2026. */
--serie-1: #3d82ff;
--serie-2: #c96a2a;
--serie-3: #7e63d6;
--serie-4: #6d9424;
--serie-5: #b8467f;
--serie-6: #1aa3c8;
--serie-linha: #e8f1f8;
--serie-linha-2: #8fa8c4;
--serie-gasto: #d96f2a;
--kpi-brilho: 17%;
--good: #86e3bd;
--good-tint: #123b2b;
--bad: #ff9f93;
--bad-tint: #3b1c19;
--warn: #f3c97a;
--warn-tint: #3a2c10;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
/* Halo da luz: só em KPI, botão primário, estado ativo e linha de gráfico. */
--glow-accent: 0 0 0 1px var(--blue), 0 0 24px -6px color-mix(in srgb, var(--blue) 60%, transparent);
--glow-accent-soft: 0 0 0 1px color-mix(in srgb, var(--blue) 35%, var(--border)), 0 0 18px -8px color-mix(in srgb, var(--blue) 40%, transparent);
--glow-good: 0 0 0 1px var(--good), 0 0 20px -6px color-mix(in srgb, var(--good) 55%, transparent);
--glow-bad: 0 0 0 1px var(--bad), 0 0 20px -6px color-mix(in srgb, var(--bad) 60%, transparent);
/* Fundo da marca: luz vinda do alto à esquerda, azul no canto inferior
direito e a retícula de pontos — pintado uma vez no body (fixo). */
--page-glow:
radial-gradient(900px 500px at 15% -10%, rgba(135, 206, 250, 0.16), transparent 60%),
radial-gradient(700px 400px at 100% 100%, rgba(0, 87, 255, 0.14), transparent 60%),
radial-gradient(rgba(135, 206, 250, 0.09) 1px, transparent 1.2px) 0 0 / 22px 22px;
--surface-2: #0f1f38;
--border-strong: #2d5584;
--chart-line-glow: drop-shadow(0 0 6px color-mix(in srgb, var(--blue) 55%, transparent));
--glow-text: 0 0 18px color-mix(in srgb, var(--blue) 35%, transparent);
--sombra-card: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.45), 0 16px 32px -20px rgba(0, 0, 0, 0.85);
--sombra-linha: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
--texto-marca: var(--blue);
}
/* Rolagem e caixa de seleção (01/10/2026), derivadas da laranja e do cinza de
cada tema. A barra neutra é a da página e dos menus; a de marca é a das
tabelas largas, como as roxas da VK. */
:root {
--rolagem-neutra: color-mix(in srgb, var(--text-muted) 42%, transparent);
--rolagem-neutra-forte: color-mix(in srgb, var(--text-muted) 72%, transparent);
--rolagem-marca: color-mix(in srgb, var(--blue) 80%, transparent);
--rolagem-marca-forte: var(--blue);
--rolagem-trilho: color-mix(in srgb, var(--blue) 12%, var(--surface-2));
--caixa-borda: color-mix(in srgb, var(--text-muted) 55%, transparent);
--caixa-borda-forte: var(--text-secondary);
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: var(--font);
/* background-image e background-color separados (em vez do shorthand
combinado) pra não depender de "none" dentro de uma lista de camadas
misturada com var() — mais explícito e sem ambiguidade de parsing.
No claro --page-glow é "none": zero imagem, resultado idêntico a antes. */
/* Shorthand de propósito: a retícula do tema escuro precisa de tamanho de
camada (… / 22px 22px), que só o shorthand aceita. A cor vem depois, por
cima do `none` do tema claro. */
background: var(--page-glow);
background-color: var(--page);
background-attachment: fixed;
color: var(--text-primary);
font-size: 14px;
}
#app { display: flex; min-height: 100vh; }
/* ---------- Sidebar ---------- */
.sidebar {
width: 232px;
flex-shrink: 0;
background: var(--surface);
border-right: 1px solid var(--border);
padding: 20px 12px;
}
.sidebar-brand {
display: flex;
align-items: center;
gap: 10px;
padding: 0 10px 20px;
font-weight: 700;
font-size: 14.5px;
}
.sidebar-brand .brand-icon,
.sidebar-brand .brand-fallback {
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--accent-solid);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.sidebar-brand .brand-logo {
width: 34px;
height: 34px;
object-fit: contain;
border-radius: 8px;
flex-shrink: 0;
}
.sidebar nav a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
color: var(--text-secondary);
text-decoration: none;
font-size: 13.5px;
font-weight: 500;
margin-bottom: 2px;
}
.sidebar nav a:hover { background: var(--page); color: var(--text-primary); }
/* Rota ativa preenchida por uma luz laranja que se apaga para a direita. Era
tinta chapada + listra lateral + anel de 1px, e o anel fazia o item parecer
um botão contornado, o mesmo efeito que apagava os cards. */
.sidebar nav a.active {
background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 22%, transparent), color-mix(in srgb, var(--blue) 5%, transparent));
color: var(--texto-marca);
font-weight: 600;
}
/* ---------- Main ---------- */
.main { flex: 1; padding: 20px 24px 40px; min-width: 0; }
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--sombra-card);
padding: 14px 18px;
margin-bottom: 16px;
}
.topbar .title-wrap { display: flex; align-items: center; gap: 12px; }
.topbar .title-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
overflow: hidden;
}
.topbar .title-icon img { width: 40px; height: 40px; object-fit: contain; }
.topbar .title-icon > span {
width: 40px; height: 40px; border-radius: 10px;
background: var(--accent-solid); color: #fff;
display: flex; align-items: center; justify-content: center;
}
.topbar h1 { font-size: 16px; margin: 0; }
.topbar .subtitle { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
/* flex-wrap + min-width:0: sem os dois, o bloco de ações (workspace, período,
atualizar) impunha sua largura mínima ao topbar e empurrava a PÁGINA INTEIRA
pra rolar na horizontal em tela estreita — a tabela já tem a rolagem dela,
o corpo do documento nunca deveria ter. */
.topbar .actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.topbar .title-wrap { min-width: 0; }
.topbar h1, .topbar .subtitle { overflow-wrap: anywhere; }
@media (max-width: 720px) {
.topbar { flex-direction: column; align-items: stretch; }
.topbar .actions { justify-content: flex-start; }
}
/* ---------- Barra lateral em tela estreita ----------
Abaixo de 900px a barra de 232px passava a comer metade da largura útil e o
conteúdo — que é uma tabela larga — ficava espremido no que sobrava. Vira
uma trilha de ícones: mesma navegação, com o rótulo no title. */
@media (max-width: 900px) {
.sidebar { width: 64px; padding: 16px 8px; }
.sidebar .nav-label,
.sidebar .nav-section,
.sidebar .sidebar-brand > span,
.sidebar .sidebar-footer .btn-ghost span { display: none; }
.sidebar nav a { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar .sidebar-brand { justify-content: center; padding: 0 0 16px; }
.sidebar .sidebar-footer .btn-ghost { padding-left: 0; padding-right: 0; font-size: 11px; }
}
.chip {
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 14px;
font-size: 13px;
color: var(--text-secondary);
background: var(--surface);
}
/* ---------- KPI cards ---------- */
.kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 12px;
margin-bottom: 16px;
}
/* Card de indicador (01/10/2026, olhando a VK): a cor entra como LUZ — um
filete no topo que se apaga para a direita, um clarão no canto do ícone e o
ícone num chip em degradê — e não mais como o anel laranja em volta de cada
card, que deixava a fileira contornada e apagada. Profundidade é sombra de
verdade (--sombra-card). Sem realce no hover: o card não é clicável, e
trocar o brilho ao passar o mouse dá impressão de que algum dado mudou.
--kpi-cor é o laranja da marca; nas métricas-chave vira estado (abaixo). */
.kpi-card {
--kpi-cor: var(--blue);
position: relative;
overflow: hidden;
background:
radial-gradient(130% 110% at 0% 0%, color-mix(in srgb, var(--kpi-cor) var(--kpi-brilho), transparent), transparent 58%),
var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--sombra-card);
padding: 16px 16px 15px;
}
.kpi-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 2px;
background: linear-gradient(90deg, var(--kpi-cor), color-mix(in srgb, var(--kpi-cor) 45%, transparent) 60%, transparent 95%);
pointer-events: none;
}
.kpi-card .head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.kpi-card .icon {
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
color: var(--kpi-cor);
background: linear-gradient(140deg, color-mix(in srgb, var(--kpi-cor) 28%, transparent), color-mix(in srgb, var(--kpi-cor) 7%, transparent));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kpi-cor) 24%, transparent);
}
.kpi-card .label { font-size: 13px; color: var(--text-secondary); font-weight: 500; }
.kpi-card .value-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.kpi-card .value { font-size: 25px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi-card .sub { font-size: 11.5px; color: var(--text-muted); margin-top: 5px; }
/* ---------- Tom do KPI ----------
Desde 27/09/2026 verde e vermelho são ESTADO, e só nas métricas-chave
(lucro, ROAS real): bom em verde, ruim em vermelho — no filete, no ícone e
no próprio número, como o lucro e o ROAS da VK. Os demais cards ficam no
laranja da marca. Antes a cor identificava a métrica (bounce sempre
vermelho, captação sempre verde) e o vermelho deixava de significar "ruim". */
.kpi-card.tom-accent { --kpi-cor: var(--blue); }
.kpi-card.tom-bad { --kpi-cor: var(--bad); }
.kpi-card.tom-good { --kpi-cor: var(--good); }
.kpi-card.tom-bad .value,
.kpi-card.tom-good .value { color: var(--kpi-cor); }
.delta {
display: inline-block;
font-size: 11px;
font-weight: 600;
padding: 2px 7px;
border-radius: 999px;
}
.delta.up { background: var(--good-tint); color: var(--good); }
.delta.down { background: var(--bad-tint); color: var(--bad); }
.delta.neutral { background: var(--page); color: var(--text-muted); }
/* ---------- Panels ---------- */
.panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--sombra-card);
padding: 18px 20px;
margin-bottom: 16px;
min-width: 0;
transition: border-color 0.15s ease;
}
/* Painel comum ganha só reação de borda no hover — SEM halo. O brilho fica
reservado pros KPIs (a única leitura que precisa chamar atenção primeiro
na tela); repetir glow em toda superfície vira ruído, não hierarquia. */
.panel:hover { border-color: var(--border-strong); }
@media (prefers-reduced-motion: reduce) { .panel { transition: none; } }
.panel h3 { margin: 0 0 2px; font-size: 15px; }
.panel .panel-sub { color: var(--text-muted); font-size: 12px; margin-bottom: 14px; }
.grid-2 { display: grid; grid-template-columns: 5fr 7fr; gap: 16px; align-items: start; }
.grid-2-even { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .grid-2, .grid-2-even { grid-template-columns: 1fr; } }
/* ---------- Insight footnote ---------- */
.insight {
margin-top: 14px;
background: var(--blue-tint);
border-radius: 8px;
padding: 10px 14px;
font-size: 12.5px;
color: var(--blue-dark);
}
.insight strong { color: var(--blue-dark); }
/* ---------- Barras de rolagem ----------
A da página e a dos menus: fina, cinza, sem trilho — fica no canto e não
disputa com os dados. A das tabelas largas e dos gráficos longos: faixa da
cor da marca (na tabela, em cima e embaixo; components/RolagemTabela.js põe
a de cima). Chromium e Safari desenham pelo ::-webkit-scrollbar; o Firefox
só aceita cor e espessura. No Chromium, scrollbar-color desligaria o
::-webkit-scrollbar, por isso ele só entra onde o seletor não existe. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
background-color: var(--rolagem-neutra);
background-clip: padding-box;
border: 2px solid transparent;
border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--rolagem-neutra-forte); }
.table-scroll::-webkit-scrollbar, .rolagem-topo::-webkit-scrollbar, .cb-rolagem::-webkit-scrollbar { height: 8px; }
.table-scroll::-webkit-scrollbar-track, .rolagem-topo::-webkit-scrollbar-track, .cb-rolagem::-webkit-scrollbar-track {
background: var(--rolagem-trilho);
border-radius: 999px;
}
.table-scroll::-webkit-scrollbar-thumb, .rolagem-topo::-webkit-scrollbar-thumb, .cb-rolagem::-webkit-scrollbar-thumb {
background-color: var(--rolagem-marca);
border: 0;
border-radius: 999px;
}
.table-scroll::-webkit-scrollbar-thumb:hover, .rolagem-topo::-webkit-scrollbar-thumb:hover, .cb-rolagem::-webkit-scrollbar-thumb:hover {
background-color: var(--rolagem-marca-forte);
}
@supports not selector(::-webkit-scrollbar) {
html { scrollbar-color: var(--rolagem-neutra) transparent; }
* { scrollbar-width: thin; }
.table-scroll, .rolagem-topo, .cb-rolagem { scrollbar-color: var(--rolagem-marca) var(--rolagem-trilho); }
}
/* ---------- Tables ---------- */
/* padding embaixo: a barra de baixo não encosta na última linha. */
.table-scroll { overflow-x: auto; padding-bottom: 6px; }
/* Barra de cima: só a faixa de rolagem, com um miolo da largura da tabela. */
.rolagem-topo { overflow-x: auto; overflow-y: hidden; height: 8px; margin-bottom: 8px; }
.rolagem-topo > div { height: 1px; }
.rolagem-topo[hidden] { display: none; }
/* ---------- Caixas de seleção ----------
A nativa vinha como quadrado branco no tema escuro e roubava a atenção da
linha (01/10/2026). Aqui: contorno cinza suave, laranja da marca quando
marcada, foco visível no teclado. Vale para toda caixa da aplicação. */
input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
flex: 0 0 auto;
width: 15px;
height: 15px;
margin: 0;
border: 1.5px solid var(--caixa-borda);
border-radius: 4px;
background: transparent center / 11px 11px no-repeat;
vertical-align: middle;
cursor: pointer;
transition: border-color 0.12s ease, background-color 0.12s ease;
}
input[type="checkbox"]:hover { border-color: var(--caixa-borda-forte); }
input[type="checkbox"]:checked {
background-color: var(--blue);
border-color: var(--blue);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l2.9 2.9 5.9-6.6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
input[type="checkbox"]:indeterminate {
background-color: var(--blue);
border-color: var(--blue);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
input[type="checkbox"]:focus-visible {
outline: 2px solid color-mix(in srgb, var(--blue) 70%, transparent);
outline-offset: 2px;
}
input[type="checkbox"]:disabled { opacity: 0.45; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { input[type="checkbox"] { transition: none; } }
/* Na linha da tabela de campanhas, mais apagada ainda até o mouse passar. */
.camp-table .rowcheck:not(:checked) { border-color: color-mix(in srgb, var(--text-muted) 40%, transparent); }
.camp-table tr:hover .rowcheck:not(:checked) { border-color: var(--caixa-borda-forte); }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
text-align: left;
color: var(--text-muted);
font-weight: 600;
font-size: 11.5px;
text-transform: none;
padding: 10px 12px;
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.data-table td {
padding: 12px;
border-bottom: 1px solid var(--border);
font-variant-numeric: tabular-nums;
white-space: nowrap;
vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: color-mix(in srgb, var(--text-primary) 4%, var(--surface)); }
.cell-main { font-weight: 600; }
.cell-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); }
.status .dot { width: 8px; height: 8px; border-radius: 50%; }
.status.ativa .dot { background: var(--good); }
.status.pausada .dot { background: var(--text-muted); }
/* "Confiar neste dispositivo por 30 dias" nas telas do código de 2FA. */
.login-confiar {
display: flex; align-items: center; gap: 8px; margin: 12px 0 2px;
font-size: 13px; color: var(--text-secondary); cursor: pointer; text-align: left;
}
/* .login-card input { width: 100% } vem depois e vale para todo input do cartão: sem o
seletor mais específico, a caixinha esticava e espremia o texto numa coluna. */
.login-card .login-confiar input { accent-color: var(--blue); width: 15px; height: 15px; margin: 0; flex: 0 0 auto; }
.login-confiar-sub { font-size: 11.5px; color: var(--text-muted); margin: 0 0 12px 23px; text-align: left; }
.metric-good { color: var(--good); font-weight: 600; }
.metric-bad { color: var(--bad); font-weight: 600; }
/* progress bar (ROAS etc.) */
.bar-cell { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.bar-track { flex: 1; height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: var(--blue); }
/* ---------- Retenção tela a tela (funil de quiz) ----------
Uma barra por tela, não uma tabela: o funil é uma forma, e a tabela obrigava
a ler número por número para enxergar onde ele estrangula. A barra é a
informação principal, por isso fica na coluna elástica. */
.qf-screens { display: flex; flex-direction: column; gap: 2px; }
.qf-row {
display: grid;
grid-template-columns: 36px minmax(80px, 1fr) minmax(110px, 30%) 116px;
align-items: center; gap: 12px; padding: 2px 0;
}
.qf-num { font-family: ui-monospace, monospace; font-size: 11px; color: var(--text-muted); text-align: right; }
.qf-track {
height: 22px; background: var(--page); border: 1px solid var(--border);
border-radius: 6px; overflow: hidden; position: relative;
}
.qf-fill { height: 100%; border-radius: 5px 0 0 5px; transition: width .45s cubic-bezier(.22,.68,.28,1); }
.qf-name {
font-size: 12px; color: var(--text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qf-row.insercao .qf-name { opacity: .72; font-style: italic; }
/* Contorno só na pior queda. Pintar toda linha fraca de vermelho num funil que
termina em 25% não diz nada: tudo vira vermelho e nada se destaca. */
.qf-row.pior .qf-track { outline: 2px solid var(--bad); outline-offset: 1px; }
.qf-right { text-align: right; }
.qf-pct { font-family: ui-monospace, monospace; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.qf-delta { font-family: ui-monospace, monospace; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.qf-delta.forte { color: var(--bad); font-weight: 700; }
/* Controle de base, repetido no topo e dentro dos blocos que ele afeta. */
.qf-base {
display: inline-flex; gap: 6px; align-items: center; white-space: nowrap;
font-size: 12.5px; color: var(--text-secondary); cursor: pointer;
}
.qf-base b { color: var(--text-primary); font-weight: 600; }
/* ---------- Silhueta do funil: tooltip que acompanha o mouse ---------- */
.qf-silhueta { position: relative; }
/* overflow visível no eixo x seria pior: o balão é reposicionado por script
para não estourar a borda, então basta não recortá-lo verticalmente. */
.qf-tip {
position: absolute; z-index: 5; pointer-events: none;
display: flex; flex-direction: column; gap: 1px;
max-width: 260px; padding: 7px 10px;
background: var(--surface); color: var(--text-primary);
border: 1px solid var(--border-strong); border-radius: 8px;
box-shadow: 0 6px 20px rgb(0 0 0 / .28);
font-size: 11.5px; line-height: 1.45;
}
/* display:flex acima vence o [hidden] do navegador, que só define display:none
na camada mais fraca. Sem esta linha o balão nasce visível e vazio. */
.qf-tip[hidden] { display: none; }
.qf-tip b { font-size: 12px; font-weight: 700; }
.qf-tip span { color: var(--text-secondary); font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
/* O nome desce para baixo da barra: em 360px ele espremia a barra a ponto de
ela não mostrar mais diferença entre 40% e 70%. */
.qf-row { grid-template-columns: 28px 1fr 92px; grid-template-areas: "num track right" ". name right"; row-gap: 1px; gap: 8px; }
.qf-num { grid-area: num; }
.qf-track { grid-area: track; }
.qf-name { grid-area: name; font-size: 11.5px; }
.qf-right { grid-area: right; }
}
/* mini bars (vendas sparkline) */
.minibars { display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; }
.minibars span { width: 4px; border-radius: 2px 2px 0 0; background: var(--blue-tint-2); }
.minibars span.on { background: var(--blue); }
/* ---------- Highlight / resumo ---------- */
.highlight-card {
background: var(--blue-tint);
border: 1px solid var(--blue-tint-2);
border-radius: var(--radius);
padding: 16px 18px;
display: flex;
align-items: center;
gap: 14px;
}
.highlight-card .trophy {
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--accent-solid);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.highlight-card .hl-label { font-size: 11.5px; color: var(--blue-dark); }
.highlight-card .hl-value { font-size: 15px; font-weight: 700; color: var(--blue-dark); }
.highlight-card .hl-sub { font-size: 12px; color: var(--blue-dark); }
.summary-strip {
display: flex;
align-items: center;
gap: 0;
flex-wrap: wrap;
}
.summary-item {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 22px 6px 0;
margin-right: 22px;
border-right: 1px solid var(--border);
}
.summary-item:last-of-type { border-right: none; }
.summary-item .icon {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--blue-tint);
color: var(--blue);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.summary-item .s-value { font-size: 16px; font-weight: 700; }
.summary-item .s-label { font-size: 11.5px; color: var(--text-muted); }
/* ---------- Funnel ---------- */
.funnel-list { display: flex; flex-direction: column; gap: 8px; }
.funnel-row {
display: grid;
grid-template-columns: 1fr 130px;
gap: 8px;
align-items: stretch;
}
.funnel-metric {
background: var(--page);
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.funnel-metric .fm-label { font-size: 12px; color: var(--text-secondary); }
.funnel-metric .fm-value { font-size: 17px; font-weight: 700; }
.funnel-rate {
background: var(--blue-tint);
border: 1px solid var(--blue-tint-2);
border-radius: 10px;
padding: 8px 12px;
display: flex;
flex-direction: column;
justify-content: center;
}
.funnel-rate .fr-label { font-size: 10.5px; color: var(--blue-dark); }
.funnel-rate .fr-value { font-size: 15px; font-weight: 700; color: var(--blue-dark); }
/* ---------- Charts ---------- */
.chart-wrap { width: 100%; overflow-x: auto; }
.chart-legend {
display: flex; gap: 16px;
font-size: 12px; color: var(--text-secondary);
margin-bottom: 10px;
}
.chart-legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }
.empty-state { color: var(--text-muted); font-size: 13px; padding: 12px 0; }
.footnote { font-size: 11px; color: var(--text-muted); margin-top: 10px; }
/* ---------- Criativos em cards ---------- */
.cc-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.cc-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.cc-tab {
border: none;
background: transparent;
font: inherit;
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
padding: 8px 14px;
border-radius: 8px;
cursor: pointer;
}
.cc-tab:hover { background: var(--page); }
.cc-tab.active { background: var(--blue-tint); color: var(--texto-marca); font-weight: 600; }
.cc-search {
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 12px;
font: inherit;
font-size: 13px;
color: var(--text-primary);
background: var(--surface);
min-width: 220px;
}
.cc-search:focus { outline: 2px solid var(--blue-tint-2); border-color: var(--blue); }
/* Linha de URL do split-test (Testes A/B).
O campo de % vivia cortado na direita e isso NÃO era culpa do markup: a
`.cc-search` tem `min-width: 220px`, e min-width ganha de width — o
`style="width:60px"` da linha era ignorado e o input de 220px estourava o
span de 90px que o continha. Aqui cada campo zera o min-width herdado e
declara a própria largura, então nada depende do zoom do navegador. */
.tf-url-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.tf-url-row .cc-search { min-width: 0; }
.tf-url-row .tf-url { flex: 3 1 240px; }
.tf-url-row .tf-nome { flex: 2 1 150px; }
.tf-peso-wrap { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
/* 78px comporta "100" mais as setinhas do input[type=number] sem apertar. */
.tf-url-row .tf-peso { flex: 0 0 auto; width: 78px; text-align: right; padding-right: 6px; }
.tf-peso-sinal { color: var(--text-secondary); font-size: 13px; }
.cc-sort {
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 10px;
font: inherit;
font-size: 13px;
color: var(--text-primary);
background: var(--surface);
}
.creative-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 14px;
}
.creative-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
display: flex;
flex-direction: column;
}
.creative-card .thumb {
position: relative;
height: 150px;
background: linear-gradient(135deg, var(--blue-dark), var(--blue));
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.85);
}
/* A miniatura é ![]()
: o navegador só baixa as dos cards que
aparecem. O ícone de vídeo continua por cima, como no fundo antigo. */
.creative-card .thumb .thumb-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.creative-card .thumb > svg { position: relative; z-index: 1; }
.cc-sem-entrega {
margin: 0 0 12px;
font-size: 12.5px;
color: var(--text-secondary);
}
.cc-sem-entrega[hidden] { display: none; }
.cc-sem-entrega button {
border: 0; background: none; padding: 0; cursor: pointer;
font: inherit; font-weight: 600; color: var(--blue);
}
.cc-sem-entrega button:hover { text-decoration: underline; }
.creative-card .thumb .name {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 22px 12px 8px;
background: linear-gradient(transparent, rgba(9, 20, 38, 0.85));
color: #fff;
font-size: 12.5px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.creative-card .cc-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 12px;
}
.cc-stat-box {
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 12px;
background: var(--page);
}
.cc-stat-box.accent {
background: var(--blue-tint);
border-color: var(--blue-tint-2);
}
.cc-stat-box .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cc-stat-box .lbl { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.cc-stat-box.accent .lbl { color: var(--blue-dark); }
.cc-stat-box .val { font-size: 15px; font-weight: 700; }
.cc-stat-box .val-sm { font-size: 13px; font-weight: 600; }
.cc-stat-box .divider { border-top: 1px solid var(--border); margin: 8px 0; }
.cc-stat-box.accent .divider { border-color: var(--blue-tint-2); }
.roas-pill {
display: inline-block;
background: var(--good-tint);
color: var(--good);
font-weight: 700;
font-size: 13px;
border-radius: 6px;
padding: 2px 8px;
}
.roas-pill.bad { background: var(--bad-tint); color: var(--bad); }
.roas-pill.warn { background: var(--warn-tint); color: var(--warn); }
.cc-meters { padding: 0 12px 10px; display: flex; flex-direction: column; gap: 7px; }
.meter { display: grid; grid-template-columns: 70px 1fr 64px; align-items: center; gap: 10px; font-size: 12px; }
.meter .m-label { color: var(--text-secondary); }
.meter .m-track { height: 5px; border-radius: 999px; background: var(--border); overflow: hidden; }
.meter .m-fill { height: 100%; border-radius: 999px; }
.meter .m-value { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.meter.good .m-fill { background: var(--good); }
.meter.good .m-value { color: var(--good); }
.meter.warn .m-fill { background: var(--yellow); }
.meter.warn .m-value { color: var(--warn); }
.meter.bad .m-fill { background: var(--bad); }
.meter.bad .m-value { color: var(--bad); }
.cc-footer {
padding: 8px 12px 12px;
font-size: 11.5px;
color: var(--text-muted);
border-top: 1px solid var(--border);
}
/* ---------- Sidebar em seções ---------- */
.sidebar .nav-section {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
padding: 14px 12px 6px;
}
/* ---------- HBarList (rankings) ---------- */
.hbar-list { display: flex; flex-direction: column; gap: 9px; }
.hbar-row {
display: grid;
grid-template-columns: minmax(90px, 150px) 1fr minmax(110px, auto);
align-items: center;
gap: 10px;
font-size: 12px;
}
.hbar-label {
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Trilho sem contorno e barra que acende da esquerda para a direita: a mesma
cor da posição, só que nascendo mais fraca. Com o contorno, cada linha era
uma caixinha cinza com um risco dentro. */
.hbar-track { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--text-muted) 16%, transparent); overflow: hidden; }
.hbar-fill { height: 100%; border-radius: 999px; background: var(--blue); -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.7), #000 85%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.7), #000 85%); }
.hbar-value { text-align: right; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hbar-medalha { display: inline-flex; vertical-align: -2px; margin-right: 4px; color: var(--blue); }
/* ---------- Heatmap ---------- */
.hm-wrap { display: flex; flex-direction: column; gap: 3px; }
.hm-hours { position: relative; height: 14px; margin-left: 38px; font-size: 9.5px; color: var(--text-muted); }
.hm-hours span { position: absolute; }
.hm-row { display: flex; align-items: center; gap: 6px; }
.hm-dow { width: 32px; font-size: 10px; color: var(--text-muted); text-align: right; }
.hm-cells { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; flex: 1; }
.hm-cell { aspect-ratio: 1.6; border-radius: 3px; min-width: 0; }
.hm-legend { display: flex; align-items: center; gap: 4px; justify-content: flex-end; font-size: 10px; color: var(--text-muted); margin-top: 4px; }
.hm-leg { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
/* ---------- Progress goal (hero atribuição) ---------- */
.pgoal { margin-top: 12px; }
.pgoal-track { position: relative; height: 10px; border-radius: 999px; background: var(--page); border: 1px solid var(--border); }
.pgoal-fill { height: 100%; border-radius: 999px; background: var(--good); }
.pgoal-fill.under { background: var(--warn); }
.pgoal-marker { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text-secondary); }
.pgoal-marker span { position: absolute; top: -18px; left: -20px; font-size: 10px; color: var(--text-muted); white-space: nowrap; }
.pgoal-scale { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); margin-top: 6px; }
.hero-value { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; }
.hero-sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 4px; }
/* ---------- Toggle switch ---------- */
.tswitch {
width: 36px; height: 20px;
border-radius: 999px;
border: none;
background: var(--border);
position: relative;
cursor: pointer;
padding: 0;
flex-shrink: 0;
transition: background 0.15s, box-shadow 0.15s;
}
.tswitch .knob {
position: absolute; top: 2px; left: 2px;
width: 16px; height: 16px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
transition: left 0.15s;
}
.tswitch.on { background: var(--good); box-shadow: var(--glow-good); }
.tswitch.on .knob { left: 18px; }
/* ---------- Tabela hierárquica de campanhas ---------- */
/* fixed: a largura vem do (JS gera um por coluna visível),
não do conteúdo — é o que faz o resize da borda realmente colar em vez de
a coluna voltar a crescer pro tamanho do valor mais largo. */
.camp-table { table-layout: fixed; }
.camp-table td, .camp-table th { padding: 9px 10px; }
/* segurança pro layout fixo: valor mais longo que a coluna corta em vez de
estourar e empurrar as colunas vizinhas. .name-cell já tem o próprio
ellipsis então fica de fora daqui. */
.camp-table td:not(:first-child) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camp-table .group-row td {
background: var(--page);
font-weight: 700;
font-size: 12.5px;
cursor: pointer;
}
.camp-table .group-row .caret { display: inline-block; width: 14px; color: var(--text-muted); }
.camp-table .total-row td {
background: var(--blue-tint);
font-weight: 700;
border-top: 2px solid var(--blue-tint-2);
}
.camp-table .name-cell { max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.camp-table .fy-col { background: color-mix(in srgb, var(--blue) 7%, var(--surface)); }
.camp-table th.fy-col { color: var(--blue-dark); }
/* Cabeçalho clicável fora da tabela de campanhas (TabelaOrdenavel.js). */
.data-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.data-table th.sortable:hover { color: var(--blue-dark); }
.data-table th.sortable .sort-arrow { font-size: 10px; color: var(--text-muted); margin-left: 2px; }
.data-table th.sortable.sorted { color: var(--blue-dark); }
.data-table th.sortable.sorted .sort-arrow { color: var(--blue); font-weight: 700; }
.ord-mais:empty { display: none; }
.ord-pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font-size: 12.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ord-pager .ord-pag {
width: 30px; height: 28px; border-radius: 8px; border: 1px solid var(--border);
background: var(--surface); color: var(--text-primary); font-size: 17px; line-height: 1; cursor: pointer;
}
.ord-pager .ord-pag:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.ord-pager .ord-pag:disabled { opacity: 0.35; cursor: default; }
.ord-mais { margin-top: 8px; }
.link-inline {
border: 0; background: none; padding: 0; cursor: pointer;
font: inherit; font-size: 12.5px; font-weight: 600; color: var(--blue);
}
.link-inline:hover { text-decoration: underline; }
.camp-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.camp-table th.sortable:hover { color: var(--blue-dark); }
.camp-table th.sortable .sort-arrow { font-size: 10px; color: var(--text-muted); margin-left: 2px; }
.camp-table th.sortable:hover .sort-arrow { color: var(--blue); }
.camp-table th.sortable.sorted { color: var(--blue-dark); }
.camp-table th.sortable.sorted .sort-arrow { color: var(--blue); font-weight: 700; }
.budget-input {
width: 86px;
border: 1px solid transparent;
border-radius: 6px;
background: transparent;
font: inherit;
font-variant-numeric: tabular-nums;
padding: 3px 6px;
text-align: right;
color: var(--text-primary);
}
.budget-input:hover { border-color: var(--border); background: var(--surface); }
.budget-input:focus { border-color: var(--blue); background: var(--surface); outline: none; }
/* ---------- Percentil chips / distribuição ---------- */
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.chip-sm {
font-size: 11px;
border: 1px solid var(--border);
border-radius: 999px;
padding: 3px 9px;
color: var(--text-secondary);
background: var(--page);
}
.page-tabs { display: flex; gap: 4px; margin-bottom: 14px; }
/* ---------- Barra de filtros (chips + popovers) ---------- */
.filter-bar {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 12px;
position: relative;
}
.fchip {
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
padding: 7px 13px;
font: inherit;
font-size: 12.5px;
color: var(--text-secondary);
cursor: pointer;
white-space: nowrap;
}
.fchip:hover { border-color: var(--blue-tint-2); background: var(--blue-tint); color: var(--blue-dark); }
.fchip.active { background: var(--blue-tint); border-color: var(--blue-tint-2); color: var(--blue-dark); font-weight: 600; }
.fchip .count {
background: var(--accent-solid);
color: #fff;
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
padding: 1px 6px;
}
.fchip .x { font-weight: 700; opacity: 0.6; }
.fchip .x:hover { opacity: 1; }
.popover {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 50;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 8px 28px rgba(16, 24, 40, 0.14);
padding: 14px;
min-width: 240px;
}
.popover.right { left: auto; right: 0; }
/* Lista de contas do botão "Gerenciador" (tela de Campanhas). */
.ger-pop { min-width: 300px; max-height: 360px; overflow-y: auto; }
.ger-conta {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 7px 8px; border-radius: 8px; color: var(--text-primary); text-decoration: none; font-size: 13px;
}
.ger-conta:hover { background: var(--blue-tint); }
.ger-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-section { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); margin: 12px 0 6px; }
.pop-section:first-child { margin-top: 0; }
.pop-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-primary); padding: 5px 0; cursor: pointer; }
/* display:flex acima vence o [hidden] do navegador, que só define display:none
na camada mais fraca. A busca da configuração esconde item por [hidden]. */
.pop-check[hidden] { display: none; }
/* ---------- Listas buscáveis da configuração do funil ----------
Altura limitada: um funil de verdade traz dezenas de campanhas com nome
gigante, e a coluna empurrava o resto da tela para fora da dobra. */
.cfg-lista { max-height: 260px; overflow-y: auto; padding-right: 4px; }
.cfg-busca { width: 100%; min-width: 0; margin-bottom: 8px; }
.pop-footer { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
/* ---------- Date picker ---------- */
.datepicker { display: flex; min-width: 560px; }
.dp-presets { border-right: 1px solid var(--border); padding-right: 10px; margin-right: 14px; min-width: 140px; max-height: 300px; overflow-y: auto; }
.dp-preset { display: block; width: 100%; text-align: left; border: none; background: none; font: inherit; font-size: 13px; color: var(--text-primary); padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.dp-preset:hover { background: var(--page); }
.dp-preset.active { background: var(--blue-tint); color: var(--blue-dark); font-weight: 600; }
.dp-cal { flex: 1; }
.dp-months { display: flex; gap: 20px; }
.dp-month { flex: 1; }
.dp-month h4 { text-align: center; font-size: 13px; margin: 0 0 8px; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-dow { font-size: 10px; color: var(--text-muted); text-align: center; padding: 3px 0; }
.dp-day {
border: none; background: none; font: inherit; font-size: 12px;
padding: 5px 0; border-radius: 7px; cursor: pointer; text-align: center;
color: var(--text-primary);
}
.dp-day:hover { background: var(--blue-tint); }
.dp-day.out { color: var(--text-muted); opacity: 0.35; cursor: default; }
.dp-day.inrange { background: var(--blue-tint); border-radius: 0; }
.dp-day.edge { background: var(--accent-solid); color: #fff; font-weight: 700; }
.dp-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; font-size: 12.5px; color: var(--text-secondary); }
/* ---------- Seletor de colunas ---------- */
.col-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; }
.col-item .col-move { display: flex; gap: 2px; margin-left: auto; }
.col-item .col-move button {
border: 1px solid var(--border); background: var(--surface); border-radius: 6px;
width: 22px; height: 22px; font-size: 11px; cursor: pointer; color: var(--text-secondary);
line-height: 1;
}
.col-item .col-move button:hover { background: var(--blue-tint); color: var(--blue-dark); }
/* Selo das métricas calculadas pelo próprio Nexus (NX). A classe ainda se
chama fy-tag por herança de um nome antigo. */
.col-item.fy-tag::after { content: "NX"; font-size: 9px; font-weight: 700; color: var(--blue-dark); background: var(--blue-tint); border-radius: 4px; padding: 1px 5px; }
/* ---------- Drill-down (níveis indentados) ---------- */
.camp-table .lvl-caret {
border: none; background: none; cursor: pointer; font-size: 11px;
color: var(--text-muted); width: 18px; padding: 0; flex-shrink: 0;
}
.camp-table .lvl-1 td:first-child { padding-left: 26px; }
.camp-table .lvl-1 { background: color-mix(in srgb, var(--text-primary) 3%, var(--surface)); }
.camp-table .lvl-2 td:first-child { padding-left: 52px; }
.camp-table .lvl-2 { background: color-mix(in srgb, var(--text-primary) 6%, var(--surface)); }
.camp-table .rowcheck { flex-shrink: 0; }
/* ---------- Tela Ativos ---------- */
.ativos-layout { display: grid; grid-template-columns: 210px 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .ativos-layout { grid-template-columns: 1fr; } }
.mini-nav { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; }
.mini-nav button {
display: flex; align-items: center; gap: 8px;
width: 100%; text-align: left; border: none; background: none; font: inherit;
font-size: 13px; color: var(--text-secondary); padding: 9px 10px; border-radius: 8px; cursor: pointer;
}
.mini-nav button:hover { background: var(--page); }
.mini-nav button.active { background: var(--blue-tint); color: var(--blue-dark); font-weight: 600; }
.mini-nav .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); flex-shrink: 0; }
.mini-nav button.ok .dot { background: var(--good); }
.bm-header td { background: var(--page); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
/* cards de ativo (site / checkout / pixel) */
.asset-card {
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px 16px;
margin-bottom: 12px;
background: var(--surface);
}
.asset-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.asset-head .asset-name { font-weight: 700; font-size: 14px; }
.asset-head .spacer { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.asset-sub { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.asset-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.badge-green {
font-size: 11px; font-weight: 600;
color: var(--good); background: var(--good-tint);
border-radius: 999px; padding: 3px 10px;
}
.badge-warn {
font-size: 11px; font-weight: 600;
color: var(--warn); background: var(--warn-tint);
border-radius: 999px; padding: 3px 10px;
}
.badge-blue {
font-size: 11px; font-weight: 600;
color: var(--blue-dark); background: var(--blue-tint);
border-radius: 999px; padding: 3px 10px;
}
.badge-muted {
font-size: 11px; color: var(--text-muted); background: var(--page);
border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px;
}
.mono-box {
font-family: ui-monospace, Consolas, monospace;
font-size: 11.5px;
color: var(--text-secondary);
background: var(--page);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
word-break: break-all;
line-height: 1.5;
}
.btn-ghost {
border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary);
font: inherit; font-size: 12px; border-radius: 8px; padding: 6px 12px; cursor: pointer;
}
.btn-ghost:hover { background: var(--blue-tint); color: var(--blue-dark); border-color: var(--blue-tint-2); }
.danger-zone {
border: 1px solid color-mix(in srgb, var(--bad) 35%, var(--border));
background: var(--bad-tint);
border-radius: 10px;
padding: 16px 18px;
display: flex;
align-items: flex-start;
gap: 16px;
justify-content: space-between;
flex-wrap: wrap;
}
.danger-zone h4 { margin: 0 0 6px; font-size: 14px; color: var(--bad); }
.danger-zone p { margin: 0; font-size: 12.5px; color: var(--text-secondary); max-width: 640px; }
.btn-danger {
border: 1px solid var(--bad); background: var(--surface); color: var(--bad);
font: inherit; font-size: 13px; font-weight: 600; border-radius: 9px; padding: 9px 16px; cursor: pointer;
}
.btn-danger:hover { background: var(--bad); color: #fff; }
.inline-form {
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
border-top: 1px solid var(--border); margin-top: 14px; padding-top: 14px;
}
.inline-form label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); width: 100%; }
#btn-refresh { padding: 7px 10px; }
#btn-refresh.spinning svg { animation: kspin 0.9s linear infinite; }
@keyframes kspin { to { transform: rotate(360deg); } }
/* ---------- Login ---------- */
.login-screen {
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--page);
}
.login-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: 0 6px 24px rgba(16, 24, 40, 0.08);
padding: 32px 28px;
width: 340px;
display: flex;
flex-direction: column;
gap: 10px;
}
.login-logo { width: 72px; height: 72px; object-fit: contain; display: block; margin: 0 auto 6px; }
.login-brand { font-size: 22px; font-weight: 800; text-align: center; color: var(--text-primary); letter-spacing: 0.02em; }
.login-sub { font-size: 12.5px; color: var(--text-muted); text-align: center; margin-bottom: 8px; }
.login-error { min-height: 16px; font-size: 12px; color: var(--bad); text-align: center; }
.login-card input { width: 100%; }
.sidebar-footer { margin-top: 18px; padding: 0 4px; }
/* ---------- Low Ticket: canvas de nós ---------- */
.flow-canvas {
position: relative;
background:
radial-gradient(circle, var(--border) 1px, transparent 1px) 0 0 / 22px 22px,
var(--page);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 26px 20px;
overflow-x: auto;
}
.flow-row {
display: grid;
grid-template-columns: minmax(210px, 1fr) 8fr minmax(230px, 1.2fr);
grid-template-columns: minmax(210px, 3fr) minmax(280px, 4fr) minmax(230px, 3fr);
gap: 34px;
align-items: center;
position: relative;
}
@media (max-width: 1050px) { .flow-row { grid-template-columns: 1fr; gap: 20px; } }
/* Funil VSL: quatro nós (tráfego → página → vídeo → venda). */
.flow-row.vsl { grid-template-columns: repeat(4, minmax(200px, 1fr)); gap: 30px; }
@media (max-width: 1050px) { .flow-row.vsl { grid-template-columns: 1fr; gap: 20px; } }
.vsl-config .inline-form { margin-top: 8px; }
.vsl-lista { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.vsl-lista .asset-card { padding: 10px 12px; }
/* Funis personalizados (12/10/2026): cartões da lista, linha de nós com a
conversão no conector, menu de tipos e painel de configuração do nó. */
.funil-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin-top: 14px; }
.funil-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 8px; position: relative; }
.funil-card .fc-topo { display: flex; align-items: flex-start; gap: 8px; }
.funil-card .fc-nome { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: .01em; flex: 1; }
.funil-card .fc-menu { padding: 2px 8px; font-size: 18px; line-height: 1; }
.funil-card .fc-desc { font-size: 13px; color: var(--text-secondary); }
.funil-card .fc-nos { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.funil-card .fc-chip { display: inline-flex; align-items: center; gap: 4px; }
.funil-card .fc-seta { color: var(--text-muted); font-size: 12px; }
.funil-card .fc-data { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.funil-card .fc-abrir { display: flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; margin-top: 4px; }
.funil-card .fc-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.funil-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -4px 0 12px; }
.funil-barra .btn-ghost { text-decoration: none; }
.flow-row.funil { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; }
.flow-row.funil .flow-node { flex: 1 1 230px; max-width: 320px; min-width: 210px; }
/* conector entre nós vizinhos, com a conversão (nó seguinte ÷ nó anterior) */
.flow-link { flex: 0 0 40px; display: flex; justify-content: center; align-items: center; position: relative; height: 44px; }
.flow-link::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed var(--blue-tint-2); }
.flow-link span { position: relative; background: var(--surface); border: 1px solid var(--blue-tint-2); border-radius: 999px; font-size: 11px; font-weight: 600; padding: 2px 7px; color: var(--blue-dark); white-space: nowrap; }
@media (max-width: 700px) {
.flow-row.funil { flex-direction: column; align-items: stretch; }
.flow-row.funil .flow-node { max-width: none; min-width: 0; }
.flow-link { height: 30px; }
.flow-link::before { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 2px dashed var(--blue-tint-2); }
}
.node-head .spacer { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.node-head .spacer .badge-muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; display: inline-block; }
.node-head .no-cfg { padding: 0 6px; font-size: 15px; line-height: 1; margin-left: 4px; }
.node-head .no-cfg.active { color: var(--blue); }
.node-sep { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin: 8px 0 2px; }
.funil-add { margin-top: 16px; display: flex; justify-content: center; }
.tipo-menu { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tipo-opcao { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; cursor: pointer; display: flex; align-items: center; gap: 8px; color: var(--text); font: inherit; }
.tipo-opcao:hover { border-color: var(--blue); }
.tipo-opcao b { font-family: var(--font-display); font-size: 15px; }
.tipo-opcao span { font-size: 12px; color: var(--text-secondary); }
.no-config .campo { margin-top: 12px; }
.no-config .opcoes { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; }
.no-config .opcao { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.no-config .etapa { border: 1px dashed var(--border); border-radius: 10px; padding: 10px; margin-top: 8px; }
/* conector pontilhado entre os nós da linha principal */
.flow-node { position: relative; }
@media (min-width: 1051px) {
.flow-node.has-next::after {
content: "";
position: absolute;
top: 50%; right: -34px;
width: 34px; border-top: 2px dashed var(--blue-tint-2);
}
}
.node-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: var(--shadow);
overflow: hidden;
}
.node-card.destaque { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }
.node-head {
display: flex; align-items: center; gap: 8px;
padding: 10px 14px;
border-bottom: 1px solid var(--border);
font-weight: 700; font-size: 13.5px;
}
.node-head .n-icon {
width: 26px; height: 26px; border-radius: 8px;
background: var(--blue-tint); color: var(--blue);
display: flex; align-items: center; justify-content: center;
}
.node-head .spacer { margin-left: auto; display: flex; gap: 6px; }
.node-body { padding: 8px 14px 12px; }
.node-metric {
display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
padding: 7px 0; border-bottom: 1px solid var(--border);
}
.node-metric:last-child { border-bottom: none; }
.node-metric .m-label { font-size: 12px; color: var(--text-secondary); }
.node-metric .m-value { font-size: 15.5px; font-weight: 700; white-space: nowrap; }
.node-metric .m-value .m-sub { font-size: 11px; color: var(--text-muted); font-weight: 500; }
/* pipeline do nó central (etapa + taxa em pill) */
.pipe-step { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 6px 0 2px; }
.pipe-step .p-label { font-size: 10.5px; letter-spacing: 0.05em; font-weight: 700; text-transform: uppercase; color: var(--text-muted); }
.pipe-step .p-value { font-size: 17px; font-weight: 800; }
.pipe-step .p-right { text-align: right; }
.pipe-step .p-right .p-label { color: var(--blue-dark); }
/* Divisão entre variantes, logo abaixo de Visitas: a bifurcação do funil.
Barra em vez de número solto porque a pergunta que ela responde ("qual braço
recebeu mais gente") é de proporção, e proporção se lê de relance. */
.split-bloco { margin: 6px 0 2px; padding: 8px 0 2px; border-top: 1px dashed var(--border); }
.split-titulo {
font-size: 10.5px; letter-spacing: 0.05em; font-weight: 700; text-transform: uppercase;
color: var(--text-muted); margin-bottom: 6px;
}
.split-linha { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 11.5px; }
.split-nome { flex: 0 0 62px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.split-trilho { flex: 1 1 auto; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.split-barra { display: block; height: 100%; border-radius: 3px; background: var(--blue); }
.split-num { flex: 0 0 auto; font-weight: 700; color: var(--text-primary); min-width: 26px; text-align: right; }
.split-pct { flex: 0 0 42px; text-align: right; color: var(--text-muted); }
/* A variante em foco nas abas ganha destaque — é o elo entre o filtro lá em
cima e a fatia dela aqui embaixo. O realce é a faixa de fundo, não a cor da
barra: cor de barra diferente sugeriria grandeza diferente, e as três
medem a mesma coisa. */
.split-linha.ativo { background: var(--blue-tint); border-radius: 6px; margin: 0 -6px; padding: 2px 6px; }
.split-linha.ativo .split-nome { color: var(--text-primary); font-weight: 700; }
.pipe-rate {
display: flex; justify-content: center; align-items: center; gap: 6px; margin: 2px 0 4px;
}
/* Classe própria, e não `.pipe-rate span`: a linha da taxa também carrega o
botão de abrir/fechar a etapa de checkout, que não pode virar pílula. */
.pipe-rate .rate-pill {
border: 1px dashed var(--blue-tint-2);
background: var(--blue-tint);
color: var(--blue-dark);
border-radius: 8px;
font-size: 11px; font-weight: 700;
padding: 3px 12px;
}
.pipe-rate .rate-pill[title] { cursor: help; }
/* Botão que insere/remove o degrau de checkout no meio do funil. */
.pipe-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; padding: 0;
border: 1px solid var(--border); border-radius: 50%;
background: var(--surface); color: var(--text-secondary);
cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.pipe-btn:hover { color: var(--blue); border-color: var(--blue); background: var(--blue-tint); }
.pipe-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Marca de "tem explicação no title" ao lado do rótulo da etapa. */
.p-dica {
display: inline-flex; align-items: center; justify-content: center;
width: 12px; height: 12px; margin-left: 4px;
border: 1px solid var(--border-strong); border-radius: 50%;
font-size: 8.5px; font-weight: 700; color: var(--text-muted);
cursor: help; vertical-align: middle;
}
/* chips CPA/ROAS acima do nó de venda */
.node-chips { display: flex; gap: 8px; margin-bottom: 8px; justify-content: flex-end; }
.node-chip {
border: 1px solid var(--blue-tint-2);
background: var(--surface);
border-radius: 999px;
font-size: 11.5px; padding: 4px 12px;
}
.node-chip b { color: var(--blue-dark); margin-left: 4px; }
/* bumps pendurados */
.bump-tree { position: relative; margin-top: 4px; padding-top: 18px; }
.bump-tree::before {
content: ""; position: absolute; top: 0; left: 50%;
height: 18px; border-left: 2px solid var(--blue-tint-2);
}
.bump-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.bump-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 12px;
position: relative;
}
.bump-card .attach {
position: absolute; top: -9px; left: 10px;
background: var(--blue-tint); color: var(--blue-dark);
border: 1px solid var(--blue-tint-2);
border-radius: 6px; font-size: 10px; font-weight: 800; padding: 1px 7px;
}
.bump-card .b-nome { font-size: 11.5px; font-weight: 700; margin: 4px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bump-card .b-tag { font-size: 9px; letter-spacing: 0.06em; color: var(--text-muted); text-transform: uppercase; }
.bump-card .b-meta { font-size: 11.5px; color: var(--text-secondary); }
.bump-card .b-meta b { color: var(--text-primary); }
/* variantes */
.variant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.variant-url {
font-family: ui-monospace, Consolas, monospace;
font-size: 10.5px; color: var(--text-muted);
background: var(--page); border: 1px solid var(--border);
border-radius: 6px; padding: 3px 8px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.variant-check { position: absolute; top: 10px; right: 10px; }
/* comparação */
.compare-panel table td.better { color: var(--good); font-weight: 700; }
.compare-panel table td.worse { color: var(--bad); }
/* régua de produtos */
.ladder { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: 6px 2px; }
.ladder-card {
min-width: 170px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px 14px;
flex-shrink: 0;
}
.ladder-card .l-tipo { font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.ladder-card .l-nome { font-size: 12px; font-weight: 700; margin: 3px 0 6px; }
.ladder-card .l-num { font-size: 20px; font-weight: 800; }
.ladder-card .l-sub { font-size: 11px; color: var(--text-muted); }
.ladder-arrow {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 0 8px; flex-shrink: 0;
}
.ladder-arrow .pct {
background: var(--blue-tint); color: var(--blue-dark);
border: 1px solid var(--blue-tint-2);
border-radius: 999px; font-size: 11px; font-weight: 800; padding: 2px 10px;
margin-bottom: 2px;
}
.ladder-arrow .arr { color: var(--blue); font-size: 18px; }
/* conversões do funil */
.conv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.conv-card {
background: var(--page);
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px 16px;
}
.conv-card .conv-value { font-size: 24px; font-weight: 800; color: var(--blue-dark); letter-spacing: -0.02em; }
.conv-card .conv-label { font-size: 12.5px; font-weight: 600; color: var(--text-primary); margin-top: 2px; }
.conv-card .conv-sub { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
/* ---------- Visão Geral (mix FY) ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 1100px) { .grid-3 { grid-template-columns: 1fr; } }
.stat-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 0;
}
.stat-strip > div {
padding: 4px 18px;
border-right: 1px solid var(--border);
}
.stat-strip > div:last-child { border-right: none; }
/* Numa coluna só (celular), a divisória vira horizontal: a vertical sobrava
solta na borda direita de cada item. */
@media (max-width: 560px) {
.stat-strip > div { border-right: none; border-bottom: 1px solid var(--border); padding: 10px 6px; }
.stat-strip > div:last-child { border-bottom: none; }
}
.stat-strip .ss-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.stat-strip .ss-value { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.stat-strip .ss-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.badge-bad {
font-size: 11px; font-weight: 600;
color: var(--bad); background: var(--bad-tint);
border-radius: 999px; padding: 3px 10px;
}
.anomalias-list { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.link-arrow { font-size: 12.5px; color: var(--texto-marca); text-decoration: none; font-weight: 600; }
.link-arrow:hover { text-decoration: underline; }
.btn-danger-ghost {
border: 1px solid var(--bad-tint); background: var(--surface); color: var(--bad);
font: inherit; font-size: 12px; border-radius: 8px; padding: 5px 12px; cursor: pointer;
}
.btn-danger-ghost:hover { background: var(--bad-tint); }
.btn-primary {
border: none; background: var(--accent-solid); color: #fff; font: inherit; font-size: 13px;
font-weight: 600; border-radius: 9px; padding: 10px 16px; cursor: pointer;
transition: box-shadow 0.15s ease, filter 0.15s ease;
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: var(--glow-accent); }
@media (prefers-reduced-motion: reduce) { .btn-primary { transition: none; } }
/* ---------------- Modal (backdrop + painel centralizado) ---------------- */
.modal-backdrop {
position: fixed; inset: 0; z-index: 200;
background: rgba(16, 24, 40, 0.55);
display: flex; align-items: center; justify-content: center;
padding: 24px;
}
.modal-panel {
background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
box-shadow: 0 20px 60px rgba(16, 24, 40, 0.35);
width: 560px; max-width: 100%; max-height: 88vh;
display: flex; flex-direction: column; overflow: hidden;
}
.modal-panel.wide { width: 860px; }
.modal-head {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.modal-title { font-size: 14.5px; font-weight: 700; color: var(--text-primary); }
.modal-close {
border: none; background: transparent; color: var(--text-muted); cursor: pointer;
display: flex; align-items: center; justify-content: center; padding: 4px; border-radius: 6px;
}
.modal-close:hover { background: var(--bg-alt, rgba(0, 0, 0, 0.06)); color: var(--text-primary); }
.modal-body { padding: 18px; overflow-y: auto; }
/* ---------------- Modal de detalhe do criativo ---------------- */
.cm-video {
position: relative; width: 100%; aspect-ratio: 9 / 16; max-height: 520px;
background: #0a0a0a; border-radius: 10px; overflow: hidden;
display: flex; align-items: center; justify-content: center; margin: 0 auto;
}
.cm-video img, .cm-video video { width: 100%; height: 100%; object-fit: contain; display: block; }
/* O embed do Instagram tem fundo branco e chrome próprio (cabeçalho/legenda),
então precisa da largura toda e não pode herdar o object-fit acima. */
.cm-video iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.cm-video-empty { color: rgba(255, 255, 255, 0.35); }
.cm-play-overlay {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
color: rgba(255, 255, 255, 0.85); background: rgba(0, 0, 0, 0.15); pointer-events: none;
}
.cm-note { font-size: 12.5px; color: var(--text-muted); text-align: center; margin-top: 8px; }
/* Nome de campanha/conjunto abre o nível de baixo: mira grande, em vez de
exigir o clique exato na setinha. */
.name-cell.expansivel { cursor: pointer; }
.name-cell.expansivel:hover .cell-main { text-decoration: underline; text-underline-offset: 2px; }
/* Reordenar colunas arrastando o cabeçalho. Só o lado Meta é arrastável; o
bloco de resultado (.fy-col) fica fixo na frente e não recebe estas regras. */
.camp-table th.arrastavel { cursor: grab; }
.camp-table th.arrastavel:active { cursor: grabbing; }
.camp-table th.arrastando { opacity: 0.45; }
/* a barra marca de que lado a coluna vai entrar */
.camp-table th.drop-antes { box-shadow: inset 2px 0 0 0 var(--blue); }
.camp-table th.drop-depois { box-shadow: inset -2px 0 0 0 var(--blue); }
/* Redimensionar coluna: alça fina grudada na borda direita de cada th. Existe
em toda coluna (inclusive as fixas de ordem) — largura e ordem são coisas
diferentes. `th` já é um bloco de posicionamento válido por causa do
position:sticky (regra mais abaixo), então não precisa de position:relative
extra aqui. */
.camp-table th { position: relative; }
.camp-table .col-resize {
position: absolute; top: 0; right: -4px; bottom: 0; width: 8px;
cursor: col-resize; z-index: 6; touch-action: none;
}
.camp-table .col-resize:hover, .camp-table .col-resize.resizing { background: color-mix(in srgb, var(--blue) 35%, transparent); }
/* enquanto arrasta, trava cursor e seleção de texto na página inteira — sem
isto, mover o mouse rápido demais escapa da alça de 8px e o navegador
começa a selecionar texto da tabela no meio do gesto. */
body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-select: none !important; }
/* Modal do criativo: vídeo à esquerda, métricas à direita. Empilha no
estreito. Sem isto o .cc-stats ficava sem regra (a existente é escopada em
.creative-card) e as métricas viravam uma coluna única espremida. */
.cm-top { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 18px; align-items: start; }
.cm-top .cm-video { max-height: 380px; }
.creative-modal .cc-stats {
display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px;
}
.cm-actions { margin-top: 14px; display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
@media (max-width: 760px) {
.cm-top { grid-template-columns: 1fr; }
}
/* ===========================================================================
Acabamento — foco visível, tabela de métricas, toast e modelos de coluna.
=========================================================================== */
/* ---------- Foco de teclado ----------
Um anel só, igual em toda a interface. Antes cada controle resolvia sozinho
(o campo de orçamento chegava a zerar o outline sem pôr nada no lugar), então
navegar de Tab pela tabela deixava de mostrar onde você estava. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--blue);
outline-offset: 2px;
border-radius: 6px;
}
.budget-input:focus-visible { outline-offset: 0; }
/* ---------- Números da tabela ----------
Casas decimais na mesma vertical. Com tabular-nums (já herdado de
.data-table td) é o que permite comparar uma coluna inteira de relance em vez
de ler valor por valor — é a diferença entre uma tabela e uma planilha. */
.data-table td.num, .data-table th.num { text-align: right; }
.data-table td.num .cell-sub { text-align: right; }
/* o cabeçalho é flex por causa da seta de ordenação */
.camp-table th.num { text-align: right; }
/* ---------- Cabeçalho e coluna de nome fixos ----------
A tabela tem mais de 20 colunas. Sem fixar, rolar pra direita perde de qual
campanha é a linha, e rolar pra baixo perde qual métrica é a coluna — que é
exatamente quando o número deixa de significar algo.
Desde 01/10/2026 quem rola na vertical é a PÁGINA (a barra fica no canto da
tela, como na VK), não um quadro de altura fixa com barra cinza dentro dos
dados. A coluna de nome segue sticky na rolagem horizontal; a barra de cima
gruda no topo e o cabeçalho desce logo abaixo dela pelo --cab-y que
components/RolagemTabela.js calcula (sticky de verdade não serve: o
overflow-x faz da .table-scroll um rolador nos dois eixos). */
.rolagem-topo.fixa {
position: sticky;
top: 0;
z-index: 6;
/* faixa da cor do painel em volta da barra quando ela gruda no topo */
height: 18px;
border-top: 6px solid var(--surface);
border-bottom: 4px solid var(--surface);
background: var(--surface);
margin-bottom: 4px;
}
.table-scroll.fixa thead th { transform: translateY(var(--cab-y, 0px)); }
.table-scroll.fixa table[data-preso] thead th {
box-shadow: inset 0 -1px 0 var(--border), 0 10px 12px -10px rgba(0, 0, 0, 0.35);
}
.table-scroll.fixa table[data-preso] thead th:first-child {
box-shadow: 1px 0 0 var(--border), inset 0 -1px 0 var(--border), 0 10px 12px -10px rgba(0, 0, 0, 0.35);
}
.camp-table thead th {
position: sticky;
top: 0;
z-index: 3;
background: var(--surface);
/* sticky não pinta borda: a linha vem de box-shadow pra não sumir na rolagem */
box-shadow: inset 0 -1px 0 var(--border);
border-bottom: none;
}
/* Fundo explícito em toda linha pra que a primeira célula possa herdá-lo — sem
isso a coluna fixa fica translúcida e o conteúdo passa por baixo dela. */
.camp-table tbody tr { background: var(--surface); }
.camp-table tbody tr.lvl-1 { background: color-mix(in srgb, var(--text-primary) 3%, var(--surface)); }
.camp-table tbody tr.lvl-2 { background: color-mix(in srgb, var(--text-primary) 6%, var(--surface)); }
.camp-table tbody tr.group-row { background: var(--page); }
.camp-table tbody tr.total-row { background: var(--blue-tint); }
.camp-table tbody tr:hover { background: color-mix(in srgb, var(--blue) 6%, var(--surface)); }
.camp-table th:first-child,
.camp-table td:first-child {
position: sticky;
left: 0;
z-index: 2;
background: inherit;
box-shadow: 1px 0 0 var(--border);
}
.camp-table thead th:first-child { z-index: 4; background: var(--surface); box-shadow: 1px 0 0 var(--border), inset 0 -1px 0 var(--border); }
.camp-table .total-row td:first-child { background: var(--blue-tint); }
/* Cabeçalho de conta com os totais nas colunas (12/10/2026): a primeira célula
é fixa como a das campanhas, e o nome longo da conta corta com reticências
(o nome inteiro fica no title). A contagem de campanhas não corta. */
.camp-table tr.group-row[data-group] .group-label { display: flex; align-items: center; gap: 4px; min-width: 0; }
.camp-table tr.group-row[data-group] .group-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.camp-table .group-row .group-count { flex: none; font-weight: 400; color: var(--text-muted); }
.camp-table tr.group-row td:first-child { background: var(--page); }
/* A faixa das métricas-chave (laranja) continua na linha da conta. */
.camp-table tr.group-row td.fy-col { background: color-mix(in srgb, var(--blue) 9%, var(--page)); }
/* A linha de subtotal/total repete o fundo do bloco de resultado; sem isto a
faixa laranja das colunas FY cortava no meio da linha de total. */
.camp-table .total-row td.fy-col { background: var(--blue-tint-2); }
/* Marcador de métrica com teto (connect rate acima de 100%). Discreto de
propósito: o valor exibido continua sendo o principal, o asterisco só avisa
que há explicação no tooltip. */
.metric-flag {
color: var(--warn);
font-weight: 700;
margin-left: 2px;
cursor: help;
}
/* ---------- Toast ---------- */
.toast-stack {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 300;
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-end;
pointer-events: none;
}
.toast {
pointer-events: auto;
max-width: min(420px, calc(100vw - 36px));
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(16, 24, 40, 0.16), 0 2px 6px rgba(16, 24, 40, 0.08);
padding: 11px 14px;
font-size: 13px;
line-height: 1.45;
color: var(--text-primary);
cursor: pointer;
/* entra deslizando de baixo; ease-out exponencial, já legível no primeiro frame */
opacity: 0;
transform: translateY(8px);
transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.toast.visivel { opacity: 1; transform: translateY(0); }
.toast.saindo { opacity: 0; transform: translateY(4px); }
/* a cor entra pela borda superior, não por barra lateral colorida */
.toast-ok { border-top: 2px solid var(--good); }
.toast-erro { border-top: 2px solid var(--bad); }
.toast-info { border-top: 2px solid var(--blue); }
@media (prefers-reduced-motion: reduce) {
.toast { transition: opacity 0.12s linear; transform: none; }
.toast.visivel, .toast.saindo { transform: none; }
}
/* ---------- Falha de carga ----------
Faixa fixa no rodapé quando parte da tela não carregou ou a atualização por
trás falhou (main.js, atualizarFaixaFalha). Fica até a próxima carga boa: não
é toast porque o número errado na tela continua lá enquanto ela não some. */
.faixa-falha {
position: fixed;
left: 50%;
bottom: 18px;
transform: translateX(-50%);
z-index: 290;
width: max-content;
max-width: min(760px, calc(100vw - 32px));
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px 10px 14px;
background: var(--warn-tint);
color: var(--text-primary);
border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(16, 24, 40, 0.18);
font-size: 13px;
line-height: 1.45;
}
.faixa-falha > svg { flex: none; color: var(--warn); }
.faixa-falha > span { flex: 1; min-width: 0; }
.faixa-falha button {
flex: none;
border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent);
background: transparent;
color: var(--warn);
font: inherit;
font-weight: 600;
border-radius: 8px;
padding: 5px 10px;
cursor: pointer;
}
.faixa-falha button:hover { background: color-mix(in srgb, var(--warn) 12%, transparent); }
@media (max-width: 640px) {
.faixa-falha { left: 16px; right: 16px; bottom: 12px; transform: none; width: auto; max-width: none; flex-wrap: wrap; }
}
/* Tela de erro quando o workspace aberto não tem nenhuma carga boa. */
.erro-carga { max-width: 560px; margin: 40px auto; padding: 28px 28px 24px; text-align: center; }
.erro-carga-icone { color: var(--warn); margin-bottom: 8px; }
.erro-carga h2 { font-size: 18px; margin: 0 0 8px; }
.erro-carga p { color: var(--text-secondary); font-size: 13px; line-height: 1.5; margin: 0 0 10px; }
.erro-carga .erro-carga-motivo { font-size: 12px; color: var(--text-muted); word-break: break-word; }
.erro-carga .btn-primary { margin-top: 8px; }
/* ---------- Modelos de coluna (popover) ---------- */
.modelo-lista { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.modelo-item {
display: flex;
align-items: center;
gap: 6px;
border-radius: 7px;
padding: 2px 4px 2px 2px;
}
.modelo-item:hover { background: var(--page); }
.modelo-item.ativo { background: var(--blue-tint); }
.modelo-nome {
flex: 1;
min-width: 0;
text-align: left;
border: none;
background: transparent;
font: inherit;
font-size: 12.5px;
color: var(--text-primary);
padding: 5px 6px;
border-radius: 6px;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.modelo-item.ativo .modelo-nome { font-weight: 600; color: var(--blue-dark); }
.modelo-acoes { display: flex; gap: 2px; flex-shrink: 0; }
.modelo-acoes button {
border: none;
background: transparent;
color: var(--text-muted);
font: inherit;
font-size: 11px;
padding: 4px 6px;
border-radius: 6px;
cursor: pointer;
}
.modelo-acoes button:hover { background: var(--surface); color: var(--text-primary); }
.modelo-novo { width: 100%; justify-content: center; margin-bottom: 4px; }
.modelo-form { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.modelo-form .cc-search { flex: 1; min-width: 130px; }
.modelo-form .btn-primary { padding: 7px 12px; font-size: 12px; }
.pop-hint {
font-size: 11.5px;
color: var(--text-muted);
line-height: 1.5;
padding: 4px 2px 8px;
}
/* ---------- Gráfico de barras + linha com dica (components/ComboChart.js) ---------- */
.combo-chart { position: relative; }
.cb-legenda { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.cb-leg {
display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary);
padding: 3px 10px; border-radius: 999px; background: var(--page);
}
.cb-leg i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.cb-rolagem { overflow-x: auto; padding-bottom: 4px; }
.cb-area { position: relative; width: max-content; min-width: 100%; }
.cb-area svg { display: block; }
.cb-dica {
position: absolute; z-index: 5; pointer-events: none; min-width: 170px;
background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); padding: 9px 11px; font-size: 12px;
}
/* Explícito de propósito: um display definido aqui anularia o [hidden]. */
.cb-dica[hidden] { display: none; }
.cb-dica-t { font-weight: 700; margin-bottom: 5px; color: var(--text-primary); }
.cb-dica-l { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); line-height: 1.65; white-space: nowrap; }
.cb-dica-l i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.cb-dica-l b { color: var(--text-primary); font-weight: 700; }
/* ---------- Visão Geral: filtros, abas e "Personalizar layout" ---------- */
.vg-filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.vg-espaco { flex: 1 1 auto; }
.vg-pop { min-width: 260px; max-height: 340px; overflow-y: auto; }
.vg-abas-topo { margin: 0 0 12px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.vg-bloco { display: block; }
/* Modo de edição: cada bloco ganha uma barra para arrastar ou mover com setas. */
.vg-bloco.editando {
border: 1px dashed var(--blue-tint-2); border-radius: 14px; padding: 8px; margin-bottom: 12px;
background: var(--page);
}
.vg-bloco.editando.arrastando { opacity: 0.45; }
.vg-bloco.editando.alvo { border-color: var(--blue); border-style: solid; }
.vg-bloco-barra { display: flex; align-items: center; gap: 8px; padding: 2px 4px 8px; font-size: 13px; color: var(--text-secondary); }
.vg-bloco-barra b { color: var(--text-primary); }
.vg-alca { cursor: grab; font-size: 16px; line-height: 1; color: var(--text-muted); }
/* Na edição, o conteúdo encolhe e não recebe clique: arrastar tem de mover o
bloco, não abrir o gráfico que está dentro dele. */
.vg-bloco.editando .vg-bloco-corpo { pointer-events: none; opacity: 0.85; max-height: 220px; overflow: hidden; }
/* ---------- Popup de colunas (tela de Campanhas) ---------- */
.colm-fundo {
position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.55);
display: flex; align-items: center; justify-content: center; padding: 16px;
}
.colm {
width: min(920px, 100%); max-height: min(720px, 92vh); display: flex; flex-direction: column;
background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4); overflow: hidden;
}
.colm-topo { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.colm-topo h3 { margin: 0; }
.colm-busca { flex: 1 1 auto; min-width: 0; }
.colm-modelos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.colm-modelos .modelo-item { display: inline-flex; align-items: center; gap: 4px; }
.colm-corpo { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 0; flex: 1 1 auto; }
.colm-catalogo, .colm-ordem { overflow-y: auto; padding: 10px 16px 14px; min-height: 0; }
.colm-ordem { border-left: 1px solid var(--border); background: var(--page); }
.colm-grupo-nome, .colm-sec {
font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
color: var(--text-muted); margin: 10px 0 4px;
}
.colm-item { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13px; }
.colm-item label { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; cursor: pointer; }
.colm-item[hidden], .colm-grupo[hidden], .colm-vazio[hidden] { display: none; }
.colm-nx { font-size: 9px; font-weight: 700; color: var(--blue-dark); background: var(--blue-tint); border-radius: 4px; padding: 1px 5px; }
.colm-estrela {
border: none; background: transparent; cursor: pointer; line-height: 0;
color: var(--text-muted); padding: 4px; border-radius: 6px;
}
.colm-estrela:hover { background: var(--blue-tint); color: var(--blue); }
.colm-estrela.ativa { color: var(--blue); }
.colm-estrela.ativa svg { fill: currentColor; }
.colm-sec-icone { display: inline-flex; vertical-align: -1px; color: var(--blue); }
.colm-sec-icone svg { fill: currentColor; }
.colm-ordem-topo { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); margin: 2px 0 4px; }
.colm-ord {
display: flex; align-items: center; gap: 6px; padding: 6px 8px; margin: 3px 0; font-size: 13px;
background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
}
/* Métrica-chave: o item inteiro leva a cor da marca, em vez da listra
lateral grossa que só ela tinha. */
.colm-ord.chave {
background: color-mix(in srgb, var(--blue) 9%, var(--surface));
border-color: color-mix(in srgb, var(--blue) 38%, var(--border));
}
.colm-ord.controle { opacity: 0.8; }
.colm-ord[draggable="true"] { cursor: grab; }
.colm-ord.arrastando { opacity: 0.45; }
.colm-ord.alvo { border-color: var(--blue); }
.colm-ord button { border: none; background: transparent; color: var(--text-muted); cursor: pointer; padding: 1px 5px; border-radius: 5px; }
.colm-ord button:hover { background: var(--blue-tint); color: var(--text-primary); }
.colm-alca { color: var(--text-muted); width: 12px; text-align: center; }
.colm-rotulo { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.colm-vazio { color: var(--text-muted); font-size: 13px; padding: 10px 0; }
.colm-rodape { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border); }
.colm-espaco { flex: 1 1 auto; }
@media (max-width: 720px) {
.colm-corpo { grid-template-columns: 1fr; }
.colm-ordem { border-left: none; border-top: 1px solid var(--border); }
}
/* No popup, o "+ Salvar layout atual" fica na linha dos modelos, não na largura toda. */
.colm-modelos .modelo-novo { width: auto; margin: 0; }
.colm-modelos .modelo-form { display: inline-flex; margin: 0; }
/* ---------- Print de resultado (card para stories) ----------
Controles à esquerda e a prévia do card à direita, presa na tela enquanto a
pessoa mexe. No celular a prévia vem primeiro, com os botões logo embaixo:
é de lá que ele compartilha para o Instagram e o WhatsApp. */
.print-layout { display: grid; grid-template-columns: minmax(300px, 440px) minmax(0, 1fr); gap: 16px; align-items: start; }
.print-controles { margin-bottom: 0; }
.print-grupo + .print-grupo { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.print-grupo h3 { margin: 0 0 8px; }
.print-nota { font-size: 12px; color: var(--text-muted); margin: 6px 0 8px; line-height: 1.45; }
.print-modelos { display: flex; flex-wrap: wrap; gap: 6px; }
.print-modelo { display: inline-flex; align-items: center; }
.print-modelo-x {
border: none; background: transparent; color: var(--text-muted); cursor: pointer;
padding: 4px; border-radius: 6px; line-height: 0;
}
.print-modelo-x:hover { color: var(--bad); background: var(--bad-tint); }
.print-metrica {
display: flex; align-items: center; gap: 8px; padding: 5px 8px; margin-bottom: 5px;
border: 1px solid var(--border); border-radius: 8px; font-size: 13px;
}
.print-metrica label { display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 1 1 auto; }
.print-metrica.ativa {
background: color-mix(in srgb, var(--blue) 8%, var(--surface));
border-color: color-mix(in srgb, var(--blue) 35%, var(--border));
}
.print-destaque {
font-size: 10.5px; font-weight: 700; color: var(--texto-marca);
background: var(--blue-tint); border-radius: 999px; padding: 2px 8px;
}
.print-ordem { display: inline-flex; gap: 2px; }
.print-ordem .cc-tab { padding: 2px 8px; }
.print-ordem .cc-tab:disabled { opacity: 0.35; cursor: default; }
.print-salvar { display: flex; gap: 6px; margin-top: 10px; }
.print-salvar .cc-search { flex: 1 1 auto; min-width: 0; }
.print-select, .print-titulo, #print-busca-camp { width: 100%; margin: 8px 0 4px; }
#print-recorte .cc-tabs { margin-bottom: 4px; }
/* Lista de campanhas: a única rolagem interna da tela, curta, só para o
seletor não empurrar o resto dos controles para longe. */
.print-camps { max-height: 260px; overflow-y: auto; margin: 6px 0; padding-right: 4px; }
.print-camp { align-items: flex-start; }
.print-camp-nome { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; font-size: 12.5px; }
.print-camp-nome small { color: var(--text-muted); font-size: 11px; margin-top: 1px; }
.print-previa { position: sticky; top: 16px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.print-canvas {
width: min(100%, 390px); height: auto; aspect-ratio: 9 / 16;
border-radius: 22px; border: 1px solid var(--border); box-shadow: var(--sombra-card);
background: var(--surface);
}
.print-acoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.print-acoes button { display: inline-flex; align-items: center; gap: 7px; }
.print-acoes .btn-ghost { padding: 9px 14px; }
.print-dica { font-size: 12px; color: var(--text-muted); text-align: center; max-width: 390px; margin: 0; line-height: 1.45; }
@media (max-width: 960px) {
.print-layout { grid-template-columns: 1fr; }
.print-previa { position: static; order: -1; }
}
/* ---------- API e MCP (06/10/2026) ---------- */
.api-acesso { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 12px 20px; }
.api-acesso > span:first-child { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.api-acesso svg { color: var(--blue); }
.api-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.api-campo { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.api-campo > span:first-child { font-weight: 600; }
.api-campo .cc-search { min-width: 0; width: 100%; }
.api-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--page); border: 1px solid var(--border); width: fit-content; }
.api-seg label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.api-seg label:has(input:checked) { background: var(--surface); color: var(--texto-marca); font-weight: 600; box-shadow: var(--sombra-linha); }
.api-seg input { accent-color: var(--blue); margin: 0; }
.api-seg .api-desligado { opacity: 0.45; cursor: not-allowed; }
.api-ws-lista { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.api-ws { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-primary); padding: 6px 10px; border-radius: 8px; background: var(--page); cursor: pointer; }
.api-ws input { accent-color: var(--blue); margin: 0; }
.api-criado { position: relative; overflow: hidden; }
.api-criado::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--blue), transparent 75%); }
.api-criado h3 { display: inline-flex; align-items: center; gap: 8px; }
.api-criado h3 svg { color: var(--blue); }
.api-cmd { margin-bottom: 12px; }
.api-cmd-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.api-cmd-rotulo { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.api-copiar { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 12px; }
.api-pre { margin: 0; white-space: pre-wrap; word-break: break-all; color: var(--text-primary); }
.api-grade-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 6px; }
.api-grade-info .cell-sub { font-size: 12px; line-height: 1.5; margin-top: 4px; }
.api-grade-info code, .api-criado code { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; background: var(--page); padding: 1px 5px; border-radius: 5px; }
/* ===========================================================================
Análise do criativo por IA (06/10/2026) — caixa do modal de Criativos e
tela do dono. Verde e vermelho só no veredito (estado), como no resto.
=========================================================================== */
.ia-box { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--sombra-card); }
.ia-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ia-titulo { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; }
.ia-titulo svg { color: var(--blue); }
.ia-meta { font-size: 11.5px; color: var(--text-muted); }
.ia-acoes { margin-left: auto; display: inline-flex; gap: 14px; }
.ia-link { background: none; border: none; padding: 0; font: inherit; font-size: 12.5px; color: var(--texto-marca); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; display: inline-flex; align-items: center; gap: 4px; }
.ia-link:disabled { opacity: 0.5; cursor: default; }
.ia-sec-titulo { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin: 14px 0 8px; }
.ia-frase { margin: 6px 0 8px; font-size: 14px; line-height: 1.5; color: var(--text-primary); }
.ia-suave { color: var(--text-secondary); font-size: 12.5px; line-height: 1.5; margin: 6px 0; }
.ia-nota { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.45; }
.ia-sub { font-size: 12px; font-weight: 700; margin: 12px 0 6px; }
.ia-lista { margin: 4px 0 6px; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
.ia-lista li { margin: 2px 0; }
.ia-veredito { display: flex; align-items: center; gap: 10px; }
.ia-selo { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--text-primary); }
.ia-selo--bom { background: var(--good-tint); color: var(--good); }
.ia-selo--ruim { background: var(--bad-tint); color: var(--bad); }
.ia-selo--atencao { background: var(--warn-tint); color: var(--warn); }
.ia-confianca { font-size: 12px; color: var(--text-muted); }
.ia-onde { font-size: 13px; margin: 8px 0; color: var(--text-secondary); line-height: 1.5; }
.ia-testes { display: grid; gap: 8px; }
.ia-teste { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.ia-teste-tipo { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: var(--blue-tint); color: var(--texto-marca); white-space: nowrap; }
.ia-teste-ideia { font-size: 13px; font-weight: 600; line-height: 1.45; }
.ia-teste-porque { font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.45; }
.ia-numeros { margin-top: 12px; font-size: 12.5px; }
.ia-numeros summary, .ia-transcricao summary { cursor: pointer; color: var(--texto-marca); font-weight: 600; font-size: 12.5px; }
.ia-tabela { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ia-tabela th, .ia-tabela td { padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: right; }
.ia-tabela th:first-child, .ia-tabela td:first-child { text-align: left; color: var(--text-secondary); }
.ia-tabela th { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.ia-leitura { padding-bottom: 8px; border-bottom: 1px dashed var(--border); }
.ia-etiquetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; }
.ia-rotulo { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.03em; }
.ia-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ia-chip { font-size: 11.5px; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--border); }
.ia-chip--marca { background: var(--blue-tint); color: var(--texto-marca); border-color: transparent; }
.ia-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-top: 10px; }
.ia-cartao { padding: 12px 14px; border-radius: 10px; background: var(--surface-2); font-size: 13px; line-height: 1.5; min-width: 0; }
.ia-cartao p { margin: 4px 0; color: var(--text-secondary); }
.ia-cartao b { color: var(--text-primary); }
.ia-cartao .ia-fala { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.ia-trilha { display: flex; gap: 2px; height: 10px; border-radius: 6px; overflow: hidden; margin: 4px 0 8px; }
.ia-trecho { min-width: 4px; background: var(--serie-4); }
.ia-trecho--gancho { background: var(--serie-1); }
.ia-trecho--problema { background: var(--serie-5); }
.ia-trecho--promessa { background: var(--serie-2); }
.ia-trecho--prova { background: var(--serie-3); }
.ia-trecho--mecanismo { background: var(--serie-6); }
.ia-trecho--oferta { background: var(--blue-dark); }
.ia-trecho--cta { background: var(--accent-solid); }
.ia-partes { margin: 0; padding-left: 0; list-style: none; font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }
.ia-partes li { margin: 3px 0; }
.ia-tempo { display: inline-block; min-width: 64px; font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: 11.5px; }
.ia-politica { margin-top: 10px; padding: 10px 14px; border-radius: 10px; background: var(--warn-tint); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }
.ia-politica .ia-rotulo { color: var(--warn); }
.ia-transcricao { margin-top: 12px; }
.ia-transcricao > div { max-height: 260px; overflow: auto; margin-top: 8px; padding-right: 6px; font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
.ia-transcricao p { margin: 3px 0; }
.ia-aviso { font-size: 12px; padding: 8px 12px; border-radius: 8px; background: var(--warn-tint); color: var(--warn); margin: 6px 0; }
.ia-erro { font-size: 13px; padding: 10px 12px; border-radius: 8px; background: var(--bad-tint); color: var(--bad); margin: 8px 0; }
.ia-vazio, .ia-carregando { font-size: 13px; color: var(--text-secondary); padding: 6px 0; line-height: 1.5; }
.ia-convite p { margin: 0 0 10px; font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
.ia-botao { display: inline-flex; align-items: center; gap: 7px; }
.ia-progresso { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: var(--blue-tint); margin-bottom: 8px; }
.ia-fase { font-weight: 600; font-size: 13px; }
.ia-passos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ia-passos span { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--surface); color: var(--text-muted); }
.ia-passos span.agora { color: var(--texto-marca); font-weight: 700; }
.ia-passos span.feito { color: var(--text-secondary); text-decoration: line-through; }
.ia-girando { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--blue) 30%, transparent); border-top-color: var(--blue); animation: ia-girar 0.9s linear infinite; margin-top: 1px; }
@keyframes ia-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ia-girando { animation-duration: 2.4s; } }
/* Tela do dono: Análise por IA */
.ia-situacao { display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
.ia-situacao-ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted); flex: none; }
.ia-situacao-ponto.ligada { background: var(--good); box-shadow: 0 0 0 4px var(--good-tint); }
.ia-passos-lista { margin: 4px 0 8px; padding-left: 20px; font-size: 13px; line-height: 1.7; color: var(--text-secondary); }
.api-grade-info p { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-secondary); }
/* Selo "Extensão para Chrome" ao lado do título de Campanhas, como na VK */
.topbar .title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ext-selo { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-secondary); font-size: 11.5px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: border-color 0.15s ease, color 0.15s ease; }
.ext-selo:hover { border-color: var(--blue); color: var(--texto-marca); }
.ext-selo svg { color: var(--blue); }
.ext-selo--ok svg { color: var(--good); }
/* Página da extensão do Chrome */
.ext-estado { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ext-estado > div { flex: 1; min-width: 220px; }
.ext-estado-icone { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-secondary); flex: none; }
.ext-estado--ok .ext-estado-icone { background: var(--good-tint); color: var(--good); }
.ext-aviso { margin-top: 6px; font-size: 12.5px; color: var(--warn); }
.ext-botao { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.ext-botao--grande { padding: 12px 20px; font-size: 14px; margin: 6px 0 10px; }
.ext-instalar h3 { margin: 0 0 4px; }
.ext-passos { margin: 12px 0 6px; padding-left: 22px; display: grid; gap: 16px; font-size: 13px; }
.ext-passos li { padding-left: 4px; }
.ext-passos li > b { display: block; margin-bottom: 6px; }
.ext-passos li > .cell-sub { display: block; margin-top: 6px; line-height: 1.5; }
.ext-endereco { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ext-endereco code { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; background: var(--page); padding: 3px 8px; border-radius: 6px; }
.ext-print { width: 100%; max-width: 980px; border-radius: 10px; border: 1px solid var(--border); display: block; }
/* ===========================================================================
Tipografia Underdogz (12/10/2026): Barlow Condensed nos títulos, rótulos e
números grandes — pesada, maiúscula, com respiro entre letras —, Barlow no
corpo. As fontes vêm do Google Fonts (index.html).
=========================================================================== */
h1, h2, h3, h4,
.topbar h1, .login-brand, .sidebar-brand, .nav-section,
.kpi-card .value, .kpi-card .label, .hero-value, .stat-strip .ss-value, .stat-strip .ss-label,
.node-metric .m-value, .node-head, .pipe-step .p-value, .pipe-step .p-label,
.conv-card .conv-value, .cc-stat-box .lbl, .pop-section, .bm-header td,
.inline-form label, .ladder-card .l-tipo, .bump-card .b-tag, .data-table th,
.btn-primary, .split-titulo {
font-family: var(--font-display);
}
.topbar h1 { font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1; }
.panel h3 { font-size: 17px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.kpi-card .label { text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; font-weight: 600; }
.kpi-card .value { font-size: 32px; font-weight: 800; letter-spacing: 0.01em; }
.hero-value { font-size: 42px; font-weight: 800; letter-spacing: 0; }
.stat-strip .ss-value { font-size: 24px; font-weight: 800; }
.node-head { font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; }
.node-metric .m-value { font-size: 18px; font-weight: 700; }
.pipe-step .p-value { font-size: 20px; }
.nav-section { letter-spacing: 0.14em; }
.sidebar-brand .brand-nome { font-weight: 800; font-size: 17px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue); line-height: 1.1; }
.login-brand { font-size: 32px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); }
.btn-primary { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; font-size: 14px; padding: 9px 16px; }
.data-table th { text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; }
/* O logo tem cantos próprios: sem moldura por cima. */
.sidebar-brand .brand-logo, .topbar .title-icon img, .login-logo { border-radius: 9px; }