/* Visão geral (public/index.html) — D10-T16, onda 5, 11/10/2026. Tudo o que é só da Visão mora aqui, com classes .vg-* novas
   (C15: o qg.css é de todas as telas e é da trilha 4). Regras deste arquivo:
   - todo seletor começa por uma classe .vg-*;
   - nenhuma regra muda o tamanho de letra de um seletor do qg.css (font-size só em seletor feito só de classes .vg-* e
     elementos): a letra mínima de 12 px das classes comuns (.g-graf text, .canal small, .estado, .abas button, .miudo…) é do
     qg.css (D11-T4), não daqui;
   - letra mínima 12 px (o teste-tema.js lê este arquivo sozinho).
   Carrega depois do qg.css e do contas.css (ordem dos <link> no index.html). */

/* ── Topo executivo & controles ── */
.vg-topo{display:flex;flex-wrap:wrap;gap:12px 16px;justify-content:space-between;align-items:center;margin-bottom:18px}
.vg-topo h1{font-size:28px;font-weight:800;letter-spacing:-0.025em;margin:0 0 4px;color:#FFFFFF}
.vg-controles{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.vg-controles .qg-sel{min-height:38px}
@media (max-width:760px){.vg-controles{gap:8px}.vg-controles .qg-sel{flex:1 1 100%}.vg-controles .qg-sel select{max-width:none;flex:1}}
.vg-pilula{display:inline-flex;align-items:center;gap:8px;background:#0A0D14;border:1px solid rgba(255,255,255,0.08);border-radius:99px;padding:7px 14px;font-size:13px;color:#94A3B8;font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,0.4)}
.vg-btn-forte,.vg-btn-action-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#06B6D4,#0284C7);border:1px solid #38BDF8;border-radius:12px;color:#07090E;font-weight:800;font-size:13.5px;padding:9px 20px;min-height:38px;cursor:pointer;box-shadow:0 4px 18px rgba(6,182,212,0.45);transition:all .18s cubic-bezier(0.16,1,0.3,1)}
.vg-btn-forte:hover,.vg-btn-action-primary:hover{box-shadow:0 6px 26px rgba(6,182,212,0.65);transform:translateY(-1px)}
.vg-btn-forte:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}

/* ── 1. Números do dia (13/11/2026, QG mais visual, padrão Utmify) ──
   Os cartões são os .qg-k comuns (qg.css); aqui só o que é da Visão: número maior, faísca no pé do cartão, chips de oferta,
   a faixa "Onde vaza" e a etiqueta "ensaio". A frase-resumo (.vg-veredito) e os cartões antigos (.vg-nums) saíram. */
.vg-tit{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vg-ensaio{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#F59E0B;border:1px solid rgba(245,158,11,.45);background:rgba(245,158,11,.1);border-radius:6px;padding:2px 8px}
.vg-chips{margin:-10px 0 16px}
.vg-chips[hidden]{display:none}
.vg-kpis{gap:14px;margin:0 0 14px}
.vg-k{padding:14px 16px 0;display:flex;flex-direction:column;overflow:hidden;position:relative;min-height:118px}
.vg-k .vg-v{font-size:30px;letter-spacing:-.025em;line-height:1.15;margin-top:4px}
.vg-k .c{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;padding-bottom:12px}
.vg-k .c .cmp{white-space:nowrap}
.vg-k .vg-sparkline{display:block;width:calc(100% + 32px);height:38px;margin:auto -16px 0;opacity:.8}
.vg-k:has(.vg-sparkline) .c{padding-bottom:4px}
.vg-mes-g{display:grid;gap:10px}
.vg-mes-g .vg-k{min-height:0;padding-bottom:12px}
.vg-mes-g .vg-k .vg-v{font-size:24px}
.vg-mes-g .medidor,.vg-mes-g .g-medidor{margin-top:6px}

/* Onde vaza: só as etapas que quebraram (linha vermelha); o resto em pílulas cinza numa linha. */
.vg-vaza{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 16px;padding:10px 14px;border-radius:12px;background:#0E121B;border:1px solid rgba(255,255,255,0.06)}
.vg-vaza.tem{border-color:rgba(244,63,94,.35)}
.vg-vaza-r{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#94A3B8;display:flex;align-items:center}
.vg-vaza-l{flex:1 1 100%;order:2;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:14px;color:#CBD5E1}
.vg-vaza-l>b{color:#FFFFFF}
.vg-vaza-tx{color:#F43F5E;font-variant-numeric:tabular-nums}
.vg-vaza-l small{font-size:12px;color:#94A3B8}
.vg-vaza-acao{font-size:12px;font-weight:700;color:#FFFFFF;background:#F43F5E;border-radius:99px;padding:2px 10px}
.vg-vaza-ps{display:flex;flex-wrap:wrap;gap:6px;order:1}
.vg-vaza.tem .vg-vaza-ps{order:3;flex:1 1 100%}
.vg-vaza-p{font-size:12px;color:#94A3B8;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,.03);border-radius:99px;padding:3px 10px;white-space:nowrap;cursor:help}
.vg-vaza-p.ok{color:#10B981;border-color:rgba(16,185,129,.35)}
@media (max-width:760px){.vg-k .vg-v{font-size:24px}.vg-k{min-height:104px;padding:12px 12px 0}.vg-k .vg-sparkline{width:calc(100% + 24px);margin:auto -12px 0;height:30px}.vg-vaza-p{white-space:normal}}

.vg-sparkline{display:block;width:100%;height:44px}
.vg-spark-area{fill:var(--spark);fill-opacity:.16;stroke:none}
.vg-spark-linha{fill:none;stroke:var(--spark);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.vg-spark-zero{fill:none;stroke:var(--texto3);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.vg-sem-ontem{margin:0 0 16px;padding:20px 22px;border-radius:18px;background:#131722;border:1px solid rgba(255,255,255,0.08);box-shadow:0 8px 24px -4px rgba(0,0,0,0.6)}
.vg-sem-ontem p{margin:0;font-size:14px;line-height:1.55;color:#CBD5E1}
.vg-sem-ontem b{color:#FFFFFF}

/* ── 3. Grid do Meio: Lucro Diário e Funil lado a lado ── */
.vg-meio-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:22px;align-items:start;margin-bottom:18px}
.vg-meio-grid>.vg-col-dias{grid-column:1;grid-row:1;min-width:0}
.vg-meio-grid>#vg-funil{grid-column:2;grid-row:1;min-width:0;margin-bottom:0}
@media (max-width:1080px){
  .vg-meio-grid{grid-template-columns:1fr;gap:16px}
  .vg-meio-grid>.vg-col-dias{grid-column:1;grid-row:2}
  .vg-meio-grid>#vg-funil{grid-column:1;grid-row:1}
}

/* ── 4. Funil desenhado em Barras Horizontais ── */
.vg-fx{background:#131722;border:1px solid rgba(255,255,255,0.08);border-radius:18px;padding:22px 24px 20px;box-shadow:0 8px 24px -4px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.08);margin-bottom:18px}
.vg-fx-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.vg-fx-cab h2{font-size:18px;margin:0;font-weight:800;letter-spacing:-0.02em;color:#FFFFFF}
.vg-fx-sub{margin:3px 0 0;font-size:13px;color:#94A3B8;font-weight:500}
.vg-fx-sel{min-height:36px}
.vg-fx-rot,.vg-fx-passo{cursor:default}

.vg-fx-corpo{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px 12px;align-items:stretch}
.vg-fx-linha{display:contents}
.vg-fx-forma{display:none}

.vg-fx-rot{grid-row:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:12px 6px;background:#0A0D14;border:1px solid rgba(255,255,255,0.05);border-radius:12px;min-height:74px;transition:all .2s cubic-bezier(0.16,1,0.3,1)}
.vg-fx-rot:hover{border-color:rgba(255,255,255,0.16);background:#0E121B}
.vg-fx-rot span{display:block;font-size:12px;font-weight:700;color:#94A3B8;text-transform:uppercase;letter-spacing:0.04em}
.vg-fx-rot b{display:block;font-size:18px;font-weight:800;color:#FFFFFF;margin-top:2px;font-variant-numeric:tabular-nums;font-family:'JetBrains Mono',monospace}
.vg-fx-rot small{display:block;font-size:12px;color:#64748B;margin-top:2px}

.vg-fx-fluxo-wrap{grid-row:2;grid-column:1/-1;width:100%;height:150px;margin:4px 0;position:relative}
.vg-fx-fluxo{width:100%;height:100%;display:block;border-radius:10px}

.vg-fx-passo{grid-row:3;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:12px 6px;background:#0A0D14;border:1px solid rgba(255,255,255,0.05);border-radius:12px;min-height:76px;gap:4px;transition:all .2s cubic-bezier(0.16,1,0.3,1)}
.vg-fx-passo:hover{border-color:rgba(255,255,255,0.16);background:#0E121B}
.vg-fx-passo.eh-quebra{border-color:rgba(244,63,94,0.35);background:rgba(244,63,94,0.04)}
.vg-fx-taxa{font-size:12px;color:#94A3B8;line-height:1.3}
.vg-fx-taxa b{font-size:16px;font-weight:800;color:#10B981;font-family:'JetBrains Mono',monospace;display:inline-block}
.vg-fx-passo.nd .vg-fx-taxa b{color:#CBD5E1}
.vg-fx-passo.rv .vg-fx-taxa b,.vg-fx-linha.eh-quebra .vg-fx-taxa b{color:#F43F5E}
.vg-fx-chips{display:flex;justify-content:center;gap:4px;flex-wrap:wrap;margin-top:2px}
.vg-fx-chip{display:inline-flex;align-items:center;gap:4px;border-radius:99px;padding:2px 8px;font-size:12px;font-weight:700;border:1px solid;letter-spacing:0.02em}
.vg-fx-chip.ok{color:#10B981;border-color:rgba(16,185,129,.45);background:rgba(16,185,129,.14)}
.vg-fx-chip.rv{color:#F43F5E;border-color:rgba(244,63,94,.45);background:rgba(244,63,94,.14)}
.vg-fx-chip.nd{color:#94A3B8;border-color:rgba(255,255,255,0.08);background:rgba(255,255,255,.04)}
.vg-fx-chip.qb{color:#FFFFFF;background:#F43F5E;border-color:#F43F5E;letter-spacing:.02em;box-shadow:0 0 10px rgba(244,63,94,.5)}
.vg-fx-perda{font-size:12px;color:#64748B;line-height:1.2;margin-top:2px}

.vg-fx-passo[data-passo="ctr"]{grid-column:1;grid-row:3}
.vg-fx-passo[data-passo="clique"]{grid-column:2;grid-row:3}
.vg-fx-passo[data-passo="pagina"]{grid-column:3;grid-row:3}
.vg-fx-passo[data-passo="checkout"]{grid-column:4;grid-row:3}

.vg-fx-caixa{grid-row:4;grid-column:1/-1;border:1px solid rgba(244,63,94,.35);border-left:5px solid #F43F5E;background:linear-gradient(135deg,rgba(244,63,94,.12) 0%,rgba(19,23,34,.98) 100%);border-radius:14px;padding:18px 22px;box-shadow:0 10px 32px rgba(0,0,0,.5),0 0 24px -4px rgba(244,63,94,.22),inset 0 1px 0 rgba(255,255,255,.08);margin-top:8px}
.vg-fx-caixa.ok{border-color:rgba(16,185,129,.35);border-left-color:#10B981;background:linear-gradient(135deg,rgba(16,185,129,.12) 0%,rgba(19,23,34,.98) 100%);box-shadow:0 10px 32px rgba(0,0,0,.5),0 0 24px -4px rgba(16,185,129,.2),inset 0 1px 0 rgba(255,255,255,.08)}
.vg-fx-caixa.nd{border-color:rgba(255,255,255,0.1);border-left-color:#94A3B8;background:linear-gradient(135deg,rgba(14,18,27,.8) 0%,rgba(19,23,34,.98) 100%)}
.vg-fx-tag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.06em;color:#FFFFFF;background:#F43F5E;border-radius:6px;padding:4px 10px;box-shadow:0 0 14px rgba(244,63,94,.5);text-transform:uppercase}
.vg-fx-tag.ok{background:#10B981;color:#07090E;box-shadow:0 0 14px rgba(16,185,129,.5)}
.vg-fx-tag.nd{background:rgba(255,255,255,0.1);color:#FFFFFF}
.vg-fx-caixa h4{margin:10px 0 6px;font-size:16px;line-height:1.4;font-weight:600;color:#FFFFFF}
.vg-fx-caixa h4 b{font-size:20px;color:#F43F5E;text-shadow:0 0 12px rgba(244,63,94,.3)}
.vg-fx-caixa h4 span{color:#94A3B8;font-size:13px;font-weight:500}
.vg-fx-din,.vg-fx-acao,.vg-fx-nota,.vg-fx-tb{margin:8px 0 0;font-size:13.5px;line-height:1.55;color:#CBD5E1}
.vg-fx-din b,.vg-fx-acao b,.vg-fx-nota b{color:#FFFFFF;font-weight:700}
.vg-fx-din b,.vg-fx-caixa h4 b{white-space:nowrap}
.vg-fx-nota{padding-top:10px;border-top:1px solid rgba(244,63,94,.25)}
.vg-fx-tb{font-size:13px;color:#94A3B8}
.vg-fx-aviso{margin:0 0 10px;font-size:12.5px;color:#F59E0B;line-height:1.45}
/* 13/11/2026: sem quebra, a caixa vira pílula (funil.js .vg-fx-curta); a explicação fica no title. */
.vg-fx-caixa.vg-fx-curta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:0;margin-top:2px;border:0;background:none;box-shadow:none}
.vg-fx-curta .vg-fx-tag{font-size:12px;letter-spacing:.01em;text-transform:none;padding:3px 10px;border-radius:99px;box-shadow:none;cursor:help}
.vg-fx-curta .vg-fx-tag.ok{background:rgba(16,185,129,.14);color:#10B981;border:1px solid rgba(16,185,129,.35)}
.vg-fx-curta .vg-fx-tag.nd{background:rgba(255,255,255,.04);color:#94A3B8;border:1px solid rgba(255,255,255,0.1)}
.vg-fx-ontem{font-size:12px;color:#94A3B8}
.vg-fx-fonte{margin:14px 0 0;font-size:12.5px;color:#64748B;line-height:1.5;max-width:110ch}
@media (max-width:760px){
  .vg-fx{padding:16px 14px 14px;overflow-x:auto}
  .vg-fx-corpo{min-width:640px}
  .vg-fx-caixa{position:sticky;left:0;max-width:calc(100vw - 52px)}
}

/* ── 5. Demais seções sob .vg-tela ── */
.vg-tela .cartao{background:#131722;border:1px solid rgba(255,255,255,0.08);border-radius:18px;box-shadow:0 8px 24px -4px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.08);transition:all .22s cubic-bezier(0.16,1,0.3,1);padding:22px 24px}
.vg-tela .cartao:hover{border-color:rgba(255,255,255,0.16);box-shadow:0 14px 32px -6px rgba(0,0,0,0.8),inset 0 1px 0 rgba(255,255,255,0.15);transform:translateY(-2px)}
.vg-tela .cab h2{color:#FFFFFF;font-weight:800;letter-spacing:-0.02em}
.vg-tela .legenda-cab{color:#94A3B8;font-weight:500}

/* ── 6. Grid Inferior: Termômetro e Criativos ── */
.vg-baixo-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.45fr);gap:22px;align-items:start;margin-bottom:18px}
.vg-baixo-grid>*{min-width:0;margin-bottom:0}
@media (max-width:1080px){.vg-baixo-grid{grid-template-columns:1fr;gap:16px}}

/* ── 7. Criativos que mais lucraram (.vg-top) ── */
.vg-top{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;padding:12px 14px;background:#0A0D14;border:1px solid rgba(255,255,255,0.04);border-radius:12px;margin-bottom:8px;transition:all .22s cubic-bezier(0.16,1,0.3,1)}
.vg-top:last-of-type{margin-bottom:0}
.vg-top:hover{border-color:rgba(255,255,255,0.16);background:#0E121B;transform:translateX(3px)}
.vg-top .pos-n{font-weight:800;width:24px;height:24px;border-radius:6px;background:rgba(255,255,255,0.06);display:grid;place-items:center;color:#94A3B8}
.vg-top:first-of-type .pos-n{background:rgba(6,182,212,0.15);color:#06B6D4;border:1px solid rgba(6,182,212,0.3)}
.vg-top>span:nth-child(2){min-width:0;overflow:hidden}
.vg-top b{color:#FFFFFF;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.vg-top small{display:block;color:#94A3B8;font-size:12px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vg-top .num{font-weight:800;font-variant-numeric:tabular-nums}
.vg-top .trilho-f{grid-column:1/-1;height:5px;border-radius:99px;background:rgba(255,255,255,0.08);overflow:hidden;margin-top:4px}
.vg-top .trilho-f i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#06B6D4,#10B981);box-shadow:0 0 8px rgba(6,182,212,0.5)}
.vg-top .vg-etq{display:inline-block;font-size:12px;font-weight:700;border-radius:5px;padding:0 6px;margin-right:6px;border:1px solid rgba(255,255,255,0.1);color:#CBD5E1;background:rgba(255,255,255,0.04)}

/* ── 8. Termômetro da oferta (.vg-termo-g) ── */
.vg-termo-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.vg-conta{background:#0A0D14;border:1px solid rgba(255,255,255,0.05);border-radius:14px;padding:16px 18px;display:grid;gap:10px;transition:all .22s cubic-bezier(0.16,1,0.3,1);box-shadow:0 4px 16px rgba(0,0,0,0.4)}
.vg-conta:hover{border-color:rgba(255,255,255,0.16);background:#0E121B;transform:translateY(-2px)}
.vg-conta b{color:#FFFFFF;font-weight:700}
.vg-conta-sub{color:#94A3B8;font-size:12px}
@media (max-width:760px){.vg-termo-g{grid-template-columns:minmax(0,1fr)}}

/* ── 9. Operação (.vg-op) ── */
@media (max-width:900px){.vg-op .canal .ic{display:none}.vg-op .canal{padding:9px 0}}
.vg-op-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:6px}
.vg-op-g h3{font-size:13px;color:#94A3B8;font-weight:700;letter-spacing:.04em;margin:0 0 6px;text-transform:uppercase}
.vg-op-g .canais-g{grid-template-columns:1fr}
.vg-ct-cab{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.vg-ct-lin{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;background:#0A0D14;border:1px solid rgba(255,255,255,0.04);border-radius:12px;margin-bottom:8px;transition:all .22s ease;font-size:13.5px}
.vg-ct-lin:last-of-type{margin-bottom:0}
.vg-ct-lin:hover{border-color:rgba(255,255,255,0.14);background:#0E121B}
.vg-ct-nome{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#FFFFFF}
.vg-ct-s{min-width:0;color:#CBD5E1;line-height:1.45;font-variant-numeric:tabular-nums}
.vg-ct-s b{color:#FFFFFF;font-size:14px}
.vg-ct-nw{white-space:nowrap}
.vg-ct-mini{height:6px;border-radius:99px;background:rgba(255,255,255,0.08);margin-top:5px;position:relative;overflow:hidden}
.vg-ct-mini i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#06B6D4,#10B981);border-radius:99px;box-shadow:0 0 6px rgba(0,0,0,0.4)}
.vg-ct-mes{font-size:12.5px;color:#94A3B8;margin-top:3px}
.vg-ct-amb{color:#F59E0B}
.vg-ct-vazio{font-size:13px;color:#CBD5E1;margin:8px 0 0}
.vg-op .ct-nota{margin-top:8px}
@media (max-width:760px){.vg-op-g{grid-template-columns:1fr;gap:14px}}
@media (max-width:900px){.vg-ct-lin{grid-template-columns:minmax(0,1fr) auto;row-gap:3px}.vg-ct-lin>.vg-ct-s{grid-column:1/-1;grid-row:2}}

/* ── Pílula da leitura ── */
.vg-idade.ok{color:var(--verde);border-color:rgba(16,185,129,.45)}
.vg-idade.al{color:var(--ambar);border-color:rgba(245,158,11,.45)}
.vg-idade.rv{color:var(--vermelho-txt);border-color:rgba(244,63,94,.5)}