/* ============================================================
   Tema (§1 e §17, 28/09/2026): toda cor do painel sai destes tokens. O escuro (azul-marinho/grafite, acento dourado)
   é o padrão; o claro só redefine os tokens em [data-theme="light"]. Quem marca o <html> é o public/tema.js (no
   <head>, antes da primeira pintura) e o menu "Aparência" do app.js. As transparências usam o trio RGB (--x-rgb) pra
   cada tema escolher a cor de base sem mexer no alfa de cada regra.
   Acabamento (§17, 30/09/2026): fundo do escuro mais perto do preto e superfícies um pouco mais grafite (mesma
   identidade, contraste maior), violeta como segundo acento de DADOS (a mídia do Meta), vidro, fio de luz, sombras e
   brilhos do fundo em camadas — tudo em token, com par AA conferido nos dois temas (qa: acabamento/contraste.mjs).
   Liora (13/11/2026): marca azul-marinho #0B2A5B, azul royal #1E5BB8, dourado #E8A93A, branco e tons quentes; títulos
   em Fredoka e texto em Nunito, servidas pelo próprio painel (public/fonts). Paleta dos gráficos derivada da marca e
   validada para daltonismo (dataviz/validate_palette.js, pares adjacentes e as 3 primeiras em todos os pares), nesta
   ordem fixa: mídia do Meta = azul, site = verde-azulado, receita = dourado, misto = rosa.
   ============================================================ */
@font-face { font-family: "Fredoka"; src: url("/fonts/fredoka-latin-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/fonts/nunito-latin-wght-normal.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; src: url("/fonts/nunito-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --scheme: dark;
  --bg: #051631;
  --bg-top: #0a2350; /* topo da camada de fundo (profundidade: clareia um tom no alto da tela) */
  --card: #0b2147;
  --card-2: #0e2753;
  --line: rgba(251, 246, 236, 0.1);
  --text: #fbf6ec;
  --text-rgb: 251, 246, 236;
  --ink-rgb: 255, 255, 255; /* véu das superfícies translúcidas (clareia no escuro, escurece no claro) */
  --muted: #a9b6cc;
  --muted-rgb: 169, 182, 204;
  --gold: #e8a93a; /* dourado como TEXTO/linha */
  --gold-rgb: 232, 169, 58;
  --gold-fill: #e8a93a; /* dourado como FUNDO de botão/chip ativo (texto por cima em --on-gold) */
  --gold-2: #f6cc72;
  --gold-soft: rgba(232, 169, 58, 0.14);
  --on-gold: #0b2a5b;
  --on-sem: #0b2a5b; /* texto por cima de verde/dourado/vermelho cheios (selos da Saúde) */
  --heat: #e8a93a;
  --cyan: #3cc4ae;
  --cyan-rgb: 60, 196, 174;
  --cyan-2: #8be3d4;
  --red: #ff6b6b;
  --red-rgb: 255, 107, 107;
  --red-2: #ff9b9b;
  --red-ink: #ffd0d0;
  --red-hot: #ff8f8f;
  --green: #4ade80;
  --green-rgb: 74, 222, 128;
  --amber: #f2a53a;
  --amber-rgb: 242, 165, 58;
  --cost: #8fc9e8;
  --cost-rgb: 143, 201, 232;
  --wa-rgb: 37, 211, 102;
  --wa-text: #6ee7a0;
  --deep-rgb: 3, 14, 33;
  --sticky-sum: #132e5c;
  --sticky-hover: #12305f;
  --thumb-1: #173a70;
  --thumb-2: #0d2550;
  --pre-bg: rgba(0, 0, 0, 0.35);
  --pre-text: #dfe7ee;
  --note-bg: #4a4215;
  --note-line: #6b5f1c;
  --note-ink: #ffe9a8;
  --note-input: #2a2610;
  --note-ph: #b5a25c;
  /* Gráficos (Chart.js): o app.js lê estes na hora de desenhar e redesenha ao trocar de tema. */
  --chart-text: #a9b6cc;
  --chart-grid: rgba(251, 246, 236, 0.07);
  --chart-border: rgba(251, 246, 236, 0.1);
  --chart-tip-bg: #071a3a;
  --chart-tip-line: rgba(251, 246, 236, 0.16);
  --chart-tip-text: #fff;
  --chart-gold: #be8318;
  --chart-cyan: #1f9e88;
  --chart-cyan-line: #1f9e88;
  --chart-cyan-fill: rgba(31, 158, 136, 0.14);
  --chart-green: #4ade80;
  --chart-pos: #3ecf8e;
  --chart-neg: #e5484d;
  --chart-sub: #d9608f;
  --chart-violet: #4f86e0;
  /* Acabamento (§17, 30/09/2026): violeta = segundo acento de dados (mídia do Meta); vidro só na faixa fixa e nos
     painéis flutuantes; fio de luz no topo e sombra suave nas superfícies; brilhos da camada de fundo (alfa). */
  --violet: #8fb3f2;
  --violet-rgb: 79, 134, 224;
  --glass: rgba(6, 22, 49, 0.82);
  --glass-pop: rgba(12, 34, 72, 0.94);
  --edge: rgba(255, 255, 255, 0.05);
  --shadow-card: inset 0 1px 0 var(--edge), 0 14px 34px -24px rgba(0, 0, 0, 0.95);
  --shadow-dock: 0 14px 32px -26px rgba(0, 0, 0, 1);
  --glow-gold: 0.085;
  --glow-cyan: 0.06;
  --glow-violet: 0.075;
  --mark-a: 0.3; /* (antigo: dourado no alto do quadradinho da marca) (no claro, mais fraco: texto dourado ≥ 4,5:1) */
  --spark-site: #1f9e88;
  --spark-midia: #4f86e0;
  --spark-receita: #be8318;
  --spark-misto: #d9608f;
  /* Mapa por região (30/09/2026): rampa sequencial de UM tom (violeta = mídia do Meta), do fraco ao forte — no escuro o
     forte é o mais claro. --map-ink-N = sigla por cima de cada tom (AA conferido: ≥ 5,7:1). "Sem dados" é cinza neutro
     hachurado, fora da rampa (nunca lido como o menor valor). */
  --map-1: #2f2466;
  --map-2: #48379a;
  --map-3: #6852cc;
  --map-4: #9983f2;
  --map-5: #d0c5ff;
  --map-ink-1: #ece8ff;
  --map-ink-2: #f3f0ff;
  --map-ink-3: #ffffff;
  --map-ink-4: #0b0820;
  --map-ink-5: #0b0820;
  --map-none: #1f2a35;
  --map-none-line: #3a4754;
  --map-none-ink: #c9d2da;
  --map-edge: rgba(245, 242, 233, 0.16);
  /* Estrutura da conta (29/10/2026): linha-guia da árvore (campanha → conjunto → anúncio), separador entre campanhas e o separador fino
     entre as linhas de dentro de uma campanha aberta. A guia é decorativa (o nível também vai no recuo, no chip e no leitor de tela);
     o --line puro (0,09) quase some numa linha de 1 px, por isso um pouco mais forte. */
  --hier-guia: rgba(245, 242, 233, 0.24);
  --hier-sep: rgba(245, 242, 233, 0.15);
  --hier-sep-fino: rgba(245, 242, 233, 0.055);
  --font-texto: Nunito, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-titulo: Fredoka, Nunito, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fz: 1; /* escala da fonte: 1 no normal, maior na "alta legibilidade" */
  --radius: 16px;
}
/* Tema claro: fundo cinza-azulado bem claro, cartões brancos, tinta azul-marinho. Pares de texto com contraste AA
   (≥ 4,5:1) conferidos no QA; o dourado de texto é mais fechado (o de fundo continua o da marca). */
:root[data-theme="light"] {
  --scheme: light;
  --bg: #f7f2e9;
  --card: #ffffff;
  --card-2: #fffbf4;
  --line: rgba(11, 42, 91, 0.15);
  --text: #0b2a5b;
  --text-rgb: 11, 42, 91;
  --ink-rgb: 11, 42, 91;
  --muted: #4b5a73;
  --muted-rgb: 75, 90, 115;
  --gold: #8a5a00;
  --gold-rgb: 181, 122, 12;
  --gold-fill: #e8a93a;
  --gold-2: #f6cc72;
  --gold-soft: rgba(232, 169, 58, 0.16);
  --on-gold: #0b2a5b;
  --on-sem: #ffffff;
  --heat: #b57a0c;
  --cyan: #00796a;
  --cyan-rgb: 0, 121, 106;
  --cyan-2: #4fb3a4;
  --red: #b3261e;
  --red-rgb: 179, 38, 30;
  --red-2: #e0736d;
  --red-ink: #8c1d18;
  --red-hot: #b3261e;
  --green: #17703a;
  --green-rgb: 23, 112, 58;
  --amber: #945400;
  --amber-rgb: 214, 129, 18;
  --cost: #0f6570;
  --cost-rgb: 15, 101, 112;
  --wa-rgb: 22, 163, 74;
  --wa-text: #11683a;
  --deep-rgb: 236, 228, 214;
  --sticky-sum: #fbf4e4;
  --sticky-hover: #f6efe2;
  --thumb-1: #efe6d6;
  --thumb-2: #e2d6c2;
  --pre-bg: #f6f0e6;
  --pre-text: #0b2a5b;
  --note-bg: #fff4c7;
  --note-line: #e2c55a;
  --note-ink: #4d3b00;
  --note-input: #fffaeb;
  --note-ph: #7a6526;
  --chart-text: #4b5a73;
  --chart-grid: rgba(11, 42, 91, 0.08);
  --chart-border: rgba(11, 42, 91, 0.14);
  --chart-tip-bg: #ffffff;
  --chart-tip-line: rgba(11, 42, 91, 0.2);
  --chart-tip-text: #0b2a5b;
  --chart-gold: #b57a0c;
  --chart-cyan: #00917a;
  --chart-cyan-line: #00917a;
  --chart-cyan-fill: rgba(0, 145, 122, 0.12);
  --chart-green: #1b8a4b;
  --chart-pos: #1e9e62;
  --chart-neg: #d33a40;
  --chart-sub: #c8457e;
  --chart-violet: #1e5bb8;
  --violet: #1e5bb8;
  --violet-rgb: 30, 91, 184;
  --bg-top: #fbf8f2;
  --glass: rgba(255, 255, 255, 0.86);
  --glass-pop: rgba(255, 255, 255, 0.95);
  --edge: rgba(255, 255, 255, 0.9);
  --shadow-card: 0 1px 2px rgba(11, 42, 91, 0.06), 0 12px 28px -20px rgba(11, 42, 91, 0.3);
  --shadow-dock: 0 12px 26px -22px rgba(11, 42, 91, 0.55);
  --glow-gold: 0.05;
  --glow-cyan: 0.045;
  --glow-violet: 0.045;
  --mark-a: 0.1;
  --spark-site: #00917a;
  --spark-midia: #1e5bb8;
  --spark-receita: #b57a0c;
  --spark-misto: #c8457e;
  --map-1: #e6dcff;
  --map-2: #c6b5fb;
  --map-3: #9d84f0;
  --map-4: #6a4dd4;
  --map-5: #3d2494;
  --map-ink-1: #1d1147;
  --map-ink-2: #1d1147;
  --map-ink-3: #120a33;
  --map-ink-4: #ffffff;
  --map-ink-5: #ffffff;
  --map-none: #e6dfd2;
  --map-none-line: #b3bcc6;
  --map-none-ink: #33404d;
  --map-edge: rgba(11, 42, 91, 0.2);
  --hier-guia: rgba(11, 42, 91, 0.26);
  --hier-sep: rgba(11, 42, 91, 0.2);
  --hier-sep-fino: rgba(11, 42, 91, 0.07);
}
/* Alta legibilidade (menu "Aparência"): fonte ~15% maior, texto secundário mais forte e linhas opacas; o que era
   esmaecido por transparência (poucos dados, já chamado, desligado) fica com a cor cheia — a etiqueta continua dizendo. */
:root[data-legivel="1"] {
  --fz: 1.15;
  --muted: #ccd6e6;
  --line: #3b5684;
  --chart-text: #ccd6e6;
  /* sem vidro: a faixa fixa e os painéis flutuantes ficam opacos (nada do que passa por baixo tinge o texto) */
  --glass: var(--bg);
  --glass-pop: var(--card);
  /* Estrutura da conta (29/10/2026): guia e separadores mais fortes, como as outras linhas. */
  --hier-guia: rgba(var(--text-rgb), 0.38);
  --hier-sep: var(--line);
  --hier-sep-fino: rgba(var(--text-rgb), 0.14);
}
:root[data-legivel="1"][data-theme="light"] {
  --text: #061b3f;
  --muted: #34425a;
  --line: #8f8775;
  --chart-text: #34425a;
}
@media print {
  /* Impressão (demonstrativo): tamanho de fonte normal (mesmo com alta legibilidade), controles no esquema claro. */
  :root, :root[data-legivel="1"] { --fz: 1; color-scheme: light; }
}
* { box-sizing: border-box; }
html { color-scheme: var(--scheme); }
body {
  margin: 0;
  /* Os brilhos do fundo ficam numa camada fixa (body::before, no fim do arquivo). */
  background: var(--bg);
  color: var(--text);
  font: calc(14px * var(--fz))/1.5 var(--font-texto);
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
a { color: var(--gold); }
.red { color: var(--red); }
.good { color: var(--green); }
.bad { color: var(--red); }

.wrap { max-width: 1240px; margin: 0 auto; padding: 20px 16px 60px; }

/* header */
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.brand { display: flex; align-items: center; gap: 12px; }
/* Marca da Liora (13/11/2026): o símbolo (logo-sobre-azul recortada) sempre sobre o azul-marinho da marca, nos dois temas. */
.mark { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: #0b2a5b; border: 1px solid rgba(var(--gold-rgb), 0.35); flex: none; overflow: hidden; }
.mark img { width: 34px; height: 31px; display: block; object-fit: contain; }
.mark.lg { width: 72px; height: 72px; border-radius: 18px; }
.mark.lg img { width: 60px; height: 55px; }
h1, h2, h3, .brand h1, .login h1 { font-family: var(--font-titulo); }
.brand h1 { margin: 0; font-size: calc(18px * var(--fz)); font-weight: 600; letter-spacing: -0.005em; }
.brand p { margin: 0; color: var(--muted); font-size: calc(12px * var(--fz)); }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.ctl-btns { display: flex; gap: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.chip { border: 0; background: transparent; padding: 7px 12px; border-radius: 9px; cursor: pointer; color: var(--muted); font-weight: 500; transition: background 0.2s, color 0.2s; white-space: nowrap; }
.chip:hover { color: var(--text); }
.chip.on { background: var(--gold-fill); color: var(--on-gold); font-weight: 650; }
.chips.sm { display: inline-flex; margin-bottom: 14px; }
.chips.sm .chip { padding: 6px 11px; font-size: calc(13px * var(--fz)); }
.btn { border: 1px solid var(--line); background: var(--card); padding: 9px 14px; border-radius: 11px; cursor: pointer; transition: border-color 0.2s, transform 0.15s; white-space: nowrap; }
.btn:hover { border-color: rgba(var(--gold-rgb), 0.5); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.gold { background: var(--gold-fill); color: var(--on-gold); border-color: var(--gold-fill); font-weight: 650; }
.btn.sm { padding: 6px 11px; font-size: calc(12px * var(--fz)); font-weight: 600; }
.btn.ghost { background: transparent; color: var(--muted); }
.linkbtn { border: 0; background: none; padding: 0; color: var(--gold); text-decoration: underline; cursor: pointer; font: inherit; }
/* Calendário do período (10/10/2026): um calendário só, aberto pelo chip "Personalizado" — 1 clique = um dia, 2 cliques = período. */
.controls { position: relative; }
.chip-cal { display: inline-flex; align-items: center; gap: 5px; }
.chip-cal .cal-ic { flex: none; }
.cal-pop { position: absolute; z-index: 32; width: min(480px, calc(100vw - 24px)); display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass-pop); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); color: var(--text); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); font-size: calc(13px * var(--fz)); text-align: left; }
.cal-pop[hidden] { display: none; }
.cal-topo { display: grid; gap: 2px; }
.cal-tt { font-size: calc(14px * var(--fz)); }
.cal-resumo { color: var(--muted); min-height: 1.4em; }
.cal-corpo { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; }
.cal-atalhos { display: flex; flex-direction: column; gap: 2px; padding-right: 10px; border-right: 1px solid var(--line); }
.cal-atalhos .chip { text-align: left; padding: 6px 10px; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.cal-mes-nome { font-weight: 600; }
.cal-mes-nome::first-letter { text-transform: uppercase; }
.cal-nav .btn { min-width: 34px; font-size: calc(16px * var(--fz)); line-height: 1; }
.cal-grade { width: 100%; border-collapse: separate; border-spacing: 0 3px; table-layout: fixed; }
.cal-grade th { padding: 2px 0 4px; color: var(--muted); font-size: calc(11px * var(--fz)); font-weight: 500; text-align: center; }
.cal-grade td { padding: 0; text-align: center; }
.cal-dia { display: block; width: 100%; height: 34px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--text); font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.cal-dia.fora { color: var(--muted); }
.cal-dia:disabled { color: var(--muted); opacity: 0.35; cursor: default; }
.cal-dia.hoje { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.cal-dia:hover:not(:disabled):not(.ini):not(.fim):not(.meio) { background: rgba(var(--ink-rgb), 0.08); border-radius: 8px; }
.cal-dia.meio { background: rgba(var(--gold-rgb), 0.18); }
.cal-dia.ini, .cal-dia.fim { background: var(--gold-fill); color: var(--on-gold); font-weight: 650; }
.cal-dia.ini { border-radius: 8px 0 0 8px; }
.cal-dia.fim { border-radius: 0 8px 8px 0; }
.cal-dia.ini.fim { border-radius: 8px; }
.cal-dia:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 8px; }
.cal-dia.ini:focus-visible, .cal-dia.fim:focus-visible { outline: 2px solid var(--on-gold); outline-offset: -5px; }
.cal-dica, .cal-erro { margin: 0; }
.cal-pe { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 640px) {
  .cal-pop { position: fixed; left: 8px !important; right: 8px; top: auto !important; bottom: 8px; width: auto; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; z-index: 80; }
  .cal-corpo { grid-template-columns: minmax(0, 1fr); }
  .cal-atalhos { flex-direction: row; overflow-x: auto; padding: 0 0 4px; border-right: 0; scrollbar-width: none; }
  .cal-atalhos::-webkit-scrollbar { display: none; }
  .cal-atalhos .chip { flex: none; }
  .cal-dia { height: 44px; }
  .cal-pe .btn { flex: 1 1 0; min-height: 44px; }
}
.stamp { color: var(--muted); font-size: calc(12px * var(--fz)); text-transform: none; letter-spacing: 0; font-weight: 400; text-align: right; }
.error { color: var(--red); }

.banner { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(var(--red-rgb), 0.45); background: rgba(var(--red-rgb), 0.1); color: var(--red-ink); font-weight: 600; }

/* abas (fixas no topo ao rolar) */
.tabs { display: flex; gap: 4px; margin: 0 0 18px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; position: sticky; top: 0; z-index: 5; background: var(--bg); }
.tabs::-webkit-scrollbar { display: none; }
.tab { border: 0; background: transparent; color: var(--muted); padding: 12px 14px; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.on { color: var(--gold); border-bottom-color: var(--gold); }
.pane > section:last-child { margin-bottom: 0; }

/* cards */
.grid { display: grid; gap: 14px; }
.kpis { grid-template-columns: repeat(4, 1fr); margin-bottom: 14px; }
.kpis-meta.single { grid-template-columns: 1fr; }
.two { grid-template-columns: 1.2fr 1fr; margin-bottom: 14px; }
.two.even { grid-template-columns: 1fr 1fr; }
.three { grid-template-columns: repeat(3, 1fr); margin-bottom: 14px; }
.mb { margin-bottom: 14px; }
.card { background: linear-gradient(180deg, var(--card), var(--card-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; min-width: 0; }
.card h2 { margin: 0 0 14px; font-size: calc(13px * var(--fz)); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.09em; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.card h2 .pill { white-space: normal; }
.h2link { font-size: calc(12px * var(--fz)); text-transform: none; letter-spacing: 0; font-weight: 600; text-decoration: none; }
.card.thin { padding: 12px 16px; font-size: calc(13px * var(--fz)); color: var(--muted); }
.card.link, .kpi.link { cursor: pointer; transition: border-color 0.2s; }
.card.link:hover, .kpi.link:hover { border-color: rgba(var(--gold-rgb), 0.5); }
.card.thin.link { color: var(--gold); font-weight: 600; }
.kpi .label { color: var(--muted); font-size: calc(12px * var(--fz)); font-weight: 500; }
.kpi .value { font-size: calc(28px * var(--fz)); font-weight: 650; letter-spacing: -0.02em; margin: 4px 0 2px; }
.kpi .sub { font-size: calc(12px * var(--fz)); color: var(--muted); }
.kpi .cmp { font-size: calc(11px * var(--fz)); color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.kpi.gold .value { color: var(--gold); }
.kpi.warn .value { color: var(--gold); }
.kpi.good .value { color: var(--green); }
.kpi.bad .value { color: var(--red); }
.delta { font-weight: 600; padding: 1px 7px; border-radius: 99px; font-size: calc(11px * var(--fz)); white-space: nowrap; }
.delta.up { color: var(--green); background: rgba(var(--green-rgb), 0.12); }
.delta.down { color: var(--red); background: rgba(var(--red-rgb), 0.12); }
.delta.flat { color: var(--muted); background: rgba(var(--ink-rgb), 0.06); }
.note { margin: -4px 0 14px; font-size: calc(12px * var(--fz)); color: var(--muted); }

.headline { margin: 0 0 14px; font-size: calc(15px * var(--fz)); line-height: 1.55; color: var(--text); }
.headline b { font-weight: 650; }
.headline a { font-weight: 600; text-decoration: none; white-space: nowrap; }
.headline .l2 { display: block; font-size: calc(13px * var(--fz)); color: var(--muted); margin-top: 2px; }

.strip { display: block; margin: 0 0 14px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(var(--ink-rgb), 0.035); font-size: calc(13px * var(--fz)); cursor: pointer; line-height: 1.9; }
.strip:hover { border-color: rgba(var(--gold-rgb), 0.5); }
.strip .go { color: var(--gold); font-weight: 600; white-space: nowrap; margin-left: 4px; }

/* order bump (01/10/2026): bloco discreto depois das linhas de resumo da Visão geral — só tokens do tema */
.bump-box { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(var(--ink-rgb), 0.035); font-size: calc(13px * var(--fz)); min-width: 0; }
.bump-box.bump-off { line-height: 1.6; }
.bump-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 8px; }
.bump-head h3 { margin: 0; font-size: calc(13px * var(--fz)); font-weight: 650; color: var(--text); }
.bump-head .tag { margin-left: 0; }
.bump-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 14px; }
.bump-n { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bump-k { color: var(--muted); font-size: calc(12px * var(--fz)); }
.bump-n b { font-size: calc(18px * var(--fz)); font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.bump-n .small { overflow-wrap: anywhere; }
.bump-nota { margin: 8px 0 0; }
.bump-oque { margin: -2px 0 10px; }
.tbl tr.bump-row > td { background-color: rgba(var(--gold-rgb), 0.05); }

/* funnel */
.funnel { display: grid; gap: 10px; }
.step .row { display: flex; justify-content: space-between; gap: 10px; font-size: calc(13px * var(--fz)); margin-bottom: 5px; }
.step .row b { font-weight: 650; }
.step .row span { color: var(--muted); text-align: right; }
.step .lost { display: block; font-size: calc(11px * var(--fz)); color: var(--muted); margin-top: 3px; }
.step.worst .row b, .step.worst .lost { color: var(--red); }
.step.worst .bar i { background: linear-gradient(90deg, var(--red), var(--red-2)); }
.bar { height: 12px; border-radius: 99px; background: rgba(var(--ink-rgb), 0.06); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--gold-fill), var(--gold-2)); transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.fsplit { margin: 14px 0 0; font-size: calc(13px * var(--fz)); }
.mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.mini.two-col { grid-template-columns: 1fr 1fr; }
.mini.four { grid-template-columns: repeat(4, 1fr); }
.mini > div { background: rgba(var(--ink-rgb), 0.04); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.mini small { color: var(--muted); display: block; font-size: calc(11px * var(--fz)); }
.mini strong { font-size: calc(18px * var(--fz)); font-weight: 650; display: block; }

/* tables */
.tbl { width: 100%; border-collapse: collapse; font-size: calc(13px * var(--fz)); }
.tbl th { text-align: left; color: var(--muted); font-weight: 500; font-size: calc(11px * var(--fz)); text-transform: uppercase; letter-spacing: 0.07em; padding: 0 8px 9px 0; white-space: nowrap; }
.tbl td { padding: 9px 8px 9px 0; border-top: 1px solid var(--line); vertical-align: middle; }
.tbl th.r, .tbl td.r { text-align: right; padding-right: 0; padding-left: 8px; }
.tbl td + td, .tbl th + th { padding-left: 14px; }
.scroll { overflow-x: auto; }
.pill { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: calc(11px * var(--fz)); font-weight: 600; background: rgba(var(--ink-rgb), 0.07); white-space: nowrap; }
.pill.xs { font-size: calc(10px * var(--fz)); padding: 1px 7px; vertical-align: 1px; }
.pill.paid { background: rgba(var(--green-rgb), 0.14); color: var(--green); }
.pill.pending { background: var(--gold-soft); color: var(--gold); }
.pill.bad { background: rgba(var(--red-rgb), 0.13); color: var(--red); }
.pill.ok { background: rgba(var(--green-rgb), 0.14); color: var(--green); }
.pill.off { color: var(--muted); }
.tag { display: inline-block; font-size: calc(10px * var(--fz)); font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 0 5px; margin-left: 4px; white-space: nowrap; vertical-align: 1px; }
.muted { color: var(--muted); }
.trunc { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* GA4 origem/mídia: nome inteiro, quebrando linha. O que distingue duas origens
   costuma estar no fim (ex.: o id do anúncio), justo a parte que as reticências cortavam. */
#ga4 .trunc { max-width: none; white-space: normal; overflow-wrap: anywhere; }
.small { font-size: calc(12px * var(--fz)); }
.nowrap { white-space: nowrap; }
.sect { font-size: calc(12px * var(--fz)); margin-bottom: 8px; }
.notes { margin: 12px 0 0; padding-left: 18px; color: var(--muted); font-size: calc(12px * var(--fz)); }
.notes li { margin: 2px 0; }
.lead { margin: 0 0 12px; font-size: calc(15px * var(--fz)); }
.pay-grid { display: grid; gap: 16px; }
.pay-grid.wide { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 800px) { .pay-grid.wide { grid-template-columns: 1fr; gap: 16px; } }
.collapsed-line { margin: 0 0 14px; padding: 10px 14px; border: 1px dashed var(--line); border-radius: 12px; font-size: calc(12px * var(--fz)); color: var(--muted); }

.hbar { display: grid; gap: 9px; }
.hbar .item { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: calc(13px * var(--fz)); }
.hbar .item .bar { grid-column: 1 / -1; height: 8px; }
.hbar .item small { grid-column: 1 / -1; font-size: calc(11px * var(--fz)); }
.hbar .item .bar i { background: linear-gradient(90deg, var(--cyan), var(--cyan-2)); }

/* min-width 0: numa grade, o canvas (300px até o Chart.js medir) não pode alargar a coluna —
   a 320px, abrindo direto na aba Anúncios, o gráfico do GA4 fazia a página rolar de lado. */
.chart { position: relative; height: 280px; min-width: 0; }
.chart.sm { height: 200px; }
#chart-note:not(:empty) { margin-top: 8px; }

/* últimos pedidos */
.orders { display: grid; }
.order { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.order:first-child { border-top: 0; padding-top: 0; }
.o-main { min-width: 0; }
.o-origin { font-size: calc(13px * var(--fz)); }
.o-side { text-align: right; flex: none; }

/* saúde dos dados */
.status { display: flex; flex-wrap: wrap; gap: 10px; }
.status .s { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(var(--ink-rgb), 0.04); border-radius: 12px; font-size: calc(12px * var(--fz)); }
.checks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 16px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; font-size: calc(13px * var(--fz)); padding: 8px 0; border-top: 1px solid var(--line); }
.checks .dot { margin-top: 6px; flex: none; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.dot.ok { background: var(--green); box-shadow: 0 0 0 4px rgba(var(--green-rgb), 0.15); }
.dot.warn { background: var(--gold); box-shadow: 0 0 0 4px rgba(var(--gold-rgb), 0.15); }
.dot.bad { background: var(--red); box-shadow: 0 0 0 4px rgba(var(--red-rgb), 0.15); }

/* o que olhar hoje */
.alerts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-bottom: 12px; }
.alert { border: 1px solid var(--line); border-left: 3px solid var(--muted); border-radius: 12px; padding: 11px 13px; background: rgba(var(--ink-rgb), 0.03); cursor: pointer; font-size: calc(13px * var(--fz)); }
.alert:hover { border-color: rgba(var(--gold-rgb), 0.5); }
.alert.lv-bad { border-left-color: var(--red); }
.alert.lv-pending { border-left-color: var(--gold); }
.alert.lv-ok { border-left-color: var(--green); }
.al-head { margin-bottom: 4px; }
.al-d { margin-top: 4px; font-size: calc(12px * var(--fz)); line-height: 1.45; }
.wait { margin: 0 0 8px; font-size: calc(13px * var(--fz)); }

/* funil por anúncio */
.tbl.ads td, .tbl.ads th { white-space: nowrap; }
.tbl.ads th.cost { color: var(--cost); }
.tbl.ads td.name, .tbl.ads th.name { position: sticky; left: 0; z-index: 1; background: var(--card-2); min-width: 150px; }
/* Esmaecido sem deixar a coluna fixa transparente: o fundo dela fica opaco e só o conteúdo esmaece. */
.tbl.ads tr.few > td:not(.name), .tbl.ads tr.few > td.name > * { opacity: 0.55; }
.tbl.ads tr.exp { cursor: pointer; }
.tbl.ads tr.exp:hover > td { background-color: rgba(var(--ink-rgb), 0.03); }
.tbl.ads tr.exp:hover > td.name { background: var(--sticky-hover); }
.tbl.ads tr.exp:focus-visible { outline: 2px solid rgba(var(--gold-rgb), 0.6); outline-offset: -2px; }
.tbl.ads .nm { display: flex; align-items: center; gap: 4px; }
.caret { display: inline-block; width: 12px; color: var(--muted); transition: transform 0.2s; font-size: calc(11px * var(--fz)); }
.tbl.ads tr.open .caret { transform: rotate(90deg); }
.tbl.ads tr[data-parent] > td { font-size: calc(12px * var(--fz)); border-top-style: dashed; }
.tbl.ads tr[data-parent] > td.name { padding-left: 20px; }
.tbl.ads tr[data-parent] > td.name b { font-weight: 500; }
.tbl.ads tbody.foot tr:first-child > td { border-top: 2px solid var(--line); }
.tbl.ads tr.k-subtotal > td { background-color: rgba(var(--gold-rgb), 0.05); }
.tbl.ads tr.k-subtotal > td.name { background: var(--sticky-sum); }
.tbl.ads tr.k-novisit > td { color: var(--red); }
/* Destaque por sombra interna: pinta por cima do fundo, que continua opaco na coluna fixa. */
.flash > td, .ad-card.flash { animation: flash 2.4s ease-out; }
@keyframes flash { 0%, 35% { box-shadow: inset 0 0 0 999px rgba(var(--gold-rgb), 0.28); } 100% { box-shadow: inset 0 0 0 999px rgba(var(--gold-rgb), 0); } }
.ads-mob { display: none; }
.ad-card { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: rgba(var(--ink-rgb), 0.03); margin-bottom: 10px; }
.ad-card.few { opacity: 0.55; }
.ad-card.k-subtotal { background: rgba(var(--gold-rgb), 0.06); }
.ad-card.k-novisit { border-color: rgba(var(--red-rgb), 0.45); }
.ac-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: calc(14px * var(--fz)); }
.ac-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.ac-nums small { display: block; font-size: calc(10px * var(--fz)); color: var(--muted); line-height: 1.25; }
.ac-nums strong { font-size: calc(15px * var(--fz)); font-weight: 650; display: block; overflow-wrap: anywhere; }
.ad-card details { margin-top: 8px; font-size: calc(12px * var(--fz)); }
.ad-card summary { color: var(--gold); cursor: pointer; font-weight: 600; }
.ad-card dl { margin: 8px 0 0; display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; color: var(--muted); }
.ad-card dd { margin: 0; color: var(--text); text-align: right; }
.ac-kids { list-style: none; margin: 4px 0 0; padding: 0; }
.ac-kids li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px dashed var(--line); }
.ac-kids li .num { text-align: right; color: var(--muted); }
.notes .only-mob { display: none; }

/* creatives */
.creatives { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
/* Só a miniatura corta (cantos arredondados); os números nunca ficam escondidos. */
.cr { background: rgba(var(--ink-rgb), 0.035); border: 1px solid var(--line); border-radius: 14px; min-width: 0; }
.cr .th { aspect-ratio: 1.2; background: linear-gradient(135deg, var(--thumb-1), var(--thumb-2)); display: grid; place-items: center; color: var(--muted); font-size: calc(12px * var(--fz)); text-align: center; border-radius: 13px 13px 0 0; overflow: hidden; }
.cr .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cr .bd { padding: 10px 12px 12px; display: grid; gap: 4px; font-size: calc(12px * var(--fz)); min-width: 0; }
.cr .bd b { font-size: calc(13px * var(--fz)); line-height: 1.3; }
.cr dl { margin: 4px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; color: var(--muted); }
.cr dt { overflow-wrap: anywhere; }
.cr dd { margin: 0; color: var(--text); text-align: right; white-space: nowrap; }
/* "Leram até" em lista própria: o nome da seção ("O que recebe") não alarga a coluna
   dos números e não espreme os rótulos das outras linhas. Pode quebrar em 2 linhas. */
.cr dl + dl { margin-top: -2px; }
.cr dl.rd { grid-template-columns: auto minmax(0, 1fr); }
.cr dl.rd dd { white-space: normal; overflow-wrap: anywhere; }
.rank { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }

/* leitura da página (fluxo) */
.fsp { display: grid; margin-top: 2px; max-width: 760px; }
.fsp-row { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 4px 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line); font-size: calc(13px * var(--fz)); }
.fsp-row > span { text-align: right; }
.fsp-head { border-top: 0; padding-top: 0; color: var(--muted); font-size: calc(11px * var(--fz)); text-transform: uppercase; letter-spacing: 0.07em; }
.fsp-row.few > * { opacity: 0.55; }
.step .lost.jump { color: var(--cyan); }
.ac-flow { margin-top: 8px; color: var(--muted); }
.ac-flow b { color: var(--text); font-weight: 600; }
.flowp { color: var(--muted); margin-top: 3px; }
.flowp b { color: var(--text); font-weight: 600; }

/* setup / notices */
.notice { border: 1px dashed rgba(var(--gold-rgb), 0.4); background: var(--gold-soft); border-radius: 14px; padding: 14px 16px; font-size: calc(13px * var(--fz)); }
.notice.err { border-color: rgba(var(--red-rgb), 0.45); background: rgba(var(--red-rgb), 0.08); }
.notice h3 { margin: 0 0 6px; font-size: calc(14px * var(--fz)); }
.notice ol { margin: 8px 0 0; padding-left: 18px; color: var(--muted); }
.notice li { margin: 3px 0; }
pre { margin: 8px 0; padding: 10px 12px; background: var(--pre-bg); border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; font: calc(12px * var(--fz))/1.5 ui-monospace, Menlo, Consolas, monospace; color: var(--pre-text); }
code { font: calc(12px * var(--fz)) ui-monospace, Menlo, Consolas, monospace; background: rgba(var(--ink-rgb), 0.07); padding: 1px 5px; border-radius: 5px; }

/* diagnóstico técnico */
.diag { margin-top: 14px; }
.diag > summary { cursor: pointer; font-size: calc(13px * var(--fz)); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.09em; }
.diag > summary .small { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }

/* login */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 560px); justify-content: center; align-content: center; padding: 20px; }
.login > .card { width: 100%; min-width: 0; }
.login form { width: 100%; max-width: 360px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 28px; display: grid; gap: 14px; }
.login h1 { margin: 0; font-size: calc(20px * var(--fz)); }
.login input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); }
.login input:focus { outline: 2px solid rgba(var(--gold-rgb), 0.6); border-color: transparent; }
.login .error { color: var(--red); font-size: calc(13px * var(--fz)); min-height: 18px; }

.skeleton { color: transparent !important; background: linear-gradient(90deg, rgba(var(--ink-rgb), 0.05), rgba(var(--ink-rgb), 0.1), rgba(var(--ink-rgb), 0.05)); background-size: 200% 100%; animation: sk 1.2s infinite linear; border-radius: 8px; }
@keyframes sk { to { background-position: -200% 0; } }
.fade { animation: fade 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* clientes */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.search { flex: 1 1 220px; min-width: 0; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); }
.search:focus { outline: 2px solid rgba(var(--gold-rgb), 0.5); border-color: transparent; }
.toolbar .btn { text-decoration: none; color: var(--text); }
.btn.wa { background: rgba(var(--wa-rgb), 0.14); border-color: rgba(var(--wa-rgb), 0.4); color: var(--wa-text); padding: 6px 11px; font-size: calc(12px * var(--fz)); font-weight: 600; text-decoration: none; white-space: nowrap; }
.tbl.people td { vertical-align: top; }
.tbl.people a:not(.btn) { color: inherit; }
.tbl.people td.act { white-space: nowrap; }
.tbl.people td.act > * + * { margin-left: 6px; }
.tbl.people td.act .called { display: block; margin: 4px 0 0; }
.tbl.people tr.done > td { opacity: 0.5; }
.tbl.people tr.done > td.act { opacity: 0.85; }
.ago { font-size: calc(14px * var(--fz)); white-space: nowrap; }
.urg { display: inline-block; font-size: calc(10px * var(--fz)); font-weight: 700; padding: 1px 7px; border-radius: 99px; text-transform: uppercase; letter-spacing: 0.04em; }
.urg.hot { background: rgba(var(--red-rgb), 0.16); color: var(--red-hot); }
.urg.warm { background: var(--gold-soft); color: var(--gold); }
.urg.cold { background: rgba(var(--muted-rgb), 0.14); color: var(--muted); }
.rec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; margin: 0 0 8px; }
.rec-head .big { font-size: calc(16px * var(--fz)); font-weight: 650; }
.search-empty { margin: 10px 0 0; font-size: calc(13px * var(--fz)); }

/* heatmap */
.heats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.heat-title { font-size: calc(12px * var(--fz)); margin-bottom: 8px; }
.heat { display: grid; grid-template-columns: 32px repeat(24, minmax(0, 1fr)); gap: 2px; }
.hlabel { font-size: calc(11px * var(--fz)); color: var(--muted); align-self: center; }
.hcell { aspect-ratio: 1; border-radius: 3px; background: rgba(var(--text-rgb), 0.05); position: relative; }
.hcell::after { content: ""; position: absolute; inset: 0; border-radius: 3px; background: var(--heat); opacity: var(--a); }
.hhour { font-size: calc(9px * var(--fz)); color: var(--muted); text-align: center; }

/* Horários e origem (§3 atribuição + §17 mapas de calor) */
.hor-metric-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.hor-metric-row select { padding: 7px 9px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: calc(13px * var(--fz)); }
.hor-window-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.hor-window-row input[type="number"] { width: 72px; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: calc(13px * var(--fz)); }
/* Grid de largura fixa (não encolhe até virar ilegível no celular): o cartão rola na horizontal via .scroll. */
.hor-heat-scroll { padding-bottom: 4px; }
.heat.hor-heat { grid-template-columns: 34px repeat(24, minmax(26px, 1fr)); min-width: 640px; }
.hcell.nodata { background: repeating-linear-gradient(135deg, rgba(var(--text-rgb), 0.05), rgba(var(--text-rgb), 0.05) 3px, rgba(var(--text-rgb), 0.1) 3px, rgba(var(--text-rgb), 0.1) 6px); }
.hcell.nodata::after { display: none; }
.hcell.lower::after { background: var(--red); }
.hcell.smallsample { outline: 1px dashed rgba(var(--text-rgb), 0.35); outline-offset: -1px; }
.hor-alt { margin-top: 12px; font-size: calc(12px * var(--fz)); }
.hor-alt summary { cursor: pointer; color: var(--gold); }
.hor-alt table.tbl { margin-top: 8px; }

/* Mapas de calor por data (30/09/2026): calendário mensal, matriz de datas reais × hora e comparações. Só tokens do tema (nada de
   cor fixa): dourado = volume, vermelho = "menor é melhor" e negativo, verde = positivo. Sem dado = hachurado (nunca zero); zero
   real = neutro com "0"; amostra pequena = contorno tracejado; dado parcial/janela aberta = canto marcado; fim de semana = borda
   grossa embaixo + rótulo. Cor nunca é o único sinal: sinal +/−, rótulos e tooltip dizem o mesmo. */
.hor-seletores { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.hor-seletores .chips.sm { margin-bottom: 10px; }
.hor-ctx { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 10px; font-size: calc(12px * var(--fz)); color: var(--muted); }
.hor-ctx b { color: var(--text); font-weight: 600; }
.hor-ctx .csv-btn { margin-left: auto; }
.calor-b { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -2px 0 12px; }
.calor-b input[type="date"] { padding: 6px 8px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: calc(13px * var(--fz)); color-scheme: var(--scheme); }

.leg { margin: 4px 0 12px; }
.leg-scale { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: calc(12px * var(--fz)); }
.leg-bar { display: inline-block; width: 170px; max-width: 40vw; height: 10px; border-radius: 99px; }
.leg-bar.seq { background: linear-gradient(90deg, rgba(var(--text-rgb), 0.05), var(--heat)); }
.leg-bar.lower { background: linear-gradient(90deg, rgba(var(--text-rgb), 0.05), var(--red)); }
.leg-bar.div { background: linear-gradient(90deg, var(--red), rgba(var(--text-rgb), 0.05) 50%, var(--green)); }
.leg-items { display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none; margin: 0; padding: 0; font-size: calc(11px * var(--fz)); color: var(--muted); }
.lg { position: relative; display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 5px; background: rgba(var(--text-rgb), 0.05); box-sizing: border-box; }
.lg.nodata { background: repeating-linear-gradient(135deg, rgba(var(--text-rgb), 0.05), rgba(var(--text-rgb), 0.05) 3px, rgba(var(--text-rgb), 0.1) 3px, rgba(var(--text-rgb), 0.1) 6px); }
.lg.small { outline: 1px dashed rgba(var(--text-rgb), 0.45); outline-offset: -2px; }
.lg.fds { border-bottom: 3px solid rgba(var(--text-rgb), 0.35); }
.lg.parcial::before, .lg.janela::before, .cc.st-parcial::before, .cc.st-janela-aberta::before, .dc.st-parcial::before, .dc.st-janela-aberta::before { content: ""; position: absolute; right: 0; bottom: 0; width: 0; height: 0; border-bottom: 7px solid var(--amber); border-left: 7px solid transparent; z-index: 2; pointer-events: none; }
.lg.janela::before, .cc.st-janela-aberta::before, .dc.st-janela-aberta::before { border-bottom-color: var(--cyan); }

/* calendário: um bloco por mês, semana de segunda a domingo */
.cc-meses { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 420px)); gap: 18px 24px; margin-top: 12px; }
.cc-mes h3 { margin: 0 0 8px; font-size: calc(13px * var(--fz)); font-weight: 600; }
.cc-mes h3::first-letter { text-transform: uppercase; }
.cc-grid { display: flex; flex-direction: column; gap: 3px; }
.cc-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cc-h { font-size: calc(10px * var(--fz)); color: var(--muted); text-align: center; text-transform: uppercase; letter-spacing: 0.05em; padding-bottom: 2px; }
.cc-h.fds { color: var(--text); font-weight: 700; }
.cc { position: relative; height: 46px; border-radius: 6px; background: rgba(var(--text-rgb), 0.05); cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; padding: 3px 5px 4px; color: var(--text); overflow: hidden; }
.cc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--heat); opacity: var(--a, 0); pointer-events: none; }
.cc > span { position: relative; z-index: 1; }
.cn { font-size: calc(9px * var(--fz)); color: var(--muted); line-height: 1; }
.cv { font-size: calc(11px * var(--fz)); font-weight: 650; text-align: center; font-variant-numeric: tabular-nums; }
.cs { position: absolute !important; top: 2px; right: 4px; font-size: calc(11px * var(--fz)); font-weight: 800; line-height: 1; }
.cc.lower::after, .dc.lower::after, .cc.neg::after, .dc.neg::after { background: var(--red); }
.cc.pos::after, .dc.pos::after { background: var(--green); }
.cc.hi, .dc.hi { color: var(--on-gold); }
.cc.hi .cn { color: inherit; opacity: 0.8; }
.cc.hi.lower, .cc.hi.pos, .cc.hi.neg, .dc.hi.lower, .dc.hi.pos, .dc.hi.neg { color: var(--on-sem); }
.cc.nodata, .dc.nodata { background: repeating-linear-gradient(135deg, rgba(var(--text-rgb), 0.05), rgba(var(--text-rgb), 0.05) 3px, rgba(var(--text-rgb), 0.1) 3px, rgba(var(--text-rgb), 0.1) 6px); }
.cc.nodata::after, .dc.nodata::after { display: none; }
.cc.nodata .cv { color: var(--muted); font-weight: 400; }
.cc.smallsample, .dc.smallsample { outline: 1px dashed rgba(var(--text-rgb), 0.4); outline-offset: -2px; }
.cc.fds { border-bottom: 3px solid rgba(var(--text-rgb), 0.35); }
.cc-fora, .cc-vazia { background: transparent; cursor: default; }
.cc-fora { opacity: 0.4; }
.cc:focus-visible, .dc:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; z-index: 5; }

/* matriz de datas reais × hora (e as grades de comparação): largura mínima fixa, rolagem dentro do cartão */
.dgrade-scroll { overflow: auto; padding-bottom: 4px; margin-top: 10px; }
.dgrade-scroll.alta { max-height: 560px; }
.dgrade { display: flex; flex-direction: column; gap: 2px; min-width: 680px; }
.dr { display: grid; grid-template-columns: 104px repeat(24, minmax(22px, 1fr)); gap: 2px; align-items: center; }
.dgrade.com-dia .dr { grid-template-columns: 104px repeat(24, minmax(22px, 1fr)) 56px; }
.dl { font-size: calc(11px * var(--fz)); color: var(--muted); white-space: nowrap; position: sticky; left: 0; z-index: 3; background: var(--card); padding-right: 4px; }
.dl.fds { color: var(--text); font-weight: 650; }
.dh { position: sticky; top: 0; z-index: 4; background: var(--card); }
.dhh, .dth { font-size: calc(9px * var(--fz)); color: var(--muted); text-align: center; }
.dc { position: relative; height: 20px; border-radius: 3px; background: rgba(var(--text-rgb), 0.05); cursor: pointer; color: var(--text); }
.dc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--heat); opacity: var(--a, 0); pointer-events: none; }
.dc .cs { top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); font-size: calc(10px * var(--fz)); z-index: 1; }
.dc.dt { display: flex; align-items: center; justify-content: center; }
.dc.dt .cv { position: relative; z-index: 1; font-size: calc(10px * var(--fz)); }
.cmp-grades { display: flex; flex-direction: column; gap: 18px; margin-top: 10px; }
.cmp-bloco .kd-h3 { margin-bottom: 4px; }
.cal-tbl { font-size: calc(12px * var(--fz)); }
.cal-notas { margin-top: 12px; }

.calor-tip { position: fixed; z-index: 90; max-width: min(340px, calc(100vw - 16px)); background: var(--glass-pop); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: calc(12px * var(--fz)); box-shadow: var(--shadow-card); pointer-events: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.calor-tip[hidden] { display: none; }
.calor-tip .ct-h { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.calor-tip dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; }
.calor-tip dt { color: var(--muted); }
.calor-tip dd { margin: 0; overflow-wrap: anywhere; }
.calor-tip .ct-f { margin-top: 6px; font-size: calc(11px * var(--fz)); }

@media (max-width: 640px) {
  .cc-meses { grid-template-columns: 1fr; }
  .cc { height: 44px; }
  .hor-ctx .csv-btn { margin-left: 0; }
}

/* Filtro por produto (28/09/2026): seletor global no topo, aviso discreto embaixo das abas e o estado
   "indisponível por produto" (gasto de anúncios não separado por produto) — distinto de zero e de "—". */
.prod-sel { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font-size: calc(12px * var(--fz)); color: var(--muted); min-width: 0; }
.prod-sel select { max-width: 230px; min-width: 0; padding: 6px 8px; border: 0; border-radius: 9px; background: var(--bg); color: var(--text); font: inherit; font-size: calc(13px * var(--fz)); text-overflow: ellipsis; }
.prod-sel.on { border-color: rgba(var(--gold-rgb), 0.55); }
.prod-sel.on select { color: var(--gold); font-weight: 600; }
.prod-note { margin: -8px 0 14px; padding: 8px 12px; border: 1px dashed var(--line); border-radius: 10px; font-size: calc(12px * var(--fz)); color: var(--muted); }
.prod-note b { color: var(--text); font-weight: 600; }
.na { color: var(--muted); font-style: italic; white-space: nowrap; border-bottom: 1px dashed rgba(var(--muted-rgb), 0.55); cursor: help; }
.kpi.spend-na .value { font-size: calc(16px * var(--fz)); font-weight: 600; line-height: 1.35; letter-spacing: 0; padding: 7px 0 5px; }
.kpi.spend-na .value .na { white-space: normal; }

/* Título de card com botão à direita (ex.: "Exportar CSV"). */
.h2-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 14px; }
.h2-row h2 { margin: 0; }
.csv-btn { flex: none; }

/* Qualidade por origem: herda a tabela de anúncios (coluna fixa, esmaecido de poucos dados, rodapé). */
/* Cabeçalho pode quebrar linha (os números não): a tabela cabe mais inteira no computador. */
.tbl.orig th { white-space: normal; vertical-align: bottom; min-width: 64px; line-height: 1.3; }
.tbl.orig th.name { min-width: 170px; }
.tbl.orig th.sortable { cursor: pointer; user-select: none; }
.tbl.orig th.sortable:hover, .tbl.orig th.sortable.on { color: var(--text); }
.tbl.orig th.sortable:focus-visible { outline: 2px solid rgba(var(--gold-rgb), 0.6); outline-offset: -2px; }
.tbl.orig .sort-ind { display: inline-block; margin-left: 4px; font-size: calc(9px * var(--fz)); opacity: 0.55; }
.tbl.orig th.on .sort-ind { opacity: 1; color: var(--gold); }
.tbl.orig td.name .trunc { max-width: 200px; }
/* Nome e etiqueta "poucos dados": a etiqueta desce de linha antes de espremer o nome. */
.tbl.orig .nm { flex-wrap: wrap; gap: 2px 4px; }
.tbl.orig .nm .tag { margin-left: 0; }
.tbl.orig .inc { font-size: calc(10px * var(--fz)); color: var(--gold); margin-top: 2px; }
.tbl.orig tr.k-total > td { font-weight: 650; }
.tbl.orig tr.k-total > td.name { background: var(--sticky-sum); }
.tbl.orig tr.k-organico > td.name b, .tbl.orig tr.k-direto > td.name b, .tbl.orig tr.k-desconhecido > td.name b { font-weight: 500; }

@media (max-width: 640px) {
  .prod-sel { width: 100%; }
  .prod-sel select { flex: 1 1 auto; max-width: none; }
  .prod-note { margin-top: -6px; }
  .h2-row { margin-bottom: 12px; }
  .tbl.orig td.name, .tbl.orig th.name { min-width: 128px; max-width: 150px; white-space: normal; }
  .tbl.orig td.name .trunc { max-width: 140px; }
}

/* Coortes e LTV (28/09/2026, aba Clientes): controles em linha, tabelas com a 1ª coluna fixa (herdam .tbl.ads), janela
   futura hachurada (vazia — distinta de zero e de "—") e janela incompleta marcada. */
.ch-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.ch-ctl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; min-width: 0; }
.ch-ctl-row > .muted { margin-bottom: 14px; }
.ch-lead { margin-bottom: 8px; }
.ch-young, .ch-info { margin: 0 0 10px; }
.ch-sect { margin: 18px 0 8px; }
.tbl.ch th { white-space: normal; vertical-align: bottom; line-height: 1.3; min-width: 64px; }
.tbl.ch th.name { min-width: 130px; }
.tbl.ch .nm { flex-wrap: wrap; gap: 2px 4px; }
.tbl.ch .nm .tag { margin-left: 0; }
.tbl.ch .inc { font-size: calc(10px * var(--fz)); color: var(--gold); margin-top: 2px; white-space: nowrap; }
.tbl.ch td.ch-inc, .tbl.ch tr.ch-inc-row > td:not(.name) { font-style: italic; }
.tbl.ch td.ch-fut, .ch-legend .ch-sw-fut { background: repeating-linear-gradient(135deg, rgba(var(--text-rgb), 0.04), rgba(var(--text-rgb), 0.04) 4px, rgba(var(--text-rgb), 0.1) 4px, rgba(var(--text-rgb), 0.1) 8px); }
.tbl.ch td.ch-fut { min-width: 64px; }
.tbl.ch td.few { opacity: 0.55; }
.tbl.ch tr.ch-none > td { color: var(--muted); }
.tbl.ch tr.k-total > td { font-weight: 650; }
.tbl.ch tr.k-total > td.name { background: var(--sticky-sum); }
.tbl.ch tr.k-organico > td.name b, .tbl.ch tr.k-direto > td.name b, .tbl.ch tr.k-desconhecido > td.name b { font-weight: 500; }
.tbl.ch td.name .trunc { max-width: 200px; }
.ch-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 8px; font-size: calc(12px * var(--fz)); color: var(--muted); }
.ch-legend .ch-sw-fut { display: inline-block; width: 18px; height: 12px; margin-right: 6px; border: 1px solid var(--line); border-radius: 3px; vertical-align: -2px; }
.ch-legend .inc { color: var(--gold); font-size: calc(11px * var(--fz)); font-weight: 600; margin-right: 4px; }
.ch-legend .tag { margin: 0 4px 0 0; }
.tbl.people.recur td { vertical-align: top; }
@media (max-width: 640px) {
  .tbl.ch td.name, .tbl.ch th.name { min-width: 112px; max-width: 140px; white-space: normal; }
  .tbl.ch .inc { white-space: normal; }
}

/* CRM (quadro de compradores, §13) */
.crm-toolbar { display: grid; gap: 12px; }
.crm-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.crm-title-wrap { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.crm-title-wrap h2 { margin: 0; font-size: calc(15px * var(--fz)); font-weight: 650; color: var(--text); text-transform: none; letter-spacing: 0; }
.crm-summary-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-schip { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 11px; border-radius: 99px; background: rgba(var(--ink-rgb), 0.04); border: 1px solid var(--line); font-size: calc(12px * var(--fz)); color: var(--muted); white-space: nowrap; }
.crm-schip b { font-size: calc(13px * var(--fz)); font-weight: 700; color: var(--text); }
.crm-schip.invited b { color: var(--gold); }
.crm-schip.ingroup b { color: var(--green); }
.crm-schip.left b { color: var(--red); }
.crm-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crm-controls .search { flex: 1 1 200px; }
.crm-controls select { flex: 0 1 190px; min-width: 0; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); }
.crm-controls #crm-f-group { flex-basis: 210px; }
.crm-actor-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; font-size: calc(12px * var(--fz)); color: var(--muted); padding: 4px 4px 4px 12px; white-space: nowrap; border: 1px solid var(--line); border-radius: 10px; background: rgba(var(--ink-rgb), 0.02); }
.crm-actor-row select, .crm-actor-row input { padding: 6px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: calc(12px * var(--fz)); }
.crm-counters:empty { display: none; }
.crm-board-card { padding: 14px; }

/* quadro (computador) */
.crm-desk { display: grid; grid-auto-flow: column; grid-auto-columns: 280px; gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.crm-col {
  --col-accent: var(--line);
  background: rgba(var(--deep-rgb), 0.55);
  border: 1px solid var(--line);
  border-top: 3px solid var(--col-accent);
  border-radius: 14px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  max-height: min(640px, 70vh);
  scroll-snap-align: start;
}
.crm-col:nth-of-type(8n+1) { --col-accent: #d6ae45; }
.crm-col:nth-of-type(8n+2) { --col-accent: #6f8fae; }
.crm-col:nth-of-type(8n+3) { --col-accent: #28d9e8; }
.crm-col:nth-of-type(8n+4) { --col-accent: #8b9dc3; }
.crm-col:nth-of-type(8n+5) { --col-accent: #4ade80; }
.crm-col:nth-of-type(8n+6) { --col-accent: #6bc7c2; }
.crm-col:nth-of-type(8n+7) { --col-accent: #e0a458; }
.crm-col:nth-of-type(8n+8) { --col-accent: #9eabb6; }
.crm-col-head { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: calc(12.5px * var(--fz)); }
.crm-col-head b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.crm-col-body { flex: 1 1 auto; min-height: 64px; overflow-y: auto; display: grid; gap: 8px; align-content: start; padding: 10px; border-radius: 0 0 13px 13px; }
.crm-col-body.drag-over { background: var(--gold-soft); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), 0.5); }

.crm-mob { display: none; }
.crm-mob-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.crm-mob-tabs::-webkit-scrollbar { display: none; }
.crm-mob-tab { flex: none; border: 1px solid var(--line); background: var(--card); color: var(--muted); padding: 8px 13px; border-radius: 99px; font-size: calc(12.5px * var(--fz)); font-weight: 600; white-space: nowrap; cursor: pointer; }
.crm-mob-tab.on { background: var(--gold-fill); border-color: var(--gold-fill); color: var(--on-gold); }
.crm-mob-list { display: grid; gap: 10px; margin-top: 10px; }

/* cartão */
.crm-card { background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; cursor: grab; font-size: calc(12px * var(--fz)); display: grid; gap: 6px; transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s; }
.crm-card:hover { border-color: rgba(var(--gold-rgb), 0.4); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28); }
.crm-card:active { cursor: grabbing; }
.crm-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.crm-card.dragging { opacity: 0.4; }
.crm-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; min-width: 0; }
.crm-card-name { font-size: calc(13px * var(--fz)); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.crm-card-meta { display: flex; align-items: baseline; gap: 4px; min-width: 0; color: var(--muted); font-size: calc(11px * var(--fz)); }
.crm-card-product { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.crm-card-meta-rest { flex: none; white-space: nowrap; }
.crm-card-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.crm-avatar { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--gold-soft); color: var(--gold); font-size: calc(8px * var(--fz)); font-weight: 700; margin-right: 4px; vertical-align: -2px; }
.crm-chip-assignee { display: inline-flex; align-items: center; padding: 1px 8px 1px 2px; border-radius: 99px; background: rgba(var(--ink-rgb), 0.06); font-size: calc(10.5px * var(--fz)); color: var(--text); white-space: nowrap; }
.crm-task { font-size: calc(11px * var(--fz)); color: var(--muted); }
.crm-task.bad { color: var(--red); }
.crm-card-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; }
.crm-move { flex: 1 1 100px; min-width: 0; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: calc(11px * var(--fz)); }

/* estados vazio / carregando (só CRM) */
.crm-empty { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 28px 14px; color: var(--muted); }
.crm-empty svg { opacity: 0.5; }
.crm-empty b { color: var(--text); font-size: calc(13px * var(--fz)); font-weight: 650; }
.crm-empty span { font-size: calc(12px * var(--fz)); }
.crm-empty.sm { padding: 18px 8px; gap: 4px; }
.crm-empty.sm b { font-size: calc(12px * var(--fz)); }
.crm-loading { display: grid; grid-auto-flow: column; grid-auto-columns: 280px; gap: 12px; overflow: hidden; padding-bottom: 4px; }
.crm-loading .sk-col { border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 10px; background: rgba(var(--deep-rgb), 0.4); }
.crm-loading .sk-card { height: 74px; border-radius: 10px; }

/* ficha lateral */
.crm-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 20; }
.crm-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: var(--card); border-left: 1px solid var(--line); z-index: 21; overflow-y: auto; padding: 18px; }
.crm-drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 4px; }
.crm-drawer-head .name { font-size: calc(16px * var(--fz)); font-weight: 650; overflow-wrap: anywhere; }
.crm-resume-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; }
.crm-sect { margin: 18px 0; padding-top: 16px; border-top: 1px solid var(--line); }
.crm-sect:first-of-type { margin-top: 14px; padding-top: 0; border-top: 0; }
.crm-sect-h { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: calc(11.5px * var(--fz)); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.crm-sect-h svg { flex: none; color: var(--gold); }
.crm-sect summary.crm-sect-h { cursor: pointer; }
.crm-field { margin-bottom: 12px; }
.crm-field label { display: block; font-size: calc(12px * var(--fz)); color: var(--muted); margin-bottom: 4px; }
.crm-field select, .crm-field input:not([type="checkbox"]) { width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); margin-bottom: 6px; }
.crm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.crm-tags .tag button { border: 0; background: none; color: inherit; cursor: pointer; margin-left: 4px; font-size: calc(12px * var(--fz)); padding: 0; }
.crm-tag-add { display: flex; gap: 6px; }
.crm-tag-add input { flex: 1; min-width: 0; }
.crm-order-row, .crm-note, .crm-task-row, .crm-wa-row { padding: 8px 0; border-top: 1px solid var(--line); font-size: calc(12px * var(--fz)); }
.crm-order-row:first-child, .crm-note:first-child, .crm-task-row:first-child, .crm-wa-row:first-child { border-top: 0; padding-top: 0; }
.crm-order-row.on { color: var(--gold); }
.crm-task-row { display: flex; gap: 10px; align-items: flex-start; }
.crm-task-row.done { opacity: 0.6; }
.crm-inline-form { display: grid; gap: 6px; margin-top: 10px; }
.crm-inline-form input, .crm-inline-form textarea { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); width: 100%; font: inherit; }
.crm-inline-form textarea { resize: vertical; }

/* histórico: timeline com pontos e linha */
.crm-timeline { position: relative; padding-left: 16px; }
.crm-timeline:empty { display: none; }
.crm-timeline::before { content: ""; position: absolute; left: 3px; top: 4px; bottom: 4px; width: 1px; background: var(--line); }
.crm-hist-row { position: relative; padding: 0 0 14px; font-size: calc(12px * var(--fz)); border-top: 0 !important; }
.crm-hist-row::before { content: ""; position: absolute; left: -16px; top: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.16); }
.crm-hist-row:last-child { padding-bottom: 0; }
.crm-hist-when { display: block; color: var(--muted); font-size: calc(11px * var(--fz)); margin-bottom: 2px; }

@media (prefers-reduced-motion: reduce) {
  .crm-desk { scroll-snap-type: none; }
}

@media (max-width: 980px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .two, .two.even { grid-template-columns: 1fr; }
  .three { grid-template-columns: 1fr; }
  .heats { grid-template-columns: 1fr; }
}

/* celular */
@media (max-width: 640px) {
  .wrap { padding: 14px 12px 48px; }
  .top { gap: 10px; }
  .controls { width: 100%; }
  .chips#chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .chips#chips::-webkit-scrollbar { display: none; }
  /* Borda esmaecida onde ainda há período escondido (classes postas por chipEdges() no app.js). */
  .chips#chips.more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), rgba(0, 0, 0, 0.15)); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), rgba(0, 0, 0, 0.15)); }
  .chips#chips.more-l { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.15), #000 36px); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.15), #000 36px); }
  .chips#chips.more-l.more-r { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.15), #000 36px, #000 calc(100% - 36px), rgba(0, 0, 0, 0.15)); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.15), #000 36px, #000 calc(100% - 36px), rgba(0, 0, 0, 0.15)); }
  .ctl-btns { width: 100%; }
  /* Pode encolher (com reticências) em vez de empurrar o "Sair" pra fora da tela no celular estreito. */
  .ctl-btns #refresh { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .grid { gap: 10px; }
  .kpis { gap: 10px; margin-bottom: 10px; }
  .card { padding: 14px; }
  .kpi .value { font-size: calc(23px * var(--fz)); }
  .headline { font-size: calc(14px * var(--fz)); }
  .mini { gap: 6px; }
  .mini > div { padding: 8px 10px; }
  .mini small { font-size: calc(10px * var(--fz)); line-height: 1.3; }
  .mini strong { font-size: calc(16px * var(--fz)); }
  .mini.two-col, .mini.four { grid-template-columns: 1fr 1fr; }
  .tab { padding: 11px 12px; }
  .ads-desk { display: none; }
  .ads-mob { display: block; }
  .crm-desk { display: none; }
  .crm-mob { display: block; }
  .crm-drawer { left: 0; right: 0; width: 100%; border-left: 0; padding: 14px; }
  .crm-controls, .crm-actor-row { width: 100%; }
  .crm-controls select { flex: 1 1 140px; }
  .crm-card-actions { gap: 8px; }
  /* Coluna que encolhe: com alta legibilidade a 320px, o "mover para…" (a opção mais longa) alargava o cartão e a página. */
  .crm-mob-list, .crm-card { grid-template-columns: minmax(0, 1fr); }
  .crm-card-actions .crm-move { flex-basis: 100%; padding: 11px; font-size: calc(13px * var(--fz)); font-weight: 600; border-color: rgba(var(--gold-rgb), 0.45); background: var(--gold-soft); color: var(--gold); }
  .crm-card-actions .btn { padding: 9px 14px; font-size: calc(13px * var(--fz)); }
  .notes .only-desk { display: none; }
  .notes .only-mob { display: list-item; }
  /* Leitura por grupo: nome numa linha, os 3 números embaixo. */
  .fsp-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fsp-row > :first-child { grid-column: 1 / -1; }
  .fsp-row > span { text-align: left; }
  .fsp-head > :first-child { display: none; }
  /* Resumo "Anúncios no período": cabeçalho pode quebrar linha, números não. */
  .tbl.brief th { white-space: normal; vertical-align: bottom; }
  .tbl.brief td.r { white-space: nowrap; }
  .alerts { grid-template-columns: 1fr; }
  .checks { grid-template-columns: 1fr; }
  .creatives { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cr .th { aspect-ratio: 1.6; }
  .trunc { max-width: 160px; }

  /* Clientes: cada pessoa vira um cartão, com os botões grandes no topo. */
  .tbl.people thead { display: none; }
  .tbl.people, .tbl.people tbody { display: block; width: 100%; }
  .tbl.people tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 12px 0; border-top: 1px solid var(--line); }
  .tbl.people tr[hidden] { display: none; }
  .tbl.people td { display: block; border: 0; padding: 0 !important; min-width: 0; text-align: left; }
  .tbl.people td.act { order: -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; white-space: normal; }
  .tbl.people td.act:empty { display: none; }
  .tbl.people td.act > * + * { margin-left: 0; }
  .tbl.people td.act .btn { padding: 10px 16px; font-size: calc(14px * var(--fz)); }
  .tbl.people td.act .btn.wa { flex: 1 1 auto; text-align: center; }
  .tbl.people td.act .called { margin: 0; }
  .tbl.people .trunc { max-width: 100%; white-space: normal; }
}
/* Cartões de anúncio: 4 números lado a lado só quando "R$ 3.478,00" cabe na coluna (~460px). */
@media (max-width: 460px) {
  .ac-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
  /* KPIs em 2 colunas: "R$ 1.635,73" cabe; valor maior quebra depois do "R$". */
  .kpi.card { padding: 12px; }
  .kpi .value { font-size: calc(19px * var(--fz)); }
}
@media (max-width: 420px) {
  /* 4 abas cabem inteiras até 320px. */
  .tabs { gap: 0; }
  .tab { flex: 1 1 auto; padding: 11px 6px; font-size: calc(13px * var(--fz)); text-align: center; }
  /* Criativos: um por linha, miniatura quadrada ao lado, para os números caberem inteiros. */
  .creatives { grid-template-columns: minmax(0, 1fr); }
  .cr { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: start; }
  .cr .th { aspect-ratio: 1; margin: 10px 0 10px 10px; border-radius: 10px; }
}

/* ============================================================
   Financeiro (§ pedido do usuário, 27/09/2026): despesas, a receber/disponível,
   comissões do time e fechamento do mês. Mobile-first: 1 coluna por padrão, mais
   larga só a partir de 560px.
   ============================================================ */
.btn.xs { padding: 4px 9px; font-size: calc(11px * var(--fz)); }
.btn.danger { background: transparent; border-color: rgba(var(--red-rgb), 0.45); color: var(--red); }
.btn.danger:hover { background: rgba(var(--red-rgb), 0.1); }

.fin-h2-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.fin-h2-row h2 { margin: 0; }
.fin-h2-row input[type="month"] { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); }

.fin-form { border: 1px solid var(--line); background: rgba(var(--ink-rgb), 0.02); border-radius: 12px; padding: 14px; margin: 0 0 14px; }
.fin-form-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.fin-form label { display: flex; flex-direction: column; gap: 5px; font-size: calc(12px * var(--fz)); color: var(--muted); }
.fin-form input, .fin-form select { padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: calc(14px * var(--fz)); }
.fin-form input:focus, .fin-form select:focus { outline: 2px solid rgba(var(--gold-rgb), 0.5); border-color: transparent; }
.fin-form label.fin-check { flex-direction: row; align-items: center; gap: 8px; font-size: calc(13px * var(--fz)); color: var(--text); }
.fin-form label.fin-check input { width: auto; }
.fin-form label.fin-form-note { grid-column: 1 / -1; }
.fin-form-actions { display: flex; gap: 8px; margin-top: 12px; }

.fin-row-actions { display: flex; gap: 6px; flex-wrap: nowrap; white-space: nowrap; }

.fin-rec-totals { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.fin-rec-totals > div { display: flex; flex-direction: column; gap: 2px; }
.fin-rec-totals .num { font-size: calc(20px * var(--fz)); font-weight: 650; }
.fin-rec-totals span { font-size: calc(12px * var(--fz)); color: var(--muted); }

.fin-person { padding: 12px 0; border-top: 1px solid var(--line); }
.fin-person:first-child { border-top: 0; padding-top: 0; }
.fin-person.off { opacity: 0.55; }
.fin-person-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.fin-rate-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: calc(13px * var(--fz)); color: var(--muted); padding: 3px 0; }

.pane[data-pane="fin"] table { width: 100%; border-collapse: collapse; font-size: calc(13px * var(--fz)); }
.pane[data-pane="fin"] th, .pane[data-pane="fin"] td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.pane[data-pane="fin"] td.num { text-align: right; }
.pane[data-pane="fin"] td:first-child { white-space: normal; }

@media (min-width: 560px) {
  .fin-form-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .fin-h2-row input[type="month"] { flex: 1 1 auto; }
  .pane[data-pane="fin"] .scroll table { min-width: 420px; }
}

/* Simulador (pedido do usuário, 28/09/2026 — §9): campos + sliders herdam a caixa/borda de .fin-form;
   aqui só o que é específico (a origem do valor real, os cartões de cenário e as barras de percentual). */
.sim-field-row { display: flex; align-items: center; gap: 6px; }
.sim-field-row input { flex: 1 1 auto; min-width: 0; }
.sim-field-row .btn.xs { flex: none; padding: 6px 8px; font-size: calc(11px * var(--fz)); }
.sim-field-origem { line-height: 1.35; }
.sim-cenario-cfg { margin-top: 14px; }
.sim-slider { margin-bottom: 12px; }
.sim-slider:last-of-type { margin-bottom: 0; }
.sim-slider span { display: flex; justify-content: space-between; margin-bottom: 4px; }
.sim-slider input[type="range"] { padding: 0; background: transparent; border: 0; accent-color: var(--gold); width: 100%; height: 28px; }
.sim-n { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); max-width: 260px; }
.sim-cenario-card h2 { text-transform: none; letter-spacing: 0; font-size: calc(14px * var(--fz)); }
.sim-cenario-card.warn h2 { color: var(--gold); }
.sim-cenario-card.gold { border-color: rgba(var(--gold-rgb), 0.4); }
.sim-cenario-card.good h2 { color: var(--green); }
.sim-cenario-nums { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 14px; }
.sim-cenario-nums > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sim-cenario-nums .num { font-size: calc(16px * var(--fz)); font-weight: 650; overflow-wrap: break-word; }

@media (max-width: 980px) {
  .sim-cenario-nums { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .sim-cenario-nums { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sim-cenario-nums .num { font-size: calc(14px * var(--fz)); }
  .sim-field-origem { font-size: calc(11px * var(--fz)); }
}

/* ============================================================
   CRM: visual no estilo do CRM Aurea (26/09/2026, Quadro + Conversas + Grupo).
   Tokens escopados a esta aba (nunca mudam o resto do painel); o dourado da marca
   fica só nos toques de marca herdados (ex.: link/heading fora daqui). Dentro da
   aba CRM, os botões e destaques usam o azul/roxo da referência.
   ============================================================ */
/* Os tokens ficam disponíveis em #app inteiro (só variáveis, não pintam nada sozinhas), porque a gaveta da
   ficha (.crm-drawer) e o modal de confirmação (#crm-modal-root) são IRMÃOS do `.pane`, não descendentes —
   um `position:fixed` não muda a arvore do DOM. As regras que realmente pintam ficam escopadas logo abaixo,
   em `.pane[data-pane="crm"], .crm-drawer, #crm-modal-root` (nunca vazam pro resto do painel). */
#app {
  --aur-canvas: #0b0c10;
  --aur-surface: #14161c;
  --aur-surface-2: #191c24;
  --aur-surface-3: #212530;
  --aur-line: #262a34;
  --aur-line-strong: #333846;
  --aur-ink: #e8eaf0;
  --aur-ink-soft: #b6bccb;
  --aur-muted: #7f8697;
  --aur-faint: #7e8597; /* acabamento (§17): era #5b6273 (2,96:1 na superfície); agora ≥ 4,5:1, logo abaixo do --aur-muted */
  --aur-primary: #4f7dff;
  --aur-primary-fill: #4f7dff; /* azul como FUNDO (botão, balão, aba ativa); --aur-primary é o do texto/link */
  --aur-primary-hover: #3f6df0;
  --aur-primary-soft: rgba(79, 125, 255, 0.16);
  --aur-accent: #7c5cff;
  --aur-accent-soft: rgba(124, 92, 255, 0.16);
  --aur-success: #29c26f;
  --aur-success-soft: rgba(41, 194, 111, 0.14);
  --aur-danger: #ef4d5a;
  --aur-danger-fill: #ef4d5a; /* vermelho como FUNDO (contador de não lidas, texto branco); --aur-danger é o do texto */
  --aur-danger-soft: rgba(239, 77, 90, 0.14);
  --aur-avatar-ink: var(--aur-primary); /* iniciais do avatar das conversas, sobre --aur-primary-soft */
  --aur-warning: #f2a53a;
  --aur-warning-soft: rgba(242, 165, 58, 0.14);
  --aur-primary-rgb: 79, 125, 255;
  --aur-danger-rgb: 239, 77, 90;
  --aur-warning-rgb: 242, 165, 58;
  --aur-r-sm: 6px;
  --aur-r-md: 8px;
  --aur-r-lg: 12px;
}
/* CRM no tema claro: mesma ideia da referência (superfícies neutras, azul de ação), com texto AA no branco. */
:root[data-theme="light"] #app {
  --aur-canvas: #f3f5f9;
  --aur-surface: #ffffff;
  --aur-surface-2: #f6f7fa;
  --aur-surface-3: #e9ecf2;
  --aur-line: #dbe0e8;
  --aur-line-strong: #c3cad5;
  --aur-ink: #151a23;
  --aur-ink-soft: #394151;
  --aur-muted: #566072;
  --aur-faint: #636b7d;
  --aur-primary: #2f5fe0;
  --aur-primary-fill: #2f5fe0;
  --aur-primary-hover: #244fc4;
  --aur-primary-soft: rgba(47, 95, 224, 0.12);
  --aur-accent: #6b46f0;
  --aur-accent-soft: rgba(107, 70, 240, 0.12);
  --aur-success: #116b35;
  --aur-success-soft: rgba(21, 128, 61, 0.12);
  --aur-danger: #b8232f; /* texto; o selo "saiu" (fundo rosado) ficava em 4,49:1 com #c42b38 */
  --aur-danger-fill: #c42b38;
  --aur-danger-soft: rgba(196, 43, 56, 0.1);
  --aur-avatar-ink: #244fc4;
  --aur-warning: #945400;
  --aur-warning-soft: rgba(214, 129, 18, 0.14);
  --aur-primary-rgb: 47, 95, 224;
  --aur-danger-rgb: 196, 43, 56;
  --aur-warning-rgb: 214, 129, 18;
}
:root[data-legivel="1"] #app { --aur-muted: #b3bac8; --aur-faint: #a3aabb; --aur-line: #3a3f4c; --aur-primary: #7d9eff; --aur-primary-fill: #3563e9; --aur-primary-hover: #2a55d6; --aur-accent: #6344e6; --aur-danger: #ff7a84; --aur-danger-fill: #c42b38; }
:root[data-legivel="1"][data-theme="light"] #app { --aur-muted: #3b4455; --aur-faint: #444d5f; --aur-line: #a9b1bd; --aur-primary: #2f5fe0; --aur-primary-fill: #2f5fe0; --aur-primary-hover: #244fc4; --aur-accent: #6b46f0; --aur-danger: #b8232f; }
.pane[data-pane="crm"], .crm-drawer, #crm-modal-root { color: var(--aur-ink); }
.pane[data-pane="crm"] .card { background: var(--aur-surface); border-color: var(--aur-line); border-radius: var(--aur-r-lg); }
.pane[data-pane="crm"] .crm-title-wrap h2 { color: var(--aur-ink); }
.pane[data-pane="crm"] .muted, .crm-drawer .muted, #crm-modal-root .muted { color: var(--aur-muted); }
.pane[data-pane="crm"] .error, .crm-drawer .error, #crm-modal-root .error { color: var(--aur-danger); }
.pane[data-pane="crm"] a, .crm-drawer a, #crm-modal-root a { color: var(--aur-primary); }

/* Botões dentro da aba CRM (e na gaveta/modal, que ficam fora do .pane): neutro por padrão; .primary é o
   CTA (envio, salvar, confirmar). */
.pane[data-pane="crm"] .btn, .crm-drawer .btn, #crm-modal-root .btn { background: var(--aur-surface-2); border-color: var(--aur-line); color: var(--aur-ink); border-radius: var(--aur-r-md); }
.pane[data-pane="crm"] .btn:hover, .crm-drawer .btn:hover, #crm-modal-root .btn:hover { border-color: var(--aur-line-strong); }
.pane[data-pane="crm"] .btn.primary, .pane[data-pane="crm"] .btn.gold, .crm-drawer .btn.primary, #crm-modal-root .btn.primary { background: var(--aur-primary-fill); border-color: var(--aur-primary-fill); color: #fff; font-weight: 650; }
.pane[data-pane="crm"] .btn.primary:hover, .pane[data-pane="crm"] .btn.gold:hover, .crm-drawer .btn.primary:hover, #crm-modal-root .btn.primary:hover { background: var(--aur-primary-hover); border-color: var(--aur-primary-hover); }
.pane[data-pane="crm"] .btn.danger, .crm-drawer .btn.danger, #crm-modal-root .btn.danger { background: transparent; border-color: rgba(var(--aur-danger-rgb), 0.5); color: var(--aur-danger); }
.pane[data-pane="crm"] .btn.danger:hover, .crm-drawer .btn.danger:hover, #crm-modal-root .btn.danger:hover { background: var(--aur-danger-soft); }
.pane[data-pane="crm"] .btn.ghost, .crm-drawer .btn.ghost, #crm-modal-root .btn.ghost { background: transparent; border-color: transparent; color: var(--aur-muted); }
.pane[data-pane="crm"] .btn.wa, .crm-drawer .btn.wa, #crm-modal-root .btn.wa { background: var(--aur-success-soft); border-color: transparent; color: var(--aur-success); }
.pane[data-pane="crm"] input.search, .pane[data-pane="crm"] select, .pane[data-pane="crm"] textarea,
.crm-drawer input.search, .crm-drawer select, .crm-drawer textarea,
#crm-modal-root input.search, #crm-modal-root select, #crm-modal-root textarea {
  background: var(--aur-surface-2); border: 1px solid var(--aur-line); color: var(--aur-ink); border-radius: var(--aur-r-md);
}
.pane[data-pane="crm"] input.search:focus, .pane[data-pane="crm"] select:focus, .pane[data-pane="crm"] textarea:focus,
.crm-drawer input.search:focus, .crm-drawer select:focus, .crm-drawer textarea:focus,
#crm-modal-root input.search:focus, #crm-modal-root select:focus, #crm-modal-root textarea:focus { outline: 2px solid var(--aur-primary); outline-offset: 1px; border-color: var(--aur-primary); }

/* ---------- sub-abas: Quadro | Conversas | Grupo ---------- */
.crm-sub-tabs { display: flex; gap: 4px; margin: 0 0 14px; padding: 4px; background: var(--aur-surface-2); border: 1px solid var(--aur-line); border-radius: var(--aur-r-lg); width: max-content; max-width: 100%; overflow-x: auto; }
.crm-sub-tab { border: 0; background: transparent; color: var(--aur-muted); padding: 8px 16px; border-radius: var(--aur-r-md); font-weight: 600; font-size: calc(13px * var(--fz)); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.crm-sub-tab:hover { color: var(--aur-ink); }
.crm-sub-tab.on { background: var(--aur-primary-fill); color: #fff; }
.crm-sub-tab .badge { background: rgba(255, 255, 255, 0.22); border-radius: 99px; font-size: calc(10.5px * var(--fz)); padding: 1px 6px; }
.crm-sub-tab.on .badge { background: rgba(255, 255, 255, 0.3); }
.crm-sub-tab:not(.on) .badge { background: var(--aur-danger-fill); color: #fff; }
/* No claro e na alta legibilidade o branco translúcido sobre o azul não chega a 4,5:1: contador em pílula branca. */
:root:is([data-theme="light"], [data-legivel="1"]) .crm-sub-tab.on .badge { background: #fff; color: var(--aur-primary-fill); }

/* ---------- Quadro: recolorindo os componentes existentes (mesma estrutura/JS) ---------- */
.pane[data-pane="crm"] .crm-schip { background: var(--aur-surface-2); border-color: var(--aur-line); color: var(--aur-muted); }
.pane[data-pane="crm"] .crm-schip b { color: var(--aur-ink); }
.pane[data-pane="crm"] .crm-schip.invited b { color: var(--aur-warning); }
.pane[data-pane="crm"] .crm-schip.ingroup b { color: var(--aur-success); }
.pane[data-pane="crm"] .crm-schip.left b { color: var(--aur-danger); }
.pane[data-pane="crm"] .crm-actor-row { background: var(--aur-surface-2); border-color: var(--aur-line); color: var(--aur-muted); }
.pane[data-pane="crm"] .crm-col { background: var(--aur-surface); border-color: var(--aur-line); }
.pane[data-pane="crm"] .crm-col:nth-of-type(8n+1) { --col-accent: #4f7dff; }
.pane[data-pane="crm"] .crm-col:nth-of-type(8n+2) { --col-accent: #7c5cff; }
.pane[data-pane="crm"] .crm-col:nth-of-type(8n+3) { --col-accent: #38bdf8; }
.pane[data-pane="crm"] .crm-col:nth-of-type(8n+4) { --col-accent: var(--amber); }
.pane[data-pane="crm"] .crm-col:nth-of-type(8n+5) { --col-accent: #29c26f; }
.pane[data-pane="crm"] .crm-col:nth-of-type(8n+6) { --col-accent: #e1306c; }
.pane[data-pane="crm"] .crm-col:nth-of-type(8n+7) { --col-accent: #8b9dc3; }
.pane[data-pane="crm"] .crm-col:nth-of-type(8n+8) { --col-accent: #7f8697; }
.pane[data-pane="crm"] .crm-col-head { border-color: var(--aur-line); color: var(--aur-ink); }
.pane[data-pane="crm"] .crm-col-body.drag-over { background: var(--aur-primary-soft); box-shadow: inset 0 0 0 1px rgba(var(--aur-primary-rgb), 0.5); }
.pane[data-pane="crm"] .crm-card { background: var(--aur-surface-2); border-color: var(--aur-line); }
.pane[data-pane="crm"] .crm-card:hover { border-color: var(--aur-line-strong); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.pane[data-pane="crm"] .crm-card:focus-visible { outline-color: var(--aur-primary); }
.pane[data-pane="crm"] .crm-card-name { color: var(--aur-ink); }
.pane[data-pane="crm"] .crm-avatar { background: var(--aur-primary-soft); color: var(--aur-primary); }
.pane[data-pane="crm"] .crm-chip-assignee { background: var(--aur-surface-3); color: var(--aur-ink-soft); }
.pane[data-pane="crm"] .crm-move { background: var(--aur-surface); border-color: var(--aur-line); color: var(--aur-ink); }
.pane[data-pane="crm"] .tag, .crm-drawer .tag { background: var(--aur-surface-3); color: var(--aur-ink-soft); }
.pane[data-pane="crm"] .pill.off, .crm-drawer .pill.off { background: var(--aur-surface-3); color: var(--aur-muted); }
.pane[data-pane="crm"] .pill.pending, .crm-drawer .pill.pending { background: var(--aur-warning-soft); color: var(--aur-warning); }
.pane[data-pane="crm"] .pill.ok, .crm-drawer .pill.ok { background: var(--aur-success-soft); color: var(--aur-success); }
.pane[data-pane="crm"] .pill.bad, .crm-drawer .pill.bad { background: var(--aur-danger-soft); color: var(--aur-danger); }
.pane[data-pane="crm"] .crm-empty { color: var(--aur-faint); }
.pane[data-pane="crm"] .crm-empty b { color: var(--aur-ink); }
.pane[data-pane="crm"] .crm-loading .sk-col { background: var(--aur-surface); border-color: var(--aur-line); }
.pane[data-pane="crm"] .crm-mob-tab.on { background: var(--aur-primary-fill); border-color: var(--aur-primary-fill); color: #fff; }
.pane[data-pane="crm"] .crm-card:focus-visible { outline-color: var(--aur-primary); }
.pane[data-pane="crm"] .crm-card:hover { border-color: var(--aur-line-strong); }
/* A gaveta da ficha e o overlay são IRMÃOS do .pane (position:fixed): sem prefixo de ancestral aqui. */
.crm-overlay { background: rgba(0, 0, 0, 0.6); }
.crm-drawer { background: var(--aur-surface); border-color: var(--aur-line); }
.crm-sect { border-color: var(--aur-line); }
.crm-sect-h { color: var(--aur-faint); }
.crm-sect-h svg { color: var(--aur-primary); }
.crm-field label { color: var(--aur-muted); }
.crm-order-row, .crm-note, .crm-task-row, .crm-wa-row { border-color: var(--aur-line); }
.crm-order-row.on { color: var(--aur-primary); }
.crm-timeline::before { background: var(--aur-line); }
.crm-hist-row::before { background: var(--aur-primary); box-shadow: 0 0 0 3px var(--aur-primary-soft); }
.crm-drawer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.pane[data-pane="crm"] .notice, .crm-drawer .notice, #crm-modal-root .notice { background: var(--aur-warning-soft); border-color: rgba(var(--aur-warning-rgb), 0.4); color: var(--aur-ink); }
.pane[data-pane="crm"] .notice.err, .crm-drawer .notice.err, #crm-modal-root .notice.err { background: var(--aur-danger-soft); border-color: rgba(var(--aur-danger-rgb), 0.4); }
.pane[data-pane="crm"] .notice code, .crm-drawer .notice code, #crm-modal-root .notice code { color: var(--aur-ink); }

/* ---------- Conversas: 2 painéis (lista | conversa), ficha reaproveita a gaveta do Quadro ---------- */
.chat-shell { display: flex; height: min(720px, calc(100vh - 260px)); min-height: 460px; border: 1px solid var(--aur-line); border-radius: var(--aur-r-lg); overflow: hidden; background: var(--aur-surface); }
.chat-list { width: 320px; flex: none; border-right: 1px solid var(--aur-line); display: flex; flex-direction: column; min-width: 0; }
.chat-list-head { padding: 12px; border-bottom: 1px solid var(--aur-line); display: grid; gap: 8px; }
.chat-list-filters { display: flex; gap: 6px; align-items: center; }
.chat-list-filters .search { flex: 1; height: 34px; padding: 0 10px; font-size: calc(13px * var(--fz)); }
.chat-unread-toggle { flex: none; height: 34px; padding: 0 10px; border-radius: var(--aur-r-md); border: 1px solid var(--aur-line); background: var(--aur-surface-2); color: var(--aur-muted); font-size: calc(12px * var(--fz)); font-weight: 600; cursor: pointer; white-space: nowrap; }
.chat-unread-toggle.on { background: var(--aur-primary-fill); border-color: var(--aur-primary-fill); color: #fff; }
.chat-list-items { flex: 1; overflow-y: auto; }
.chat-row { width: 100%; display: flex; gap: 10px; padding: 11px 12px; border: 0; border-bottom: 1px solid var(--aur-line); background: transparent; border-left: 3px solid transparent; text-align: left; cursor: pointer; color: inherit; }
.chat-row:hover { background: var(--aur-surface-2); }
.chat-row.on { background: var(--aur-surface-3); }
.chat-row.unread { background: rgba(var(--aur-primary-rgb), 0.08); border-left-color: var(--aur-primary); }
.chat-row .avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--aur-primary-soft); color: var(--aur-avatar-ink); display: grid; place-items: center; font-size: calc(12px * var(--fz)); font-weight: 700; }
.chat-row-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.chat-row-top { display: flex; align-items: baseline; gap: 6px; }
.chat-row-name { font-size: calc(13.5px * var(--fz)); font-weight: 600; color: var(--aur-ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-row.unread .chat-row-name { font-weight: 700; }
.chat-row-time { font-size: calc(11px * var(--fz)); color: var(--aur-faint); flex: none; }
.chat-row-preview { font-size: calc(12.5px * var(--fz)); color: var(--aur-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-row.unread .chat-row-preview { color: var(--aur-ink-soft); }
.chat-row-meta { display: flex; align-items: center; gap: 6px; }
.chat-badge-unread { margin-left: auto; background: var(--aur-primary-fill); color: #fff; border-radius: 99px; font-size: calc(11px * var(--fz)); font-weight: 700; min-width: 19px; height: 19px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; }

.chat-thread { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--aur-canvas); }
.chat-thread-head { flex: none; height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--aur-line); background: var(--aur-surface); }
.chat-back { display: none; border: 0; background: none; color: var(--aur-ink); cursor: pointer; padding: 4px; }
.chat-thread-name { font-size: calc(14px * var(--fz)); font-weight: 650; color: var(--aur-ink); }
.chat-thread-phone { font-size: calc(11.5px * var(--fz)); color: var(--aur-muted); }
.chat-thread-card-chip { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; background: var(--aur-surface-2); border: 1px solid var(--aur-line); border-radius: 99px; padding: 5px 10px; font-size: calc(11.5px * var(--fz)); color: var(--aur-ink-soft); cursor: pointer; }
.chat-thread-card-chip:hover { border-color: var(--aur-line-strong); }
.chat-thread-actor { flex: none; }
.chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.chat-day-sep { display: flex; justify-content: center; margin: 6px 0; }
.chat-day-sep span { font-size: calc(11px * var(--fz)); font-weight: 600; color: var(--aur-muted); background: var(--aur-surface-2); border: 1px solid var(--aur-line); border-radius: 99px; padding: 3px 12px; }
.chat-bubble-row { display: flex; }
.chat-bubble-row.out { justify-content: flex-end; }
.chat-bubble { max-width: 72%; border-radius: 14px; padding: 8px 12px; font-size: calc(13.5px * var(--fz)); line-height: 1.4; }
.chat-bubble.in { background: var(--aur-surface-2); color: var(--aur-ink); border-bottom-left-radius: 4px; }
.chat-bubble.out { background: var(--aur-primary-fill); color: #fff; border-bottom-right-radius: 4px; }
.chat-bubble.out.automatica { background: var(--aur-accent); }
.chat-bubble.out.celular { background: var(--aur-surface-3); color: var(--aur-ink); }
.chat-bubble-tag { display: flex; align-items: center; gap: 4px; font-size: calc(10.5px * var(--fz)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.85; margin-bottom: 3px; }
.chat-bubble-text { white-space: pre-wrap; word-break: break-word; }
.chat-bubble-meta { display: flex; gap: 5px; justify-content: flex-end; align-items: center; margin-top: 3px; font-size: calc(10.5px * var(--fz)); opacity: 0.75; }
.chat-note-row { display: flex; justify-content: center; }
.chat-note { max-width: 80%; background: var(--note-bg); border: 1px solid var(--note-line); color: var(--note-ink); border-radius: 10px; padding: 7px 12px; font-size: calc(12.5px * var(--fz)); }
.chat-note b { display: block; font-size: calc(10px * var(--fz)); text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.8; margin-bottom: 2px; }
.chat-composer { flex: none; border-top: 1px solid var(--aur-line); background: var(--aur-surface); padding: 10px 12px; display: grid; gap: 8px; }
.chat-quick-replies { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.chat-quick-replies button { flex: none; border: 1px solid var(--aur-line); background: var(--aur-surface-2); color: var(--aur-ink-soft); border-radius: 99px; padding: 5px 11px; font-size: calc(11.5px * var(--fz)); cursor: pointer; white-space: nowrap; }
.chat-quick-replies button:hover { border-color: var(--aur-primary); color: var(--aur-primary); }
.chat-composer-row { display: flex; gap: 8px; align-items: flex-end; }
.chat-composer-row textarea { flex: 1; resize: none; max-height: 120px; border-radius: 18px; padding: 9px 14px; font: inherit; }
.chat-send-btn { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--aur-primary-fill); border: 0; color: #fff; display: grid; place-items: center; cursor: pointer; }
.chat-send-btn:disabled { opacity: 0.4; cursor: default; }
.chat-mode-tabs { display: flex; gap: 4px; }
.chat-mode-tab { border: 0; background: transparent; color: var(--aur-muted); font-size: calc(11.5px * var(--fz)); font-weight: 600; padding: 4px 9px; border-radius: 99px; cursor: pointer; }
.chat-mode-tab.on { background: var(--aur-surface-3); color: var(--aur-ink); }
.chat-note-form { display: none; gap: 8px; }
.chat-note-form.on { display: flex; }
.chat-note-form textarea { flex: 1; background: var(--note-input); border-color: var(--note-line); color: var(--note-ink); }
.chat-note-form textarea::placeholder { color: var(--note-ph); }
.chat-empty-state, .chat-thread-empty { display: grid; place-items: center; height: 100%; color: var(--aur-faint); text-align: center; gap: 8px; padding: 30px; }
.chat-thread-notes-list { border-top: 1px solid var(--aur-line); max-height: 120px; overflow-y: auto; padding: 8px 14px; display: none; gap: 6px; }
.chat-thread-notes-list.on { display: grid; }

/* ---------------- Conversas: mídia (imagem, áudio, vídeo, documento — 30/09/2026, migração 0019) ----------------
   Tamanhos FIXOS para imagem/áudio/vídeo: nada muda de altura quando o arquivo termina de carregar (a conversa não pula).
   Dentro do balão do time (azul/roxo, texto branco) o cartão escurece o fundo; no do cliente e no do celular, superfície. */
.chat-bubble.com-midia { min-width: 0; }
.chat-midia-vivo { margin: 2px 0 4px; max-width: 100%; }
.chat-midia-img { display: block; padding: 0; border: 0; border-radius: 10px; background: var(--aur-surface-3); cursor: zoom-in; overflow: hidden; max-width: 100%; }
.chat-midia-img img { display: block; width: 240px; height: 180px; max-width: 100%; object-fit: cover; }
.chat-midia-img:focus-visible { outline: 2px solid var(--aur-primary); outline-offset: 2px; }
.chat-midia-vivo audio { display: block; width: 260px; max-width: 100%; height: 40px; }
.chat-midia-vivo video { display: block; width: 260px; max-width: 100%; height: 146px; border-radius: 10px; background: #000; object-fit: contain; }
.chat-midia-vivo.sem-exibir :is(img, audio, video) { display: none; }
.chat-midia-vivo.sem-exibir .chat-midia-img { cursor: default; }
.chat-midia { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; margin: 2px 0 4px; border-radius: 10px; background: var(--aur-surface); border: 1px solid var(--aur-line); color: var(--aur-ink); min-width: 0; max-width: 300px; }
.chat-midia > svg { flex: none; margin-top: 1px; color: var(--aur-muted); }
.chat-midia.falhou > svg { color: var(--aur-warning); }
.chat-midia.doc { align-items: center; }
.chat-midia-info { display: grid; gap: 3px; min-width: 0; flex: 1; font-size: calc(12.5px * var(--fz)); }
.chat-midia-info .btn { justify-self: start; margin-top: 4px; }
.chat-midia-nome { font-size: calc(13px * var(--fz)); font-weight: 650; overflow-wrap: anywhere; }
.chat-midia-sub { display: block; font-size: calc(11px * var(--fz)); line-height: 1.4; opacity: 0.85; overflow-wrap: anywhere; }
.chat-midia-rodape { margin-bottom: 2px; }
.chat-midia-doc-ico { position: relative; flex: none; display: grid; place-items: center; color: var(--aur-primary); }
.chat-midia-doc-ico i { position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); padding: 0 2px; border-radius: 3px; background: var(--aur-primary-fill); color: #fff; font-style: normal; font-size: calc(7.5px * var(--fz)); font-weight: 800; line-height: 1.35; letter-spacing: 0.02em; }
.chat-bubble.out:not(.celular) .chat-midia-doc-ico i { background: #fff; color: var(--aur-primary-fill); }
.chat-midia-baixar { flex: none; display: inline-grid; place-items: center; }
.chat-midia-acao { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.chat-bubble .chat-midia-sub a { color: inherit; text-decoration: underline; }
.chat-bubble.out:not(.celular) .chat-midia { background: rgba(0, 0, 0, 0.18); border-color: rgba(255, 255, 255, 0.22); color: #fff; }
.chat-bubble.out:not(.celular) .chat-midia > svg, .chat-bubble.out:not(.celular) .chat-midia-doc-ico { color: #fff; }
.chat-midia.removido { opacity: 0.9; font-style: italic; }
/* Balão do time (azul): o texto pequeno da mídia sem transparência (o branco sobre o azul já fica no limite) e o rodapé de
   imagem/áudio/vídeo numa faixa escura, a mesma do cartão de documento — contraste AA (≥ 4,5:1) nos dois temas. */
.chat-bubble.out:not(.celular) :is(.chat-midia-sub, .chat-midia.removido) { opacity: 1; }
.chat-bubble.out:not(.celular) .chat-midia-rodape { display: inline-block; max-width: 100%; padding: 1px 7px; border-radius: 6px; background: rgba(0, 0, 0, 0.18); }
.chat-aviso { padding: 7px 10px; border-radius: var(--aur-r-md); background: var(--aur-warning-soft); color: var(--aur-ink); border: 1px solid rgba(var(--aur-warning-rgb), 0.45); }
:root[data-legivel="1"] .chat-midia-sub { opacity: 1; }
/* Botão de anexar, à esquerda da caixa de texto (mesmo tamanho do enviar). */
.chat-clip-btn { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--aur-surface-2); border: 1px solid var(--aur-line); color: var(--aur-ink-soft); display: grid; place-items: center; cursor: pointer; }
.chat-clip-btn:hover { border-color: var(--aur-primary); color: var(--aur-primary); }
.chat-clip-btn:disabled { opacity: 0.4; cursor: default; }
/* Janela de envio (no #crm-modal-root, mesma base da confirmação do Grupo). */
.chat-anexo-modal { max-height: calc(100vh - 32px); overflow-y: auto; }
[data-chat-modal] textarea.search { font: inherit; font-size: calc(13px * var(--fz)); line-height: 1.45; }
.chat-anexo-arq { display: flex; align-items: center; gap: 12px; padding: 10px; margin: 0 0 12px; border-radius: var(--aur-r-md); background: var(--aur-surface-2); border: 1px solid var(--aur-line); min-width: 0; }
.chat-anexo-arq img { flex: none; width: 56px; height: 56px; object-fit: cover; border-radius: 6px; }
.chat-anexo-arq-info { display: grid; gap: 2px; min-width: 0; }
.chat-anexo-arq-info b { font-size: calc(13px * var(--fz)); overflow-wrap: anywhere; }
.chat-anexo-modos { border: 0; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.chat-anexo-modos legend { padding: 0; margin-bottom: 6px; }
.crm-modal label.chat-anexo-modo { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: calc(13px * var(--fz)); color: var(--aur-ink); cursor: pointer; }
.chat-anexo-modo input { accent-color: var(--aur-primary); }
.crm-modal p.chat-anexo-regra { margin: 0 0 10px; }
.chat-anexo-conta { text-align: right; margin: -8px 0 8px; }
.chat-anexo-envio { display: grid; gap: 6px; margin-bottom: 8px; }
.chat-anexo-envio progress { width: 100%; height: 10px; accent-color: var(--aur-primary); }
.crm-modal .chat-anexo-envio p { margin: 0; }
.crm-modal .chat-anexo-envio p.small:not(.muted) { color: var(--aur-ink); }
/* Imagem ampliada: ocupa a tela, com a barra de nome / baixar / fechar. */
.chat-visor { background: rgba(5, 8, 12, 0.88); }
.chat-visor-caixa { display: grid; gap: 10px; justify-items: center; max-width: min(960px, 100%); max-height: calc(100vh - 32px); outline: none; }
.chat-visor-caixa img { display: block; max-width: 100%; max-height: calc(100vh - 110px); object-fit: contain; border-radius: var(--aur-r-md); background: var(--aur-surface-3); }
.chat-visor-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; color: #fff; }
.chat-visor-nome { font-size: calc(13px * var(--fz)); overflow-wrap: anywhere; max-width: 60vw; }
#crm-modal-root .chat-visor-barra .btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }

/* ---------- Grupo dos alunos ---------- */
.group-config-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 4px; }
.group-config-row .field { flex: 1 1 320px; min-width: 0; }
.group-config-row label { display: block; font-size: calc(12px * var(--fz)); color: var(--aur-muted); margin-bottom: 5px; }
.group-config-row .field input.search { display: block; width: 100%; box-sizing: border-box; }
.group-stats { display: flex; gap: 18px; flex-wrap: wrap; margin: 4px 0 2px; font-size: calc(12.5px * var(--fz)); color: var(--aur-muted); }
.group-stats b { color: var(--aur-ink); font-weight: 650; }
.group-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 10px; }
.group-toolbar .search { flex: 1 1 220px; height: 36px; }
.group-list { display: grid; gap: 8px; }
.group-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--aur-line); border-radius: var(--aur-r-md); background: var(--aur-surface-2); }
.group-row.left { opacity: 0.65; }
.group-row .avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--aur-surface-3); color: var(--aur-ink-soft); display: grid; place-items: center; font-size: calc(11px * var(--fz)); font-weight: 700; }
.group-row-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.group-row-name { font-size: calc(13px * var(--fz)); font-weight: 600; color: var(--aur-ink); display: flex; align-items: center; gap: 6px; }
.group-row-sub { font-size: calc(11.5px * var(--fz)); color: var(--aur-muted); }
.group-row-actions { display: flex; gap: 6px; flex: none; }
.group-check { flex: none; width: 16px; height: 16px; accent-color: var(--aur-primary); }

/* Modal de confirmação centrado (add/remover/aviso) — mesma ideia da gaveta, mas ao centro. */
.crm-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 30; display: grid; place-items: center; padding: 16px; }
.crm-modal { background: var(--aur-surface); border: 1px solid var(--aur-line-strong); border-radius: var(--aur-r-lg); padding: 20px; width: min(440px, 100%); color: var(--aur-ink); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); }
.crm-modal h3 { margin: 0 0 8px; font-size: calc(15px * var(--fz)); }
.crm-modal p { margin: 0 0 14px; font-size: calc(13px * var(--fz)); color: var(--aur-muted); }
.crm-modal .preview { background: var(--aur-surface-2); border: 1px solid var(--aur-line); border-radius: var(--aur-r-md); padding: 10px 12px; font-size: calc(13px * var(--fz)); white-space: pre-wrap; margin-bottom: 14px; max-height: 160px; overflow-y: auto; }
/* `.search` é feita pra filho de flex (ex.: `.crm-controls`); dentro do modal (bloco simples) precisa de
   display/width explícitos, senão o textarea/label ficam lado a lado em vez de empilhados. */
.crm-modal label { display: block; margin: 0 0 6px; }
.crm-modal textarea.search, .crm-modal input.search { display: block; width: 100%; box-sizing: border-box; margin-bottom: 12px; resize: vertical; }
.crm-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 980px) {
  .chat-list { width: 260px; }
}
@media (max-width: 640px) {
  .crm-sub-tabs { width: 100%; }
  .crm-sub-tab { flex: 1; justify-content: center; }
  .chat-shell { height: calc(100vh - 210px); border-radius: var(--aur-r-md); }
  .chat-list { width: 100%; }
  .chat-shell.thread-open .chat-list { display: none; }
  .chat-shell:not(.thread-open) .chat-thread { display: none; }
  /* Conversa aberta no celular: tela cheia (como um app de chat), o composer sempre fixo embaixo — em vez
     de ser só mais um bloco empurrado pelo cabeçalho/abas do painel, exigindo rolar a página toda. */
  .chat-shell.thread-open { position: fixed; inset: 0; z-index: 15; height: 100vh; border-radius: 0; border: 0; }
  .chat-back { display: inline-flex; }
  .chat-bubble { max-width: 84%; }
  .chat-midia-img img { width: 220px; height: 165px; }
  .chat-midia-vivo audio { width: 230px; }
  .chat-midia-vivo video { width: 230px; height: 130px; }
  /* "baixar" e "remover" com alvo de toque de ~27 px de altura, sem mexer na altura da linha. */
  .chat-midia-sub a, .chat-midia-acao { padding-block: 6px; }
  .chat-midia-acao { margin-block: -6px; }
  .chat-composer-row { gap: 6px; }
  .group-config-row .field { flex-basis: 100%; }
  .group-row { flex-wrap: wrap; }
  .group-row-actions { width: 100%; justify-content: flex-end; }
  .pane[data-pane="crm"] .crm-card-actions .crm-move { border-color: var(--aur-primary); background: var(--aur-primary-soft); color: var(--aur-primary); }
}

/* ---------------- Estrategista IA (§18) ---------------- */

.ai-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.ai-ask-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-ask-row select { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; color: inherit; }
.ai-ask-row input.search { flex: 1; min-width: 220px; }

.ai-progress { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; }
.ai-progress-item { display: inline-flex; align-items: center; gap: 6px; font-size: calc(12px * var(--fz)); color: var(--muted); }
.ai-progress-item .dot { width: 7px; height: 7px; }

.ai-coverage { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
/* Nota do filtro de atribuição escrita embaixo das pílulas de cobertura (o title só aparece com o mouse). */
.ai-cov-nota { margin: 6px 0 4px; color: var(--muted); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ai-cov-nota b { color: var(--text); font-weight: 600; }
.ai-result-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.ai-priority-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; margin-bottom: 4px; }
.ai-priority-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px; margin: 10px 0 0; font-size: calc(13px * var(--fz)); }
.ai-priority-grid dt { color: var(--muted); font-size: calc(11px * var(--fz)); text-transform: uppercase; letter-spacing: 0.05em; margin: 0; }
.ai-priority-grid dd { margin: 2px 0 0; }

.ai-rec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ai-rec-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.ai-rec-actions input.search { flex: 1; min-width: 200px; }

/* Botão flutuante "Perguntar à IA" (visível em qualquer aba, exceto na própria aba Estrategista IA). */
.ai-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 20;
  background: var(--gold-fill); color: var(--on-gold); border: 0; border-radius: 999px;
  padding: 12px 18px; font-weight: 650; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); cursor: pointer;
}
.ai-fab:hover { transform: translateY(-1px); }

.ai-ask-overlay { position: fixed; inset: 0; z-index: 21; background: rgba(0, 0, 0, 0.5); }
.ai-ask-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); z-index: 22;
  background: var(--card); border-left: 1px solid var(--line); overflow-y: auto; padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.ai-ask-drawer-head { display: flex; align-items: center; justify-content: space-between; }
.ai-ask-drawer textarea {
  width: 100%; min-height: 90px; background: var(--card-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px; color: inherit; font: inherit; resize: vertical;
}

@media (max-width: 640px) {
  .ai-fab { right: 14px; bottom: 14px; padding: 10px 14px; font-size: calc(13px * var(--fz)); }
  .ai-ask-drawer { width: 100%; border-left: 0; }
  .ai-priority-grid { grid-template-columns: 1fr; }
  /* Atalho de pergunta que não cabe na linha quebra o texto (alta legibilidade a 320px) em vez de alargar a página. */
  .ai-shortcuts .btn { white-space: normal; }
  /* Cada campo na sua própria linha (nunca espremido): coluna, não wrap de flex-linha única. */
  .ai-ask-row { flex-direction: column; align-items: stretch; }
  .ai-ask-row select, .ai-ask-row input.search, .ai-ask-row button { width: 100%; min-width: 0; }
  .ai-rec-actions { flex-direction: column; align-items: stretch; }
  .ai-rec-actions input.search { width: 100%; min-width: 0; }
  .ai-rec-actions button { width: 100%; }
}

/* Análises recorrentes (28/09/2026): resumo em quatro blocos, formulário na caixa de .fin-form, confirmação ao ligar e
   ao "rodar agora", histórico em tabela (no celular rola dentro de .scroll, nunca a página). */
.ai-ag-intro { margin: 0 0 12px; }
.ai-ag-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ai-ag-tile { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: rgba(var(--ink-rgb), 0.02); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ai-ag-tile > span { font-size: calc(11px * var(--fz)); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.ai-ag-tile > b { font-size: calc(15px * var(--fz)); font-weight: 650; overflow-wrap: anywhere; }
.ai-ag-tile > b .pill { vertical-align: 2px; margin-left: 4px; }
.ai-ag-tile > small { font-size: calc(12px * var(--fz)); color: var(--muted); overflow-wrap: anywhere; }
.ai-ag-ok { color: var(--green); }
.ai-ag-form { margin-bottom: 4px; }
.fin-form label.ai-ag-liga { margin-bottom: 12px; align-items: flex-start; }
.ai-ag-nota { margin: 10px 0 0; }
.ai-ag-confirm { margin-top: 12px; padding: 12px 14px; border: 1px solid rgba(var(--gold-rgb), 0.45); border-radius: 12px; background: var(--gold-soft); font-size: calc(13px * var(--fz)); }
.ai-ag-confirm p { margin: 0 0 8px; }
#ai-ag-conf-titulo:focus { outline: none; }
#ai-agenda-msg p { margin: 0 0 10px; }
.ai-ag-conf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin: 0 0 8px; }
.ai-ag-conf dt { color: var(--muted); font-size: calc(11px * var(--fz)); text-transform: uppercase; letter-spacing: 0.05em; }
.ai-ag-conf dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.ai-ag-acoes { flex-wrap: wrap; }
.ai-ag-tbl td { vertical-align: top; }
.ai-ag-motivo { max-width: 380px; white-space: normal; overflow-wrap: anywhere; margin-top: 4px; }
.ai-ag-mud { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
@media (min-width: 900px) {
  .ai-ag-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ai-ag-conf { grid-template-columns: 1fr; }
  .ai-ag-acoes .btn { flex: 1 1 auto; }
  /* Histórico no celular: cada execução vira um bloco (quando | custo / situação / escopo | link), sem rolar de lado. */
  .ai-ag-tbl thead { display: none; }
  .ai-ag-tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "quando custo" "sit sit" "escopo link"; gap: 6px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
  .tbl.ai-ag-tbl td { border-top: 0; padding: 0; min-width: 0; }
  .ai-ag-tbl td:nth-child(1) { grid-area: quando; }
  .ai-ag-tbl td:nth-child(2) { grid-area: sit; }
  .ai-ag-tbl td:nth-child(3) { grid-area: custo; }
  .ai-ag-tbl td:nth-child(4) { grid-area: escopo; }
  .ai-ag-tbl td:nth-child(5) { grid-area: link; text-align: right; }
  .ai-ag-motivo { max-width: none; }
}

/* Login único: sem seletor "Você é" (nome fixo "Administrador" no histórico). */
#crm-actor-row, #fin-actor-row, #ai-actor-row, .uni-actor-row { display: none !important; }

/* Experimentos (28/09/2026): central de oportunidades + registro de experimentos. Reusa .card, .pill, .notice,
   .tbl e a caixa de .fin-form; aqui só o que é da aba. No celular tudo empilha em uma coluna (tabelas largas
   rolam dentro de .scroll, nunca a página). */
.pill.info { background: rgba(var(--cyan-rgb), 0.13); color: var(--cyan); }
.exp-intro { margin: 0 0 12px; }
/* Rolagem até um bloco (formulário, detalhe, "ver em …" das evidências): para abaixo da faixa fixa — o html já desconta a
   altura dela (scroll-padding-top com --dock-h, acabamento §17); aqui fica só o respiro. */
[data-pane="exp"] > section, [data-pane="horarios"] > section, [data-pane="overview"] > section, #exp-acao { scroll-margin-top: 8px; }
.opp-meta { margin: 0 0 10px; }
.opp-list { display: grid; gap: 12px; }
.opp-blocked { margin-top: 12px; gap: 8px; }
.opp-item { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: rgba(var(--ink-rgb), 0.02); min-width: 0; }
.opp-item.lv-bad { border-color: rgba(var(--red-rgb), 0.4); }
.opp-item.lv-warn { border-color: rgba(var(--gold-rgb), 0.4); }
.opp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.opp-title { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; font-weight: 650; }
.opp-ev { margin: 0 0 10px; font-size: calc(13px * var(--fz)); overflow-wrap: anywhere; }
.opp-ev a { text-decoration: none; font-weight: 600; }
.opp-back { color: var(--gold); margin: 0 0 6px; }
.opp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin: 0; font-size: calc(13px * var(--fz)); }
.opp-grid dt { color: var(--muted); font-size: calc(11px * var(--fz)); text-transform: uppercase; letter-spacing: 0.05em; margin: 0; }
.opp-grid dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.opp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.opp-na { font-size: calc(13px * var(--fz)); padding: 10px 14px; border: 1px dashed var(--line); border-radius: 12px; overflow-wrap: anywhere; }
.opp-na .na { white-space: normal; }
.opp-dismiss, .exp-acao { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(var(--ink-rgb), 0.03); display: grid; gap: 8px; }
.exp-acao label { display: grid; gap: 5px; }
.exp-acao select, .exp-acao textarea { width: 100%; min-width: 0; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; }
.opp-more { margin-top: 12px; }
details.opp-det { margin-top: 10px; font-size: calc(13px * var(--fz)); }
details.opp-det > summary { cursor: pointer; color: var(--text); font-weight: 600; }
details.opp-det .notes { margin-top: 8px; }
.opp-limits-form { margin: 10px 0 0; }
.opp-limits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 10px; }
.opp-disp { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.opp-disp li { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.opp-disp li > span { min-width: 0; overflow-wrap: anywhere; }

.exp-head-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.exp-tbl tr[data-exp-abrir] { cursor: pointer; }
.exp-tbl tr[data-exp-abrir]:hover > td, .exp-tbl tr.on > td { background: rgba(var(--ink-rgb), 0.03); }
.exp-tbl tr[data-exp-abrir]:focus-visible { outline: 2px solid rgba(var(--gold-rgb), 0.6); outline-offset: -2px; }
.exp-tbl td { vertical-align: top; }
.exp-tbl td.exp-nome { min-width: 200px; max-width: 320px; }
.exp-hip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.exp-form .full { grid-column: 1 / -1; }
.exp-form textarea { padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; font-size: calc(14px * var(--fz)); resize: vertical; min-width: 0; }
.exp-form textarea:focus { outline: 2px solid rgba(var(--gold-rgb), 0.5); border-color: transparent; }
.exp-vars, .exp-scope { display: grid; gap: 6px; }
.exp-vars > .btn { justify-self: start; }
.exp-var-row { display: flex; gap: 6px; align-items: center; min-width: 0; }
.exp-var-row .search { flex: 1 1 auto; }
.exp-var-row select { flex: 0 1 200px; min-width: 0; }
.exp-scope-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 14px; max-height: 190px; overflow-y: auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.exp-scope-list label.fin-check { font-size: calc(13px * var(--fz)); }
.exp-prot { border: 0; padding: 0; margin: 0; min-width: 0; }
.exp-prot legend { font-size: calc(12px * var(--fz)); color: var(--muted); padding: 0; margin-bottom: 5px; }
.exp-checks { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.exp-meta { margin-bottom: 4px; }
#exp-detail-card > .h2-row h2 { text-transform: none; letter-spacing: 0; font-size: calc(16px * var(--fz)); font-weight: 650; color: var(--text); }
.exp-status-btns { margin: 12px 0 0; }
.exp-h3 { margin: 18px 0 8px; font-size: calc(13px * var(--fz)); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.09em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.exp-res td, .exp-res th { white-space: nowrap; }
.exp-res tr.exp-outra > td { opacity: 0.6; }
.exp-manual td { vertical-align: middle; }
.exp-num { width: 110px; flex: none; text-align: right; }
.exp-frozen { margin: 0 0 10px; padding: 8px 12px; border: 1px solid rgba(var(--gold-rgb), 0.35); border-radius: 10px; background: var(--gold-soft); color: var(--gold); }
.exp-guard { color: var(--gold); }
.exp-pg-aviso { margin: 0 0 6px; padding: 6px 10px; border-left: 3px solid var(--amber); background: rgba(var(--amber-rgb), 0.07); border-radius: 0 8px 8px 0; overflow-wrap: anywhere; }
.exp-conf { margin: 0; padding-left: 18px; font-size: calc(13px * var(--fz)); color: var(--gold); }
.exp-conf li { margin: 3px 0; }
.exp-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: calc(12px * var(--fz)); }
.exp-hist li { overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .opp-grid { grid-template-columns: 1fr; }
  .opp-item { padding: 12px; }
  .opp-actions .btn { flex: 1 1 auto; }
  .exp-head-btns { width: 100%; }
  .exp-head-btns .btn { flex: 1 1 auto; }
  .exp-var-row { flex-wrap: wrap; }
  .exp-var-row .search, .exp-var-row select { flex: 1 1 100%; }
  .exp-scope-list { grid-template-columns: 1fr; }
  /* Registro: cada experimento vira um cartão (rótulo à esquerda, valor à direita), sem rolagem lateral. */
  .exp-tbl thead { display: none; }
  .exp-tbl, .exp-tbl tbody, .exp-tbl tr, .exp-tbl td { display: block; width: 100%; }
  .exp-tbl tr[data-exp-abrir] { padding: 10px 0; border-top: 1px solid var(--line); }
  .exp-tbl td, .exp-tbl td + td { border: 0; padding: 3px 0; }
  .exp-tbl td.exp-nome { min-width: 0; max-width: none; padding-bottom: 6px; }
  .exp-tbl td[data-l] { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-align: right; }
  .exp-tbl td[data-l]::before { content: attr(data-l); color: var(--muted); font-size: calc(12px * var(--fz)); text-align: left; flex: none; }
  .exp-tbl td[data-l] > div { min-width: 0; }
  /* Resultados: coluna da métrica quebra linha e numerador/denominador também, pra caber antes/durante/variação. */
  .exp-res td:first-child, .exp-res th:first-child { white-space: normal; min-width: 92px; }
  .exp-res td + td, .exp-res th + th { padding-left: 8px; }
  .exp-res td .small, .exp-res th .small { white-space: normal; }
  .exp-res .tag { margin: 2px 0 0; }
}

/* Funil completo e UTMs e links (28/09/2026, aba Análises). A tabela das etapas vira cartões no celular (rótulo à
   esquerda, valor à direita — mesmo jeito do registro de experimentos); os gargalos herdam a coluna fixa de .tbl.ads e
   rolam de lado dentro do cartão, nunca a página. */
.fn-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 12px; }
.fn-ctl .chips.sm { margin-bottom: 0; }
.fn-janela { margin-bottom: 0; font-size: calc(13px * var(--fz)); }
.fn-lead { font-size: calc(14px * var(--fz)); margin: 0 0 8px; }
.fn-mat { margin: 0 0 8px; }
.fn-mat .pill { margin-right: 4px; }
.fn-paths { display: grid; gap: 6px; margin: 4px 0 10px; }
.fn-paths .pill { margin-right: 4px; }
.fn-info { color: var(--muted); margin: 0 0 12px; }
.fn-info b { color: var(--text); }
.fn-tbl td { vertical-align: top; }
.fn-tbl th { white-space: normal; vertical-align: bottom; line-height: 1.3; }
.fn-tbl td.fn-name { min-width: 200px; }
.fn-tbl .fn-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.fn-tbl .fn-bar { margin-top: 6px; max-width: 280px; height: 8px; }
.fn-tbl tr.fn-off > td { color: var(--muted); }
.fn-tbl .fn-na { color: var(--gold); margin-top: 3px; }
.fn-tbl tr.fn-worst .fn-title b { color: var(--red); }
.fn-bar.worst i { background: linear-gradient(90deg, var(--red), var(--red-2)); }
.fn-defs { margin: 12px 0 0; font-size: calc(13px * var(--fz)); }
.fn-defs summary { cursor: pointer; color: var(--gold); font-weight: 600; font-size: calc(12px * var(--fz)); }
.fn-sect { margin-top: 18px; }
.fn-hl { margin: 0; padding-left: 18px; font-size: calc(13px * var(--fz)); display: grid; gap: 8px; }
.fn-cuts { margin-top: 16px; }
.fn-cuts > div { min-width: 0; }
.tbl.fn-gaps th, .tbl.fn-mini th { white-space: normal; vertical-align: bottom; line-height: 1.3; }
.tbl.fn-gaps th { min-width: 58px; }
.tbl.fn-gaps th.name { min-width: 170px; }
.tbl.fn-gaps td .small { font-size: calc(11px * var(--fz)); }
.tbl.fn-gaps .bad { color: var(--red); font-weight: 600; }
.tbl.fn-gaps tr.few > td:not(.name) { opacity: 0.55; }
.tbl.fn-mini td { vertical-align: top; }

.utm-form { margin-bottom: 12px; }
.utm-grid .utm-full { grid-column: 1 / -1; }
.utm-form textarea { padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: calc(13px * var(--fz))/1.5 ui-monospace, Menlo, Consolas, monospace; resize: vertical; min-width: 0; }
.utm-form textarea:focus { outline: 2px solid rgba(var(--gold-rgb), 0.5); border-color: transparent; }
.utm-form label.utm-full { display: flex; flex-direction: column; gap: 5px; font-size: calc(12px * var(--fz)); color: var(--muted); }
.utm-form .utm-in { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: calc(13px * var(--fz)); min-width: 0; }
.utm-out { margin: 10px 0 0; }
.utm-out-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: calc(13px * var(--fz)); }
.utm-out-head .btn { margin-left: auto; }
.utm-out pre { white-space: pre-wrap; word-break: break-all; }
.utm-msgs { margin: 8px 0 0; padding-left: 18px; font-size: calc(13px * var(--fz)); }
.utm-msgs li { margin: 3px 0; }
.utm-msgs.bad { color: var(--red); }
.utm-msgs.warn { color: var(--gold); }
.utm-problems { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: calc(13px * var(--fz)); }
.utm-problems .pill { margin-right: 4px; min-width: 44px; text-align: center; }
.utm-params td.utm-val { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: calc(12px * var(--fz)); overflow-wrap: anywhere; word-break: break-word; }
.utm-hops td .trunc { max-width: 420px; }
.utm-tiles strong { font-size: calc(16px * var(--fz)); }
.utm-days { max-height: 360px; overflow-y: auto; }
.utm-combos td { vertical-align: top; }
.utm-combos .utm-cell { min-width: 150px; max-width: 220px; overflow-wrap: anywhere; }
.utm-combos .pill { margin: 0 2px 2px 0; white-space: normal; }

@media (min-width: 560px) {
  .utm-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
  .mini.four.utm-tiles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .fn-ctl { gap: 8px; }
  .fn-janela input[type="number"] { width: 64px; }
  /* Etapas: cada uma vira um cartão (nome em cima, números em linhas rótulo × valor). */
  .fn-tbl thead { display: none; }
  .fn-tbl, .fn-tbl tbody, .fn-tbl tr, .fn-tbl td { display: block; width: 100%; }
  .fn-tbl tr { padding: 10px 0; border-top: 1px solid var(--line); }
  .fn-tbl td, .fn-tbl td + td { border: 0; padding: 3px 0; text-align: right; }
  .fn-tbl td.fn-name { min-width: 0; text-align: left; padding-bottom: 6px; }
  .fn-tbl td.fn-name .fn-bar { max-width: none; }
  .fn-tbl td[data-l] { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .fn-tbl td[data-l]::before { content: attr(data-l); color: var(--muted); font-size: calc(12px * var(--fz)); text-align: left; flex: none; }
  .fn-tbl td[data-l] > div { min-width: 0; }
  .utm-hops td .trunc { max-width: 130px; }
  .utm-hops .utm-path { display: none; }
  .tbl.fn-gaps td.name, .tbl.fn-gaps th.name { min-width: 120px; max-width: 140px; white-space: normal; }
  .tbl.fn-gaps td.name .trunc { max-width: 130px; }
  .mini.four.utm-tiles { grid-template-columns: 1fr; }
  .utm-out-head .btn { margin-left: 0; }
}

/* Aba Anúncios (28/09/2026): estrutura da conta (tabela hierárquica), criativos e desgaste. A tabela reusa .tbl.ads
   (1ª coluna fixa, linha que abre); cartões, comparação e desgaste empilham numa coluna no celular. Tabelas largas
   rolam dentro de .scroll, nunca a página. */
[data-pane="ads"] > section { scroll-margin-top: 8px; }
.anu-models { margin-bottom: 12px; }
.hier-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; }
.tbl.hier th { white-space: normal; vertical-align: bottom; min-width: 76px; line-height: 1.3; }
.tbl.hier th.name { min-width: 340px; }
.tbl.hier th.sortable { cursor: pointer; user-select: none; }
.tbl.hier th.sortable:hover, .tbl.hier th.sortable.on { color: var(--text); }
.tbl.hier th.sortable:focus-visible { outline: 2px solid rgba(var(--gold-rgb), 0.6); outline-offset: -2px; }
.tbl.hier .sort-ind { display: inline-block; margin-left: 4px; font-size: calc(9px * var(--fz)); opacity: 0.55; }
.tbl.hier th.on .sort-ind { opacity: 1; color: var(--gold); }
.tbl.hier td.name { max-width: 440px; vertical-align: top; }
.tbl.hier td.name b { white-space: normal; overflow-wrap: anywhere; }
.tbl.hier .nm { align-items: flex-start; }
.tbl.hier .caret { margin-top: 2px; }
.tbl.hier .hier-sub { white-space: normal; overflow-wrap: anywhere; font-size: calc(11px * var(--fz)); }
.tbl.hier tr.lv-conta > td { font-weight: 650; background-color: rgba(var(--gold-rgb), 0.05); }
.tbl.hier tr.lv-conta > td.name { background: var(--sticky-sum); }
.tbl.hier tr.lv-anuncio > td.name b, .tbl.hier tr.lv-outra > td.name b { font-weight: 500; }
.tbl.hier tr.k-total > td { font-weight: 650; }
.tbl.hier tr.k-total > td.name { background: var(--sticky-sum); }
.tbl.hier .meta-col { color: var(--cost); }
.tbl.hier td.meta-col { border-left: 1px dashed rgba(var(--cost-rgb), 0.25); }
/* Estrutura da conta reorganizada (09/10/2026 — o dono: "organiza bem organizado"): cabeçalho com os grupos de colunas, faixas
   Rodando/Paradas/Sem gasto, célula do nome em 2 linhas, status em ponto + palavra, cores das regras de HierPuro e a linha-resumo do
   celular. Nenhum número muda: só a arrumação. */
/* 29/10/2026: a largura mínima do nome não valia (o "min-width: 64px" de thead tr.hier-cab th, mais específico, ganhava) e quem segurava a
   coluna em ~370 px era o texto sem quebra da faixa "Rodando agora · …". A faixa agora quebra em partes: o mínimo passa a valer de fato,
   no seletor do cabeçalho, com o recuo de 22 px por nível e o nome da campanha um ponto maior (o nome da campanha cabe numa linha). */
/* Revisão (29/10/2026): o mínimo só vale com as faixas (estrutura do Meta lida, `hier-mc`) e nunca passa de 45vw (o teto da largura
   arrastada, .com-w-nome): sem o teto, no tablet a coluna fixa tomava mais da metade da área que rola; e sem o Meta, na alta
   legibilidade, a tabela passava a rolar de lado a 1280/1440 px. */
@media (min-width: 641px) and (max-width: 1799px) { .tbl.hier.hier-mc thead tr.hier-cab th.name { min-width: min(calc(360px * var(--fz)), 45vw); } .tbl.hier td.name { max-width: calc(440px * var(--fz)); } }
@media (min-width: 1800px) { .tbl.hier.hier-mc thead tr.hier-cab th.name { min-width: min(calc(400px * var(--fz)), 45vw); } .tbl.hier td.name { max-width: calc(500px * var(--fz)); } }
.tbl.hier thead tr.hier-grupos th.hier-g { text-align: left; font-size: calc(10px * var(--fz)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 6px 8px 3px 12px; border-top: 2px solid var(--line); min-width: 0; white-space: nowrap; }
.tbl.hier thead tr.hier-grupos th.g-res { border-top-color: var(--gold); color: var(--gold); }
.tbl.hier thead tr.hier-grupos td.name { border-top: 0; border-bottom: 0; }
.tbl.hier thead tr.hier-cab th { white-space: nowrap; min-width: 64px; }
.tbl.hier thead tr.hier-cab th.th-2l { white-space: normal; max-width: 7.5em; }
.tbl.hier .nw { white-space: nowrap; }
.tbl.hier .g-ini { border-left: 1px solid var(--line); }
/* As faixas (Rodando/Paradas/Sem gasto) viraram cabeçalhos de seção em 29/10/2026: ver "gaveta, campanha, conjunto e anúncio", abaixo. */
.tbl.hier .mc-ctl-lin { display: none; }
.tbl.hier .nm .btn.xs.mc-ctl { margin-left: auto; flex: none; align-self: flex-start; padding: 1px 10px; line-height: 1.35; margin-top: -2px; margin-bottom: -3px; }
.tbl.hier .nm b { flex: 0 1 auto; min-width: 0; }
.tbl.hier thead tr.hier-cab th.th-2l { max-width: 8.5em; }
.tbl.hier .mc-niv, .tbl.hier .mc-nanu { color: var(--muted); font-size: calc(11px * var(--fz)); white-space: nowrap; }
.mc-linha .mc-tag-sub { margin-left: 0; white-space: nowrap; }
.tbl.hier tr.mc-parada > td.name .nm b { color: var(--muted); }
.tbl.hier .mc-linha .pill.ok, .tbl.hier .mc-linha .pill.off { background: transparent; padding: 0; border: 0; }
.tbl.hier .mc-linha .pill.ok::before, .tbl.hier .mc-linha .pill.off::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.tbl.hier .mc-linha .pill.ok::before { background: var(--green); }
.tbl.hier .mc-linha .pill.off { font-weight: 500; color: var(--muted); }
.tbl.hier .mc-linha .pill.off::before { border: 1.5px solid var(--muted); width: 6px; height: 6px; }
.tbl.hier .hs-cedo { color: var(--muted); }
.tbl.hier .hs-warn, .hier-legenda .hs-warn, .hier-como .hs-warn { color: var(--amber); }
.hs-forte { font-weight: 700; }
.tbl.ads.hier tr.few > td:not(.name) { opacity: 0.7; }
.tbl.hier .hier-cel { display: none; }
#hier .scroll { position: relative; }
.tbl.ads.hier tr.few > td.name > .hier-cel { opacity: 0.7; }
.hier-tools .hier-legenda { flex: 1 1 320px; }
.hier-aviso { flex: 1 1 100%; margin: 0 0 4px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(var(--gold-rgb), 0.45); background: rgba(var(--gold-rgb), 0.08); }
.hier-aviso .btn { margin-left: 6px; }
.hier-modelo { margin: 8px 0 0; }
details.hier-como { margin-top: 8px; }
details.hier-como summary { cursor: pointer; color: var(--muted); font-size: calc(13px * var(--fz)); }
details.hier-como summary:hover { color: var(--text); }

.crv-msg { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: rgba(var(--green-rgb), 0.08); border: 1px solid rgba(var(--green-rgb), 0.25); color: var(--green); }
.crv-sugs-det { margin: 0 0 14px; }
.crv-sugs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 10px; }
.crv-sug { border: 1px dashed rgba(var(--gold-rgb), 0.45); border-radius: 12px; padding: 10px 12px; min-width: 0; overflow-wrap: anywhere; }
.crv-sug-ads { margin: 6px 0 0; padding-left: 16px; color: var(--muted); }
.crv-sug-ads li { margin: 2px 0; }
.crv-sug-nome { color: var(--text); }
.crv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.crv-card { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: rgba(var(--ink-rgb), 0.02); min-width: 0; }
.crv-th { width: 88px; aspect-ratio: 1; border-radius: 10px; background: linear-gradient(135deg, var(--thumb-1), var(--thumb-2)); display: grid; place-items: center; color: var(--muted); font-size: calc(11px * var(--fz)); text-align: center; overflow: hidden; padding: 4px; }
.crv-th img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; }
.crv-bd { min-width: 0; display: grid; gap: 6px; align-content: start; }
.crv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.crv-head b { font-size: calc(14px * var(--fz)); overflow-wrap: anywhere; }
.crv-head .tag { margin-left: 0; }
.crv-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin: 2px 0; }
.crv-kpis dt { font-size: calc(11px * var(--fz)); color: var(--muted); }
.crv-kpis dd { margin: 0; font-weight: 600; font-size: calc(13px * var(--fz)); }
.crv-card.few .crv-kpis { opacity: 0.6; }
.crv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
label.crv-cmp { display: inline-flex; align-items: center; gap: 6px; font-size: calc(12px * var(--fz)); cursor: pointer; margin-right: auto; }
label.crv-cmp input { width: auto; margin: 0; }
details.crv-det { font-size: calc(12px * var(--fz)); }
details.crv-det > summary { cursor: pointer; color: var(--muted); }
.crv-ads { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.crv-ads li { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere; }
.crv-ficha { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; margin: 10px 0 0; }
.crv-ficha dt { color: var(--muted); }
.crv-ficha dd { margin: 0; overflow-wrap: anywhere; }
.crv-form { margin-bottom: 14px; scroll-margin-top: 8px; }
.crv-ad-list { max-height: 240px; }
.crv-ad-list label.fin-check.off { opacity: 0.55; }
.crv-cmp-box, .desg-panel { margin-top: 16px; border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: rgba(var(--ink-rgb), 0.02); scroll-margin-top: 8px; }
.crv-cmp-hint { margin: 12px 0 0; }
.crv-aviso { color: var(--gold); }
.crv-cmp-tbl td, .crv-cmp-tbl th { white-space: nowrap; }
.crv-cmp-tbl th.r { white-space: normal; min-width: 110px; }
.desg-tbl td, .desg-tbl th { white-space: nowrap; vertical-align: middle; }
.desg-h4 { margin: 14px 0 6px; font-size: calc(12px * var(--fz)); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.desg-outras { margin: 0; padding-left: 18px; font-size: calc(13px * var(--fz)); color: var(--muted); }
.desg-outras li { margin: 3px 0; }
.desg-outras li.on { color: var(--text); }
.desg-lista td { vertical-align: middle; }
.desg-lista td .trunc { max-width: 220px; }
.desg-lista tr.on > td { background: rgba(var(--gold-rgb), 0.06); }
.spark { display: block; overflow: visible; }
.spark-line { fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.spark-dot { fill: var(--cyan); }
.spark-cut { stroke: rgba(var(--text-rgb), 0.35); stroke-width: 1; stroke-dasharray: 2 2; }
#ads-criativos .opp-det { margin-top: 16px; }

@media (max-width: 640px) {
  /* 09/10/2026: o nome ganha espaço e uma linha-resumo (investimento · vendas · CPA · ROAS); a linha dos grupos some. */
  .tbl.hier td.name, .tbl.hier th.name { min-width: 180px; max-width: 220px; white-space: normal; }
  .tbl.hier tr.hier-grupos { display: none; }
  /* No celular o "Controlar" fica no fim da linha de status (a coluna do nome é estreita). */
  .tbl.hier .mc-ctl-nm { display: none; }
  .tbl.hier .mc-linha .mc-ctl-lin { display: inline-flex; }
  .tbl.hier .hier-cel { display: block; margin-top: 4px; font-size: calc(12px * var(--fz)); font-variant-numeric: tabular-nums; white-space: normal; }
  .hier-tools .hier-legenda { display: none; }
  .crv-grid { grid-template-columns: minmax(0, 1fr); }
  .crv-card { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 10px; }
  .crv-th { width: 64px; font-size: calc(10px * var(--fz)); }
  .crv-sugs { grid-template-columns: minmax(0, 1fr); }
  .crv-cmp-box, .desg-panel { padding: 12px 10px; }
  .desg-lista td .trunc { max-width: 140px; }
  /* Comparação no celular: 2–3 criativos cabem na largura; texto longo quebra em vez de empurrar os números. */
  .crv-cmp-tbl td, .crv-cmp-tbl th, .crv-cmp-tbl th.r { white-space: normal; min-width: 0; }
  .crv-cmp-tbl td:first-child { width: 34%; padding-right: 6px; }
  .crv-cmp-tbl td + td, .crv-cmp-tbl th + th { padding-left: 8px; overflow-wrap: anywhere; }
  .crv-cmp-tbl .pill { white-space: normal; }
  /* Desgaste no celular: cada métrica vira um bloco (nome + mini-gráfico em cima; metades e variação embaixo). */
  .desg-tbl thead { display: none; }
  .desg-tbl, .desg-tbl tbody { display: block; width: 100%; }
  .desg-tbl tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 8px; padding: 10px 0; border-top: 1px solid var(--line); }
  .desg-tbl td, .desg-tbl td + td { border: 0; padding: 0; white-space: normal; }
  .desg-tbl td.desg-nome { grid-column: 1 / 3; font-weight: 600; }
  .desg-tbl td.desg-spark { grid-column: 3; justify-self: end; }
  .desg-tbl td.desg-spark .spark { width: 96px; }
  .desg-tbl td[data-l] { text-align: left; }
  .desg-tbl td[data-l]::before { content: attr(data-l); display: block; color: var(--muted); font-size: calc(11px * var(--fz)); }
}

/* ============================================================
   Onde investir e o que melhorar (28/09/2026, topo da aba Anúncios): tabela de achados (vira cartões no celular), lista
   de recortes com o selo de status (símbolo + rótulo, nunca só cor), barras horizontais finas com o valor na ponta e a
   série "reportado pelo Meta" identificada na legenda, tabela alternativa e o cruzamento de dois recortes.
   Séries: 1ª = dourado; reportado pelo Meta = ciano; reconciliado pelo painel = azul (--chart-sub).
   ============================================================ */
.oi-intro { margin: -6px 0 0; }
#oi-box { margin-top: 14px; }
.oi-aviso { margin: 0 0 8px; color: var(--gold); }
.oi-comp { margin: 0 0 8px; }
.oi-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.oi-tbl td { vertical-align: top; }
.oi-tbl tr.oi-sub > td { border-top: 0; padding-top: 0; }
.oi-tbl tr.oi-sub > td > div { min-width: 0; max-width: 1100px; }
.oi-q { display: inline; margin-left: 4px; }
.oi-tbl td > div { min-width: 150px; overflow-wrap: anywhere; }
.oi-tbl td.oi-seg > div { min-width: 170px; max-width: 250px; }
.oi-tbl td.oi-seg .muted, .oi-tbl td.oi-seg b { display: block; }
.oi-tbl td.oi-btn { white-space: nowrap; }
/* "Mostrar mais": o foco vai para o 1º achado novo (linha focável só por script). */
.oi-tbl tr.oi-main:focus { outline: none; }
.oi-tbl tr.oi-main:focus-visible { outline: 2px solid rgba(var(--gold-rgb), 0.6); outline-offset: -2px; }
.oi-crit, .oi-acao { margin-top: 5px; }
.tag.oi-expl { color: var(--gold); border-color: rgba(var(--gold-rgb), 0.5); }
.oi-rec-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.oi-rec { width: 100%; height: 100%; display: grid; gap: 5px; justify-items: start; align-content: start; text-align: left; font: inherit; color: var(--text); background: rgba(var(--ink-rgb), 0.02); border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; cursor: pointer; }
.oi-rec:hover { border-color: rgba(var(--gold-rgb), 0.5); }
.oi-rec:focus-visible { outline: 2px solid rgba(var(--gold-rgb), 0.6); outline-offset: 1px; }
.oi-rec.on { border-color: rgba(var(--gold-rgb), 0.7); background: var(--gold-soft); }
.oi-rec-nome { font-weight: 650; font-size: calc(13px * var(--fz)); }
.oi-rec-fonte { font-size: calc(11px * var(--fz)); }
.oi-rec-box { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: rgba(var(--ink-rgb), 0.02); min-width: 0; }
.oi-rec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.oi-rec-head > b { font-size: calc(15px * var(--fz)); }
.oi-motivo { margin: 0 0 8px; overflow-wrap: anywhere; }
.oi-vistas { display: flex; flex-wrap: wrap; gap: 0 10px; align-items: center; }
.oi-vistas .chips.sm { margin-bottom: 12px; }
.oi-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 12px; font-size: calc(12px * var(--fz)); color: var(--text); }
.oi-key { display: inline-flex; align-items: center; gap: 6px; }
.oi-key > i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: none; }
.oi-bars .s1, .oi-key .s1 { background: var(--gold-fill); }
.oi-bars .s-meta, .oi-key .s-meta { background: var(--cyan); }
.oi-bars .s-rec, .oi-key .s-rec { background: var(--chart-sub); }
.oi-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.oi-bar-row { display: grid; grid-template-columns: minmax(120px, 230px) minmax(0, 1fr); gap: 4px 14px; align-items: center; }
.oi-bar-lbl { font-size: calc(13px * var(--fz)); overflow-wrap: anywhere; }
.oi-bar-row.few .oi-bar-lbl { color: var(--muted); }
.oi-bar-set { display: grid; gap: 3px; min-width: 0; }
.oi-bar { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 8px; align-items: center; }
.oi-track { display: block; height: 9px; border-radius: 0 4px 4px 0; background: rgba(var(--ink-rgb), 0.06); overflow: hidden; }
.oi-track > i { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.oi-val { font-size: calc(12px * var(--fz)); font-variant-numeric: tabular-nums; text-align: right; color: var(--text); }
.oi-dados td, .oi-dados th { white-space: nowrap; }
.oi-dados th.r { white-space: normal; min-width: 72px; }
/* Tabela larga: a coluna do segmento fica fixa enquanto os números rolam dentro do cartão. */
.oi-dados td.name, .oi-dados th.name { position: sticky; left: 0; z-index: 1; background: var(--card-2); min-width: 150px; max-width: 220px; white-space: normal; }
.oi-dados tr.k-total > td.name { background: var(--sticky-sum); }
.oi-dados tr.few > td { color: var(--muted); }
.oi-dados .meta-col { color: var(--cost); }
.oi-dados td.meta-col, .oi-dados th.meta-col { border-left: 1px dashed rgba(var(--cost-rgb), 0.35); }
.oi-naoobs { margin-top: 10px; }
.oi-cz { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 0 0 10px; }
.oi-cz label { display: grid; gap: 4px; font-size: calc(12px * var(--fz)); color: var(--muted); min-width: 0; }
.oi-cz select { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; font-size: calc(13px * var(--fz)); min-width: 0; max-width: 100%; color-scheme: var(--scheme); }
.oi-cz > span { padding-bottom: 8px; }
.oi-cz-st { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0 0 8px; overflow-wrap: anywhere; }
.oi-cz-st > span:not(.sd) { min-width: 0; flex: 1 1 240px; }
.oi-matriz td { vertical-align: top; min-width: 130px; overflow-wrap: anywhere; }
#ads-onde .opp-det { margin-top: 14px; }

@media (max-width: 640px) {
  /* Achados: cada um vira um cartão (rótulo em cima, conteúdo embaixo), sem rolagem lateral. */
  .oi-tbl thead { display: none; }
  .oi-tbl, .oi-tbl tbody, .oi-tbl tr, .oi-tbl td { display: block; width: 100%; }
  .oi-tbl tr { padding: 12px 0; border-top: 1px solid var(--line); }
  .oi-tbl tr:first-child { border-top: 0; padding-top: 4px; }
  .oi-tbl td, .oi-tbl td + td { border: 0; padding: 3px 0; }
  .oi-tbl td > div, .oi-tbl td.oi-seg > div { min-width: 0; max-width: none; }
  .oi-tbl td[data-l]:not([data-l=""])::before { content: attr(data-l); display: block; color: var(--muted); font-size: calc(11px * var(--fz)); text-transform: uppercase; letter-spacing: 0.06em; }
  .oi-tbl td.oi-btn { padding-top: 8px; }
  .oi-tbl tr.oi-main { border-top: 1px solid var(--line); padding-bottom: 0; }
  .oi-tbl tr.oi-sub { border-top: 0; padding-top: 2px; }
  .oi-tbl tr.oi-main:first-child { border-top: 0; }
  .oi-dados td.name, .oi-dados th.name { min-width: 118px; max-width: 140px; }
  .oi-tbl td.oi-btn .btn { width: 100%; }
  .oi-rec-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oi-rec { padding: 8px 9px; }
  .oi-rec .sd { white-space: normal; }
  .oi-rec-fonte { display: none; }
  .oi-rec-box { padding: 12px 10px; }
  .oi-bar-row { grid-template-columns: minmax(0, 1fr); }
  .oi-cz label { flex: 1 1 130px; }
  .oi-cz select { width: 100%; }
  .oi-matriz thead { display: none; }
  .oi-matriz, .oi-matriz tbody, .oi-matriz tr, .oi-matriz td { display: block; width: 100%; }
  .oi-matriz tr { padding: 10px 0; border-top: 1px solid var(--line); }
  .oi-matriz td, .oi-matriz td + td { border: 0; padding: 2px 0; min-width: 0; }
  .oi-matriz td[data-l]::before { content: attr(data-l); display: block; color: var(--muted); font-size: calc(11px * var(--fz)); }
}

/* Mapa por região (30/09/2026, vista "Mapa" do recorte Região): cartograma de quadrados em SVG (um por UF), legenda com
   os limites de cada faixa, dica junto do quadrado e a mesma informação em tabela. Cores só dos tokens --map-*. */
.oi-mapa-rot { margin: 0 0 10px; padding: 2px 0 2px 10px; border-left: 3px solid var(--violet); font-size: calc(13px * var(--fz)); overflow-wrap: anywhere; }
.oi-mapa-bloq { margin: -6px 0 10px; }
.oi-mapa-corpo { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 14px 28px; align-items: start; }
.oi-mapa-fig { position: relative; margin: 0; width: 100%; max-width: 340px; min-width: 0; }
.oi-mapa-svg { display: block; width: 100%; height: auto; }
.oi-uf { cursor: pointer; color: var(--map-none-ink); }
.oi-uf:focus { outline: none; }
.oi-uf-q { stroke: var(--map-edge); stroke-width: 1; }
.oi-uf.f1 { color: var(--map-ink-1); }
.oi-uf.f2 { color: var(--map-ink-2); }
.oi-uf.f3 { color: var(--map-ink-3); }
.oi-uf.f4 { color: var(--map-ink-4); }
.oi-uf.f5 { color: var(--map-ink-5); }
.oi-uf.f1 .oi-uf-q { fill: var(--map-1); }
.oi-uf.f2 .oi-uf-q { fill: var(--map-2); }
.oi-uf.f3 .oi-uf-q { fill: var(--map-3); }
.oi-uf.f4 .oi-uf-q { fill: var(--map-4); }
.oi-uf.f5 .oi-uf-q { fill: var(--map-5); }
.oi-uf text { fill: currentColor; font-size: calc(15px * var(--fz)); font-weight: 650; letter-spacing: 0.02em; pointer-events: none; }
/* Sigla em cima do hachurado (sem dados) ou do pontilhado (não se calcula): contorno da cor de fundo por baixo da letra
   (nunca some no meio das listras/pontos). */
.oi-uf.nd text, .oi-uf.nc text { stroke: var(--map-none); stroke-width: 4px; paint-order: stroke; stroke-linejoin: round; }
.oi-nd-bg { fill: var(--map-none); }
.oi-nd-ln { stroke: var(--map-none-line); stroke-width: 3; }
.oi-nc-pt { fill: var(--map-none-line); }
.oi-uf-pv { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 3 3; opacity: 0.9; pointer-events: none; }
.oi-uf:hover .oi-uf-q { stroke: var(--text); stroke-width: 2; }
.oi-uf:focus-visible .oi-uf-q { stroke: var(--gold); stroke-width: 3; }
.oi-mapa-tip { position: absolute; left: 0; top: 0; z-index: 3; width: max-content; max-width: min(300px, 100%); padding: 8px 10px; border-radius: 10px; background: var(--chart-tip-bg); color: var(--chart-tip-text); border: 1px solid var(--chart-tip-line); box-shadow: var(--shadow-dock); font-size: calc(12px * var(--fz)); line-height: 1.45; pointer-events: none; overflow-wrap: anywhere; }
.oi-mapa-leg { min-width: 0; font-size: calc(13px * var(--fz)); }
.oi-mapa-leg-t { margin: 0 0 8px; }
.oi-mapa-faixas { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.oi-mapa-faixas li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.oi-mapa-faixas li > span { min-width: 0; overflow-wrap: anywhere; }
.oi-mapa-sw { flex: none; width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--map-edge); }
.oi-mapa-sw.f1 { background: var(--map-1); }
.oi-mapa-sw.f2 { background: var(--map-2); }
.oi-mapa-sw.f3 { background: var(--map-3); }
.oi-mapa-sw.f4 { background: var(--map-4); }
.oi-mapa-sw.f5 { background: var(--map-5); }
.oi-mapa-sw.nd { background: repeating-linear-gradient(135deg, var(--map-none) 0 3px, var(--map-none-line) 3px 5px); }
.oi-mapa-sw.nc { background: radial-gradient(circle, var(--map-none-line) 1.5px, transparent 1.9px) 0 0 / 6px 6px, var(--map-none); }
.oi-mapa-sw.pv { background: transparent; border: 1.5px dashed var(--muted); }
.oi-mapa-res { margin: 0 0 6px; overflow-wrap: anywhere; }
.oi-mapa-dim { margin-top: 12px; }
.oi-mapa-tab td.r:last-child, .oi-mapa-tab th.r:last-child { min-width: 96px; }
@media (max-width: 640px) {
  .oi-mapa-corpo { grid-template-columns: minmax(0, 1fr); }
  .oi-mapa-fig { margin: 0 auto; }
}

/* ============================================================
   Carteira de comissões (28/09/2026): por pessoa, cartões (em apuração, apurado a pagar, pago, ajustes, a conferir),
   tabela por competência e registros; formulários com passo de confirmação; demonstrativo de UMA pessoa numa página
   de impressão limpa (@media print esconde todo o resto do painel). Âmbar = "a conferir" (mesmo tom do aviso do CRM).
   ============================================================ */
.cart-head-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.cart-lead { margin-bottom: 14px; }
.cart-person { padding: 16px 0; border-top: 1px solid var(--line); }
.cart-person:first-child, .cart-lead + .cart-person { border-top: 0; padding-top: 4px; }
.cart-person.off { opacity: 0.7; }
.cart-person-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.cart-person-head > b { font-size: calc(15px * var(--fz)); }
.cart-person-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.mini.five { grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 12px; }
.cart-cards span { display: block; font-size: calc(11px * var(--fz)); color: var(--muted); margin-top: 2px; line-height: 1.35; }
.cart-cards .cart-amber { background: rgba(var(--amber-rgb), 0.12); box-shadow: inset 0 0 0 1px rgba(var(--amber-rgb), 0.55); }
.cart-cards .cart-amber small, .cart-cards .cart-amber strong { color: var(--amber); }
.cart-alert { border: 1px solid rgba(var(--amber-rgb), 0.55); background: rgba(var(--amber-rgb), 0.1); border-radius: 12px; padding: 10px 12px; font-size: calc(13px * var(--fz)); margin: 0 0 12px; }
.cart-alert b { color: var(--amber); }
.cart-alert span { display: block; color: var(--muted); font-size: calc(12px * var(--fz)); margin-top: 4px; }
.pill.amber { background: rgba(var(--amber-rgb), 0.16); color: var(--amber); }
.pane[data-pane="fin"] .cart-months th.num, .pane[data-pane="fin"] .cart-reg-tbl th.num { text-align: right; }
.pane[data-pane="fin"] tr.cart-row-amber td { background: rgba(var(--amber-rgb), 0.07); }
.cart-months td .tag { margin-left: 6px; }
.cart-quiet { font-size: calc(12px * var(--fz)); color: var(--muted); margin: 8px 0 0; }
.cart-reg { margin-top: 10px; }
.cart-reg summary { cursor: pointer; font-size: calc(13px * var(--fz)); color: var(--gold); font-weight: 600; padding: 4px 0; }
.pane[data-pane="fin"] td.cart-det { white-space: normal; min-width: 220px; max-width: 420px; overflow-wrap: anywhere; }
.pane[data-pane="fin"] tr.cart-voided td { color: var(--muted); }
.cart-void-note { font-size: calc(11.5px * var(--fz)); color: var(--muted); margin-top: 3px; }
.cart-form-title { margin: 0 0 6px; font-size: calc(14px * var(--fz)); }
.cart-form-warn { margin: 0 0 12px; font-size: calc(12.5px * var(--fz)); color: var(--muted); border-left: 3px solid var(--gold); padding: 2px 0 2px 10px; }
.cart-form-hint { margin: 10px 0 0; font-size: calc(12.5px * var(--fz)); color: var(--amber); }
/* Texto digitado (referência, observação, motivo) pode vir sem espaço — um link do Drive, um nome de arquivo: quebra
   em qualquer ponto em vez de empurrar a página pro lado no celular. */
.cart-void-sum { margin: 0 0 10px; font-size: calc(13px * var(--fz)); overflow-wrap: anywhere; }
.cart-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 6px 0 0; }
.cart-dl dt { font-size: calc(11px * var(--fz)); color: var(--muted); }
.cart-dl dd { margin: 1px 0 0; font-weight: 600; overflow-wrap: anywhere; }
#cart-confirm-title:focus { outline: none; }
.cart-ok { border: 1px solid rgba(var(--green-rgb), 0.4); background: rgba(var(--green-rgb), 0.08); color: var(--green); border-radius: 10px; padding: 9px 12px; font-size: calc(13px * var(--fz)); margin: 0 0 12px; overflow-wrap: anywhere; }
.cart-err { border: 1px solid rgba(var(--red-rgb), 0.45); background: rgba(var(--red-rgb), 0.08); color: var(--red-ink); border-radius: 10px; padding: 10px 12px; font-size: calc(13px * var(--fz)); margin: 0 0 12px; overflow-wrap: anywhere; }
.cart-err b { color: var(--red); }
.cart-err ul { margin: 6px 0 0; padding-left: 18px; }
.fin-form input[aria-invalid="true"], .fin-form select[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }

/* demonstrativo: na tela, uma folha branca por cima do painel; na impressão, só ela */
body.demo-open { overflow: hidden; }
#cart-demo { position: fixed; inset: 0; z-index: 80; overflow-y: auto; overflow-x: hidden; background: var(--bg); padding: 16px; }
.demo-bar { max-width: 900px; margin: 0 auto 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.demo-bar > b { font-size: calc(14px * var(--fz)); }
.demo-bar label { display: flex; align-items: center; gap: 6px; font-size: calc(12px * var(--fz)); color: var(--muted); }
.demo-bar input[type="month"] { padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); color-scheme: var(--scheme); }
.demo-bar-sp { flex: 1 1 auto; }
.demo-bar-msg { max-width: 900px; margin: -4px auto 10px; color: var(--red); font-size: calc(13px * var(--fz)); }
.demo-doc { max-width: 900px; margin: 0 auto; background: #fff; color: #1a1d21; border-radius: 12px; padding: 32px 36px; font-size: calc(13px * var(--fz)); line-height: 1.5; }
.demo-doc h1 { font-size: calc(20px * var(--fz)); margin: 0; color: #111; letter-spacing: -0.01em; }
.demo-doc h2 { font-size: calc(12px * var(--fz)); text-transform: uppercase; letter-spacing: 0.08em; color: #333; margin: 22px 0 8px; }
.demo-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; border-bottom: 2px solid #1a1d21; padding-bottom: 14px; }
.demo-head p { margin: 2px 0 0; color: #555; }
.demo-meta { display: grid; grid-template-columns: auto auto; gap: 2px 14px; margin: 0; font-size: calc(12.5px * var(--fz)); }
.demo-meta dt { color: #666; }
.demo-meta dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.demo-tbl { width: 100%; border-collapse: collapse; font-size: calc(12px * var(--fz)); min-width: 640px; }
.demo-tbl th { text-align: left; font-weight: 600; color: #555; border-bottom: 1px solid #aaa; padding: 6px 8px; white-space: nowrap; }
.demo-tbl td { border-bottom: 1px solid #e3e3e3; padding: 6px 8px; vertical-align: top; }
.demo-tbl .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.demo-tbl tr.demo-open-row td { color: #666; font-style: italic; }
.demo-meses td:nth-child(2) { min-width: 200px; }
.demo-tbl td:last-child:not(.num) { min-width: 180px; }
.demo-tbl tr.demo-voided td { color: #888; }
.demo-tbl td.demo-ref { overflow-wrap: anywhere; min-width: 120px; }
.demo-note { font-size: calc(11.5px * var(--fz)); color: #555; margin: 8px 0 0; }
.demo-empty { color: #666; margin: 0; }
.demo-err { color: #b42318; margin: 10px 0 0; }
.demo-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.demo-totals > div { border: 1px solid #ddd; border-radius: 8px; padding: 8px 10px; }
.demo-totals dt { font-size: calc(11px * var(--fz)); color: #666; }
.demo-totals dd { margin: 2px 0 0; font-weight: 650; font-size: calc(15px * var(--fz)); font-variant-numeric: tabular-nums; }
.demo-foot { margin-top: 22px; padding-top: 10px; border-top: 1px solid #ccc; font-size: calc(11.5px * var(--fz)); color: #444; }

@media (max-width: 980px) {
  .mini.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mini.five { grid-template-columns: 1fr 1fr; }
  .mini.five > :last-child { grid-column: 1 / -1; }
  .cart-head-btns, .cart-person-btns { width: 100%; margin-left: 0; }
  .cart-head-btns .btn, .cart-person-btns .btn { flex: 1 1 auto; }
  .cart-dl { grid-template-columns: 1fr; }
  #cart-demo { padding: 12px; }
  .demo-bar > b { flex-basis: 100%; }
  .demo-bar label { flex: 1 1 140px; }
  .demo-bar input[type="month"] { flex: 1 1 auto; min-width: 0; }
  .demo-doc { padding: 18px 16px; border-radius: 10px; }
  .demo-totals { grid-template-columns: 1fr 1fr; }
}

@media print {
  @page { size: A4; margin: 14mm 12mm; }
  body.demo-open { background: #fff !important; color: #111 !important; overflow: visible !important; }
  body.demo-open #app > :not(#cart-demo) { display: none !important; }
  body.demo-open #cart-demo { position: static !important; overflow: visible !important; background: #fff !important; padding: 0 !important; }
  body.demo-open .demo-bar, body.demo-open .demo-bar-msg { display: none !important; }
  body.demo-open .demo-doc { max-width: none; margin: 0; padding: 0; border-radius: 0; box-shadow: none !important; }
  body.demo-open .demo-doc .scroll { overflow: visible !important; }
  body.demo-open .demo-tbl { min-width: 0; font-size: calc(10.5px * var(--fz)); }
  body.demo-open .demo-meses td:nth-child(2), body.demo-open .demo-tbl td:last-child:not(.num) { min-width: 0; }
  body.demo-open .demo-tbl tr, body.demo-open .demo-totals > div { break-inside: avoid; }
}

/* Saúde dos dados e integrações (28/09/2026, aba Saúde): estado SEMPRE com símbolo + rótulo (nunca só cor); a tabela vira
   cartões empilhados no celular (rótulo de cada campo à esquerda); aviso discreto de "dados parciais" embaixo das abas. */
.sd { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 3px; border-radius: 99px; font-size: calc(12px * var(--fz)); font-weight: 650; line-height: 1.5; white-space: nowrap; background: rgba(var(--ink-rgb), 0.06); color: var(--muted); }
.sd i { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; font-style: normal; font-size: calc(10.5px * var(--fz)); font-weight: 800; line-height: 1; background: rgba(var(--ink-rgb), 0.12); color: var(--text); flex: none; }
.sd.ok { background: rgba(var(--green-rgb), 0.13); color: var(--green); }
.sd.ok i { background: var(--green); color: var(--on-sem); }
.sd.atencao { background: var(--gold-soft); color: var(--gold); }
.sd.atencao i { background: var(--gold); color: var(--on-sem); }
.sd.falha { background: rgba(var(--red-rgb), 0.14); color: var(--red); }
.sd.falha i { background: var(--red); color: var(--on-sem); }
.sd.nao_conectado i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); color: var(--muted); }
.sd.nao_monitorado { background: transparent; box-shadow: inset 0 0 0 1px rgba(var(--muted-rgb), 0.35); }
.sd.nao_monitorado i { background: transparent; color: var(--muted); }
.sd.info { color: var(--text); }
.sd.info i { background: rgba(var(--cyan-rgb), 0.2); color: var(--cyan); }
.sd-resumo { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 12px; font-size: calc(13px * var(--fz)); }
.sd-resumo .sd-cnt { display: inline-flex; align-items: center; gap: 6px; }
.tbl.saude-tbl th { white-space: normal; vertical-align: bottom; line-height: 1.3; }
.tbl.saude-tbl td { vertical-align: top; }
.tbl.saude-tbl td.sd-nome { min-width: 230px; max-width: 330px; }
.tbl.saude-tbl td.sd-acao { min-width: 200px; max-width: 300px; font-size: calc(12.5px * var(--fz)); }
.tbl.saude-tbl .sd-v > .muted { margin-top: 2px; }
.tbl.saude-tbl .sd-erro { overflow-wrap: anywhere; }
.tbl.saude-tbl tr.sd-falha td.sd-nome { box-shadow: inset 3px 0 0 var(--red); padding-left: 10px; }
.tbl.saude-tbl tr.sd-atencao td.sd-nome { box-shadow: inset 3px 0 0 var(--gold); padding-left: 10px; }
.sq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.sq { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: rgba(var(--ink-rgb), 0.03); font-size: calc(13px * var(--fz)); min-width: 0; }
.sq-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px 10px; flex-wrap: wrap; margin-bottom: 6px; }
.sq-head b { font-weight: 650; }
.sq-val { margin: 0 0 4px; }
.sq ul { margin: 4px 0 0; padding-left: 16px; color: var(--muted); font-size: calc(12px * var(--fz)); }
.sq li { margin: 2px 0; }
.sq .h2link { display: inline-block; margin-top: 8px; }
.sd-nm { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 0 18px; font-size: calc(13px * var(--fz)); }
.sd-nm li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--line); }
.partial-note { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: -8px 0 14px; padding: 8px 12px; border: 1px dashed rgba(var(--gold-rgb), 0.45); border-radius: 10px; background: rgba(var(--gold-rgb), 0.06); font-size: calc(12.5px * var(--fz)); }
.partial-note a { font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) {
  .tbl.saude-tbl thead { display: none; }
  .tbl.saude-tbl, .tbl.saude-tbl tbody, .tbl.saude-tbl tr { display: block; width: 100%; }
  .tbl.saude-tbl tr { border-top: 1px solid var(--line); padding: 10px 0; }
  .tbl.saude-tbl tr:first-child { border-top: 0; padding-top: 0; }
  .tbl.saude-tbl td { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; width: 100%; min-width: 0; max-width: none; padding: 3px 0 !important; border: 0; }
  .tbl.saude-tbl td::before { content: attr(data-l); flex: none; max-width: 42%; color: var(--muted); font-size: calc(11px * var(--fz)); text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.9; }
  .tbl.saude-tbl td .sd-v { min-width: 0; text-align: right; overflow-wrap: anywhere; }
  .tbl.saude-tbl td.sd-nome { display: block; padding-bottom: 6px !important; }
  .tbl.saude-tbl td.sd-nome::before { content: none; }
  .tbl.saude-tbl td.sd-nome .sd-v { text-align: left; }
  .tbl.saude-tbl tr.sd-falha td.sd-nome, .tbl.saude-tbl tr.sd-atencao td.sd-nome { padding-left: 10px !important; }
  .tbl.saude-tbl td.sd-acao .sd-v { max-width: 62%; }
  .tbl.saude-tbl td.sd-vazio { display: none; }
  .sq-grid, .sd-nm { grid-template-columns: 1fr; }
  /* "Não monitorado aqui": o texto traz caminhos sem espaço e quebra em qualquer ponto; sem lugar ao lado do selo
     (alta legibilidade no celular estreito), desce pra linha de baixo em vez de alargar a página. */
  .sd-nm li { flex-wrap: wrap; gap: 4px 10px; }
  .sd-nm li > div { flex: 1 1 120px; min-width: 0; overflow-wrap: anywhere; }
  .partial-note { margin-top: -6px; }
}

/* ============================================================
   Aparência (§1 e §17, 28/09/2026): menu na barra superior com tema (Automático/Claro/Escuro), alta legibilidade e
   densidade (Confortável/Compacta), lembrados por aparelho. Os tokens de cor ficam no topo deste arquivo; aqui só o
   menu, o que a alta legibilidade tira de transparência e o que a densidade compacta aperta.
   ============================================================ */
.ctl-btns { position: relative; }
#look-btn[aria-expanded="true"] { border-color: rgba(var(--gold-rgb), 0.5); }
/* Celular estreito (até 400px): o botão fica só com o "◐" (o nome "Aparência" segue no aria-label) — com o nome,
   os três botões não cabiam numa linha a 320px (e a 360px com alta legibilidade) e a página rolava de lado. */
@media (max-width: 400px) {
  #look-btn .look-lbl { display: none; }
}
.look-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: min(300px, calc(100vw - 24px)); display: grid; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--text); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); }
.look-menu fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.look-menu legend { padding: 0; margin: 0 0 6px; font-size: calc(11px * var(--fz)); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.look-seg { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg); }
.look-seg label { flex: 1 1 0; position: relative; min-width: 0; cursor: pointer; }
.look-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.look-seg span { display: block; padding: 7px 4px; border-radius: 8px; text-align: center; font-size: calc(13px * var(--fz)); font-weight: 500; color: var(--muted); white-space: nowrap; }
.look-seg label:hover span { color: var(--text); }
.look-seg input:checked + span { background: var(--gold-fill); color: var(--on-gold); font-weight: 650; }
.look-seg input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 1px; }
.look-check { display: flex; align-items: flex-start; gap: 10px; font-size: calc(13px * var(--fz)); font-weight: 600; cursor: pointer; }
.look-check input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--gold); }
.look-check small { display: block; margin-top: 1px; font-size: calc(12px * var(--fz)); font-weight: 400; color: var(--muted); }
.look-now { margin: -6px 0 0; font-size: calc(12px * var(--fz)); color: var(--muted); }

/* Tema claro: fundo liso (o brilho dourado do escuro, no claro, marcava a caixa da barra de abas fixa e emendava
   embaixo em página curta); a folha branca do demonstrativo ganha borda na tela (o fundo em volta também é claro;
   na impressão a borda sai, como no escuro). */
:root[data-theme="light"] body { background: var(--bg); }
:root[data-theme="light"] .demo-doc { box-shadow: 0 0 0 1px var(--line), 0 8px 24px rgba(11, 42, 91, 0.08); }
:root[data-theme="light"] .crm-overlay, :root[data-theme="light"] .ai-ask-overlay { background: rgba(11, 42, 91, 0.4); }
:root[data-theme="light"] .crm-modal-overlay { background: rgba(11, 42, 91, 0.45); }
/* Selos em cima de fundo translúcido somam as duas tintas e caem abaixo de 4,5:1 no claro: faixa "O que olhar hoje"
   com o fundo do cartão e o "i" dos selos informativos da Saúde cheio (como os outros estados). */
:root[data-theme="light"] .strip { background: var(--card); }
:root[data-theme="light"] .sd.info i { background: var(--cyan); color: var(--on-sem); }

/* Alta legibilidade e tema claro: sem esmaecer por transparência — no fundo branco, a opacidade derruba o texto abaixo
   de 4,5:1 (no claro comum o "esmaecido" vira cor, logo abaixo); o estado segue nas etiquetas ("poucos dados"). */
:root[data-legivel="1"] body { background: var(--bg); }
:root[data-legivel="1"] .card { background: var(--card); }
:root[data-legivel="1"] .pane[data-pane="crm"] .card { background: var(--aur-surface); } /* o CRM tem superfície própria */
:root:is([data-legivel="1"], [data-theme="light"]) :is(.tbl.ads tr.few > td:not(.name), .tbl.ads tr.few > td.name > *, .ad-card.few,
  .fsp-row.few > *, .tbl.people tr.done > td, .tbl.ch td.few, .tbl.fn-gaps tr.few > td:not(.name), .crv-card.few .crv-kpis,
  .crv-ad-list label.fin-check.off, .crm-task-row.done, .fin-person.off, .cart-person.off, .group-row.left, .exp-res tr.exp-outra > td,
  .sort-ind, .chat-bubble-tag, .chat-bubble-meta, .chat-note b) { opacity: 1; }
:root[data-legivel="1"] .tbl.people tr.done > td { color: var(--muted); }
/* Claro comum: o que era esmaecido fica na cor secundária (≥ 4,5:1). :where() não soma especificidade, então quem já
   tem cor própria na mesma célula (vermelho de "gastou e não trouxe visita", selos) continua com a sua. */
:root[data-theme="light"]:not([data-legivel="1"]) :where(.tbl.ads tr.few > td, .ad-card.few, .fsp-row.few, .tbl.people tr.done > td, .tbl.ch td.few,
  .tbl.fn-gaps tr.few > td, .crv-card.few .crv-kpis, .crv-ad-list label.fin-check.off, .fin-person.off, .cart-person.off, .exp-res tr.exp-outra > td) { color: var(--muted); }
:root[data-theme="light"]:not([data-legivel="1"]) :where(.crm-task-row.done, .group-row.left .group-row-name) { color: var(--aur-muted); }

/* Densidade compacta: menos respiro entre blocos e linhas; nenhuma informação some e nada muda de lugar. */
:root[data-densidade="compacta"] .wrap { padding-top: 14px; padding-bottom: 40px; }
:root[data-densidade="compacta"] .top, :root[data-densidade="compacta"] .tabs { margin-bottom: 12px; }
:root[data-densidade="compacta"] .tab { padding-top: 9px; padding-bottom: 9px; }
:root[data-densidade="compacta"] .grid { gap: 10px; }
:root[data-densidade="compacta"] .kpis, :root[data-densidade="compacta"] .two, :root[data-densidade="compacta"] .three, :root[data-densidade="compacta"] .mb { margin-bottom: 10px; }
:root[data-densidade="compacta"] .card { padding: 12px 14px; }
:root[data-densidade="compacta"] .card > h2, :root[data-densidade="compacta"] .h2-row { margin-bottom: 10px; }
:root[data-densidade="compacta"] .headline, :root[data-densidade="compacta"] .strip, :root[data-densidade="compacta"] .alerts { margin-bottom: 10px; }
:root[data-densidade="compacta"] .strip { padding: 7px 12px; line-height: 1.7; }
:root[data-densidade="compacta"] .alert { padding: 8px 11px; }
:root[data-densidade="compacta"] .funnel { gap: 7px; }
:root[data-densidade="compacta"] .mini { margin-top: 10px; gap: 6px; }
:root[data-densidade="compacta"] .mini > div { padding: 7px 10px; }
:root[data-densidade="compacta"] .pane[data-pane="fin"] th, :root[data-densidade="compacta"] .pane[data-pane="fin"] td { padding-top: 5px; padding-bottom: 5px; }
:root[data-densidade="compacta"] .order { padding-bottom: 6px; }
:root[data-densidade="compacta"] .order:not(:first-child) { padding-top: 6px; }
:root[data-densidade="compacta"] .checks li, :root[data-densidade="compacta"] .sd-nm li { padding: 5px 0; }
:root[data-densidade="compacta"] .fsp-row:not(.fsp-head) { padding: 6px 0; }
:root[data-densidade="compacta"] .chart { height: 240px; }
:root[data-densidade="compacta"] .chart.sm { height: 170px; }
:root[data-densidade="compacta"] .opp-item, :root[data-densidade="compacta"] .sq { padding: 10px 12px; }
:root[data-densidade="compacta"] .crm-card { padding: 8px 10px; gap: 4px; }
/* Tabelas: só no computador (no celular várias viram cartões, com o próprio espaçamento). */
@media (min-width: 641px) {
  :root[data-densidade="compacta"] .kpi .value { font-size: calc(24px * var(--fz)); margin: 2px 0 0; }
  :root[data-densidade="compacta"] .tbl td { padding-top: 5px; padding-bottom: 5px; }
  :root[data-densidade="compacta"] .tbl th { padding-bottom: 6px; }
}

/* ============================================================
   Visualizações salvas, colunas e detalhamento dos indicadores (29/09/2026): menu "Visualizações" na barra superior (a
   mesma caixa do "Aparência"), menu "Colunas" das tabelas grandes (folha fixa embaixo no celular), painel lateral do
   detalhamento dos cartões da Visão geral e os avisos curtos. Só tokens do tema: vale igual no escuro e no claro.
   ============================================================ */
#vis-btn[aria-expanded="true"], .col-btn[aria-expanded="true"] { border-color: rgba(var(--gold-rgb), 0.5); }
/* Celular: o botão fica só com o "▤" (o nome segue no aria-label), como o "◐" do Aparência. */
@media (max-width: 520px) {
  #vis-btn .vis-lbl { display: none; }
}
.vis-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: min(390px, calc(100vw - 24px)); display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--text); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); font-size: calc(13px * var(--fz)); }
.vis-head, .col-head, .kd-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vis-sit { margin: 0; }
div.vis-sit { display: grid; gap: 6px; justify-items: start; }
.vis-sit p { margin: 0; }
.vis-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 300px; overflow-y: auto; }
.vis-item { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); min-width: 0; }
.vis-item.on { border-color: rgba(var(--gold-rgb), 0.55); }
.vis-abrir { display: grid; gap: 2px; width: 100%; padding: 2px 0; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; min-width: 0; }
.vis-abrir b { font-weight: 650; overflow-wrap: anywhere; }
.vis-abrir .pill { justify-self: start; }
.vis-abrir:hover b { color: var(--gold); }
.vis-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.vis-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: calc(12px * var(--fz)); }
.vis-inline .search { flex: 1 1 150px; padding: 6px 9px; }
.vis-lbl-in { width: 100%; color: var(--muted); }
.vis-conf { padding: 8px; border: 1px solid rgba(var(--red-rgb), 0.35); border-radius: 10px; background: rgba(var(--red-rgb), 0.08); }
.btn.vis-del { border-color: rgba(var(--red-rgb), 0.5); color: var(--red); }
.vis-vazio, .vis-msg, .vis-form .error { margin: 0; }
.vis-msg { color: var(--muted); }
.vis-msg:empty, .vis-form .error:empty { display: none; }
.vis-form { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.vis-form .search { flex: none; width: 100%; }
.vis-form > .btn { justify-self: start; }
.vis-lbl-t, .vis-per legend { padding: 0; margin: 0 0 2px; font-size: calc(11px * var(--fz)); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.vis-per { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.vis-menu .look-check input:disabled + span { color: var(--muted); cursor: default; }
.vis-aviso { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--gold-soft); color: var(--gold); }

/* Menu "Colunas": ancorado no botão; no celular vira uma folha fixa embaixo (nunca alarga a página). */
.col-ctl { position: relative; display: inline-flex; }
.col-btn .col-n { color: var(--gold); font-weight: 600; }
.col-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: min(350px, calc(100vw - 24px)); max-height: min(72vh, 580px); overflow-y: auto; display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--text); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); text-align: left; white-space: normal; font-size: calc(13px * var(--fz)); font-weight: 400; }
.col-fixa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; padding: 6px 8px; border-radius: 10px; background: rgba(var(--ink-rgb), 0.04); }
.col-fixa small, .col-check small { color: var(--muted); font-size: calc(11px * var(--fz)); font-weight: 400; }
.col-list { list-style: none; display: grid; gap: 2px; margin: 0; padding: 0; }
.col-item { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border: 1px solid transparent; border-radius: 9px; }
.col-item:hover { background: rgba(var(--ink-rgb), 0.04); }
.col-item.off .col-check > span { color: var(--muted); }
.col-item.drag { opacity: 0.45; }
.col-item.drop-antes { box-shadow: inset 0 2px 0 var(--gold); }
.col-item.drop-depois { box-shadow: inset 0 -2px 0 var(--gold); }
.col-grip { flex: none; color: var(--muted); cursor: grab; user-select: none; line-height: 1; }
.col-check { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; cursor: pointer; }
.col-check input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--gold); }
.col-check input:disabled { cursor: default; }
.col-check > span { display: grid; min-width: 0; overflow-wrap: anywhere; }
.col-mv { flex: none; display: flex; gap: 4px; }
.col-mv .btn { min-width: 30px; padding: 3px 8px; }
.col-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.col-dica { margin: 0; }
.oi-colctl { margin: 0 0 12px auto; }
@media (max-width: 640px) {
  .col-menu { position: fixed; top: auto; left: 12px; right: 12px !important; bottom: 12px; width: auto; max-height: 72vh; box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4); }
  .col-mv .btn { min-width: 38px; padding: 7px 10px; }
  .exp-head-btns .col-ctl { flex: 1 1 auto; }
  .exp-head-btns .col-ctl > .btn { width: 100%; }
  /* O ".exp-head-btns .btn" (botões esticados no celular) não vale para os botões de dentro do menu. */
  .exp-head-btns .col-menu .btn { flex: none; }
}

/* Menu "Colunas" por grupos (09/10/2026, Estrutura da conta: as colunas do painel e todas as do Gerenciador do Meta). No computador, um
   painel mais largo ancorado no botão, com a busca presa no topo; no celular, a tela inteira (a folha de baixo ficaria coberta pelo
   teclado). As outras tabelas continuam com o menu de sempre. */
.col-menu--catalogo { width: min(560px, calc(100vw - 24px)); max-height: min(80vh, 680px); overscroll-behavior: contain; gap: 8px; padding-top: 0; align-content: start; }
.col-menu--catalogo .col-topo { position: sticky; top: 0; z-index: 2; display: grid; gap: 8px; margin: 0 -12px; padding: 12px 12px 8px; background: var(--card); border-bottom: 1px solid var(--line); }
.col-menu--catalogo .col-head { display: flex; align-items: center; gap: 8px; }
.col-menu--catalogo .col-titulo { flex: 1 1 auto; margin: 0; font-size: calc(14px * var(--fz)); font-weight: 600; }
.col-menu--catalogo .col-titulo:focus { outline: none; }
.col-menu--catalogo .col-conta { flex: none; }
.col-busca input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(var(--ink-rgb), 0.04); color: var(--text); font: inherit; }
.col-busca input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.col-pre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.col-pre .chip.col-conj { padding: 4px 10px; border: 1px solid var(--line); }
.col-pre .chip.col-conj[aria-pressed="true"] { border-color: var(--gold); }
.col-sec, .col-grupo { border: 1px solid var(--line); border-radius: 10px; padding: 0 8px; }
.col-sec > summary, .col-grupo > summary { cursor: pointer; padding: 8px 2px; font-weight: 600; list-style-position: inside; }
.col-sec > summary small, .col-grupo > summary small { color: var(--muted); font-weight: 400; }
.col-sec[open], .col-grupo[open] { padding-bottom: 8px; }
.col-grupos { display: grid; gap: 6px; }
.col-sub { margin: 4px 0 0; }
.col-ops { list-style: none; display: grid; gap: 2px; margin: 0; padding: 0; }
.col-op { display: grid; gap: 1px; padding: 4px 6px; border-radius: 9px; }
.col-op:hover { background: rgba(var(--ink-rgb), 0.04); }
.col-op.on .col-check > span { color: var(--gold); }
.col-op-def { display: none; padding-left: 24px; color: var(--muted); font-size: calc(11px * var(--fz)); }
.col-op:focus-within .col-op-def, .col-menu--catalogo.buscando .col-op-def { display: block; }
.col-rot { flex: 1 1 auto; display: grid; min-width: 0; overflow-wrap: anywhere; }
.col-rot small { color: var(--muted); font-size: calc(11px * var(--fz)); }
.col-foot-cat { flex-wrap: wrap; justify-content: flex-start; }
.col-vazio { margin: 4px 0; }
/* Arrastar nas colunas da Estrutura da conta (09/10/2026): o título muda a ordem; a borda direita (alça de 9 px) muda a largura. */
.tbl.hier thead tr.hier-cab th:not(.name) { position: relative; }
.hier-rsz { position: absolute; top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; z-index: 3; touch-action: none; }
.tbl.hier thead tr.hier-cab th.name { z-index: 4; }
.tbl.hier thead tr.hier-cab th:last-child > .hier-rsz { right: 0; width: 6px; }
.tbl.hier thead tr.hier-cab th:last-child > .hier-rsz::after { left: auto; right: 1px; }
.hier-rsz::after { content: ""; position: absolute; top: 18%; bottom: 18%; left: 4px; width: 1px; background: var(--line); opacity: 0; transition: opacity 0.15s; }
.tbl.hier thead tr.hier-cab th:hover > .hier-rsz::after { opacity: 1; }
.hier-rsz:hover::after, body.hier-rsz-ativo .hier-rsz::after { opacity: 1; left: 3px; width: 3px; border-radius: 2px; background: var(--gold); }
body.hier-rsz-ativo, body.hier-rsz-ativo * { cursor: col-resize !important; user-select: none !important; }
.tbl.hier thead tr.hier-cab th.arrastando { opacity: 0.45; }
.tbl.hier thead tr.hier-cab th.drop-esq { box-shadow: inset 3px 0 0 var(--gold); }
.tbl.hier thead tr.hier-cab th.drop-dir { box-shadow: inset -3px 0 0 var(--gold); }
@media (min-width: 641px) {
  .tbl.hier thead tr.hier-cab th.com-w { width: var(--w) !important; min-width: var(--w) !important; max-width: var(--w) !important; white-space: normal; }
  .tbl.hier.com-w-nome th.name, .tbl.hier.com-w-nome td.name { width: min(var(--w-nome), 45vw) !important; min-width: min(var(--w-nome), 45vw) !important; max-width: min(var(--w-nome), 45vw) !important; }
}
@media (pointer: coarse), (max-width: 640px) {
  .hier-rsz { display: none; }
}
/* Cabeçalho das colunas do Meta: rótulos longos quebram em linhas, com largura limitada. */
.tbl.hier th.th-x { max-width: 9.5em; white-space: normal; }
.hier-meta-aviso { margin: 8px 0 0; }
.col-dica .so-toque { display: none; }
@media (pointer: coarse) {
  .col-dica .so-mouse { display: none; }
  .col-dica .so-toque { display: inline; }
  .col-op, .col-sec > summary, .col-grupo > summary { min-height: 44px; }
  .col-op .col-check { min-height: 40px; }
  .col-menu--catalogo .col-grip { display: none; }
}
@media (max-width: 640px) {
  .col-menu.col-menu--catalogo { position: fixed; inset: 0; top: 0; left: 0; right: 0 !important; bottom: 0; width: auto; height: 100dvh; max-height: none; border-radius: 0; z-index: 80; padding-bottom: 24px; }
  .col-busca input { font-size: 16px; }
}

/* Cartões da Visão geral que abrem o detalhamento. */
.kpi.det { cursor: pointer; transition: border-color 0.2s; }
.kpi.det:hover { border-color: rgba(var(--gold-rgb), 0.5); }
.kpi.det .label { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.kd-ic { display: inline-flex; flex: none; color: var(--muted); }
.kpi.det:hover .kd-ic, .kpi.det:focus-visible .kd-ic { color: var(--gold); }
.kpi.det:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
:is(.vis-menu, .col-menu, .kd-panel) :is(button, input, select):focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Painel lateral do detalhamento (modal: Esc ou "Fechar" fecham, o foco volta ao cartão). */
.kd-overlay { position: fixed; inset: 0; z-index: 23; background: rgba(0, 0, 0, 0.5); }
:root[data-theme="light"] .kd-overlay { background: rgba(11, 42, 91, 0.4); }
.kd-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 24; width: min(540px, 100vw); display: flex; flex-direction: column; gap: 12px; padding: 18px; overflow-y: auto; border-left: 1px solid var(--line); background: var(--card); color: var(--text); box-shadow: -12px 0 32px rgba(0, 0, 0, 0.3); }
/* Nada encolhe para caber na altura: a tabela de registros (.scroll rola só para o lado) sai inteira, com a linha
   "Total", e quem rola é o próprio painel — sem rolagem dentro de rolagem. */
.kd-panel > * { flex: none; }
.kd-head h2 { margin: 0; font-size: calc(18px * var(--fz)); font-weight: 650; }
.kd-head h2:focus { outline: none; }
.kd-valor { margin: -6px 0 0; font-size: calc(30px * var(--fz)); font-weight: 650; letter-spacing: -0.02em; }
.kd-sub { margin: -10px 0 0; }
.kd-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: calc(13px * var(--fz)); }
.kd-dl dt { color: var(--muted); font-weight: 600; }
.kd-dl dd { margin: 0; overflow-wrap: anywhere; }
.kd-reg-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.kd-h3 { margin: 0; font-size: calc(12px * var(--fz)); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.kd-panel .chips.sm { margin-bottom: 0; align-self: flex-start; }
.kd-tbl tfoot td { border-top: 2px solid var(--line); font-weight: 650; }
.kd-confere, .kd-panel .notes { margin: 0; }
@media (max-width: 640px) {
  .kd-panel { width: 100%; padding: 14px; border-left: 0; }
  .kd-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kd-dl dd { margin-bottom: 6px; }
}

/* Aviso curto (visualização aberta, CSV sem as colunas ocultas): some sozinho. */
.toast { position: fixed; left: 50%; bottom: 20px; z-index: 40; transform: translateX(-50%); width: max-content; max-width: min(560px, calc(100vw - 32px)); padding: 10px 14px; border: 1px solid rgba(var(--gold-rgb), 0.5); border-radius: 12px; background: var(--card); color: var(--text); font-size: calc(13px * var(--fz)); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
.toast:empty { display: none; }
@media (max-width: 640px) {
  .toast { bottom: 72px; }
}

/* ============================================================
   Rateio por produto, comprovantes e contatos duplicados (29/09/2026). Só tokens do tema: o claro e o escuro saem
   dos mesmos valores de :root / [data-theme="light"].
   ============================================================ */
.fin-rateio { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 12px; margin: 12px 0 0; display: grid; gap: 8px; min-width: 0; }
.fin-rateio legend { padding: 0 6px; font-size: calc(12px * var(--fz)); font-weight: 600; color: var(--gold); }
.fin-rateio-help { margin: 0; line-height: 1.4; }
.fin-alloc-shares { display: grid; gap: 6px; }
.fin-alloc-share { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 6px; align-items: center; }
.fin-alloc-share select, .fin-alloc-share input { min-width: 0; }
.fin-alloc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.fin-alloc-sum { font-size: calc(12px * var(--fz)); color: var(--amber); font-weight: 600; }
.fin-alloc-sum.ok { color: var(--green); }
.pane[data-pane="fin"] td.fin-rateio-cel { white-space: normal; min-width: 150px; }
.pane[data-pane="fin"] tr.fin-sub-row > td { white-space: normal; background: rgba(var(--ink-rgb), 0.02); padding: 10px; }
.fin-alloc-hist ul { margin: 6px 0 0; padding-left: 18px; font-size: calc(12.5px * var(--fz)); }
.fin-alloc-hist li { margin: 2px 0; }
/* Painel aberto dentro de uma tabela larga (rola de lado no celular): fica preso à esquerda, na largura da tela. */
.fin-sub-row .anexo-box, .fin-sub-row .fin-alloc-hist { position: sticky; left: 0; max-width: min(720px, calc(100vw - 72px)); }
.fin-prod-tbl th.num { text-align: right; }
.pane[data-pane="fin"] .fin-prod-tbl td:first-child { min-width: 140px; }
.fin-prod-tbl .fin-prod-geral td { color: var(--muted); }
.fin-prod-tbl tfoot td { border-top: 2px solid var(--line); font-weight: 650; }
.fin-close-rateio { margin: 12px 0 0; }
.fin-close-rateio summary { cursor: pointer; font-size: calc(13px * var(--fz)); color: var(--gold); font-weight: 600; padding: 4px 0; }
.fin-close-regras { margin: 4px 0 0; padding-left: 18px; font-size: calc(12.5px * var(--fz)); }
.fin-close-regras li { margin: 2px 0; overflow-wrap: anywhere; }

.anexo-box { display: grid; gap: 8px; }
.anexo-head { font-size: calc(13px * var(--fz)); overflow-wrap: anywhere; }
.anexo-box > .linkbtn { justify-self: start; }
.anexo-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.anexo-item { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: grid; gap: 6px; background: var(--card); }
.anexo-item.removido { opacity: 0.75; }
.anexo-item.removido .anexo-nome b { text-decoration: line-through; }
.anexo-nome { overflow-wrap: anywhere; font-size: calc(13px * var(--fz)); }
.anexo-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.anexo-rem { border-top: 1px dashed var(--line); padding-top: 8px; }
.anexo-rem label { display: flex; flex-direction: column; gap: 5px; font-size: calc(12px * var(--fz)); color: var(--muted); }
.anexo-rem textarea, .uni-form textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; font-size: calc(13px * var(--fz)); resize: vertical; }
.anexo-rem textarea:focus, .uni-form textarea:focus { outline: 2px solid rgba(var(--gold-rgb), 0.5); border-color: transparent; }
.anexo-envio { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.anexo-add { position: relative; overflow: hidden; cursor: pointer; }
.anexo-add.disabled { opacity: 0.6; pointer-events: none; }
/* O campo de arquivo fica por cima do botão (invisível): o toque no botão abre o seletor e o leitor de tela o anuncia. */
.anexo-add input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.anexo-add:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }

.uni-actor-row { display: inline-flex; margin: 0 0 12px; }
.uni-lista { display: grid; gap: 12px; margin-bottom: 10px; }
.uni-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; gap: 10px; background: rgba(var(--ink-rgb), 0.02); min-width: 0; }
.uni-evid { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.uni-evid li { overflow-wrap: anywhere; line-height: 1.45; }
.uni-lados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.uni-lado { border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: grid; gap: 3px; min-width: 0; font-size: calc(13px * var(--fz)); background: var(--card); }
.uni-lado.principal { border-color: rgba(var(--gold-rgb), 0.55); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), 0.25); }
.uni-lado-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.uni-rot { font-size: calc(11px * var(--fz)); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.uni-contato { overflow-wrap: anywhere; color: var(--text); }
.uni-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.uni-form { border-top: 1px dashed var(--line); padding-top: 10px; margin: 0; }
.uni-form.fin-form { border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.uni-form-grid { display: grid; gap: 10px; }
.uni-principal { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.uni-principal legend { font-size: calc(12px * var(--fz)); color: var(--muted); padding: 0; margin-bottom: 4px; }
.uni-principal label.fin-check { align-items: flex-start; overflow-wrap: anywhere; }
.uni-principal label.fin-check input { margin-top: 3px; }
.uni-form label { display: flex; flex-direction: column; gap: 5px; font-size: calc(12px * var(--fz)); color: var(--muted); }
.uni-feitas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.uni-feita { border: 1px solid var(--line); border-radius: 10px; padding: 10px; font-size: calc(13px * var(--fz)); overflow-wrap: anywhere; }
.uni-feita.desfeita { opacity: 0.75; }
.uni-feita-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.uni-feita-top > div { min-width: 0; }
.uni-hist { margin-top: 10px; }
.uni-hist summary { cursor: pointer; font-size: calc(13px * var(--fz)); color: var(--gold); font-weight: 600; padding: 4px 0; }
#unioes .sect { margin-top: 14px; }
@media (max-width: 640px) {
  .uni-lados { grid-template-columns: minmax(0, 1fr); }
  .uni-feita-top { flex-direction: column; }
  .uni-actor-row { display: flex; }
  .fin-alloc-share { grid-template-columns: minmax(0, 1fr) 76px auto; }
}

/* ============================================================
   Acabamento visual futurista (§17, 30/09/2026): profundidade em camadas no fundo, superfícies com fio de luz e sombra
   suave, vidro translúcido SÓ na faixa fixa e nos painéis flutuantes, bordas luminosas discretas no foco e no hover,
   números tabulares, faixa fixa de contexto (produto, período, fuso, comparação, atualização, saúde), mini tendência e
   selo de integridade nos cartões da primeira faixa, modo apresentação e larguras de notebook, ultrawide e celular.
   Só tokens do tema (escuro, claro, alta legibilidade e densidade continuam valendo). Animação só em mudança real de
   estado e nenhuma com "prefers-reduced-motion" (regra geral lá em cima). Nenhum brilho passa por cima de texto.
   ============================================================ */

/* Fundo em camadas: brilhos bem abertos (dourado da marca no alto à direita, ciano à esquerda, violeta embaixo) numa
   camada fixa atrás de tudo — não rola junto nem marca a caixa de nenhuma faixa. Alta legibilidade: fundo liso. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 560px at 88% -12%, rgba(var(--gold-rgb), var(--glow-gold)), transparent 62%),
    radial-gradient(900px 620px at -8% 4%, rgba(var(--cyan-rgb), var(--glow-cyan)), transparent 64%),
    radial-gradient(1200px 720px at 50% 122%, rgba(var(--violet-rgb), var(--glow-violet)), transparent 66%),
    linear-gradient(180deg, var(--bg-top), var(--bg) 520px);
}
:root[data-legivel="1"] body::before { display: none; }
@media print { body::before { display: none; } }

/* Superfícies: fio de luz no topo e sombra suave (profundidade), sem mudar borda nem raio. */
.card { box-shadow: var(--shadow-card); }
.card.link, .kpi.link, .kpi.det, .strip { transition: border-color 0.2s, box-shadow 0.2s; }
.card.link:hover, .kpi.link:hover, .kpi.det:hover, .strip:hover { box-shadow: var(--shadow-card), 0 0 0 1px rgba(var(--gold-rgb), 0.16), 0 12px 30px -16px rgba(var(--gold-rgb), 0.45); }
.kpi.det:focus-visible, .kpi.link:focus-visible, .card.link:focus-visible, .strip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; box-shadow: var(--shadow-card), 0 0 0 6px rgba(var(--gold-rgb), 0.16); }
/* Foco pelo teclado: contorno dourado com halo discreto (:where não soma especificidade — quem já tem foco próprio fica). */
:where(.btn, .chip, .ctx-btn, .linkbtn, .h2link, .prod-sel select):focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(var(--gold-rgb), 0.16); }
.tab:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; border-radius: 8px; }
.btn { transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s; }
.btn:hover:not(:disabled) { box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.08); }
.btn.gold, .chip.on { box-shadow: 0 6px 18px -10px rgba(var(--gold-rgb), 0.85); }
.mark { background: radial-gradient(120% 90% at 50% 0%, #1e5bb8 0%, #0b2a5b 70%); box-shadow: inset 0 1px 0 var(--edge), 0 8px 22px -12px rgba(var(--gold-rgb), 0.7); }

/* Números tabulares (colunas e cartões alinhados pelo algarismo). */
.kpi .value, .kpi .sub, .kpi .cmp, .delta, .tbl, .mini strong, .stamp, .ctxbar, .sd-cnt b { font-variant-numeric: tabular-nums; }

/* Painéis flutuantes (menus Aparência/Visualizações/Colunas, aviso curto): vidro moderado, texto na cor cheia. */
.look-menu, .vis-menu, .col-menu, .toast { background: var(--glass-pop); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }

/* ----- cabeçalho e faixa fixa ----- */
/* O conteúdo vem em três blocos (renderShell): .wrap-top (cabeçalho), a faixa fixa (de ponta a ponta) e .wrap-main. */
:root .wrap.wrap-top { padding-bottom: 0; }
:root .wrap.wrap-main { padding-top: 0; }
/* Computador: marca à esquerda e controles à direita (em até duas linhas), em vez de três linhas empilhadas. */
@media (min-width: 1100px) {
  .top { flex-wrap: nowrap; align-items: flex-start; }
  .top .brand { flex: none; }
  .top .controls { justify-content: flex-end; }
}
/* Rolagem até uma seção e foco pelo teclado param logo abaixo da faixa fixa (--dock-h: altura medida pelo app.js). */
html { scroll-padding-top: calc(var(--dock-h, 88px) + 8px); }
.dock { position: sticky; top: 0; z-index: 6; margin: 0 0 18px; background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-dock); }
.dock-in { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
:root .dock .tabs { position: static; margin: 0; border-bottom: 0; background: transparent; }
.dock .tab { margin-bottom: 0; }
/* 13 abas (02/10/2026, com Automações e Configurações): no computador o espaço entre elas encolhe para todas caberem numa
   linha a partir de ~1280 px; se ainda não couberem (tela de 1024, letra maior), a barra QUEBRA em duas linhas em vez de
   esconder as últimas atrás de uma rolagem sem barra. Celular: continua rolando de lado, como sempre. */
@media (min-width: 701px) {
  :root .dock .tabs { flex-wrap: wrap; overflow-x: visible; gap: 0 2px; }
  .dock .tab { padding-left: 10px; padding-right: 10px; }
}
/* Borda esmaecida onde ainda há aba escondida (classes postas por tabEdges() no app.js). */
@media (max-width: 700px) {
  .tabs.more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), rgba(0, 0, 0, 0.15)); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), rgba(0, 0, 0, 0.15)); }
  .tabs.more-l { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.15), #000 36px); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.15), #000 36px); }
  .tabs.more-l.more-r { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.15), #000 36px, #000 calc(100% - 36px), rgba(0, 0, 0, 0.15)); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.15), #000 36px, #000 calc(100% - 36px), rgba(0, 0, 0, 0.15)); }
}
.dock .tab.on { background: linear-gradient(0deg, rgba(var(--gold-rgb), 0.1), transparent 75%); }
.ctxbar { display: flex; align-items: center; gap: 12px; min-height: 38px; border-bottom: 1px solid var(--line); font-size: calc(12px * var(--fz)); }
/* Marca na margem à esquerda da faixa (fora da linha dela: aparecer não empurra nada), só com a página rolada e só onde
   a margem comporta (a partir de ~1320px; em tela baixa a linha de contexto sobe com a página e a marca iria junto). */
.dock-in { position: relative; }
.ctx-brand { display: none; position: absolute; right: 100%; top: 7px; margin-right: 4px; }
@media (min-width: 1320px) and (min-height: 501px) {
  .dock.stuck .ctx-brand { display: block; animation: acab-in 0.2s ease-out; }
}
.ctx-brand .mark { width: 24px; height: 24px; border-radius: 7px; }
.ctx-brand .mark img { width: 20px; height: 18px; }
/* Linha de contexto numa linha só, em qualquer largura: a altura da faixa fixa não muda com o texto (período, estado da
   saúde, "recarga falhou") nem pula quando a leitura da saúde chega. O que não couber rola de lado, com a borda direita
   esmaecida (o respiro no fim deixa o último item sair do esmaecido ao rolar; com tudo cabendo, nada fica esmaecido). A
   saúde é o primeiro item (app.js), sempre à vista. Alta legibilidade no computador: a linha quebra (regra abaixo). */
.ctx-items { display: flex; flex-wrap: nowrap; align-items: center; flex: 1 1 auto; min-width: 0; overflow-x: auto; padding-right: 18px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); }
.ctx-items::-webkit-scrollbar { display: none; }
/* Alta legibilidade no computador: com a fonte maior, o que não couber desce para a linha de baixo — nada fica escondido
   atrás do esmaecido (quem escolheu legibilidade troca a altura fixa por ver tudo). */
@media (min-width: 641px) {
  :root[data-legivel="1"] .ctx-items { flex-wrap: wrap; overflow-x: visible; padding-right: 0; -webkit-mask-image: none; mask-image: none; }
}
/* Nome de produto longo: reticências na faixa, nome inteiro na dica (title). */
.ctx-prod b { max-width: 13em; overflow: hidden; text-overflow: ellipsis; }
.ctx-i { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; white-space: nowrap; color: var(--text); text-decoration: none; border-left: 1px solid var(--line); }
.ctx-i:first-child { border-left: 0; padding-left: 0; }
.ctx-k { color: var(--muted); font-size: calc(10.5px * var(--fz)); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.ctx-i b { font-weight: 600; }
.ctx-s { color: var(--muted); }
.ctx-sem b { color: var(--muted); font-weight: 500; }
.ctx-falha { color: var(--red); font-weight: 600; }
.ctx-falha i { font-style: normal; }
.ctx-saude .sd { transition: box-shadow 0.2s, background-color 0.3s, color 0.3s; }
.ctx-saude:hover .sd { box-shadow: 0 0 0 1px currentColor; }
.ctx-saude:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 8px; }
.ctx-btn { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: rgba(var(--ink-rgb), 0.04); color: var(--text); padding: 4px 11px; border-radius: 9px; font-size: calc(12px * var(--fz)); font-weight: 600; cursor: pointer; white-space: nowrap; transition: border-color 0.2s, box-shadow 0.2s; }
.ctx-btn:hover { border-color: rgba(var(--gold-rgb), 0.5); box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.08); }
.ctx-btn[aria-pressed="true"] { background: var(--gold-fill); color: var(--on-gold); border-color: var(--gold-fill); }
@keyframes acab-in { from { opacity: 0; } to { opacity: 1; } }
:root[data-densidade="compacta"] .dock { margin-bottom: 12px; }
:root[data-densidade="compacta"] .ctxbar { min-height: 32px; }
:root[data-densidade="compacta"] .ctx-i { padding-top: 4px; padding-bottom: 4px; }

/* ----- cartões da primeira faixa: mini tendência e selo de integridade ----- */
.kpi { display: flex; flex-direction: column; }
.kfoot { margin-top: auto; padding-top: 10px; display: grid; gap: 7px; }
/* Linha do SVG com espessura fixa na tela (o SVG estica na largura do cartão); ponto final redondo. */
.spark { display: block; width: 100%; height: 28px; overflow: visible; color: var(--spark-site); }
.spark.receita { color: var(--spark-receita); }
.spark.midia { color: var(--spark-midia); }
.spark.misto { color: var(--spark-misto); }
.spark .spark-line { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark .s0 { stop-color: currentColor; stop-opacity: 0.26; }
.spark .s1 { stop-color: currentColor; stop-opacity: 0; }
.spark .spark-zero { fill: none; stroke: var(--muted); stroke-opacity: 0.45; stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.spark .spark-dot, .spark .spark-pt { fill: none; stroke: currentColor; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark .spark-dot { stroke-width: 5; }
.spark .spark-pt { stroke-width: 3; }
.spark-na { margin: 0; font-size: calc(11px * var(--fz)); color: var(--muted); }
.integ { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: calc(11px * var(--fz)); font-weight: 650; line-height: 1.4; color: var(--muted); }
.integ .integ-k { color: var(--muted); font-weight: 500; }
.integ i { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; font-style: normal; font-size: calc(9px * var(--fz)); font-weight: 800; line-height: 1; flex: none; box-shadow: inset 0 0 0 1.5px var(--muted); }
.integ.ok { color: var(--green); }
.integ.ok i { background: var(--green); color: var(--on-sem); box-shadow: none; }
.integ.atencao { color: var(--gold); }
.integ.atencao i { background: var(--gold); color: var(--on-sem); box-shadow: none; }
.integ.falha { color: var(--red); }
.integ.falha i { background: var(--red); color: var(--on-sem); box-shadow: none; }
/* Valor que mudou numa recarga (nunca na primeira carga nem em contador): contorno ciano que se apaga em ~1,4 s. */
.kpi.mudou { animation: kpi-mudou 1.4s ease-out 1; }
@keyframes kpi-mudou { 0%, 30% { border-color: rgba(var(--cyan-rgb), 0.75); box-shadow: var(--shadow-card), 0 0 0 1px rgba(var(--cyan-rgb), 0.35), 0 0 26px -8px rgba(var(--cyan-rgb), 0.6); } }
/* Troca de aba: entrada curta da aba nova (só opacidade: nada de transform, que prenderia os painéis fixos de dentro). */
.pane:not([hidden]) { animation: acab-in 0.18s ease-out; }

/* ----- modo apresentação (tela cheia, só leitura; Esc sai) -----
   Somem os controles do cabeçalho e, dentro das abas, toda ação que grava, recarrega ou exporta: criar, editar, excluir,
   registrar, confirmar, marcar, mover cartão, atualizar, WhatsApp, exportar CSV (também o do detalhamento), Colunas, os
   formulários de cadastro (.fin-form), a ferramenta de UTM e a pergunta à IA. Ficam as abas, os chips de visão, a busca,
   o mês do fechamento, os campos do simulador (conta local, não grava) e os botões que só abrem, recolhem ou mostram mais
   de uma vista (lista no :not abaixo). Clientes e CRM (nome, e-mail, telefone) nem aparecem: somem as duas abas e os links
   de texto para elas, e o app.js não abre essas abas enquanto o modo estiver ligado (o cartão "Para recuperar" fica — é
   só o número —, e o clique nele só avisa). */
:root[data-apresentacao="1"] :is(.top .controls, #ai-fab, .csv-btn, .col-ctl, [data-kpi-csv], #utm-links, #ai-ask-card, .hier-aviso) { display: none !important; }
:root[data-apresentacao="1"] .pane :is(.btn, .fin-form, select.crm-move):not(#oi-toggle, [data-hier-tudo], [data-sim-reset], [data-cr-desg], [data-oi-retry], [data-oi-cz-ir], [data-opp-mais], [data-oi-mais]) { display: none !important; }
:root[data-apresentacao="1"] :is(.tab[data-tab="people"], .tab[data-tab="crm"], a[data-go="people"], a[data-go="crm"]) { display: none !important; }

/* ----- larguras: notebook (1366) usa a de sempre; ultrawide abre o conteúdo e põe as duas faixas de cartões lado a lado ----- */
@media (min-width: 1800px) {
  .wrap, .dock-in { max-width: 1680px; }
}
@media (min-width: 2200px) {
  .wrap, .dock-in { max-width: 2040px; }
  .pane[data-pane="overview"]:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; align-items: start; }
  .pane[data-pane="overview"] > * { grid-column: 1 / -1; }
  .pane[data-pane="overview"] > #kpis { grid-column: 1; grid-row: 2; }
  .pane[data-pane="overview"] > #kpis-meta { grid-column: 2; grid-row: 2; }
}

/* ----- celular: faixa de contexto mais justa (a linha que rola de lado vale para todas as larguras); rótulo do botão some ----- */
@media (max-width: 640px) {
  .dock-in { padding: 0 12px; }
  .dock { margin-bottom: 12px; }
  .ctxbar { gap: 8px; min-height: 36px; }
  .ctx-btn .ctx-lbl { display: none; }
  .ctx-btn { padding: 4px 9px; }
  .ctx-prod b { max-width: 11em; }
  .kfoot { padding-top: 8px; gap: 6px; }
  .spark { height: 24px; }
}
/* ----- tela baixa (celular deitado, janela baixa): só as abas ficam presas -----
   A faixa sobe a altura da linha de contexto (--ctx-h, medida pelo app.js), que rola junto com a página: presa, ela e as
   abas tomariam de 30% a 40% da altura da tela. */
@media (max-height: 500px) {
  .dock { top: calc(-1 * var(--ctx-h, 39px)); }
}

/* ============================================================
   Dicionário de métricas e indicadores executivos da Visão geral (30/09/2026). Só tokens do tema: escuro e claro saem
   dos mesmos valores de :root / [data-theme="light"].
   ============================================================ */
/* Botão "Dicionário" da barra superior: mesma regra do "Visualizações" e do "Aparência" (só o "Aa" no celular). */
#dic-btn[aria-expanded="true"] { border-color: rgba(var(--gold-rgb), 0.5); }
#dic-btn { font-weight: 600; }
@media (max-width: 520px) {
  #dic-btn .dic-lbl { display: none; }
}
/* Painel lateral (a mesma folha do detalhamento): busca fixa no alto, lista de métricas que rola. */
.dic-panel .search { flex: none; width: 100%; }
.dic-intro { margin: -4px 0 0; }
.dic-grupo { margin: 10px 0 2px; }
.dic-m { border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); padding: 0; min-width: 0; }
.dic-m + .dic-m { margin-top: 8px; }
.dic-m > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; cursor: pointer; list-style: none; font-weight: 650; }
.dic-m > summary::-webkit-details-marker { display: none; }
.dic-m > summary::before { content: "▸"; flex: none; color: var(--muted); font-size: calc(12px * var(--fz)); transition: transform 0.15s; }
.dic-m[open] > summary::before { transform: rotate(90deg); color: var(--gold); }
.dic-m > summary:hover .dic-nome { color: var(--gold); }
.dic-m > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 10px; }
.dic-nome { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.dic-m > summary .tag { flex: none; margin-left: 0; }
.dic-def { margin: 0; padding: 0 12px 8px 30px; font-size: calc(13px * var(--fz)); }
.dic-dl { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 12px 12px 30px; }
.dic-dl dt { margin-top: 8px; font-size: calc(11px * var(--fz)); text-transform: uppercase; letter-spacing: 0.06em; }
.dic-dl dd { margin: 0; }
.dic-dl code { font-size: calc(12px * var(--fz)); overflow-wrap: anywhere; color: var(--muted); }
:is(.dic-panel) :is(button, input, select, summary, a):focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Indicadores executivos: duas faixas de cinco cartões (vendas e clientes; aquisição e retorno). */
.ind-sec { margin: 4px 0 14px; }
.ind-sec .h2-row { margin-bottom: 10px; }
.ind-sec .h2-row h2 { margin: 0; font-size: calc(13px * var(--fz)); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.09em; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.ind-sec .h2-row h2 .small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.ind-g { margin: 0 0 8px; color: var(--muted); font-size: calc(12px * var(--fz)); font-weight: 600; }
.kpis-ind { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpis-ind .kpi .label > span { min-width: 0; overflow-wrap: anywhere; }
.kpis-ind .kpi .value { font-size: calc(24px * var(--fz)); }
.kpis-ind .kpi .sub, .kpis-ind .kpi .cmp { overflow-wrap: anywhere; }
.kpis-ind .kpi .label .tag { margin-left: 6px; }
.ind-notes { margin: 0 0 8px; }
@media (max-width: 1180px) {
  .kpis-ind { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .kpis-ind { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis-ind .kpi .value { font-size: calc(19px * var(--fz)); }
}
/* Detalhamento dos indicadores novos: linhas de composição do custo. */
.kd-tbl .ind-rec { padding-left: 14px; color: var(--muted); }
.kd-tbl tr.kd-sub-linha td { font-weight: 650; border-top: 1px solid var(--line); }
:root[data-densidade="compacta"] .kpis-ind .kpi .value { font-size: calc(21px * var(--fz)); }

/* ============================================================
   Gráficos executivos (30/09/2026, bloco B — lib/graficos.mjs): ponte, cobertura, novos × recorrentes, distribuição, gráfico
   central com zoom/cursor/anotações e a dispersão de anúncios. Toda cor sai dos tokens do tema (nenhuma cor fixa); o âmbar da
   classificação "acima do limite" é o token --chart-warn (par AA nos dois temas, conferido no QA). Forma + cor: cada
   classificação tem também um símbolo (● ■ ▲), então nada depende só da cor.
   ============================================================ */
:root { --chart-warn: #f2a53a; }
:root[data-theme="light"] { --chart-warn: #b86a00; }

.gx-sec .gx-intro { margin: -4px 0 12px; }
.gx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gx-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: rgba(var(--ink-rgb), 0.02); min-width: 0; }
.gx-card.gx-wide { grid-column: 1 / -1; }
.gx-h { margin-bottom: 10px; }
.gx-h h3 { margin: 0; font-size: calc(14px * var(--fz)); font-weight: 600; color: var(--text); }
.gx-h h3 .muted { font-weight: 400; }
.gx-chart { position: relative; height: 300px; min-width: 0; }
.gx-chart-disp { height: 400px; }
.gx-chart canvas, .gx-central .chart canvas { border-radius: 8px; }
.gx-chart canvas:focus-visible, .gx-central .chart canvas:focus-visible { outline: 2px solid rgba(var(--gold-rgb), 0.75); outline-offset: 2px; }
.gx-skel { display: grid; gap: 10px; padding: 6px 0; }
.gx-skel-b { height: 200px; }
.gx-skel-l { height: 14px; width: 60%; }

/* Legenda em HTML (focável, aria-pressed): o botão desligado fica riscado — não só esmaecido. */
.gx-leg { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 10px; }
.gx-leg-i { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 999px; padding: 4px 11px; font-size: calc(12px * var(--fz)); cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.gx-leg-i.on { color: var(--text); border-color: rgba(var(--gold-rgb), 0.5); }
.gx-leg-i:not(.on):not(.static) { text-decoration: line-through; }
.gx-leg-i.static { cursor: default; }
.gx-leg-i:not(.static):hover { border-color: rgba(var(--gold-rgb), 0.7); }
.gx-leg-i:focus-visible, .gx-lnk:focus-visible, .gx-mk:focus-visible, .gx-check input:focus-visible { outline: 2px solid rgba(var(--gold-rgb), 0.75); outline-offset: 2px; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--sw); flex: none; }
.sw-line { height: 4px; width: 16px; border-radius: 2px; }
.sw-dash { width: 16px; height: 0; border-top: 3px dashed var(--sw); background: none; border-radius: 0; }
.sw-ref { width: 16px; height: 0; border-top: 2px dashed var(--sw); background: none; border-radius: 0; }
.gx-forma { color: var(--sw, var(--muted)); font-size: 1.1em; line-height: 1; }

.gx-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 6px 10px; margin: -2px 0 8px; }
.gx-tools .gx-leg { margin: 0; }
.gx-tools-r { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gx-zoom-tag { margin: 0; color: var(--text); border-color: rgba(var(--gold-rgb), 0.5); }
.gx-tabela { margin-top: 10px; }
.gx-tabela:empty, #chart-marks:empty { display: none; }
.gx-res { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 8px 0 4px; }
.gx-res-t { margin: 10px 0 4px; }
.gx-conc { margin: 6px 0; }
.gx-prod { margin: -2px 0 8px; }
.gx-avisos { margin-top: 10px; }
.gx-sem { margin-top: 8px; }
.tag.warn { color: var(--amber); border-color: rgba(var(--amber-rgb), 0.5); }

/* Dica dos marcadores (HTML, dentro do .chart) — a do Chart.js só mostra os pontos. */
.gx-dica { position: absolute; z-index: 4; max-width: min(320px, 92%); width: max-content; white-space: pre-line; padding: 8px 10px; border-radius: 10px; background: var(--chart-tip-bg); color: var(--chart-tip-text); border: 1px solid var(--chart-tip-line); box-shadow: var(--shadow-dock); font-size: calc(12px * var(--fz)); line-height: 1.45; pointer-events: none; overflow-wrap: anywhere; }
.gx-marks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gx-mk { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; text-align: left; border: 1px solid var(--line); background: transparent; color: var(--text); border-radius: 10px; padding: 4px 9px; font-size: calc(12px * var(--fz)); cursor: pointer; }
.gx-mk.auto { cursor: default; color: var(--muted); }
button.gx-mk:hover { border-color: rgba(var(--gold-rgb), 0.6); }
.gx-mk .tag { margin-left: 0; }
.gx-mk-d { color: var(--muted); }
.gx-marks-vazio, .gx-marks-nota { margin: 10px 0 0; }
.gx-lnk { border: 0; background: none; padding: 0; color: var(--gold); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; font: inherit; text-align: left; }
.gx-lnk:hover { color: var(--gold-2); }

.gx-ctl { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 10px; }
.gx-ctl .chips.sm { margin-bottom: 0; }
.gx-check { display: inline-flex; align-items: center; gap: 7px; font-size: calc(12px * var(--fz)); color: var(--text); cursor: pointer; }
.gx-check input { accent-color: var(--gold-fill); width: 16px; height: 16px; }
.gx-mat { border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px; padding: 8px 12px; margin: 0 0 10px; font-size: calc(12px * var(--fz)); color: var(--muted); }
.gx-mat b { color: var(--text); }
.gx-mat.aberta { border-left-color: var(--amber); }
.gx-mat.fechada { border-left-color: var(--green); }
.gx-fora { margin-top: 10px; }
.gx-fora > summary { cursor: pointer; font-size: calc(13px * var(--fz)); }
.gx-tbl td, .gx-tbl th { white-space: nowrap; }
.gx-tbl td .trunc { max-width: 220px; }
/* Linha do order bump na distribuição: o nome quebra linha e os selos ficam embaixo dele (a 390 px a 1ª coluna cabe). */
.gx-tbl td.gx-quebra { white-space: normal; min-width: 9.5em; max-width: 14em; }
.gx-tbl td.gx-quebra .gx-lnk { text-align: left; }
.gx-selos { display: block; margin-top: 3px; white-space: nowrap; }
.gx-selos .tag { margin-left: 0; }

/* Anotações do período: recolhível embaixo do gráfico central. */
.an-det { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.an-det > summary { cursor: pointer; font-size: calc(13px * var(--fz)); font-weight: 600; }
.an-det > summary:focus-visible { outline: 2px solid rgba(var(--gold-rgb), 0.75); outline-offset: 2px; border-radius: 6px; }
.an-body { margin-top: 10px; }
.an-intro { margin: 0 0 10px; }
.an-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 10px; }
.an-form { border: 1px solid rgba(var(--gold-rgb), 0.4); background: var(--gold-soft); border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; }
.an-form-h { margin: 0 0 8px; font-size: calc(14px * var(--fz)); }
.an-f-row { display: flex; flex-wrap: wrap; gap: 10px; }
.an-f { display: grid; gap: 4px; font-size: calc(12px * var(--fz)); color: var(--muted); }
.an-f input, .an-f select { padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: calc(13px * var(--fz)); }
.an-f input:focus-visible, .an-f select:focus-visible { outline: 2px solid rgba(var(--gold-rgb), 0.75); outline-offset: 1px; }
.an-f-texto { flex: 1 1 280px; min-width: 0; }
.an-f-info { margin: 8px 0; }
.an-f-err { margin: 6px 0; }
.an-f-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.an-lista { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.an-item { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.an-item.foco { border-color: rgba(var(--gold-rgb), 0.7); background: var(--gold-soft); }
.an-item.auto { border-style: dashed; }
.an-item-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.an-item-top .tag { margin-left: 0; }
.an-data { color: var(--muted); }
.an-texto { overflow-wrap: anywhere; }
.an-acoes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.an-hist { font-size: calc(12px * var(--fz)); color: var(--muted); }
.an-hist summary { cursor: pointer; }
.an-hist ul { margin: 6px 0 0; padding-left: 18px; }
.an-conf { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 6px; padding: 6px 10px; border: 1px solid rgba(var(--red-rgb), 0.45); background: rgba(var(--red-rgb), 0.08); border-radius: 9px; font-size: calc(12px * var(--fz)); }
.an-det-l li { margin: 3px 0; }

@media (max-width: 900px) {
  .gx-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .gx-card { padding: 12px 10px; }
  .gx-chart { height: 280px; }
  .gx-chart-disp { height: 360px; }
  .gx-tools { flex-direction: column; align-items: stretch; }
  .gx-tools-r .btn { flex: 1 1 auto; }
  .an-f-row > .an-f { flex: 1 1 100%; }
  .an-f input, .an-f select { width: 100%; }
}
:root[data-densidade="compacta"] .gx-chart { height: 250px; }
:root[data-densidade="compacta"] .gx-chart-disp { height: 340px; }
:root[data-densidade="compacta"] .gx-card { padding: 10px 12px; }
@media (prefers-reduced-motion: reduce) { .gx-leg-i { transition: none; } }

/* Filtros de atribuição (30/09/2026): controle ao lado do Produto (botão que abre um painel de duas colunas — dimensões e valores), chip do filtro
   ativo, aviso fixo embaixo das abas e o item da faixa de contexto. Só tokens do tema (claro e escuro); números com tabular-nums (.num). */
.attr-sel { position: relative; padding-right: 6px; font-variant-numeric: tabular-nums; }
.attr-sel.on { border-color: rgba(var(--gold-rgb), 0.55); }
/* Largura FIXA do botão no computador (o nome inteiro fica na dica e no aviso embaixo das abas): aplicar ou limpar o filtro não muda a largura do
   controle nem faz o cabeçalho passar de duas para três linhas, e ela cabe na linha dos botões (Atualizar, Visualizações, Aparência…) a 1440 px. */
.attr-btn { flex: none; width: 190px; max-width: 190px; min-width: 0; padding: 6px 8px; border: 0; border-radius: 9px; background: var(--bg); color: var(--text); font: inherit; font-size: calc(13px * var(--fz)); font-variant-numeric: tabular-nums; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attr-btn::after { content: "▾"; margin-left: 8px; color: var(--muted); font-size: 0.85em; }
.attr-sel.on .attr-btn { color: var(--gold); font-weight: 600; }
.attr-x { flex: none; width: 24px; height: 24px; border: 0; border-radius: 99px; background: transparent; color: var(--muted); font-size: calc(16px * var(--fz)); line-height: 1; cursor: pointer; }
.attr-x:hover { color: var(--text); background: rgba(var(--ink-rgb), 0.08); }
.attr-x[hidden] { display: none; }
.attr-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 31; width: min(600px, calc(100vw - 24px)); display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass-pop); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); color: var(--text); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); font-size: calc(13px * var(--fz)); }
.attr-menu[hidden] { display: none; }
.attr-menu { max-height: min(80vh, 680px); display: flex; flex-direction: column; overflow: hidden; }
.attr-cols { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px; margin: -4px; }
.attr-head, .attr-intro, .attr-foot { flex: none; }
.attr-dcol { display: grid; gap: 10px; align-content: start; min-width: 0; }
.attr-offs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.attr-offs .attr-d { padding: 6px 10px; }
.attr-vals .search { position: sticky; top: 0; z-index: 1; }
.attr-inline { margin: 0 0 8px; }
.attr-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.attr-intro { margin: 0; }
.attr-cols { display: grid; grid-template-columns: minmax(150px, 190px) minmax(0, 1fr); gap: 12px; min-width: 0; }
.attr-dims, .attr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; align-content: start; }
.attr-list { padding-right: 2px; }
.attr-vals { display: grid; gap: 8px; align-content: start; min-width: 0; }
.attr-vals .search { width: 100%; }
.attr-d, .attr-v { display: grid; gap: 2px; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.attr-d:hover, .attr-v:hover { border-color: rgba(var(--gold-rgb), 0.5); }
.attr-d.on, .attr-v.on { border-color: rgba(var(--gold-rgb), 0.7); background: var(--gold-soft); }
.attr-d.off, .attr-v.off { cursor: not-allowed; background: transparent; border-style: dashed; color: var(--muted); }
.attr-d.off:hover, .attr-v.off:hover { border-color: var(--line); }
.attr-dn, .attr-vn { font-weight: 600; overflow-wrap: anywhere; }
.attr-d.off .attr-dn, .attr-v.off .attr-vn { font-weight: 500; }
.attr-dm, .attr-vm { color: var(--muted); font-size: calc(11.5px * var(--fz)); overflow-wrap: anywhere; }
.attr-dn .pill { margin-left: 6px; }
.attr-vazio { margin: 0; padding: 8px 2px; }
.attr-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.attr-note { margin: -8px 0 14px; border-style: solid; border-color: rgba(var(--gold-rgb), 0.4); background: var(--gold-soft); color: var(--text); font-variant-numeric: tabular-nums; }
.attr-note.ignora, .attr-note.crm { border-style: dashed; border-color: var(--line); background: transparent; color: var(--muted); }
.attr-note.vazio, .attr-note.poucos, .attr-note.semvisitas { border-color: rgba(var(--amber-rgb, var(--gold-rgb)), 0.55); }
.attr-note b { color: var(--text); }
/* Faixa de contexto: o valor do filtro é cortado cedo (o nome inteiro está na dica, no botão do cabeçalho e no aviso embaixo das abas) para o
   horário da carga ("Atualizado") continuar à vista a 1440 px. Quanto menor a janela, mais curto. */
.ctx-attr b { max-width: 9em; overflow: hidden; text-overflow: ellipsis; color: var(--gold); font-variant-numeric: tabular-nums; }
/* Sem isto o item ENCOLHE até sumir o valor (só sobrava “FILTRO”) em vez de a faixa rolar de lado: o valor do filtro tem largura própria, e o que não couber rola. */
.ctx-attr, .ctx-prod { flex: none; }
@media (max-width: 1099px) { .ctx-attr b { max-width: 7em; } }
/* Nome de campanha, conjunto ou anúncio vem da UTM e pode não ter onde quebrar (já vimos 91 letras seguidas): nunca empurra a página para o lado (390 px sem rolagem lateral).
   O texto inteiro continua na dica (title) do chip e da faixa; no chip e na faixa o corte é com reticências, nos avisos e nas listas a palavra quebra. */
#attr-val { display: inline-block; vertical-align: bottom; max-width: calc(100% - 1.5em); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-attr { min-width: 0; max-width: 100%; }
.attr-note, .attr-vn, .attr-dn, .o-main { overflow-wrap: anywhere; }
:where(.attr-btn, .attr-x, .attr-d, .attr-v, .attr-vals .search):focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(var(--gold-rgb), 0.16); }
@media (max-width: 640px) {
  .attr-sel { width: 100%; }
  .attr-btn { flex: 1 1 auto; width: auto; max-width: none; }
  .attr-menu { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; max-height: 82vh; }
  /* No celular: dimensões que valem, depois os valores, e só no fim as dimensões indisponíveis (com o motivo) */
  .attr-cols { grid-template-columns: minmax(0, 1fr); }
  .attr-dcol { display: contents; }
  .attr-dims { order: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .attr-vals { order: 2; }
  .attr-offs { order: 3; }
  .attr-note { margin-top: -6px; }
  /* Faixa fixa no celular: com a página rolada o cabeçalho (e o botão do filtro) saiu da tela, e a faixa só mostra o que cabe. O Filtro vem logo depois da
     Saúde (o item mais importante depois dela) em vez de depois do Produto, que no celular quase sempre é "Todos". */
  .ctx-saude { order: -2; }
  .ctx-attr { order: -1; }
  .ctx-attr b { max-width: 8em; }
  /* A palavra “FILTRO” sai da vista (continua para o leitor de tela): o valor já começa por “Campanha:”, “Origem:”… e o espaço vai para o nome. */
  .ctx-attr .ctx-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ============================================================
   Controle de campanhas (01/10/2026): status e orçamento dentro da célula do nome da "Estrutura da conta", a barra do
   cartão (estado da edição, Pausar tudo, Histórico), o painel "Histórico de mudanças" e a janela "Controlar". Só tokens
   (claro e escuro), números com tabular-nums, 390 px sem rolagem lateral (o que é largo rola dentro de .scroll).
   ============================================================ */
.mc-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; font-size: calc(12px * var(--fz)); }
.mc-linha .pill { white-space: nowrap; }
.mc-orc, .mc-hoje { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mc-orc { color: var(--text); font-weight: 600; }
.mc-hoje { color: var(--muted); }
.mc-porvoce { color: var(--gold); font-weight: 650; font-size: calc(11px * var(--fz)); }
.mc-destaque { color: var(--green); font-weight: 650; font-size: calc(11px * var(--fz)); }
.mc-motivo { color: var(--muted); margin-top: 2px; white-space: normal; overflow-wrap: anywhere; }
.btn.xs.mc-ctl { margin-left: auto; padding: 4px 10px; font-weight: 600; }
/* O esmaecimento de "poucos dados" é para estatística; status, orçamento e o botão são fatos e ficam nítidos. */
.tbl.ads tr.few > td.name > .mc-linha, .tbl.ads tr.few > td.name > .mc-motivo { opacity: 1; }
.tbl.hier tr.mc-mudou > td { box-shadow: inset 0 0 0 999px rgba(var(--green-rgb), 0.07); }
.tbl.hier tr.mc-so-estr > td.name b { font-weight: 500; }
/* "sem gasto no período" vai na linha de baixo (dentro de .nm espremia o nome no celular). */
.hier-sub .mc-tag-sub { margin-left: 0; white-space: nowrap; }
.tbl.hier tr.mc-grupo { cursor: pointer; }
.tbl.hier tr.mc-grupo .mc-grupo-txt { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.mc-h-item.mc-h-nao .mc-h-mudou { color: var(--muted); }
.mc-av-atencao p { margin: 0; }
.mc-sem-senha { margin: 8px 0 0; }
button.caret.mc-caret { border: 0; background: transparent; padding: 0; margin: 2px 0 0; color: var(--muted); cursor: pointer; font: inherit; font-size: calc(11px * var(--fz)); width: 14px; line-height: 1; flex: none; }
/* 29/10/2026 (revisão): dourado cheio — com 70% de opacidade, no claro, o contorno ficava em ~2:1 sobre o fundo da linha (< 3:1). */
button.caret.mc-caret:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

/* ============================================================
   Estrutura da conta: gaveta, campanha, conjunto e anúncio (29/10/2026). O dono: "melhora o design pra diferenciar a gaveta, da
   campanha, conjunto e anuncio, agora tá embolado, deixa bem bonito e bem organizado pra quando clicar pra ver o conjunto e o anuncio".
   - Gaveta (faixa Rodando agora / Paradas agora / Sem gasto): CABEÇALHO DE SEÇÃO, não linha de dados — respiro acima, fundo próprio na
     largura toda, barra de cor à esquerda (verde, âmbar, cinza), rótulo em caixa-alta, contagem num selo e o orçamento/dia; as colunas
     de números são uma célula só (colspan), sem bordas.
   - Campanha: a linha principal — nome maior e 650, faixa de 3 px na borda (verde rodando, cinza parada), status em pílula, separador
     claro entre campanhas.
   - Conjunto e anúncio: um recuo por nível (22 px; 14 px no celular), linhas-guia de árvore (├ └) do triângulo do pai até o último
     filho (decorativas, aria-hidden), fundo levemente tingido, chip do nível, nome e números um ponto menores, "Controlar" discreto.
   - Campanha aberta: o bloco (campanha + conjuntos + anúncios) fica tingido e termina com respiro antes da próxima campanha.
   Só tokens do tema. A coluna do nome é fixa (sticky): o fundo dela é sempre opaco (as camadas pintam por cima de --card-2) e as faixas
   de cor são camadas de fundo — no border-collapse a borda não acompanha a célula fixa, e o box-shadow fica livre para o destaque de
   "mudou" e o flash. O recuo sai de --d (profundidade, no style da célula): nome, linha de status, resumo do celular e guias alinham juntos.
   ============================================================ */
.tbl.hier { --hb: 14px; --hi: 22px; --hc: 16px; --hgap: 6px; --hier-pt: 9px; }
.tbl.hier td.name { --hier-fs: calc(13px * var(--fz)); --hier-slot: max(0px, var(--hb) + (var(--d, 0) - 1) * var(--hi)); --hier-txt: var(--hier-slot); --hier-y: calc(var(--hier-pt) + var(--hier-fs) * 0.75); }
.tbl.hier td.name.hier-c { --hier-txt: calc(var(--hier-slot) + var(--hc) + var(--hgap)); }
.tbl.hier td.name > .nm { padding-left: var(--hier-slot); gap: 0 var(--hgap); }
.tbl.hier td.name > :is(.mc-linha, .mc-motivo, .hier-sub, .hier-cel) { padding-left: var(--hier-txt); }
.tbl.hier td.name .nm b { font-size: var(--hier-fs); line-height: 1.5; }
@media (min-width: 641px) { :root[data-densidade="compacta"] .tbl.hier { --hier-pt: 5px; } }

/* Triângulo: um chevron desenhado (nítido em qualquer tema e tamanho), girando só o desenho; o caractere fica para quem lê o texto. */
.tbl.ads.hier tr .nm > .caret, .tbl.hier .nm > .hier-folha { flex: none; width: var(--hc); height: calc(var(--hier-fs) * 1.5); margin: 0; }
.tbl.ads.hier tr .nm > .caret { display: inline-flex; align-items: center; justify-content: center; position: relative; font-size: 0; color: var(--muted); transform: none; border-radius: 4px; }
.tbl.ads.hier tr .nm > .caret::before { content: ""; width: 6px; height: 6px; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: translateX(-1.5px) rotate(-45deg); transition: transform 0.15s ease; }
.tbl.ads.hier tr.open > td.name > .nm > .caret::before { transform: translateY(-1.5px) rotate(45deg); }
.tbl.ads.hier tr.exp:hover .nm > .caret, .tbl.ads.hier .nm > button.caret:focus-visible { color: var(--text); }
.tbl.hier .nm > .hier-folha { display: inline-block; }
@media (prefers-reduced-motion: reduce) { .tbl.ads.hier tr .nm > .caret::before { transition: none; } }

/* Linhas-guia: cada <i> numa posição de nível (--x = profundidade do pai): vertical, braço "├", canto "└" e o início, abaixo do
   triângulo da linha aberta. Ficam na faixa do recuo, à esquerda de todo texto, e não pegam clique. */
.tbl.hier td.name > .hier-arv { position: absolute; inset: 0; pointer-events: none; }
.hier-arv > i { position: absolute; display: block; left: calc(var(--hb) + (var(--x) - 1) * var(--hi) + var(--hc) / 2 - 0.5px); }
.hier-arv > .hg-v { top: -1px; bottom: 0; width: 1px; background: var(--hier-guia); }
.hier-arv > .hg-h { top: var(--hier-y); width: calc(var(--hi) - var(--hc) / 2 - 2px); height: 1px; background: var(--hier-guia); }
.hier-arv > .hg-c { top: -1px; height: calc(var(--hier-y) + 1px); width: calc(var(--hi) - var(--hc) / 2 - 2px); border-left: 1px solid var(--hier-guia); border-bottom: 1px solid var(--hier-guia); border-bottom-left-radius: 6px; }
.hier-arv.folha > :is(.hg-h, .hg-c) { width: calc(var(--hi) + var(--hc) / 2 + var(--hgap) - 5px); }
.hier-arv > .hg-s { top: calc(var(--hier-y) + 8px); bottom: 0; width: 1px; background: var(--hier-guia); }

/* Fundo das linhas da árvore: --ht = tinta do nível (bloco aberto), --hh = passar o mouse; --hier-tira = faixa de 3 px da campanha.
   Revisão (29/10/2026):
   - a faixa de 3 px é da campanha e desce pelos conjuntos e anúncios dela (mc-tira-*, do JS): na seção "Rodando agora" a barra verde do
     cabeçalho e as faixas das campanhas formam um trilho contínuo, que antes sumia justo no bloco aberto. Parada = âmbar a 55% na seção
     "Paradas agora" (a cor da barra do cabeçalho dela) e cinza a 55% na "sem gasto": a faixa é a cor da seção, mais leve quando parada;
   - nas linhas tingidas as células de número também pintam sobre --card-2: a linha tem uma cor só (a célula fixa do nome saía mais clara);
   - o fim do bloco (hier-fim) é uma faixa de 8 px SEM tinta no pé da última linha (--hfim), não um padding tingido (que só parecia uma
     linha mais alta): o grupo fecha como um cartão antes da próxima campanha. */
.tbl.ads.hier :is(tr.lv-campanha, tr.lv-conjunto, tr.lv-anuncio) { --hier-tinta: rgba(var(--ink-rgb), calc(var(--ht, 0) + var(--hh, 0))); --hfim: 0px; }
.tbl.ads.hier :is(tr.lv-campanha, tr.lv-conjunto, tr.lv-anuncio) > td:not(.name) { background-color: var(--hier-tinta); }
.tbl.ads.hier :is(tr.lv-campanha.open, tr.lv-conjunto, tr.lv-anuncio) > td:not(.name) {
  background:
    linear-gradient(var(--hier-tinta), var(--hier-tinta)) 0 0 / 100% calc(100% - var(--hfim)) no-repeat,
    linear-gradient(var(--card-2), var(--card-2)) 0 0 / 100% calc(100% - var(--hfim)) no-repeat;
}
.tbl.ads.hier :is(tr.lv-campanha, tr.lv-conjunto, tr.lv-anuncio) > td.name {
  background:
    linear-gradient(var(--card-2), var(--card-2)) 0 100% / 100% var(--hfim) no-repeat,
    linear-gradient(to right, var(--hier-tira, transparent) 0 3px, transparent 3px) 0 0 / 100% calc(100% - var(--hfim)) no-repeat,
    linear-gradient(var(--hier-tinta), var(--hier-tinta)) 0 0 / 100% calc(100% - var(--hfim)) no-repeat,
    var(--card-2);
}
.tbl.ads.hier tr.exp:hover { --hh: 0.03; }
.tbl.hier tr.lv-campanha.open, .tbl.hier tr.lv-conjunto { --ht: 0.04; }
.tbl.hier tr.lv-anuncio { --ht: 0.07; }
.tbl.hier tr.mc-tira-verde { --hier-tira: var(--green); }
.tbl.hier tr.mc-tira-ambar { --hier-tira: rgba(var(--amber-rgb), 0.55); }
.tbl.hier tr.mc-tira-cinza { --hier-tira: rgba(var(--muted-rgb), 0.55); }
.tbl.hier tr.lv-campanha > td { border-top-color: var(--hier-sep); }
.tbl.hier :is(tr.lv-conjunto, tr.lv-anuncio) > td { border-top-color: var(--hier-sep-fino); }
/* Verificação (29/10/2026): a divisória vertical (.g-ini: nome | Investimento, Resultado | Do anúncio ao site) sumia no anúncio no escuro —
   a tinta 0,07 deixava o fundo da cor da linha (1,02:1). A linha sobe junto com a tinta da própria linha: fica à mesma distância do
   fundo em todos os níveis. A alta legibilidade tem --line opaco e fica como está. */
:root:not([data-legivel="1"]) .tbl.ads.hier :is(tr.lv-campanha, tr.lv-conjunto, tr.lv-anuncio) > td.g-ini { border-left-color: rgba(var(--text-rgb), calc(var(--hl-a, 0.09) + var(--ht, 0) + var(--hh, 0))); }
:root[data-theme="light"]:not([data-legivel="1"]) .tbl.ads.hier :is(tr.lv-campanha, tr.lv-conjunto, tr.lv-anuncio) > td.g-ini { --hl-a: 0.15; }
.tbl.ads.hier tr.hier-fim { --hfim: 8px; }
.tbl.hier tr.hier-fim > td { padding-bottom: 17px; }
.tbl.hier tr.mc-grupo + tr > td { border-top-color: transparent; }
/* No escuro, "poucos dados" esmaece os números pela COR (como no claro), não pela opacidade da célula: a opacidade apagava também o fundo
   tingido e a linha do anúncio saía em duas cores. Quem tem cor própria na célula (vermelho, verde) continua com a sua. */
:root:not([data-theme="light"]):not([data-legivel="1"]) .tbl.ads.hier tr.few > td:not(.name) { opacity: 1; color: var(--muted); }
/* No claro, a regra geral de "poucos dados" (a cor secundária na linha toda) apagava também o NOME do anúncio que roda — ele ficava igual ao
   pausado. O nome fica na cor do texto; o pausado continua apagado (mc-parada). */
:root[data-theme="light"]:not([data-legivel="1"]) .tbl.ads.hier tr.few:not(.mc-parada) > td.name .nm b { color: var(--text); }

/* Nomes e números por nível. */
.tbl.hier tr.lv-campanha > td.name { --hier-fs: calc(14px * var(--fz)); }
.tbl.hier tr.lv-campanha > td.name .nm b { font-weight: 650; }
.tbl.hier tr.lv-conjunto > td.name .nm b { font-weight: 550; }
.tbl.hier tr.lv-anuncio > td.name { --hier-fs: calc(12.5px * var(--fz)); }
.tbl.hier tr.lv-anuncio > td.name .nm b { font-weight: 450; }
.tbl.hier :is(tr.lv-conjunto, tr.lv-anuncio) > td.name > .mc-linha { font-size: calc(11.5px * var(--fz)); gap: 3px 7px; }
.tbl.hier :is(tr.lv-conjunto, tr.lv-anuncio) .mc-orc { font-weight: 550; }
.tbl.hier tr.lv-conjunto > td.r { font-size: calc(12.5px * var(--fz)); }
.tbl.hier tr.lv-anuncio > td.r { font-size: calc(12px * var(--fz)); }
/* "Poucos dados" esmaece os NÚMEROS; o nome, o chip e as guias ficam nítidos (o anúncio pausado esmaecido caía para 3,1:1). */
.tbl.ads.hier tr.few > td.name > :is(.nm, .hier-sub, .hier-arv) { opacity: 1; }

/* Chip do nível (CONJUNTO, ANÚNCIO) e o detalhe do anúncio (formato), na linha de status. */
/* Revisão (29/10/2026): o chip é só tinta, sem contorno (com o "Controlar" contornado ao lado eram dois retângulos iguais por linha, cara de
   formulário); no anúncio a tinta é menor porque a linha já é mais tingida. O formato é `mc-det-anu` (o `mc-det` da janela Controlar tem
   margin-top: 8px, que descia o formato 4 px e fazia a linha do anúncio a mais alta das três). */
.tbl.hier .mc-niv { display: inline-block; font-size: calc(9.5px * var(--fz)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.5; padding: 1px 6px; border: 0; border-radius: 4px; background: rgba(var(--ink-rgb), 0.08); color: var(--muted); white-space: nowrap; }
.tbl.hier tr.lv-anuncio .mc-niv { background: rgba(var(--ink-rgb), 0.05); }
.tbl.hier .hier-sub .mc-niv { margin-right: 6px; vertical-align: 1px; }
.tbl.hier .mc-det-anu { color: var(--muted); font-size: calc(11px * var(--fz)); white-space: nowrap; }

/* Status da campanha em pílula (dentro dela, o mesmo ponto); conjunto e anúncio ficam com ponto + palavra, mais leves. */
.tbl.hier tr.lv-campanha .mc-linha .pill { padding: 1px 9px 1px 8px; }
.tbl.hier tr.lv-campanha .mc-linha .pill.ok { background: rgba(var(--green-rgb), 0.14); }
.tbl.hier tr.lv-campanha .mc-linha .pill.off { background: rgba(var(--ink-rgb), 0.07); }
/* No claro, "Rodando" verde sobre o verde 0,14 ficava em 4,8:1 (medido): fundo mais claro. */
:root[data-theme="light"] .tbl.hier tr.lv-campanha .mc-linha .pill.ok { background: rgba(var(--green-rgb), 0.08); }

/* "Controlar" de conjunto e anúncio: contorno discreto (a coluna de botões iguais embolava a leitura); o da campanha continua cheio.
   Revisão (29/10/2026): texto na cor normal e peso 500 — cinza sobre contorno cinza parecia botão desligado; a hierarquia vem do
   preenchimento (o da campanha é cheio e 600). */
.tbl.hier :is(tr.lv-conjunto, tr.lv-anuncio) .btn.mc-ctl { background: transparent; border-color: rgba(var(--muted-rgb), 0.35); color: var(--text); font-weight: 500; }
.tbl.hier :is(tr.lv-conjunto, tr.lv-anuncio) .btn.mc-ctl:is(:hover, :focus-visible) { color: var(--text); border-color: rgba(var(--gold-rgb), 0.55); }
/* "usa o da campanha" (o conjunto sem orçamento próprio) não é um valor: apagado; um orçamento próprio (R$ x/dia) continua forte. */
.tbl.hier tr .mc-orc.mc-orc-herda { color: var(--muted); font-weight: 400; }

/* Gaveta = cabeçalho de seção. --fx-*: a cor do tipo; o fundo começa 12 px abaixo do topo (o respiro que separa as seções). */
.tbl.ads.hier tr.mc-grupo { --fx-rgb: var(--muted-rgb); --fx-cor: rgba(var(--muted-rgb), 0.75); --fx-txt: var(--muted); --fx-a: 0.06; cursor: pointer; }
.tbl.ads.hier tr.mc-g-rodando { --fx-rgb: var(--green-rgb); --fx-cor: var(--green); --fx-txt: var(--green); }
.tbl.ads.hier tr.mc-g-paradas { --fx-rgb: var(--amber-rgb); --fx-cor: var(--amber); --fx-txt: var(--amber); }
.tbl.ads.hier tr.mc-grupo:hover { --fx-a: 0.1; }
/* Revisão (29/10/2026): um filete de 1 px na cor da gaveta no pé do cabeçalho (o fundo da "sem gasto" era quase o da tinta do bloco
   aberto, e no claro o da "Paradas" quase o creme da linha da conta) e a faixa pinta sobre --card-2 na largura toda (uma cor só, como a
   célula fixa do nome). No claro, verde e âmbar um pouco mais fortes (0,06 sumia contra a linha comum) e o selo mais leve (ver --fx-sa, abaixo). */
.tbl.ads.hier tr.mc-grupo > td {
  --fx-fundo: linear-gradient(rgba(var(--fx-rgb), var(--fx-a)), rgba(var(--fx-rgb), var(--fx-a))) 0 12px / 100% calc(100% - 12px) no-repeat;
  --fx-filete: linear-gradient(rgba(var(--fx-rgb), 0.35), rgba(var(--fx-rgb), 0.35)) 0 100% / 100% 1px no-repeat;
  border-top: 0;
  padding-top: 21px;
  padding-bottom: 9px;
  vertical-align: middle;
  background: var(--fx-filete), var(--fx-fundo), linear-gradient(var(--card-2), var(--card-2)) 0 12px / 100% calc(100% - 12px) no-repeat;
}
.tbl.ads.hier tr.mc-grupo > td.name { background: linear-gradient(var(--fx-cor), var(--fx-cor)) 0 12px / 3px calc(100% - 12px) no-repeat, var(--fx-filete), var(--fx-fundo), var(--card-2); box-shadow: none; overflow: visible; }
:root[data-theme="light"] .tbl.ads.hier :is(tr.mc-g-rodando, tr.mc-g-paradas) { --fx-a: 0.1; }
:root[data-theme="light"] .tbl.ads.hier :is(tr.mc-g-rodando, tr.mc-g-paradas):hover { --fx-a: 0.12; }
.tbl.hier tr.mc-grupo > td.name > .nm.mc-faixa { padding-left: var(--hb); align-items: flex-start; }
/* Revisão (29/10/2026): as três gavetas numa linha só, com a mesma altura — o texto passa por cima da célula vazia ao lado (largura 0 no
   fluxo: não alarga a coluna do nome; a célula fixa fica por cima das outras, então o texto acompanha a rolagem lateral). */
.tbl.hier tr.mc-grupo .mc-faixa .mc-grupo-txt { display: flex; flex-wrap: nowrap; align-items: center; gap: 3px 8px; width: 0; min-width: 0; white-space: nowrap; font-weight: 400; }
.mc-faixa-rot { font-size: calc(11px * var(--fz)); font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text); }
.mc-faixa-n { font-size: calc(11px * var(--fz)); font-weight: 650; padding: 1px 8px; border-radius: 99px; background: rgba(var(--fx-rgb), var(--fx-sa, 0.13)); color: var(--fx-txt); white-space: nowrap; }
/* No claro o selo verde/âmbar com 0,13 ficava em 4,5:1 (medido): fundo mais claro, ≥ 5:1. Revisão (29/10/2026): com a faixa a 0,10
   (0,12 com o mouse), o selo vai a 0,05 — verde 4,78:1 (4,64 com o mouse) e âmbar 4,94:1 (com 0,08 o verde caía a 4,34 com o mouse). */
:root[data-theme="light"] .tbl.ads.hier tr.mc-grupo { --fx-sa: 0.05; }
.mc-faixa-orc { font-size: calc(12.5px * var(--fz)); font-weight: 650; color: var(--text); white-space: nowrap; }
.mc-faixa-extras { display: inline-flex; gap: 0 8px; }
.mc-faixa-extra { font-size: calc(12px * var(--fz)); color: var(--muted); }
.mc-faixa-extra::before { content: "· "; content: "· " / ""; }

/* Outras origens (Orgânico, Direto) depois das gavetas: o mesmo respiro de 12 px delas, com a linha do rodapé abaixo dele — coladas sob
   "SEM GASTO NO PERÍODO", pareciam campanhas sem gasto. */
.tbl.ads.hier tbody.foot.pos-faixas { --hf-linha: linear-gradient(var(--line), var(--line)) 0 12px / 100% 2px no-repeat; }
.tbl.ads.hier tbody.foot.pos-faixas > tr:first-child > td { border-top: 0; padding-top: 23px; background: var(--hf-linha); }
.tbl.ads.hier tbody.foot.pos-faixas > tr:first-child > td.name { background: var(--hf-linha), var(--card-2); }
/* A divisória vertical começa abaixo do respiro (a borda atravessava os 12 px em branco): vira um fundo de 1 px a partir dos 14 px. */
.tbl.ads.hier tbody.foot.pos-faixas > tr:first-child > td.g-ini { border-left-color: transparent; background: var(--hf-linha), linear-gradient(var(--line), var(--line)) 0 14px / 1px calc(100% - 14px) no-repeat; background-origin: border-box; }
.tbl.ads.hier tbody.foot.pos-faixas > tr.k-total:first-child > td.name { background: var(--hf-linha), linear-gradient(var(--card-2), var(--card-2)) 0 0 / 100% 12px no-repeat, var(--sticky-sum); }

/* Rolada de lado (#hier .scroll.rolado, do JS): a coluna fixa do nome ganha um limite — borda e sombra curta — para os números que passam
   por baixo dela não aparecerem fatiados. A gaveta fica de fora: a faixa dela não tem números e o texto passa por cima da célula vazia. */
#hier .scroll.rolado .tbl.hier :is(th.name, tr:not(.mc-grupo) > td.name)::after { content: ""; position: absolute; top: 0; bottom: 0; right: -8px; width: 8px; border-left: 1px solid var(--hier-sep); background: linear-gradient(to right, rgba(var(--deep-rgb), 0.45), rgba(var(--deep-rgb), 0)); pointer-events: none; }

/* Cores forçadas (alto contraste do Windows): o navegador apaga os fundos — as guias viram bordas e a gaveta ganha bordas de verdade. */
@media (forced-colors: active) {
  .hier-arv > :is(.hg-v, .hg-s) { background: none; width: 0; border-left: 1px solid CanvasText; }
  .hier-arv > .hg-h { background: none; height: 0; border-top: 1px solid CanvasText; }
  .hier-arv > .hg-c { border-color: CanvasText; }
  .tbl.ads.hier tr.mc-grupo > td { border-top: 1px solid CanvasText; border-bottom: 1px solid CanvasText; }
  .tbl.hier :is(.mc-faixa-n, .mc-niv) { border: 1px solid CanvasText; }
}

@media (max-width: 640px) {
  /* Celular: os mesmos sinais com recuo menor; o triângulo continua pequeno no desenho, mas o toque pega 48 × 44 px. */
  .tbl.hier { --hb: 8px; --hi: 14px; --hc: 12px; --hgap: 4px; }
  .tbl.hier tr.lv-campanha > td.name { --hier-fs: calc(13.5px * var(--fz)); }
  /* A área começa 6 px antes do triângulo (o 1º nível perdia a parte que cai fora da tabela) e invade o nome, que já abre. Revisão
     (29/10/2026): presa ao topo da própria linha (1 px abaixo dele), não centrada no triângulo — centrada, subia 2–3 px para dentro da linha
     de cima e um toque no rodapé dela abria a de baixo. Na gaveta, a área é a faixa colorida (a linha inteira já abre e fecha). */
  .tbl.ads.hier tr .nm > button.caret::after { content: ""; position: absolute; left: -6px; top: calc(1px - var(--hier-pt)); width: 48px; height: 44px; }
  .tbl.ads.hier tr.mc-grupo .nm > button.caret::after { top: -8px; height: 38px; }
  /* Gaveta: rótulo, selo e orçamento numa linha; o complemento e a dica, inteiros na 2ª (sem o "·" no começo da linha). */
  /* Largura = da posição do texto até a borda direita da caixa que rola (o card tem o mesmo respiro dos dois lados); um pouco menos de
     espaçamento para "RODANDO AGORA · 16 campanhas · R$ 1.117,71/dia" (a conta real) caber em 375 px. */
  .tbl.hier tr.mc-grupo .mc-faixa .mc-grupo-txt { flex: none; width: calc(100vw - 78px); flex-wrap: wrap; gap: 3px 6px; }
  .tbl.hier tr.mc-grupo .mc-faixa-rot { letter-spacing: 0.06em; }
  .tbl.hier tr.mc-grupo .mc-faixa-n { padding: 1px 6px; }
  .tbl.hier tr.mc-grupo .mc-faixa-extras { flex-basis: 100%; display: block; white-space: normal; }
  .tbl.hier tr.mc-grupo .mc-faixa-extra:first-child::before { content: none; }
  /* Linha de status mais curta: a pílula da campanha vira ponto + palavra (como no conjunto), para o orçamento caber ao lado, e o
     "Controlar" vai para a direita da linha em que couber (antes ocupava uma linha só dele), com o texto centrado no alvo de 44 px. */
  .tbl.hier tr.lv-campanha .mc-linha .pill:is(.ok, .off), :root[data-theme="light"] .tbl.hier tr.lv-campanha .mc-linha .pill.ok { padding: 0; background: transparent; }
  .tbl.hier .mc-linha .btn.xs.mc-ctl-lin { margin-left: auto; padding: 0 10px; align-items: center; justify-content: center; }
}

.mc-barra { margin: 0 0 12px; display: grid; gap: 8px; }
.mc-barra:empty { display: none; }
.mc-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.mc-chip { font-size: calc(12px * var(--fz)); padding: 3px 10px; }
.mc-idade { font-variant-numeric: tabular-nums; }
.mc-velho { color: var(--amber); }
.mc-btns { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
/* "Mais opções" da barra de edição (09/10/2026): fechado, com os botões que não são do dia a dia. */
details.mc-mais summary { cursor: pointer; list-style: none; color: var(--muted); font-size: calc(13px * var(--fz)); padding: 6px 4px; border-radius: 8px; }
details.mc-mais summary::-webkit-details-marker { display: none; }
details.mc-mais summary::after { content: " ▾"; }
details.mc-mais[open] summary::after { content: " ▴"; }
details.mc-mais summary:hover { color: var(--text); }
details.mc-mais summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mc-mais-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.btn.mc-emerg { border-color: rgba(var(--red-rgb), 0.55); color: var(--red); background: transparent; }
.btn.mc-emerg:hover { background: rgba(var(--red-rgb), 0.08); }
.mc-resumo-linha { margin: 0; color: var(--muted); }
.mc-resumo-linha b { color: var(--text); }
.mc-sim { border: 1px solid rgba(var(--violet-rgb), 0.55); background: rgba(var(--violet-rgb), 0.12); color: var(--text); border-radius: 10px; padding: 8px 12px; font-size: calc(13px * var(--fz)); }
.mc-sim b { color: var(--violet); letter-spacing: 0.04em; }
.mc-aviso { padding: 10px 14px; }
.mc-aviso p { margin: 0 0 4px; }
.mc-aviso p:last-child { margin-bottom: 0; }
details.mc-como { border: 1px dashed var(--line); border-radius: 12px; padding: 8px 12px; font-size: calc(13px * var(--fz)); }
details.mc-como summary { cursor: pointer; color: var(--gold); font-weight: 600; }
details.mc-como ol { margin: 6px 0; padding-left: 18px; }
.mc-lendo, .mc-off { margin: 0; }

.mc-hist { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.mc-hist > summary { cursor: pointer; font-weight: 650; }
.mc-hist-nota { margin: 8px 0; }
.mc-hist-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mc-hist-acoes a.btn { text-decoration: none; color: var(--text); }
.mc-h-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mc-h-item { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: rgba(var(--ink-rgb), 0.02); font-size: calc(13px * var(--fz)); display: grid; gap: 4px; overflow-wrap: anywhere; min-width: 0; }
.mc-h-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-variant-numeric: tabular-nums; }
.mc-h-top .pill:last-child { margin-left: auto; }
.mc-h-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.mc-cam-n { font-size: calc(10px * var(--fz)); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 650; }

/* janela "Controlar" (#meta-modal-root): foco preso, rodapé fixo com os botões, rola por dentro */
.mc-overlay { position: fixed; inset: 0; background: rgba(var(--deep-rgb), 0.78); z-index: 40; display: grid; place-items: center; padding: 16px; }
.mc-modal { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 16px; width: min(540px, 100%); max-height: 92dvh; display: flex; flex-direction: column; box-shadow: var(--shadow-card); }
.mc-corpo { padding: 18px 18px 8px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.mc-corpo h2 { margin: 0 0 10px; font-size: calc(17px * var(--fz)); outline: none; }
.mc-rodape { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--line); background: var(--card); border-radius: 0 0 16px 16px; }
.mc-modal .btn { touch-action: manipulation; color: var(--text); }
.mc-modal .btn.gold { color: var(--on-gold); }
.mc-grande { min-height: 44px; white-space: normal; text-align: left; overflow-wrap: anywhere; }
.mc-nivel { margin: 0; font-size: calc(12px * var(--fz)); font-weight: 750; letter-spacing: 0.08em; color: var(--gold); }
.mc-caminho { margin: 2px 0; font-size: calc(15px * var(--fz)); overflow-wrap: anywhere; line-height: 1.45; }
.mc-cam-p.on { font-weight: 700; }
.mc-sep { color: var(--muted); }
.mc-id { margin: 0 0 10px; overflow-wrap: anywhere; }
.mc-status { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 6px 0; font-size: calc(13px * var(--fz)); }
.mc-ctx { margin: 6px 0 8px; padding-left: 18px; font-size: calc(13px * var(--fz)); display: grid; gap: 3px; overflow-wrap: anywhere; }
.mc-acao { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 10px 0; display: grid; gap: 8px; }
.mc-acao h3 { margin: 0; font-size: calc(14px * var(--fz)); }
.mc-acao p { margin: 0; }
.mc-acao-pausa { border-color: rgba(var(--gold-rgb), 0.5); }
/* Botões da janela "Controlar" (15/10/2026, pedido do dono: "aumentar o tamanho do botão revisar mudanças e diminuir o de pausar
   e deixar a mesma cor os 2 botões"): «Revisar mudança» grande (largura do cartão; altura e fonte um pouco acima do antigo
   botão de pausar, 44 px e 14 px/650); pausar/reativar compactos (largura do conteúdo, rótulo curto numa linha). Os dois no
   dourado preenchido de .btn.gold — os mesmos tokens (--gold-fill / --on-gold) no escuro e no claro. Foco visível pelo teclado
   e alvo de toque de 44 px no celular. Revisão de 15/10/2026: o de pausar volta ao neutro quando o item não está gastando (ver
   mcBotaoPausarHtml em app.js). */
.mc-acao .btn.mc-revisar { justify-self: stretch; min-height: 48px; padding: 11px 18px; font-size: calc(15px * var(--fz)); font-weight: 650; text-align: center; white-space: normal; overflow-wrap: anywhere; }
.mc-acao .btn.mc-acao-btn { justify-self: start; max-width: 100%; min-height: 36px; padding: 6px 14px; font-size: calc(13px * var(--fz)); font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.mc-acao .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* O nome do item no cartão de pausa (revisão de 15/10/2026): o botão diz só "Pausar agora"; nome longo em até 2 linhas, o resto
   com reticências (o nome inteiro fica na dica e no topo da janela). */
.mc-acao .mc-acao-nome { margin: -4px 0 0; font-size: calc(13px * var(--fz)); font-weight: 650; color: var(--text); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
@media (max-width: 720px), (pointer: coarse) {
  .mc-acao .btn.mc-acao-btn { min-height: 44px; padding: 8px 16px; }
}
.mc-efeito { font-size: calc(14px * var(--fz)); }
.mc-av-info { margin: 0; color: var(--muted); }
.mc-av-atencao { margin: 0; border: 1px solid rgba(var(--red-rgb), 0.45); background: rgba(var(--red-rgb), 0.08); color: var(--text); border-radius: 10px; padding: 8px 10px; }
.mc-modal label { display: block; font-size: calc(13px * var(--fz)); color: var(--muted); }
.mc-valor-linha { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mc-valor-linha input { width: 9em; font-size: calc(18px * var(--fz)); font-variant-numeric: tabular-nums; }
.mc-rapidos { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.mc-eco { margin: 0; min-height: 1.2em; color: var(--text); }
.mc-vezes { color: var(--red); }
.mc-resumo { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 10px 0; background: rgba(var(--ink-rgb), 0.03); color: var(--text); font-size: calc(18px * var(--fz)); display: grid; gap: 4px; overflow-wrap: anywhere; }
.mc-resumo p { margin: 0; }
.mc-extenso { font-size: calc(14px * var(--fz)); color: var(--gold); font-weight: 650; }
.mc-lote-lista { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; max-height: 40vh; overflow-y: auto; }
.mc-lote-lista li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; border-bottom: 1px dashed var(--line); padding: 4px 0; overflow-wrap: anywhere; font-size: calc(13px * var(--fz)); }
.mc-li-nome { font-weight: 600; flex: 1 1 200px; min-width: 0; }
.mc-res-t { margin: 0 0 6px; }
.mc-res-linhas p { margin: 0 0 6px; font-size: calc(14px * var(--fz)); }
.mc-det { font-size: calc(12px * var(--fz)); margin-top: 8px; }
.mc-det summary { cursor: pointer; color: var(--muted); }
.mc-links { margin: 8px 0 0; }
a.mc-ger { color: var(--gold); }
.mc-senha { display: grid; gap: 6px; }
.mc-senha input { font-size: calc(16px * var(--fz)); }
.mc-sets { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mc-sets li { display: flex; flex-wrap: wrap; gap: 6px; justify-content: space-between; align-items: center; overflow-wrap: anywhere; }
.mc-saude { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; font-size: calc(13px * var(--fz)); }
.mc-saude p { margin: 4px 0 0; }

@media (max-width: 640px) {
  .btn.xs.mc-ctl { min-height: 44px; min-width: 44px; padding: 6px 12px; font-size: calc(13px * var(--fz)); }
  .mc-overlay { padding: 8px; align-items: end; }
  .mc-modal { max-height: 94dvh; }
  .mc-corpo { padding: 14px 14px 6px; }
  .mc-rodape { padding: 10px 14px 14px; }
  .mc-rodape .btn { flex: 1 1 auto; min-height: 44px; }
  .mc-btns .btn { min-height: 40px; }
  .mc-h-top .pill:last-child { margin-left: 0; }
}

/* Modo apresentação: some tudo que edita (botão, barra de ações, histórico, janela); status e orçamento continuam visíveis. */
:root[data-apresentacao="1"] :is(.mc-ctl, .mc-btns, #mc-hist, #meta-modal-root, .mc-como, [data-mc-pausar-tudo], [data-mc-historico-novo], [data-mc-ver-lote]) { display: none !important; }

/* ============================================================
   Automações, Configurações e contadores da Saúde (02/10/2026). Cores só por tokens (claro e escuro), números com
   tabular-nums, nada de tabela larga (listas e grades que viram uma coluna no celular).
   ============================================================ */
.au-intro { margin: 0 0 12px; max-width: 900px; }
.au-faixa { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 12px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(var(--ink-rgb), 0.035); font-size: calc(13px * var(--fz)); overflow-wrap: anywhere; }
.au-faixa > span:not(.sd) { flex: 1 1 220px; min-width: 0; }
.au-f-bad { border-color: rgba(var(--red-rgb), 0.45); background: rgba(var(--red-rgb), 0.08); }
.au-f-warn { border-color: rgba(var(--gold-rgb), 0.45); background: var(--gold-soft); }
.au-f-off { border-style: dashed; }
.au-card h3, .cf-card h3 { margin: 0; font-size: calc(15px * var(--fz)); font-weight: 650; color: var(--text); }
.au-grande { margin: 0 0 6px; font-size: calc(17px * var(--fz)); }
.au-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 0; }
.au-motivo { margin: 6px 0 0; }
.au-ped-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 8px 0 0; font-size: calc(13px * var(--fz)); }
.au-ped-linha > span:not(.pill) { flex: 1 1 200px; min-width: 0; }
.au-erro > span:not(.pill) { color: var(--red); }
.btn.au-perigo { background: transparent; border-color: rgba(var(--red-rgb), 0.5); color: var(--red); font-weight: 650; }
.btn.au-perigo:hover { background: rgba(var(--red-rgb), 0.1); }
.btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn[aria-disabled="true"]:active { transform: none; }
.au-msgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.au-msg, .au-ia-bloco { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: rgba(var(--ink-rgb), 0.03); min-width: 0; }
.au-msg p, .au-ia-bloco p { margin: 6px 0 0; }
.au-msg-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.au-dl { display: grid; gap: 4px; margin: 10px 0 0; font-size: calc(13px * var(--fz)); }
.au-dl > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 8px; align-items: baseline; }
.au-dl dt { color: var(--muted); }
.au-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.au-pulos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 16px 0 6px; }
.au-pulos-grid h3 { font-size: calc(13px * var(--fz)); color: var(--muted); font-weight: 600; margin: 0 0 6px; }
.au-pulos { list-style: none; margin: 0; padding: 0; font-size: calc(13px * var(--fz)); }
.au-pulos li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-top: 1px solid var(--line); }
.au-pulos li span { min-width: 0; overflow-wrap: anywhere; }
.au-pulos b, .ct-row b { font-variant-numeric: tabular-nums; }
.au-ia-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.au-modos { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 0; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.au-modos .btn { border-color: transparent; background: transparent; color: var(--muted); }
.au-modos .btn.on { background: var(--gold-fill); color: var(--on-gold); border-color: var(--gold-fill); opacity: 1; cursor: default; }
.au-reqs { list-style: none; margin: 10px 0 0; padding: 0; font-size: calc(13px * var(--fz)); display: grid; gap: 3px; }
.au-reqs li { overflow-wrap: anywhere; }
.au-reqs li > span[aria-hidden] { display: inline-block; width: 1.2em; font-weight: 800; }
.au-reqs li.ok > span[aria-hidden] { color: var(--green); }
.au-reqs li.falta > span[aria-hidden] { color: var(--red); }
.au-bk, .au-peds, .cf-cx, .cf-hist, .ct-motivos { list-style: none; margin: 0; padding: 0; font-size: calc(13px * var(--fz)); }
.au-bk li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--line); }
.au-bk li > div { min-width: 0; overflow-wrap: anywhere; }
.au-peds li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.au-ped-hora { color: var(--muted); }
.au-ped-o { font-weight: 600; }
.au-ped-t { flex: 1 1 100%; overflow-wrap: anywhere; }
.au-conf #au-conf-corpo p { margin: 0 0 8px; overflow-wrap: anywhere; }
.btn.au-perigo:focus-visible, .au-modos .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Configurações */
.cf-h3 { margin: 16px 0 6px !important; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.cf-h3 .small { font-weight: 400; }
.cf-vale { margin: 0 0 8px; font-size: calc(15px * var(--fz)); }
.cf-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 6px 0; }
.cf-form label { font-size: calc(13px * var(--fz)); color: var(--muted); }
.cf-form .search { flex: 0 1 11em; }
.cf-form .chips.sm { margin: 0; }
.cf-metas-form { display: grid; grid-template-columns: max-content minmax(0, 12em); align-items: center; }
.cf-metas-form .btn { grid-column: 1 / -1; justify-self: start; }
.cf-prog p { margin: 4px 0 0; }
.cf-aviso { margin: 8px 0 4px; font-weight: 600; }
.cf-pendente { margin: 4px 0 0; color: var(--gold); }
.cf-form .search[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.cf-det { margin: 12px 0 0; font-size: calc(13px * var(--fz)); }
.cf-det summary { cursor: pointer; color: var(--gold); font-weight: 600; }
.cf-hist li { padding: 5px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.cf-cx { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 10px; }
.cf-cx-i { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: rgba(var(--ink-rgb), 0.03); min-width: 0; overflow-wrap: anywhere; }
.cf-cx-i.sd-falha { box-shadow: inset 3px 0 0 var(--red); }
.cf-cx-i.sd-atencao { box-shadow: inset 3px 0 0 var(--gold); }
.cf-cx-i p { margin: 4px 0 0; }
.cf-cx-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.cf-o-que code { white-space: normal; }
/* Balões dos textos do WhatsApp (só leitura): *negrito* e _itálico_ já viram <b>/<i>; link é texto. */
.wa-regra { border-top: 1px solid var(--line); padding: 12px 0 4px; }
.wa-regra:first-of-type { border-top: 0; }
.wa-bal { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 4px; padding: 10px 12px; border-radius: 4px 14px 14px 14px; background: rgba(var(--wa-rgb), 0.12); border: 1px solid rgba(var(--wa-rgb), 0.3); color: var(--text); font-size: calc(13.5px * var(--fz)); line-height: 1.45; max-width: 560px; }
.wa-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; align-items: start; }
.wa-par > p { grid-column: 1 / -1; margin: 6px 0 0; }
.wa-col > p { margin: 8px 0 0; }
/* Visão geral: linha das metas */
.metas-linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 14px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(var(--ink-rgb), 0.035); font-size: calc(13px * var(--fz)); }
.metas-linha > span { color: var(--muted); }
/* Saúde: contadores do site */
.ct-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 10px; }
.ct-motivos { margin: 0 0 10px; }
.ct-motivos li { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.ct-motivos li > span:last-child { min-width: 0; }
.ct-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.ct-col h3 { margin: 0 0 6px; font-size: calc(13px * var(--fz)); color: var(--muted); font-weight: 600; }
.ct-row { display: grid; grid-template-columns: minmax(0, 1fr) 4.6em 4.6em; gap: 8px; align-items: baseline; padding: 4px 0; border-top: 1px solid var(--line); font-size: calc(13px * var(--fz)); }
.ct-row > b, .ct-row > span:not(.ct-l) { text-align: right; }
.ct-l { min-width: 0; overflow-wrap: anywhere; }
.ct-cab { border-top: 0; color: var(--muted); font-size: calc(11.5px * var(--fz)); padding-bottom: 0; }
.ct-sub .ct-l { padding-left: 12px; color: var(--muted); }
.ct-sub > b { font-weight: 500; }
.ct-det summary { cursor: pointer; color: var(--muted); font-size: calc(12.5px * var(--fz)); padding: 4px 0; border-top: 1px solid var(--line); }
@media (max-width: 980px) {
  .au-msgs { grid-template-columns: 1fr; }
  .au-ia-grid, .ct-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .wa-par, .au-pulos-grid { grid-template-columns: 1fr; }
  .cf-metas-form { grid-template-columns: 1fr; }
  .cf-metas-form .search { max-width: 14em; }
}
@media (max-width: 640px) {
  .au-btns .btn, .au-modos .btn { min-height: 40px; }
  .au-dl > div { grid-template-columns: 6em minmax(0, 1fr); }
  .ct-row { grid-template-columns: minmax(0, 1fr) 3.8em 3.8em; }
}
/* Modo apresentação: Configurações sai (aba e links); Automações fica, sem nenhum botão de ação. */
:root[data-apresentacao="1"] :is(.tab[data-tab="config"], a[data-go="config"], .au-acao, .cf-acao, .au-btns, .au-modos, #au-modal-root, .metas-editar) { display: none !important; }
/* ...e o que fala dos botões (motivo de botão indisponível, "use o botão", "cada botão pede...") some junto com eles. */
:root[data-apresentacao="1"] :is(.au-motivo, .au-so-acao) { display: none !important; }

/* ============================================================
   Leads e qualificação pré-compra (02/10/2026, lib/qualificacao.mjs): seção da aba Análises, selo da pessoa na aba Clientes,
   painel da pessoa (critérios, evidências, versão e correção), bloco do cartão do CRM e o card de Configurações. Só tokens
   (claro/escuro), números tabulares; no celular as grades viram uma coluna e as tabelas rolam dentro do card.
   ============================================================ */
.lq-regra { margin: 0 0 10px; font-size: calc(13px * var(--fz)); overflow-wrap: anywhere; }
.lq-regra .h2link { white-space: nowrap; }
.lq-versoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 10px; padding: 10px 12px; border: 1px solid rgba(var(--gold-rgb), 0.45); border-radius: 12px; background: var(--gold-soft); }
.lq-versoes p { margin: 0; flex: 1 1 260px; min-width: 0; }
.lq-rec { margin: 0 0 8px; }
.lq-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.lq-kpis .kpi .value { font-size: calc(24px * var(--fz)); overflow-wrap: anywhere; }
.lq-kpis .kpi .sub { overflow-wrap: anywhere; }
.lq-avisos { margin: 6px 0 12px; }
.lq-funil td.fn-name { min-width: 240px; }
.lq-funil .lq-def { margin-top: 2px; max-width: 62ch; }
.lq-tbl td, .lq-tbl th { font-variant-numeric: tabular-nums; }
.lq-tbl th { white-space: normal; vertical-align: bottom; line-height: 1.3; }
.lq-tbl th.r { min-width: 5.5em; }
.lq-tbl td.name { min-width: 170px; max-width: 320px; overflow-wrap: anywhere; }
.lq-tbl td.r { white-space: nowrap; }
.lq-tbl tbody.foot tr:first-child > td { border-top: 2px solid var(--line); }
.lq-tbl tr.k-total > td { font-weight: 650; }
.lq-tbl tr.k-total .muted { font-weight: 400; white-space: normal; }
.lq-tbl tr.lq-sem > td.name b { color: var(--muted); }
.lq-tbl tr.few > td { color: var(--muted); }
.lq-teto { white-space: nowrap; text-decoration: underline dotted var(--muted); text-underline-offset: 3px; }
.cf-qf-peso select:disabled { opacity: 0.55; cursor: not-allowed; }
.qf-selo-l { margin-top: 4px; }
.qf-selo { border: 0; cursor: pointer; font-family: inherit; text-align: left; white-space: normal; line-height: 1.35; font-variant-numeric: tabular-nums; }
.qf-selo:hover { box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.5); }
.qf-selo:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.qf-overlay { position: fixed; inset: 0; z-index: 25; background: rgba(var(--deep-rgb), 0.6); }
.qf-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 26; width: min(580px, 100vw); display: flex; flex-direction: column; gap: 10px; padding: 18px; overflow-y: auto; overflow-x: hidden; border-left: 1px solid var(--line); background: var(--card); color: var(--text); box-shadow: var(--shadow-card); font-variant-numeric: tabular-nums; }
.qf-panel > * { flex: none; min-width: 0; }
.qf-panel p { margin: 0; overflow-wrap: anywhere; }
.qf-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.qf-head h2 { margin: 0; font-size: calc(18px * var(--fz)); font-weight: 650; overflow-wrap: anywhere; }
.qf-head h2:focus { outline: none; }
.qf-sit .pill { margin-right: 6px; }
.qf-nota { font-size: calc(14px * var(--fz)); }
.qf-crit td.fn-name { min-width: 180px; }
.qf-ev { margin: 4px 0 0; padding-left: 16px; color: var(--muted); font-size: calc(12px * var(--fz)); }
.qf-ev li { margin: 1px 0; overflow-wrap: anywhere; }
.qf-corr { margin: 4px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 8px; min-width: 0; }
.qf-corr legend { padding: 0 6px; font-weight: 650; font-size: calc(13px * var(--fz)); }
.qf-corr textarea { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; color: var(--text); }
.qf-corr textarea[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.qf-radios { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.qf-radios label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.cf-qf { list-style: none; margin: 10px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.cf-qf-i { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: rgba(var(--ink-rgb), 0.03); min-width: 0; overflow-wrap: anywhere; }
.cf-qf-i p { margin: 4px 0 0; }
.cf-qf-off { opacity: 0.85; }
.cf-qf-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.cf-qf-ctl { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: calc(13px * var(--fz)); }
.cf-qf-ctl label { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.cf-qf-ctl select { padding: 4px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; }
#cf-qualif .cf-form .search { flex: 0 1 6em; }
@media (max-width: 1100px) {
  .lq-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .lq-tbl thead { display: none; }
  .lq-tbl, .lq-tbl tbody, .lq-tbl tr, .lq-tbl td { display: block; width: 100%; }
  .lq-tbl tr { padding: 10px 0; border-top: 1px solid var(--line); }
  .lq-tbl td, .lq-tbl td + td { border: 0; padding: 2px 0; text-align: right; }
  .lq-tbl td.name { min-width: 0; max-width: none; text-align: left; padding-bottom: 6px; }
  .lq-tbl tbody.foot tr:first-child > td { border-top: 0; }
  .lq-tbl tbody.foot tr:first-child { border-top: 2px solid var(--line); }
  .lq-tbl td[data-l] { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; white-space: normal; }
  .lq-tbl td[data-l]::before { content: attr(data-l); color: var(--muted); font-size: calc(12px * var(--fz)); text-align: left; flex: none; }
  .lq-tbl td[data-l] > div { min-width: 0; }
  .lq-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lq-kpis .kpi .value { font-size: calc(21px * var(--fz)); }
  .lq-funil td.fn-name, .qf-crit td.fn-name { min-width: 0; }
  .qf-panel { width: 100%; padding: 14px; border-left: 0; }
  .qf-corr .btn { min-height: 40px; }
}

/* ---------- Teste A/B de páginas (06/10/2026, Análises › Teste A/B de páginas) ---------- */
.ab-jan { margin-bottom: 6px; }
.ab-jan-txt { margin: 0 0 12px; overflow-wrap: anywhere; }
.ab-ver { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(var(--ink-rgb), 0.03); margin: 0 0 10px; }
.ab-ver p { margin: 0; flex: 1 1 280px; min-width: 0; font-size: calc(14px * var(--fz)); overflow-wrap: anywhere; }
.ab-ver-inconclusivo { border-color: rgba(var(--gold-rgb), 0.45); background: var(--gold-soft); }
.ab-ver-b-melhor, .ab-ver-a-melhor { border-color: rgba(var(--green-rgb), 0.45); background: rgba(var(--green-rgb), 0.07); }
.ab-obs, .ab-alerta { margin: 0 0 10px; padding: 10px 12px; border-radius: 0 10px 10px 0; font-size: calc(13px * var(--fz)); overflow-wrap: anywhere; }
.ab-obs { border-left: 3px solid var(--cyan); background: rgba(var(--ink-rgb), 0.04); }
.ab-alerta { border-left: 3px solid var(--red); background: rgba(var(--red-rgb), 0.07); }
.ab-est { margin-top: 6px; }
.ab-ic { margin: 12px 0 4px; max-width: 520px; }
.ab-ic-trilho { position: relative; height: 14px; border-radius: 99px; background: rgba(var(--ink-rgb), 0.07); }
.ab-ic-trilho i { position: absolute; display: block; }
.ab-ic-zero { top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--muted); }
.ab-ic-faixa { top: 3px; bottom: 3px; border-radius: 99px; background: rgba(var(--gold-rgb), 0.6); }
.ab-ic-faixa.fora { background: rgba(var(--green-rgb), 0.65); }
.ab-ic-ponto { top: 0; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--text); border: 2px solid var(--card); box-sizing: border-box; }
.ab-ic-esc { display: flex; justify-content: space-between; gap: 8px; font-size: calc(11px * var(--fz)); color: var(--muted); margin-top: 4px; }
.ab-lim { margin: 6px 0 4px; overflow-wrap: anywhere; }
.ab-tbl td, .ab-tbl th { font-variant-numeric: tabular-nums; }
.ab-tbl { max-width: 980px; }
/* O rótulo da linha alinha com os valores e a linha divisória passa sob ele (como os td da tabela); no celular o @media abaixo refaz. */
.ab-tbl tbody th.ab-rot { vertical-align: top; text-align: left; font-weight: 500; min-width: 150px; text-transform: none; letter-spacing: normal; font-size: calc(13px * var(--fz)); color: var(--text); padding: 9px 8px 9px 0; border-top: 1px solid var(--line); white-space: normal; }
.ab-tbl tr.ab-forte th.ab-rot { font-weight: 650; }
.ab-tbl tr.ab-forte td, .ab-tbl tr.ab-forte th.ab-rot { background: rgba(var(--green-rgb), 0.05); }
.tag.ab-cmp { color: var(--green); border-color: rgba(var(--green-rgb), 0.5); }
.tag.ab-nc { color: var(--amber); border-color: rgba(var(--amber-rgb), 0.5); }
.ab-ver-cautela { border-color: rgba(var(--amber-rgb), 0.55); background: rgba(var(--amber-rgb), 0.08); }
.ab-mesmo-res { margin: 0 0 10px; overflow-wrap: anywhere; }
.ab-prob-fraca strong { color: var(--muted); }
.ab-jan-nota { margin: -6px 0 12px; padding: 8px 10px; border-left: 3px solid var(--amber); background: rgba(var(--amber-rgb), 0.07); border-radius: 0 8px 8px 0; overflow-wrap: anywhere; }
.ab-nc-nota { margin: 0 0 10px; overflow-wrap: anywhere; }
code.ab-url { white-space: normal; overflow-wrap: anywhere; }
.ab-sect { margin-top: 20px; }
.ab-pg-tit { font-weight: 650; font-size: calc(13px * var(--fz)); margin: 0 0 8px; }
.ab-tbl td.r { min-width: 8em; vertical-align: top; }
.ab-tbl td .muted.small { white-space: normal; font-weight: 400; }
.ab-mix { margin-bottom: 8px; }
.ab-mix .hbar .item span { overflow-wrap: anywhere; }
.ab-sub { margin: 10px 0 6px; }
.ab-mesmo td, .ab-mesmo th { font-variant-numeric: tabular-nums; }
.ab-mesmo td.name { min-width: 180px; max-width: 320px; overflow-wrap: anywhere; }
.ab-mesmo tr.few > td { color: var(--muted); }
.ab-fl-lead { margin: 0 0 8px; }
.ab-funnel { gap: 8px; }
.ab-pgsel { margin-bottom: 4px; }
.ab-pgsel .chip.on .muted { color: inherit; opacity: 0.8; }
.ab-pgnota { margin: 0 0 12px; overflow-wrap: anywhere; }
.ab-pgnota .h2link { white-space: nowrap; }
.ab-vazio ol { color: inherit; }
.ab-url { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  /* Lado a lado no celular: o nome da métrica em cima e as duas páginas lado a lado embaixo (nada escondido numa rolagem lateral). */
  .ab-tbl thead { display: none; }
  .ab-tbl, .ab-tbl tbody { display: block; width: 100%; }
  .ab-tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 14px; padding: 9px 0; border-top: 1px solid var(--line); }
  .ab-tbl tbody th.ab-rot { grid-column: 1 / -1; min-width: 0; padding: 0 0 2px; border: 0; }
  .ab-tbl td.r, .ab-tbl td.r + td.r { display: block; min-width: 0; padding: 0; border: 0; text-align: left; }
  .ab-tbl td[data-l]::before { content: attr(data-l); display: block; color: var(--muted); font-size: calc(11px * var(--fz)); }
  .ab-mix, .ab-fluxos { grid-template-columns: 1fr; }
  .ab-mesmo thead { display: none; }
  .ab-mesmo, .ab-mesmo tbody, .ab-mesmo tr, .ab-mesmo td { display: block; width: 100%; }
  .ab-mesmo tr { padding: 10px 0; border-top: 1px solid var(--line); }
  .ab-mesmo td, .ab-mesmo td + td { border: 0; padding: 2px 0; text-align: right; }
  .ab-mesmo td.name { min-width: 0; max-width: none; text-align: left; padding-bottom: 6px; }
  .ab-mesmo td[data-l] { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .ab-mesmo td[data-l]::before { content: attr(data-l); color: var(--muted); font-size: calc(12px * var(--fz)); text-align: left; flex: none; }
  .ab-mesmo td[data-l] > div { min-width: 0; }
}
.ct-b { margin: 14px 0 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.ct-b h3 { margin: 0 0 8px; font-size: calc(14px * var(--fz)); }
.ct-b .ct-col { max-width: 560px; }

/* Recursos (Liora, 13/11/2026): o que GET /api/recursos desliga some da tela (o app.js marca o <html> com sem-<recurso>). */
:root.sem-crm [data-recurso~="crm"],
:root.sem-chat [data-recurso~="chat"],
:root.sem-carteira [data-recurso~="carteira"],
:root.sem-comprovantes [data-recurso~="comprovantes"],
:root.sem-unioes [data-recurso~="unioes"],
:root.sem-whatsapp [data-recurso~="whatsapp"],
:root.sem-automacoes [data-recurso~="automacoes"],
:root.sem-orderBump [data-recurso~="orderBump"],
:root.sem-backup [data-recurso~="backup"],
:root.sem-qualificacao [data-recurso~="qualificacao"],
:root.sem-ga4 [data-recurso~="ga4"],
:root.sem-financeiro [data-recurso~="financeiro"],
:root.sem-ia [data-recurso~="ia"],
:root.sem-metaControle [data-recurso~="metaControle"] { display: none !important; }

/* Confirmação explícita no controle de campanhas (Liora, 13/11/2026): efeito no gasto diário e a caixa "Entendo…". */
.mc-gasto { margin: 10px 0 6px; padding: 10px 12px; border-radius: 10px; background: var(--gold-soft); border: 1px solid rgba(var(--gold-rgb), 0.35); overflow-wrap: anywhere; }
.mc-entendo { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-weight: 600; }
.mc-entendo input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--gold-fill); cursor: pointer; }
.mc-entendo:focus-within { outline: 2px solid rgba(var(--gold-rgb), 0.7); outline-offset: 2px; }
.mc-rodape .btn[disabled] { opacity: 0.55; cursor: not-allowed; }
/* Funil da assinatura (Liora, 13/11/2026): visita → checkout → carrinho abandonado → assinatura. */
.funil-assin { margin: 0 0 14px; }
.fa-lista { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 6px; }
.fa-lista li { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.fa-barra { height: 10px; border-radius: 4px; background: rgba(var(--text-rgb), 0.06); overflow: hidden; }
.fa-barra i { display: block; height: 100%; border-radius: 4px; background: var(--chart-violet); }
@media (max-width: 520px) { .fa-lista li { grid-template-columns: minmax(0, 1fr) auto; } .fa-barra { grid-column: 1 / -1; grid-row: 2; } }