/* =========================================================
   Meu Lucro Ideal — identidade visual (redesign estilo Apple, 12/09/2026)
   ========================================================= */

/* Inter auto-hospedada (public/fonts/), não Google Fonts — mantém o
   princípio "offline-first" já decidido pro app (PWA sem dependência de
   rede externa pra renderizar): o arquivo é servido pelo mesmo domínio, e
   o service worker (sw.js) já cacheia qualquer GET same-origin depois do
   primeiro carregamento bem-sucedido, sem precisar de lista de cache
   própria. Variável (100-900 num arquivo só) — cobre peso 400/600/700 sem
   precisar de um arquivo estático por peso. Fallback pra `-apple-system`
   (SF Pro em Mac/iOS) até a Inter terminar de carregar ou se falhar. */
@font-face{
  font-family:'Inter';
  src:url('../fonts/InterVariable.woff2') format('woff2-variations'), url('../fonts/InterVariable.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* Tokens que não dependem de tema. */
:root{
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --radius:14px;
  /* .icone-topo (Perfil) não é filho de .app-header no HTML — precisa
     continuar existindo sozinho no desktop, onde .app-header fica
     display:none (nível superior). Os dois são position:fixed
     independentes, mas ambos centralizados contra ESTA MESMA altura
     (achado do usuário, 14/09/2026: "os dois devem ficar garantidamente
     na mesma altura relativa") — variável única em vez de dois números
     soltos, pra nunca dessincronizar se a altura do header mudar de novo. */
  --app-header-altura:80px;
}

/* =========================================================
   TEMAS

   O atributo data-theme fica no <html> e é escrito por um script inline
   no <head> (ver index.html), antes da primeira pintura — aplicá-lo junto
   com o resto do JS faria a tela piscar no tema errado.

   Regra para quem for mexer: nenhuma cor literal fora destes dois blocos.
   Se um valor novo precisar de cor, ele vira token aqui primeiro. Sombras e
   fundos translúcidos entram inteiros (não só o matiz), porque a opacidade
   que funciona sobre fundo escuro não funciona sobre fundo claro.

   Os documentos legais (termos-v1.html, privacidade-v1.html) NÃO participam
   do tema: têm <style> próprio e não carregam este arquivo. É intencional —
   o hash do texto aceito é a prova jurídica do aceite, e alterar um byte
   sequer quebraria a correspondência com os registros já gravados.
   ========================================================= */

/* ---------- escuro (padrão do produto) ----------
   Paleta do redesign estilo Apple (12/09/2026) — valores exatos da seção 2
   do guia. --surface-2/--surface-elevado/--pink/--funil-1/2/3/--text-erro/
   --nav-fundo/--sombra-sutil/--sombra-forte não são especificados pelo documento; mantidos
   como estavam (--nav-fundo recalculado só pra acompanhar o novo --surface
   em RGB, mesmo alfa) até uma fase que os cubra. */
:root,
:root[data-theme="escuro"]{
  --bg:#000000;
  --surface:#1C1C1E;
  --surface-2:#1E2430;
  /* Hairline (seção 2) — bem mais sutil que o contorno sólido de antes,
     de propósito: no HIG a separação de cartão vem do contraste
     --bg/--surface (preto puro vs. #1C1C1E já é bem perceptível sozinho),
     a linha é só um reforço quase imperceptível, não a fronteira em si. */
  --border:rgba(255,255,255,.08);
  /* Fundo de caixa que fica DIRETO sobre a página, fora de um cartão --surface
     (.cal-lanc, o calendário de Lançamentos; .fs-caixa, os blocos do Raio X
     em Análise; .aviso-exclusao, a faixa fixa de exclusão agendada) —
     não é a mesma pergunta de "campo recuado dentro de um cartão branco",
     que é o que --surface-2 sozinho já resolve. No escuro, --surface-2 (mais
     claro que --surface) já é a caixa "elevada" certa; no claro é o
     contrário — ver o bloco `[data-theme="claro"]` abaixo. */
  --surface-elevado:var(--surface-2);

  --text:#FFFFFF;
  --text-muted:#8E8E93;
  --text-corpo:#D1D1D6;  /* corpo de texto dentro de card — entre --text e --text-muted */

  /* Progressão das 3 barras do símbolo (seção 4 do guia, 14/09/2026 —
     achado do usuário: o SVG em logo.js usava fill="currentColor" único
     pras 3 barras, sem a progressão; nunca tinha sido implementada). Da
     menor pra maior, escuro→claro no tema escuro. */
  --logo-1:#0F766E;
  --logo-2:#16A34A;
  --logo-3:#34D399;
  --teal:#34D399;   /* lucro, positivo, ação principal — 10.92:1 sobre --bg */
  --amber:#F5A623;  /* atenção, despesas — 10.36:1 sobre --bg */
  --amber-texto:var(--amber);  /* já ≥4.5:1 aqui — variante escurecida só existe no claro (ver abaixo) */
  --amber-escuro:#B8781A;  /* segmento "fixas" na barra de composição — 5.74:1 sobre --bg */
  --red:#FF453A;    /* erro / lucro negativo — só isso — 6.16:1 sobre --bg */
  /* 4ª cor de veredito, exceção deliberada às 3 de sempre (25/09/2026,
     velocímetro do Raio X de Anúncios — achado do usuário testando com
     dado real: com só verde/âmbar/vermelho, "diminuir orçamento" (60-90%
     de margem consumida) e "pausar" (90%+) ficavam na MESMA cor, sem dar
     pra distinguir o extremo a olho. Testamos um marcador dentro do
     vermelho em vez de cor nova — sutil demais no tamanho "mini" dos
     cards de anúncio. Uso exclusivamente gráfico (arco do velocímetro),
     nunca texto/selo. */
  --purple:#8B5CF6;  /* pausar (só o velocímetro) — 4.96:1 sobre --bg */
  --pink:#FF3D81;   /* decorativo pontual (progresso do onboarding) — nunca marca, nunca ação */
  --blue:#3B82F6;   /* traçado de gráfico — único uso, nunca veredito (ver seção 2, papéis de cor) */

  --on-teal:#06231C;          /* texto sobre o verde-água do botão — 8.64:1 sobre o novo --teal */
  /* Degradê de azul sóbrio do diagrama de funil (refinamento 17/08/2026,
     substitui o azul/âmbar/teal vivos da 1ª versão — pedido explícito de
     paleta mais discreta). Texto branco nos três: contraste medido contra
     cada tom, sempre ≥4.5:1. */
  --funil-1:#21518C;   /* etapa 1 (Visitas), mais escura */
  --funil-2:#2D6EBE;   /* etapa 2 (Carrinho) */
  --funil-3:#518DD6;   /* etapa 3 (Pedido), mais clara */
  --funil-on-1:#FFFFFF;   /*  8.01:1 sobre --funil-1 */
  --funil-on-2:#FFFFFF;   /*  5.14:1 sobre --funil-2 */
  --funil-on-3:#06231C;   /*  4.85:1 sobre --funil-3 (branco cairia a 3.43:1, por isso escuro aqui) */
  --text-erro:#FFD4D5;
  --teal-suave:rgba(52,211,153,.12);
  --amber-suave:rgba(245,166,35,.12);
  --red-suave:rgba(255,69,58,.12);
  --anel-a-lancar:rgba(255,255,255,.35);  /* anel do calendário de Lançamentos, dia "a lançar" */
  --nav-fundo:rgba(28,28,30,.96);
  --sombra-sutil:0 1px 0 rgba(0,0,0,.25);
  --sombra-forte:0 8px 24px rgba(0,0,0,.45);
}

/* ---------- claro ----------
   Os oito primeiros valores foram definidos pelo produto. Os demais são
   derivados; o contraste medido de cada um sobre --bg está ao lado.
   Para conferir ou refazer as contas: scripts de contraste desta entrega. */
:root[data-theme="claro"]{
  /* Paleta do redesign estilo Apple (12/09/2026) — valores exatos da seção
     2 do guia. --surface-2/--surface-elevado/--pink/--funil-1/2/3/--text-erro/
     --nav-fundo/--sombra-sutil/--sombra-forte não são especificados pelo documento; mantidos
     como estavam (--nav-fundo recalculado só pra acompanhar o novo
     --surface em RGB, mesmo alfa) até uma fase que os cubra. */
  --bg:#F2F2F7;
  --surface:#FFFFFF;
  --surface-2:#E7E9EE;
  /* Hairline (seção 2) — ver comentário equivalente no bloco escuro acima:
     a separação de cartão vem do contraste --bg/--surface, a linha é só
     reforço quase imperceptível. */
  --border:rgba(0,0,0,.08);
  /* No claro, "caixa elevada direto sobre a página" é --surface (branco) —
     o oposto do escuro, onde --surface-2 é a cor mais clara/"elevada" das
     três. Achado do usuário (23/08/2026, com print real): antes de existir
     este token, .cal-lanc/.fs-caixa/.aviso-exclusao usavam --surface-2
     puro, e como ele é mais escuro que --bg aqui (o oposto do escuro),
     ficavam parecendo uma mancha suja em vez de um cartão de verdade. */
  --surface-elevado:var(--surface);

  --text:#000000;        /* 18.82:1 sobre --bg */
  --text-muted:#4A4A4F;  /* 21/09/2026, pedido do usuário — "um pouco de dificuldade
    pra enxergar", depois "pode ser um pouco mais?" — 2 passos a partir de
    #6E6E73 (4.54:1): #5C5C61 (~6.64:1 sobre --surface) não bastou, agora
    ~7.90:1 sobre --bg, ~8.81:1 sobre --surface (branco) — nível AAA. Só o
    tema claro — o escuro já tinha contraste equivalente ao 1º passo. */
  --text-corpo:#3C3C43;  /* corpo de texto dentro de card — 10.94:1 sobre --surface */

  /* Progressão das 3 barras do símbolo (seção 4 do guia) — da menor pra
     maior, claro→escuro no tema claro (mesma regra de contraste da seção
     2: no claro, mais escuro/saturado chama mais atenção). */
  --logo-1:#A7F3D0;
  --logo-2:#16A34A;
  --logo-3:#065F46;
  --teal:#0C8A52;        /*  3.94:1 sobre --bg — definido pelo produto (mesmo espírito do valor anterior) */
  --amber:#D98A1A;       /*  2.48:1 sobre --bg — definido pelo produto; uso GRÁFICO só (ponto do
                             calendário, ícone, barra, borda) — mínimo de 3:1 já atendido. Nunca usar
                             em texto/número/label: ver --amber-texto abaixo pra esse caso */
  /* Variante só pra texto (12/09/2026, pedido do usuário — o --amber oficial do documento não
     chega a 4.5:1 aqui, baixo demais pra número/label real, ex.: o "+3%" de despesas variáveis).
     Mesmo matiz escurecido até clarear o suficiente: 5.22:1 sobre --bg, 5.83:1 sobre --surface,
     4.80:1 sobre --surface-2 — acima do piso nos três fundos onde texto realmente aparece. Não é
     mudança na paleta oficial da seção 2 (--amber continua intocado pro uso gráfico). */
  --amber-texto:#8D5A11;

  --amber-escuro:var(--amber);  /* "Fixas" reaproveita o próprio --amber (pedido do usuário, 12/09/2026) — uso gráfico (barra), não texto */
  --red:#D92C2C;           /*  4.33:1 sobre --bg, valor exato da seção 2 — abaixo do 4.55:1 anterior,
                               que era o piso pra uso como texto (lucro negativo); sinalizando aqui
                               porque é uma pequena regressão de legibilidade, não decisão minha */
  --purple:#7C3AED;        /* pausar (só o velocímetro) — 5.11:1 sobre --bg, ver comentário no tema escuro */
  --pink:#CF1A5C;          /*  4.65:1 sobre --bg, de #FF3D81 */
  --blue:#3B82F6;          /* mesmo valor do escuro (pedido do usuário — já rende bem nos dois fundos) */

  /* Texto escuro, não branco: sobre este verde-água o branco dá 3.45:1 e o
     rótulo do botão (14.5px em negrito) não conta como "texto grande", então
     precisaria de 4.5:1. Preto puro dá 6.10:1. */
  --on-teal:#000000;       /*  4.77:1 sobre o novo --teal */
  /* Mesmo degradê de azul do funil, mais escuro que no tema escuro — sobre
     fundo --surface branco, precisa de mais saturação/escuridão pra não
     desbotar. Texto branco nos três, sempre ≥4.5:1. */
  --funil-1:#193E6B;   /* 10.81:1 */
  --funil-2:#235695;   /*  7.40:1 */
  --funil-3:#2D6EBE;   /*  5.14:1 */
  --funil-on-1:#FFFFFF;
  --funil-on-2:#FFFFFF;
  --funil-on-3:#FFFFFF;
  --text-erro:#7A1519;     /*  8.87:1 sobre --surface-2 */
  --teal-suave:rgba(12,138,82,.12);
  --amber-suave:rgba(217,138,26,.12);
  --red-suave:rgba(217,44,44,.12);
  --anel-a-lancar:rgba(0,0,0,.28);  /* anel do calendário de Lançamentos, dia "a lançar" */
  --nav-fundo:rgba(255,255,255,.96);
  --sombra-sutil:0 1px 0 rgba(18,20,26,.06);
  --sombra-forte:0 8px 24px rgba(18,20,26,.16);
}

*{box-sizing:border-box;}
/* Sem isto, a barra de rolagem aparecer/sumir (sub-aba alta vs. curta, ex.:
   Taxas da plataforma com 2 itens vs. Imposto) muda a largura disponível e
   desloca o conteúdo centralizado (.wrap{margin:0 auto}) alguns pixels pra
   o lado — achado pelo usuário: abas "deslocadas na horizontal" ao trocar
   de sub-aba em Despesas. Reserva o espaço sempre, com barra ou sem. */
html{scrollbar-gutter:stable;}
html,body{margin:0;padding:0;}
/* Classes como .btn/.seg/.check definem display e venceriam o [hidden] do navegador. */
[hidden]{display:none !important;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.45;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--teal);}
/* Links dos Termos de Uso / Privacidade (Meu Perfil) — cor do texto normal
   em vez do teal padrão de link, a pedido do usuário; o sublinhado do
   navegador continua sinalizando que é clicável. */
.link-neutro{color:var(--text);}

.wrap{max-width:640px;margin:0 auto;padding:24px 16px 48px;}

/* ---------- splash ---------- */
.splash{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;z-index:100;}
/* Cor, peso e tamanho vêm do componente .logo. */
.splash-msg{font-size:13px;color:var(--text-muted);}

/* ---------- telas ---------- */
.screen{display:none;}
.screen.active{display:block;animation:fadein .18s ease;}
@keyframes fadein{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}

.brand{text-align:center;margin:12px 0 22px;}

/* ---------- segmented (entrar / criar conta) ---------- */
.seg{display:flex;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:3px;margin-bottom:18px;gap:4px;}
.seg button{flex:1;background:none;border:none;color:var(--text-muted);padding:9px 4px;
  font-size:13.5px;font-weight:600;border-radius:9px;font-family:var(--sans);cursor:pointer;}
.seg button.active{background:var(--surface-2);color:var(--text);box-shadow:var(--sombra-sutil);}

/* Seletor de período (1d/7d/30d/Semana/Mês) — NUNCA rola, seguindo o
   segmented control nativo do iOS (guia, seção 6): quando os rótulos não
   cabem, ele encolhe fonte/padding pra caber numa linha só, sempre. Troca
   a abordagem anterior de rolagem+degradê (14/09/2026 — o degradê e a
   barra nativa escondida por CSS se mostraram frágeis demais em
   Android/Chrome real, ver histórico do commit). `min-width:0` deixa o
   botão encolher abaixo do conteúdo — sem ele, o item mais largo
   ("Semana") força os outros a saírem do lugar seguindo o `flex:1`
   herdado de `.seg button`.

   Este componente aparece em profundidades de aninhamento diferentes —
   direto em `.wrap` na Visão Geral, mas dentro de `.perfil-item-corpo`
   (mais uma camada de padding de 16px de cada lado) em Funil/Receita/
   Anúncios/Chat — e cada camada extra rouba espaço real da coluna de
   cada botão. Um teste inicial só mediu o caso mais folgado (Visão
   Geral) e passou, mas o caso de 2 camadas colidia por ~4px sem eu
   perceber, porque `scrollWidth` do container não capta texto que
   vaza da própria caixa do botão quando não há overflow/scroll
   configurado ali — só comparar a largura real do botão com a largura
   natural do texto (sem clipar) expõe isso. Os valores abaixo foram
   medidos contra o PIOR caso real (2 camadas, 320px, "Semana" com o
   fundo do estado ativo) com folga (~3-4px) — não reduzir sem remedir
   do mesmo jeito, e sempre no caso mais aninhado, não no mais folgado. */
.seg-periodo button{font-size:10px;padding:9px 2px;min-width:0;white-space:nowrap;}

/* ---------- progresso do onboarding ----------
   Único uso restante do rosa: barra e rótulo de passo. É decoração de
   progresso, não identidade — o logotipo é verde-água em todo o app. */
.ob-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.ob-progress{margin-bottom:20px;}
.ob-progress-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px;}
.ob-step-label{font-size:11px;font-weight:600;letter-spacing:0.08em;color:var(--pink);}
.ob-step-name{font-size:12px;color:var(--text-muted);}
.ob-bar{height:4px;background:var(--surface-2);border-radius:3px;overflow:hidden;}
.ob-bar span{display:block;height:100%;background:var(--pink);border-radius:3px;transition:width .25s ease;}

.ob-title{font-size:28px;font-weight:700;letter-spacing:-0.02em;margin:0 0 6px;}
.ob-sub{font-size:13.5px;color:var(--text-muted);margin:0 0 18px;}

.ob-actions{display:flex;gap:10px;margin-top:18px;}
.ob-actions .btn{margin-top:0;}
.ob-actions .btn.secondary{flex:0 0 34%;}
.ob-actions .btn:not(.secondary){flex:1;}

/* ---------- cartões e campos ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;margin-bottom:12px;}

.field{margin-bottom:14px;}
.field:last-child{margin-bottom:0;}
.field label{display:block;font-size:11.5px;color:var(--text-muted);margin-bottom:6px;
  letter-spacing:0.05em;font-weight:600;}
.field input, .field select, .field textarea{
  width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  border-radius:10px;padding:11px 12px;font-size:15px;font-family:var(--sans);}
.field input[type=number], .field input[type=date]{font-family:var(--mono);}
/* Seta nativa do <select> colava direto na borda, sem respiro (22/09/2026,
   achado do usuário — "a setinha para abrir as opções está muito apertada
   no canto"). `appearance:none` tira o desenho do sistema operacional;
   entra uma seta própria (mesmo chevron de `.perfil-item-seta`), com
   espaço reservado à direita — duas cores fixas (não dá pra usar
   `currentColor` num `background-image`), uma por tema, mesmo par de hex
   de `--text-muted` claro/escuro. */
.field select{appearance:none;-webkit-appearance:none;padding-right:34px;
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;}
:root[data-theme="escuro"] .field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");}
:root[data-theme="claro"] .field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4A4F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");}
.field input:focus, .field select:focus{outline:none;border-color:var(--teal);}
.field input.invalid{border-color:var(--red);}
.hint{font-size:11.5px;color:var(--text-muted);margin-top:5px;}

/* Marca campo que pode ficar vazio. Discreto de propósito: sinaliza sem
   competir com o rótulo, e sem sugerir que o campo é menos confiável. */
.tag-opcional{font-size:9.5px;font-weight:700;letter-spacing:.05em;
  color:var(--text-muted);border:1px solid var(--border);border-radius:20px;
  padding:1px 7px;margin-left:6px;vertical-align:middle;}

.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

/* Caixa de upload individual (18/08/2026) — fundo levemente destacado do
   card que a envolve (`--surface-2`, um tom abaixo de `--surface`) pra cada
   arquivo ler como sua própria unidade. */
.upload-box{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;
  padding:14px;display:flex;flex-direction:column;gap:8px;}
/* Instrução por extenso, não mais um rótulo curto em caixa alta (18/08/2026,
   pedido do usuário) — "Envie o arquivo das suas vendas de ontem" fica em
   letra normal, sem caps nem letter-spacing (que só fazia sentido pra um
   rótulo de 2-3 palavras, não pra uma frase inteira). */
.upload-instrucao{font-size:13px;font-weight:600;line-height:1.35;}
/* Onde achar o botão de exportar no painel da Shopee (18/08/2026, pedido do
   usuário) — menor e mais claro que a instrução acima (hierarquia:
   instrução principal em negrito, orientação de apoio em `--text-muted`),
   é justamente o texto que motivou empilhar as três caixas em vez de
   deixá-las lado a lado (precisa de linha inteira, não cabia em 1/3 da
   largura sem quebrar demais). */
.upload-onde{font-size:11.5px;color:var(--text-muted);line-height:1.4;margin:0;}
/* border-style:solid (pedido do usuário, 23/08/2026) — só aqui, não em
   `.btn.ghost` de modo geral. "+ Adicionar grupo"/"+ Adicionar taxa"/etc.
   usavam essa mesma classe tracejada até 14/09/2026 (ver .btn-add-linha
   acima, redesign estilo Apple seção 6) — "Selecionar arquivo" continua
   em .btn.ghost porque é uma ação direta, não um item repetível; o
   tracejado aqui vira só o estado vazio "escolher arquivo pra anexar". */
.upload-box .btn.ghost{margin-top:0;border-style:solid;}
/* Só no tema claro (pedido do usuário, 23/08/2026): --surface é branco lá,
   e o botão "Selecionar arquivo" transparente ficava pouco visível contra o
   cinza do --upload-box. No escuro --surface já é mais escuro que o cinza
   do upload-box (--surface-2), então repetir o mesmo branco-relativo aqui
   deixaria o botão mais apagado em vez de mais visível — fica de fora. */
:root[data-theme="claro"] .upload-box .btn.ghost{background:var(--surface);}
.upload-box .nota-secao{margin:0;}

/* Spinner de "lendo/salvando" (21/08/2026, pedido do usuário — dar a
   sensação visual de que o sistema está processando assim que o cliente
   escolhe o arquivo). */
.spinner{display:inline-block;width:11px;height:11px;margin-right:6px;vertical-align:-1px;
  border:2px solid var(--border);border-top-color:var(--teal);border-radius:50%;
  animation:spinner-girar .7s linear infinite;}
@keyframes spinner-girar{to{transform:rotate(360deg);}}

/* Zona única de importação em lote (03/09/2026, pedido do usuário — upload
   de vários arquivos de uma vez, de tipos e dias diferentes juntos),
   substituindo as antigas quatro caixas "Selecionar arquivo".
   `pointer-events:none` nos filhos garante que todo evento de arrastar
   (dragover/dragleave) sempre mira a própria zona, nunca o ícone ou o
   texto dentro dela — sem isso, passar o mouse sobre o texto durante o
   arraste dispara dragleave->dragover à toa e o realce pisca.

   Dois visuais pro MESMO elemento (14/09/2026, seção 6 do guia redesign
   estilo Apple: "sem área de arrastar e soltar grande no mobile" — toque
   não tem gesto de arrastar arquivo de fora do app):
   - Abaixo de 700px (regra base): botão simples, sólido, só "Selecionar
     arquivos" — nada de tracejado nem instrução de arrastar.
   - A partir de 700px (bloco logo abaixo): a caixa tracejada de sempre,
     com ícone e "arraste ou clique", porque aí um arraste de verdade (do
     Explorador de arquivos do SO) faz sentido.
   JS (`renderImportarDia`, lancamento.js) não muda nada — clique e
   arrastar-e-soltar continuam os mesmos listeners, só a apresentação troca
   por CSS; textos mobile/desktop já vêm os dois no HTML, alternados aqui. */
.upload-lote-zona{display:flex;align-items:center;justify-content:center;
  gap:8px;padding:13px;border:none;border-radius:12px;
  background:var(--teal);cursor:pointer;text-align:center;color:var(--on-teal);
  font-size:14.5px;font-weight:700;line-height:1.3;}
.upload-lote-zona *{pointer-events:none;}
.upload-lote-zona .ic{display:none;}
.upload-lote-zona strong{font-weight:700;}
.upload-lote-zona:active{opacity:.85;}
.upload-lote-texto-desktop{display:none;}
.upload-onde-desktop{display:none;}

@media (min-width:700px){
  .upload-lote-zona{flex-direction:column;padding:22px 14px;border:1.5px dashed var(--border);
    border-radius:12px;background:var(--surface-2);color:var(--text-muted);
    font-size:12.5px;font-weight:400;line-height:1.4;}
  .upload-lote-zona .ic{display:block;width:22px;height:22px;color:var(--teal);}
  .upload-lote-zona strong{color:var(--text);font-weight:600;}
  .upload-lote-zona:hover,.upload-lote-zona:focus-visible{border-color:var(--teal);}
  .upload-lote-zona:focus-visible{outline:none;}
  .upload-lote-zona.arrastando{border-color:var(--teal);background:var(--teal-suave);color:var(--text);}
  .upload-lote-texto-mobile{display:none;}
  .upload-lote-texto-desktop{display:inline;}
  .upload-onde-mobile{display:none;}
  .upload-onde-desktop{display:inline;}
}

/* Lista de progresso do lote — um item por arquivo solto/selecionado,
   preenchido em duas fases (ver `processarLoteImportacao`): primeiro lendo
   e identificando cada um, depois salvando um dia de cada vez. */
.upload-lote-lista{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;}
.upload-lote-item{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;
  padding:8px 10px;border-radius:8px;background:var(--surface-2);font-size:12px;}
.upload-lote-nome{font-weight:600;color:var(--text);word-break:break-all;}
.upload-lote-tipo{color:var(--text-muted);}
.upload-lote-status{margin-left:auto;color:var(--text-muted);white-space:nowrap;}
.upload-lote-item.salvo .upload-lote-status{color:var(--teal);}
/* Mensagem de erro é uma frase inteira (ex.: "Não reconheci este arquivo..."),
   não um rótulo curto como "Salvo."/"Lendo…" — `white-space:nowrap` do
   seletor genérico acima estourava a largura do card (achado do usuário,
   04/09/2026, com print real: teste proposital de arquivo errado). Quebra
   normal, e a linha inteira pra ela sozinha (`flex-basis:100%`) em vez de
   tentar caber ao lado do nome do arquivo — `margin-left:auto` do seletor
   genérico só faz sentido pra um status curto que cabe na mesma linha. */
.upload-lote-item.erro .upload-lote-status{color:var(--red);white-space:normal;margin-left:0;flex-basis:100%;}

/* Calendário do mês em Lançamentos (21/08/2026, pedido do usuário) — dia
   COMPLETO (os 3 arquivos: Vendas + Funil + Anúncios) com um PONTO verde
   embaixo do número; dia INCOMPLETO (menos de 3, mas pelo menos Vendas)
   com o mesmo ponto em amber — mesmo "atenção/despesas" que o resto do
   app já usa, não vermelho (vermelho aqui é só erro/prejuízo). Era uma
   barra fina (14×3px) até 14/09/2026 — a seção 6 do guia (redesign estilo
   Apple) pede ponto pequeno (4-5px), não barra ocupando a largura da
   célula; só forma/tamanho mudaram, a lógica de quando cada cor aparece
   não. Dia passado ainda SEM nenhum lançamento ganha um ANEL branco claro
   sutil em volta do número — dia futuro fica sem indicador nenhum (nem
   ponto, nem anel), por ser neutro (ver seção 6). Compacto e CENTRALIZADO
   na página —
   `max-width` + `margin:0 auto` pra não esticar nem grudar na esquerda do
   card que o envolve. Toda célula do dia (vazia ou não) tem a MESMA
   estrutura interna (`.cal-lanc-num` + `.cal-lanc-ponto`, sempre) — é isso
   que garante que a linha do dia 1 (com 6 células vazias antes dele) fique
   com a mesma altura das linhas seguintes, todas cheias; uma célula vazia
   sem esse miolo interno colapsa pra 0px e distorce a grade. */
.cal-lanc{background:var(--surface-elevado);border:1px solid var(--border);border-radius:14px;
  padding:14px;margin:0 auto 16px;max-width:340px;}
.cal-lanc-cabecalho{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.cal-lanc-titulo{font-size:14px;font-weight:700;text-transform:capitalize;}
.cal-lanc-nav{background:none;border:1px solid var(--border);border-radius:8px;
  width:26px;height:26px;font-size:15px;line-height:1;color:var(--text);cursor:pointer;}
.cal-lanc-nav:active{opacity:.7;}
.cal-lanc-semana{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px;}
.cal-lanc-semana span{text-align:center;font-size:10px;color:var(--text-muted);}
.cal-lanc-grade{display:grid;grid-template-columns:repeat(7,1fr);row-gap:4px;}
/* Hoje/passado é <button> (03/09/2026, pedido do usuário — "sei que falta
   algo mas não sei qual aba e qual dia": clicar mostra a frase do que
   falta, ver `.cal-lanc-info` abaixo); dia futuro continua <span> puro,
   sem função pra ter. Reset dos estilos de botão do navegador (borda,
   fundo, fonte) — o resto do visual (tamanho, círculo, ponto) já vem do
   miolo interno, igual sempre foi. */
.cal-lanc-dia{display:flex;flex-direction:column;align-items:center;gap:2px;padding:1px 0;
  background:none;border:none;font:inherit;}
button.cal-lanc-dia{cursor:pointer;}
button.cal-lanc-dia:active{opacity:.7;}
/* Nome namespaced de propósito (não ".vazio" sozinho) — ".vazio" já é a
   classe global do estado vazio (padding:38px 22px, ver mais abaixo no
   arquivo); reusar o nome aqui inflava a linha do dia 1 pra 94px. */
.cal-lanc-dia.cal-lanc-vazio{visibility:hidden;}
.cal-lanc-num{display:flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;font-size:12px;color:var(--text);border:1.5px solid transparent;}
.cal-lanc-num.a-lancar{border-color:var(--anel-a-lancar);}
/* Hoje ganha destaque de "você está aqui" — círculo preenchido, não só um
   anel — pra não se confundir com o anel mais sutil de "sem lançamento"
   (ajuste 22/08/2026, pedido do usuário). Era branco/preto fixos até
   14/09/2026 (`#fff`/`#000`, deliberadamente fora dos tokens de tema, pra
   "continuar lendo igual nos dois temas") — só que no tema claro o cartão
   do calendário (`--surface-elevado`) TAMBÉM é branco puro, então o
   círculo branco ficava invisível sobre o próprio fundo (achado do
   usuário: "hoje" aparecia só em negrito, sem nenhum círculo visível).
   `--text`/`--bg` resolve isso mantendo a mesma ideia (marcador sempre
   invertido, não um acento de tema) sem cair no mesmo branco-sobre-branco:
   no escuro `--text`/`--bg` já SÃO branco/preto (visual idêntico a antes);
   no claro viram preto/quase-branco, com contraste de verdade contra o
   cartão branco. */
.cal-lanc-dia.hoje .cal-lanc-num{background:var(--text);border-color:var(--text);color:var(--bg);font-weight:700;}
.cal-lanc-ponto{display:block;width:5px;height:5px;border-radius:50%;background:transparent;}
.cal-lanc-ponto.completo{background:var(--teal);}
.cal-lanc-ponto.incompleto{background:var(--amber);}
.cal-lanc-legenda{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:10px;
  font-size:10.5px;color:var(--text-muted);}
.cal-lanc-legenda span{display:flex;align-items:center;gap:5px;}
.cal-lanc-legenda .cal-lanc-legenda-ponto{display:block;width:5px;height:5px;border-radius:50%;}
.cal-lanc-legenda .cal-lanc-legenda-ponto.completo{background:var(--teal);}
.cal-lanc-legenda .cal-lanc-legenda-ponto.incompleto{background:var(--amber);}
.cal-lanc-legenda .cal-lanc-legenda-anel{display:block;width:10px;height:10px;border-radius:50%;
  border:1.5px solid var(--anel-a-lancar);}
/* Frase do que falta no dia clicado (03/09/2026) — mesmo estilo de
   `.nota-secao`, só com fundo próprio pra destacar que é resposta a um
   clique, não legenda fixa da tela. Seletor `.cal-lanc .cal-lanc-info`
   (não só `.cal-lanc-info`) de propósito: `.nota-secao{margin:-4px 0 10px}`
   (mais abaixo no arquivo) tem a MESMA especificidade de uma classe só,
   e como vem depois no arquivo, vencia o empate e anulava esta margem —
   o ajuste de espaçamento pedido pelo usuário não tinha efeito nenhum até
   este fix. Combinar com `.cal-lanc` (ancestral) sobe a especificidade e
   resolve, sem precisar mover a regra pra longe do resto do calendário. */
.cal-lanc .cal-lanc-info{margin:20px 0 0;padding:8px 10px;background:var(--surface);
  border-radius:8px;text-align:center;}

.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.4;
  color:var(--text);margin:4px 0 14px;cursor:pointer;}
.check input{width:18px;height:18px;flex:0 0 18px;margin-top:1px;accent-color:var(--teal);}

/* ---------- botões ---------- */
.btn{display:block;width:100%;text-align:center;background:var(--teal);color:var(--on-teal);
  border:none;padding:13px;border-radius:12px;font-weight:700;font-size:14.5px;
  font-family:var(--sans);cursor:pointer;margin-top:6px;}
/* Imposto (Despesas → Imposto) é a única sub-aba de despesa sem nada entre
   o card e o Salvar — nem lista com "+ Adicionar" (Taxas), nem card de
   totais (Categorias/Despesas fixas). Um valor fixo tentando imitar a
   distância de uma delas (primeira tentativa: 54px, copiando Taxas) ficava
   maior que o espaço real entre o ÚLTIMO elemento visível e o Salvar nas
   outras abas — comparando lado a lado, o usuário notou que Despesas
   variáveis tem só ~12px entre o card de totais e o Salvar (22/09/2026:
   "a distância do botão salvar em relação ao card é maior que... despesas
   variaveis"). 12px reproduz esse mesmo respiro colapsado (a margem de
   `.card`, que é o que rege o total-box) em vez da distância maior que só
   fazia sentido copiando Taxas. */
[data-salvar="regime"]{margin-top:12px;}
.btn:active{opacity:.85;}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.btn.secondary{background:transparent;border:1px solid var(--border);color:var(--text);font-weight:600;}
.btn.ghost{background:transparent;border:1px dashed var(--border);color:var(--text-muted);font-weight:600;}
/* "+ Adicionar item" (item repetível: taxa/grupo/despesa fixa, em Despesas
   e no onboarding) — linha de texto com "+", nunca botão com borda
   tracejada (seção 6 do guia, redesign estilo Apple, 14/09/2026 — o
   tracejado do .btn.ghost acima fica reservado pro estado vazio tipo
   "adicionar foto"; achado do usuário: num fundo claro, o botão fantasma
   tracejado ficava sutil o bastante pra parecer HTML sem estilo nenhum).
   Mesmo tom discreto de .btn.link, alinhado à esquerda — o "+" já vem no
   próprio texto do botão, sem ícone SVG à parte. */
.btn-add-linha{display:flex;align-items:center;width:auto;background:none;border:none;
  color:var(--text-muted);font-size:13.5px;font-weight:600;font-family:var(--sans);
  padding:10px 2px;margin-top:4px;cursor:pointer;text-align:left;}
.btn-add-linha:hover{color:var(--text);}
/* Atalho de link da Shopee (Lançamentos, Outras Despesas) — texto
   selecionável, não link clicável (pedido do usuário, 15/09/2026: reduzir
   a sensação de automatização, mesmo sabendo que tecnicamente não muda o
   risco — copiar não navega pra lugar nenhum, só facilita o gesto de
   selecionar). `user-select:all` na URL: um clique já seleciona a string
   inteira, ajuda a selecionar no toque sem precisar acertar as duas
   pontas. */
.link-shopee{margin-bottom:12px;}
.link-shopee-nome{display:block;font-size:12.5px;font-weight:600;color:var(--text-muted);margin-bottom:4px;}
.link-shopee-linha{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.link-shopee-url{font-family:var(--mono);font-size:11.5px;color:var(--text);background:var(--surface-2);
  border-radius:6px;padding:6px 8px;word-break:break-all;user-select:all;flex:1;min-width:0;}
/* Ícone em vez de texto "Copiar" (15/09/2026, 2ª rodada, pedido do usuário)
   — troca de ícone pro de check é feedback suficiente sozinho, sem
   precisar de texto junto (mesmo padrão de troca contorno/preenchido do
   <nav>, app.html). `.copiado` liga/desliga via classList, igual `.active`
   já faz em outros botões de 2 estados do app. */
.link-shopee-copiar{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:34px;height:34px;background:none;border:none;border-radius:8px;color:var(--text-muted);cursor:pointer;}
.link-shopee-copiar:hover{background:var(--surface-2);color:var(--text);}
.link-shopee-copiar .ic{width:18px;height:18px;}
.link-shopee-copiar .ic-copiado{display:none;color:var(--teal);}
.link-shopee-copiar.copiado .ic-copiar{display:none;}
.link-shopee-copiar.copiado .ic-copiado{display:block;}
/* Botões de excluir conta (Meu Perfil, 20/08/2026: pedido do usuário) —
   mesmo contorno neutro do secondary, só a cor do texto/borda em âmbar. */
.btn.amber{background:transparent;border:1px solid var(--amber);color:var(--amber-texto);}
/* Mesmo contorno do amber acima, na cor primária do app — pro botão
   "calcular" da calculadora de CMV (23/08/2026): o usuário achou o link
   cinza discreto demais perto do campo, queria "o mesmo padrão de botões
   com alguma cor". */
.btn.teal{background:transparent;border:1px solid var(--teal);color:var(--teal);}
.btn.link{background:none;border:none;color:var(--text-muted);font-size:13px;font-weight:600;padding:10px;}
/* Modificador de tamanho independente de cor — generalizado de `.btn.link.tiny`
   (23/08/2026): até então só compunha com `.link`, mas o botão "calcular" da
   calculadora de CMV precisa do mesmo tamanho compacto com `.teal`, não `.link`. */
.btn.tiny{width:auto;padding:4px 2px;font-size:12.5px;margin:0;}
/* `.teal` tem borda (`.link` não) — 2px de padding horizontal encostaria o
   texto nela; os outros usos de `.tiny` (todos `.link`) ficam como estavam. */
.btn.teal.tiny{padding:4px 10px;}
/* Botão só com ícone (26/08/2026, pedido do usuário — o "calcular" da
   calculadora de CMV virou ícone, seguindo o padrão de ícones do resto do
   app): padding igual nos dois eixos, em vez do padding retangular de
   texto acima. */
.btn.icone{padding:4px 8px;}

/* ---------- mensagens ---------- */
/* `.msg` aparece tanto solto na tela (a maioria: avisos de validação, erros
   de carregamento) quanto dentro de um cartão branco (ex.: o aviso de regime
   tributário não escolhido, dentro do bloco de Imposto) — os dois contextos
   ao mesmo tempo, então trocar o fundo por tema não dá (--surface-elevado
   resolveria um caso e quebraria o outro). Uma borda de verdade em volta
   (não só o risco colorido à esquerda, que sempre existiu) resolve os dois:
   fica visível contra qualquer fundo, sem depender da proximidade de cor
   entre --surface-2 e o que estiver atrás. */
.msg{font-size:13px;line-height:1.45;padding:10px 12px;border-radius:10px;margin:12px 0 0;
  background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--text-muted);}
.msg.error{border-left-color:var(--red);color:var(--text-erro);}
.msg.warn{border-left-color:var(--amber);}
.msg.ok{border-left-color:var(--teal);}

.callout{font-size:13px;line-height:1.5;color:var(--text-muted);background:var(--surface);
  border:1px solid var(--border);border-left:3px solid var(--pink);border-radius:10px;
  padding:12px 14px;margin-bottom:16px;}
.callout b{color:var(--text);}

.foot-note{font-size:11.5px;color:var(--text-muted);text-align:center;line-height:1.5;margin:14px 0 0;}

/* ---------- Lançamentos na Carteira (Performance, 25/09/2026) ---------- */
.carteira-direcao{margin-bottom:12px;}
.carteira-direcao .metric-row:first-child{border-bottom:1px solid var(--border);padding-bottom:10px;margin-bottom:4px;}
.carteira-nota{display:block;font-size:11.5px;color:var(--text-muted);font-weight:400;margin-top:2px;}

/* ---------- resumo de funil por IA (Análise, 25/09/2026, experimental) ---------- */
.resumo-funil-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px;margin-top:20px;text-align:center;}
.resumo-funil-vazio{padding:12px 16px;}
.resumo-funil-texto{font-size:14px;line-height:1.6;color:var(--text-corpo);margin:0 0 10px;text-align:left;}
.resumo-funil-destaque{color:var(--text);}
.resumo-funil-erro{font-size:13px;color:var(--red);margin:0 0 10px;}

/* ---------- linhas editáveis (taxas / categorias / despesas) ---------- */
.item-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px;margin-bottom:10px;position:relative;}
/* Imposto (`.bloco-regime`) é a única sub-aba de despesa com um campo
   solto, fora de `.row2` — nas outras (Taxas/Categorias/Despesas fixas),
   o <select> ao lado do <input> numérico dentro de `.row2` (grid) infla a
   altura da LINHA do grid um pouco além da caixa visível do campo (efeito
   colateral de como o navegador mede o tamanho intrínseco de <select>),
   sobrando ~16px "invisíveis" dentro do card que o campo solto do Imposto
   não ganha. Sem esse extra, o card do Imposto ficava com respiro
   perceptivelmente menor por baixo do último campo (achado do usuário,
   22/09/2026) — 30px reproduz o mesmo respiro visual, sem depender do
   mesmo acaso de grid. */
.bloco-regime{padding-bottom:30px;}
.item-card .item-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
/* Achado pelo usuário: quando .item-head embrulha o rótulo do 1º campo (pra
   alinhar "remover" com "Taxa N"/"Despesa N"/"Grupo N"), os 10px daqui
   somavam com os 6px de .field label — o campo ficava mais longe do rótulo
   que em qualquer outro lugar da tela (Imposto incluído). 6px = a mesma
   distância padrão de .field label{margin-bottom}, não os 10px do cabeçalho
   de card inteiro. */
.field > .item-head{margin-bottom:6px;}
/* O rótulo ainda carrega sua própria margin-bottom (.field label) mesmo
   aninhado aqui dentro — sem isto, ela somava com a de cima e o campo
   ficava a 12px, não 6px. */
.field > .item-head label{margin-bottom:0;}
.item-card .item-idx{font-size:11px;letter-spacing:0.06em;color:var(--text-muted);font-weight:600;}
.item-card .item-del{background:none;border:none;color:var(--text-muted);font-size:12.5px;
  cursor:pointer;padding:2px 4px;font-weight:600;}
.item-card .item-del:hover{color:var(--red);}
.item-card.suggested{border-style:dashed;}
.tag-sugestao{font-size:10px;letter-spacing:0.06em;color:var(--amber-texto);
  border:1px solid var(--amber);border-radius:20px;padding:1px 7px;margin-left:8px;font-weight:600;}

/* Vem sempre depois do botão "+ Adicionar..." (Despesas fixas e Despesas
   variáveis) — sem margin-top, o botão (.btn tem margin-top, não bottom) e
   o card ficavam colados. 12px = a mesma distância de .card{margin-bottom},
   pra ficar igual ao espaçamento entre os outros boxes da tela. */
.total-box{padding:12px 14px;margin-top:12px;}
.metric-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:7px 0;border-bottom:1px solid var(--border);font-size:13.5px;}
.metric-row:last-child{border-bottom:none;}
.metric-row .k{color:var(--text-muted);}
.metric-row .v{font-family:var(--mono);font-weight:600;text-align:right;}
.metric-row .v.teal{color:var(--teal);} .metric-row .v.amber{color:var(--amber-texto);}
.metric-row .v.red{color:var(--red);} .metric-row .v.muted{color:var(--text-muted);}
.metric-row .v.blue{color:var(--blue);}
.metric-row.total{border-top:1px solid var(--border);border-bottom:none;margin-top:4px;
  padding-top:10px;font-weight:700;}
.metric-row.total .k{color:var(--text);}
.metric-row.sub{font-size:12px;padding:4px 0;border-bottom:none;}
.metric-row.sub .k{padding-left:12px;}

/* ---------- destaque do lucro real ----------
   Sem borda nem número coloridos (17/09/2026, achado do usuário — sobra de
   antes do redesign: a seção 2 do guia reserva verde/vermelho pra seta+%,
   nunca pro número nem pra borda; o card já mostra o veredito via
   `.lucro-variacao`/`seloVariacao`, colorir também aqui duplicava o mesmo
   sinal duas vezes, contra a seção 1 — "sem duplicar a mesma informação"). */
.lucro-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;margin-bottom:12px;}
/* 15px/700 (21/09/2026, pedido do usuário — "está menor que os textos
   abaixo"): antes 11px/500 lia mais fraco que as linhas de 13.5px do
   próprio card. Mesmo tamanho/peso do `.balanco-titulo` abaixo — os dois
   cards precisam ler como o mesmo tipo de componente. */
.lucro-card .lucro-label{font-size:15px;letter-spacing:0.02em;
  color:var(--text-muted);font-weight:700;}
.lucro-card .lucro-valor{font-family:var(--mono);font-size:30px;font-weight:600;
  letter-spacing:-0.02em;margin:4px 0 2px;}
/* Rótulo do card de Balanço (21/09/2026, pedido do usuário — "Lucro" fica
   dentro do card de cima, "Balanço" ficava por fora") — mesmo estilo do
   `.lucro-label` ao lado, pra ler como o mesmo tipo de card, um embaixo do
   outro. Só aqui: `.section-title` (por fora do card) continua o padrão
   do resto do app pra outras listas agrupadas (ex.: Tráfego/Financeiro
   em Análise). */
.balanco-titulo{font-size:15px;letter-spacing:0.02em;color:var(--text-muted);
  font-weight:700;margin:0 0 6px;}
/* Texto das linhas um pouco menor só aqui (21/09/2026, pedido do usuário
   — "poderia ser um pouco menor") — 13.5px era o padrão genérico de
   `.metric-row`, compartilhado com Despesas/Lançamento/Análise/Config/
   ADS/Onboarding; escopado a `.balanco-card` pra não encolher aquelas
   outras telas junto. */
.balanco-card .metric-row{font-size:12px;}

.section-title{font-size:11.5px;font-weight:700;color:var(--text-muted);
  letter-spacing:0.07em;margin:20px 0 10px;}

/* Subgrupos dentro de "Comportamento das variáveis" (16/08/2026) — Performance
   e ADS, espelhando os menus separados da Shopee. Mais discreto que
   .section-title: é um nível abaixo, não uma seção nova da tela. */
.section-subtitle{font-size:10.5px;font-weight:600;color:var(--text-muted);
  letter-spacing:0.03em;margin:16px 0 8px;}
.section-title + .section-subtitle{margin-top:0;}

/* ---------- tela final ---------- */
.done-card{text-align:center;padding:32px 0;}
.done-icon{width:60px;height:60px;border-radius:50%;background:var(--teal-suave);
  border:1px solid var(--teal);color:var(--teal);font-size:28px;display:flex;align-items:center;
  justify-content:center;margin:0 auto 18px;}
.done-card h1{font-size:22px;margin:0 0 8px;letter-spacing:-0.02em;}
.done-card p{font-size:14px;color:var(--text-muted);margin:0 0 20px;}

/* =========================================================
   CHASSI DE NAVEGAÇÃO — mesma lista plana nos dois formatos (spec §5).
   Celular: barra inferior. PC: menu lateral fixo.
   ========================================================= */
.nav{position:fixed;z-index:30;display:flex;background:var(--nav-fundo);
  backdrop-filter:blur(12px);border-color:var(--border);}
.nav .nav-brand{display:none;}
/* Só os dois logos DENTRO do app (menu lateral do PC, cabeçalho do celular)
   voltam pra Visão geral ao clicar (24/08/2026) — ver initLogo(), logo.js.
   Splash/login/onboarding também usam [data-logo], mas sem [data-logo-home]
   continuam sem cursor de clique nem handler nenhum. */
[data-logo-home]{cursor:pointer;}
.nav button{flex:1;background:none;border:none;color:var(--text-muted);cursor:pointer;
  font-family:var(--sans);display:flex;align-items:center;justify-content:center;gap:8px;}
/* Os ícones herdam a cor do botão (currentColor no stroke/fill), então quem
   decide a cor é sempre o estado do item — nunca o SVG.

   O item ativo se distingue por CONTRASTE, pílula de fundo E ícone
   preenchido em vez de contorno (redesign estilo Apple, seção 5,
   12/09/2026 — antes era só contraste+pílula). O verde-água continua fora
   disso, reservado a conteúdo com significado próprio (lucro real, botão
   de ação): cor que aparece em tudo para de significar alguma coisa. */
.nav button .ic{width:21px;height:21px;flex:0 0 auto;display:block;}
.nav button .ic-preenchido{display:none;}
.nav button.active .ic-contorno{display:none;}
.nav button.active .ic-preenchido{display:block;}
.nav button.active{color:var(--text);background:var(--surface-2);}
.nav button:hover{color:var(--text);}

/* celular: tabbar embaixo.
   A pílula precisa de folga lateral, senão ela encosta na do item vizinho e
   o que era um destaque vira uma faixa contínua. */
@media (max-width:699px){
  .nav{left:0;right:0;bottom:0;border-top:1px solid var(--border);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));}
  .nav button{flex-direction:column;gap:3px;padding:7px 2px 6px;margin:0 3px;
    border-radius:12px;font-size:10px;font-weight:600;}
  body.com-nav .wrap{padding-bottom:100px;}
}

/* PC: menu lateral */
@media (min-width:700px){
  /* 248px vem do logotipo: 179px de marca+texto a 22px, mais 24px de padding
     do menu e 16px do bloco da marca, deixando ~16% de folga para fontes de
     sistema mais largas que a usada na medição. Estreitar quebra a linha. */
  .nav{top:0;bottom:0;left:0;width:248px;flex-direction:column;align-items:stretch;
    border-right:1px solid var(--border);padding:22px 12px;gap:2px;}
  /* Só posição: tipografia e cor vêm do componente .logo. Uma regra de cor
     aqui venceria a do logo por especificidade e traria o rosa de volta. */
  /* Sem borda/fundo próprio, o símbolo sozinho ficava perdido no topo da
     sidebar, sem nenhuma presença (achado do usuário, 14/09/2026) — a
     divisória embaixo marca a transição pro bloco de navegação.
     Padding/margin enxutos de propósito (14/09/2026, 2ª rodada): o
     primeiro valor (20px + 10px) dava respiro demais ANTES da divisória,
     fazendo o símbolo ler como um cabeçalho isolado, flutuando sozinho em
     vez de ancorado à lista logo abaixo — o objetivo aqui é presença, não
     respiro. */
  .nav .nav-brand{display:block;padding:6px 8px 10px;margin-bottom:6px;
    border-bottom:1px solid var(--border);}
  /* A pílula do item ativo vem da regra base; aqui só a geometria do menu lateral. */
  .nav button{flex:0 0 auto;justify-content:flex-start;padding:11px 10px;border-radius:10px;
    font-size:13.5px;font-weight:600;}
  .nav button.nav-sair{margin-top:auto;}

  /* O deslocamento vai no <section>, não no .wrap: assim o .wrap continua
     centralizando com margin:auto dentro da área que sobra, em vez de ficar
     grudado na lateral do menu. com-header (não com-nav): a sidebar cobre
     TODA tela com chassi, inclusive drill-down (ver bloco logo abaixo) —
     com-nav sozinho deixava as 4 telas de drill-down sem esse recuo,
     renderizando por baixo da sidebar fixa (achado do usuário, 13/09/2026). */
  body.com-header .screen{padding-left:248px;}

  /* Sidebar fixa e persistente é infraestrutura do desktop (spec §5) — não
     deveria sumir só porque a navegação ficou mais profunda (drill-down),
     diferente do celular, onde a barra inferior soma de propósito (mesmo
     padrão "push esconde tab bar" do iOS). Precisa de !important pra
     vencer [hidden]!important (app.css:195); `.nav[hidden]` tem mais
     especificidade que `[hidden]` sozinho, o que decide o empate de
     importância a favor desta regra — só quando com-header (achado do
     usuário, 13/09/2026: nas 4 telas de drill-down a sidebar sumia sem
     necessidade, sem nenhum jeito de sair de lá). */
  body.com-header .nav[hidden]{display:flex!important;}

  /* Header compacto (símbolo+título+voltar) só nas telas de drill-down
     (com-header sem com-nav) — nas de nível superior o desktop já mostra
     o título grande (.tela-titulo) mais a sidebar; repetir o header aqui
     duplicaria o título. Clicar num item da sidebar não preserva a posição
     exata dentro do drill-down (só reabre a tela de topo), então o botão
     de voltar continua necessário mesmo com a sidebar visível — mesmo
     mecanismo #appHeaderVoltar de sempre, só passando a existir em
     qualquer largura, não só abaixo de 700px. Fixo no topo, começando
     depois da sidebar (248px) — mesmo padrão do celular, só com o offset
     da esquerda. */
  body.com-header:not(.com-nav) .app-header{
    display:flex;flex-direction:column;justify-content:center;
    position:fixed;top:0;left:248px;right:0;z-index:39;height:var(--app-header-altura);padding:0 24px;
    background:var(--nav-fundo);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
  }
  body.com-header:not(.com-nav) .wrap{padding-top:96px;}
}

/* =========================================================
   ÍCONE DO TOPO — Meu Perfil (redesign estilo Apple, seção 5, 12/09/2026:
   "no máximo 1 ícone de ação" — Tema e Central de Ajuda saíram daqui,
   viraram linhas dentro de Meu Perfil, ver config-screen.js). Continua
   levando direto pra própria tela cheia, sem menu intermediário.
   ========================================================= */
.icones-topo{display:none;}
body.com-nav .icones-topo{
  display:flex;gap:8px;position:fixed;top:12px;right:12px;z-index:41;
}
.icone-topo{display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border);color:var(--text-muted);cursor:pointer;}
.icone-topo:hover{color:var(--text);}
/* stroke-width em CSS vence o atributo `stroke-width="2"` do SVG (é só uma
   apresentação de prioridade baixa) — deixa o traço do ícone de Meu Perfil
   mais grosso aqui sem mexer nos outros 4 ícones que compartilham `.ic` no
   menu de baixo (achado do usuário, 23/08/2026: "as linhas" pareciam finas
   demais nos dois ícones do canto). */
.icone-topo .ic{width:19px;height:19px;display:block;stroke-width:2.6;}

/* Um ícone só (38px) flutua sobre o canto superior direito; sem esta
   folga, um título comprido passa por baixo dele. 70px cobre 38px + 12px
   de margem da borda, com folga. Vale a partir de 700px — abaixo disso o
   header do celular já empurra todo o conteúdo pra baixo do ícone, sem
   sobreposição possível. */
@media (min-width:700px){
  body.com-nav .tela-head,
  body.com-nav #screen-lancamento .ob-title{padding-right:70px;}
}

/* =========================================================
   LOGOTIPO

   Marca em verde-água e "Lucro" em verde-água; o resto do texto na cor
   de texto. Sem rosa e sem âmbar: essas duas continuam significando
   marca decorativa e atenção/despesa no resto da interface, e um logo
   que as usasse gastaria esse significado.
   ========================================================= */
/* Um tamanho para todas as ocorrências: 22px, igual ao h1 das telas.
   A marca usa altura em em, então escala junto sem número próprio. */
.logo{display:inline-flex;align-items:center;gap:9px;line-height:1;font-size:22px;}
.logo-mark{height:1.15em;width:auto;flex:0 0 auto;}
.logo-mark .logo-barra-1{fill:var(--logo-1);}
.logo-mark .logo-barra-2{fill:var(--logo-2);}
.logo-mark .logo-barra-3{fill:var(--logo-3);}
/* nowrap de propósito: se algum dia faltar 1px, o defeito é um fio de corte,
   nunca um logotipo quebrado em duas linhas. */
.logo-texto{font-weight:700;letter-spacing:-0.02em;color:var(--text);white-space:nowrap;}
.logo-texto b{color:var(--teal);font-weight:700;}

/* ---------- header compacto (símbolo + título + voltar) ---------- */
/* Redesign estilo Apple, seção 5 (12/09/2026): símbolo pequeno (sem o
   wordmark por extenso, ver logo.js) + título da tela atual. Mostra em
   TODA tela com chassi, inclusive drill-down (Despesas/sub-abas, grupo de
   Despesas Variáveis, Treinamento, Balanço/detalhe) — por isso a classe
   que controla a exibição (`com-header`) é mais ampla que a do <nav>
   (`com-nav`).
   No celular (abaixo de 700px, bloco logo adiante), o <nav> (barra
   inferior) continua escondido nas telas de drill-down (mesmo padrão
   "push esconde tab bar, mantém nav bar" do iOS). No desktop (bloco "PC:
   menu lateral" acima), a sidebar é infraestrutura fixa e NÃO some no
   drill-down (achado do usuário, 13/09/2026) — lá o header some junto com
   a sidebar em qualquer top-level (evita duplicar o .tela-titulo) e só
   aparece nas 4 telas de drill-down, ao lado da sidebar, não por cima.
   Título fica compacto (17px) nesta fase — o título grande de verdade
   (28px) continua sendo o .tela-titulo de dentro de cada tela por
   enquanto (Fase 3 resolve a duplicação tela por tela). */
.app-header{display:none;}
/* Estrutura em coluna (achado do usuário, 14/09/2026): "‹ voltar" é linha
   própria, sozinha, em cima — o símbolo NÃO fica ao lado dela. O símbolo
   mora só em .app-header-linha, ao lado do título — a mesma linha que já
   existe sozinha nas telas de nível superior (sem "‹ voltar"). Isso
   garante a relação símbolo↔título sempre idêntica nos dois casos (1 ou 2
   linhas de texto), porque os dois literalmente compartilham a mesma
   linha flex, em vez de tentar simular a mesma altura relativa com um
   deslocamento manual (tentativa anterior, com margin-top medido —
   funcionava só numa das duas alturas de bloco, não nas duas juntas). */
.app-header-linha{display:flex;align-items:center;gap:10px;min-width:0;}
.app-header-linha .logo{flex:0 0 auto;}
.app-header-voltar{background:none;border:none;padding:0;margin:0 0 13px;text-align:left;cursor:pointer;
  font-family:var(--sans);font-size:12px;color:var(--text-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.app-header-voltar:hover{color:var(--text);}
.app-header-titulo{flex:1;min-width:0;font-size:17px;font-weight:700;letter-spacing:-0.01em;margin:0;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

@media (max-width:699px){
  /* Três respiros distintos (achado do usuário, 14/09/2026 — "‹ voltar" e
     o título grande estavam quase colados, e o bloco inteiro colado no
     topo da tela e no conteúdo abaixo, padrão do header de Ajustes do
     iOS): altura fixa maior (era 56px) + centralização vertical da coluna
     (1 linha nas telas de nível superior, 2 nas de drill-down) dão o
     respiro 1 (topo→"‹ voltar" ou topo→título) e, por simetria, o mesmo
     respiro abaixo da última linha dentro do próprio header; o respiro 2
     (voltar→título) é a margem de .app-header-voltar; o respiro 3
     (título→conteúdo) é o padding-top do .wrap além da altura do header.
     flex-direction:column (era row): "‹ voltar" e .app-header-linha
     empilham, cada um esticando a largura toda (align-items padrão
     stretch), em vez de dividir uma linha só com o símbolo. */
  body.com-header .app-header{
    display:flex;flex-direction:column;justify-content:center;
    position:fixed;top:0;left:0;right:0;z-index:39;height:var(--app-header-altura);padding:0 14px;
    background:var(--nav-fundo);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
  }
  body.com-header .wrap{padding-top:96px;}
  /* Centralizado contra a MESMA altura do header (--app-header-altura),
     não um valor solto — acompanha se a altura do header mudar de novo
     (achado do usuário, 14/09/2026: símbolo+título e o ícone de Perfil
     pareciam posicionados de forma independente, sem centralização
     conjunta). .icone-topo é 38px (ver bloco "ÍCONE DO TOPO" abaixo). */
  body.com-nav .icones-topo{top:calc((var(--app-header-altura) - 38px) / 2);}
  /* Reserva o mesmo espaço do header do PC (70px, ver comentário em
     .tela-head) só quando o ícone de Meu Perfil também aparece nesta tela
     — com-nav, não com-header, é a classe certa aqui, já que telas de
     drill-down não têm ícone. */
  body.com-nav .app-header{padding-right:70px;}
}

/* ---------- cabeçalho de tela ---------- */
.tela-head{margin-bottom:18px;}
.tela-titulo{font-size:28px;font-weight:700;letter-spacing:-0.02em;margin:0;}
.tela-sub{font-size:12.5px;color:var(--text-muted);margin:3px 0 0;}
/* Título grande só no desktop, nas 6 telas de nível superior (achado do
   usuário, 14/09/2026): a varredura do título duplicado (13/09/2026)
   removeu o <h1> das 6 telas de nível superior contando que o cabeçalho
   compacto (.app-header) cobriria o título — só que .app-header nunca
   existiu no desktop pra essas telas (só pras 4 de drill-down, ver bloco
   "PC: menu lateral"), deixando essas 6 telas sem título nenhum lá. Em vez
   de mostrar o cabeçalho compacto também no desktop, cada breakpoint fica
   com seu próprio tratamento (mobile: só o compacto; desktop: só este
   título grande) — nunca os dois ao mesmo tempo, então não reabre a
   duplicação corrigida antes. Mesmo estilo de .tela-titulo, sem reusar a
   classe: `#adsTitulo` (detalhe de anúncio) também é `.tela-titulo` e
   precisa continuar visível em QUALQUER largura, não só desktop. */
.tela-titulo-desktop{display:none;}
@media (min-width:700px){
  .tela-titulo-desktop{display:block;font-size:28px;font-weight:700;letter-spacing:-0.02em;margin:0;}
}

.seg-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:24px;margin-bottom:-24px;}  /* ver .seg-scroll-wrap abaixo */
.seg-scroll::-webkit-scrollbar{display:none;}
/* Barra de rolagem nativa nunca foi escondida (achado do usuário,
   14/09/2026 — seção 6 do guia: "nunca usar barra de rolagem visível
   atrás do segmented control"). O degradê nas bordas (.seg-fade,
   initFadeSeg em util.js) já existia pra sinalizar "dá pra rolar", mas
   convivia com uma barra cinza nativa por baixo — as duas juntas eram
   redundantes e a barra contrariava a regra.

   `::-webkit-scrollbar{display:none}` não se mostrou confiável num
   Android/Chrome real do usuário (14/09/2026, 2ª rodada) — a barra
   continuou visível mesmo com essa regra presente e já publicada em
   produção (conferido via curl direto na URL de produção, então não era
   cache). Em vez de depender do navegador respeitar esse pseudo-elemento,
   a barra agora é escondida por geometria, técnica que funciona em
   qualquer motor: `.seg-scroll` ganha `padding-bottom` (a barra nativa
   passa a nascer DENTRO dessa faixa) + `margin-bottom` negativo de mesmo
   valor (retrai a caixa de volta, então o fluxo da página não nota o
   padding extra) — e o wrapper corta com `overflow:hidden` tudo que
   ultrapassar sua própria altura, que continua sendo só a altura visível
   original. As regras `::-webkit-scrollbar`/`scrollbar-width` acima
   continuam, redundantes-mas-inofensivas onde já funcionam sozinhas. */
/* Padding maior que o `.seg button` padrão (4px) — com rótulos longos (ex:
   "Taxas da plataforma", "Despesas variáveis") lado a lado no celular, 4px só
   de cada lado deixava as abas quase coladas umas nas outras (achado do
   usuário, 23/08/2026). */
.seg-scroll button{flex:1 0 auto;min-width:72px;white-space:nowrap;padding:9px 10px;}

/* Degradê nas bordas de `.seg-scroll` sinalizando que dá pra rolar pra lá —
   ver initFadeSeg() em util.js, que envolve cada `.seg-scroll` neste wrapper
   e liga/desliga `.pode-rolar-esq/-dir` conforme a posição do scroll. Fica
   FORA do elemento que rola (senão o degradê rolaria junto com o conteúdo,
   em vez de ficar fixo na borda visível). 3px/28px casam com o padding do
   `.seg` (3px) e a largura de sobra de um rótulo cortado pela metade. */
.seg-scroll-wrap{position:relative;overflow:hidden;margin-bottom:10px;}
/* `var(--surface) 55%` (era um degradê linear do início ao fim) segura a cor
   sólida por mais da largura antes de começar a esmaecer — pedido do
   usuário (23/08/2026): achou o efeito bonito porém "bem sutil" na versão
   com degradê parelho a largura toda. Largura também subiu (28→34px) pra
   dar mais espaço pra essa transição mais curta e mais perceptível
   acontecer sem parecer um corte seco. */
.seg-fade{position:absolute;top:3px;bottom:3px;width:34px;pointer-events:none;
  opacity:0;transition:opacity .15s ease;border-radius:9px;}
.seg-fade-esq{left:3px;background:linear-gradient(to right, var(--surface) 55%, transparent);}
.seg-fade-dir{right:3px;background:linear-gradient(to left, var(--surface) 55%, transparent);}
.seg-scroll-wrap.pode-rolar-esq .seg-fade-esq,
.seg-scroll-wrap.pode-rolar-dir .seg-fade-dir{opacity:1;}

/* Pendência numa sub-aba (hoje: regime tributário não definido). Ponto, e não
   número, porque não é contador de nada — é um "falta isto aqui". */
.ponto-pendente{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--amber);margin-left:6px;vertical-align:middle;}

/* ---------- gráfico expandido ----------
   Os blocos de métrica viram <button> para serem alcançáveis por teclado; estas
   regras desfazem a aparência nativa de botão e devolvem a do card. */
.metric-block.expansivel,
.lucro-card.expansivel{
  display:block;width:100%;text-align:left;font:inherit;color:inherit;
  cursor:pointer;-webkit-appearance:none;appearance:none;
}
.metric-block.expansivel:hover,
.lucro-card.expansivel:hover{border-color:var(--text-muted);}
.metric-block.expansivel:focus-visible,
.lucro-card.expansivel:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}

body.sem-rolagem{overflow:hidden;}

/* Shell genérico de modal (18/08/2026, generalizado em 23/08/2026 — a
   calculadora de CMV é a 2ª usuária, então virou `.modal-*` em vez de
   `.graf-*`: o gráfico expandido continua sendo o 1º caso, não o único). */
.modal{position:fixed;inset:0;z-index:60;background:rgba(10,12,16,.66);
  display:flex;align-items:center;justify-content:center;padding:16px;}
.modal-caixa{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);width:100%;max-width:860px;max-height:92vh;
  overflow-y:auto;padding:16px 16px 18px;box-shadow:var(--sombra-forte);}

.modal-cabecalho{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:12px;}
.modal-titulo{font-size:16px;font-weight:650;margin:0;letter-spacing:-0.01em;}
/* Selo (seta+%) ao lado do título do gráfico ampliado (21/09/2026, pedido
   do usuário) — reaproveita o mesmo `.variacao` do bloco/card que abriu o
   gráfico (ver abrirGrafico/GRAF.seloHTML, grafico.js), sem recalcular. */
.graf-titulo-linha{display:flex;align-items:baseline;gap:8px;min-width:0;}
.graf-titulo-linha .variacao{font-size:13px;}
.modal-fechar{background:none;border:none;color:var(--text-muted);font-size:16px;
  cursor:pointer;padding:4px 8px;border-radius:8px;line-height:1;}
.modal-fechar:hover{color:var(--text);background:var(--surface-2);}

.graf-area{position:relative;touch-action:pan-y;}
.graf-svg{display:block;width:100%;height:auto;}
.graf-eixo{font-size:10px;fill:var(--text-muted);font-family:var(--mono);}
.graf-vazio{font-size:13px;color:var(--text-muted);line-height:1.5;padding:26px 4px;}
.graf-vazio.aviso{color:var(--amber-texto);}

/* Única linha de grade que sobra é a de zero (seção 1 do guia, 17/09/2026 —
   "sem grade pesada"), então sem variante de opacidade por degrau. */
.graf-grade{stroke:var(--border);stroke-width:1;}

/* A curva não tem marcador por ponto: bolinha em todo dia vira ruído num mês.
   O que substitui o marcador é o trecho PONTE — a interpolação sobre dias sem
   lançamento, desenhada apagada — mais a guia sob o ponteiro. */
.graf-linha{stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round;}
.graf-ponte{stroke-width:2.2;stroke-linecap:round;opacity:.3;}
.graf-linha-ant{stroke:var(--text-muted);stroke-width:1.8;stroke-dasharray:5 4;
  opacity:.8;stroke-linejoin:round;stroke-linecap:round;}
.graf-linha-ant.ponte{opacity:.3;}

/* Sobreposição de Investimento em ADS no gráfico de Lucro (26/08/2026) — mesmo
   traço tracejado da linha "período anterior", mas em cor própria (âmbar, a
   mesma família de cor de despesa no resto do app), pra não ser confundida
   com a comparação de período. */
.graf-linha-ads{stroke:var(--amber);stroke-width:2;stroke-dasharray:6 4;
  opacity:.9;stroke-linejoin:round;stroke-linecap:round;}
.graf-linha-ads.ponte{opacity:.35;}

.graf-guia-linha{stroke:var(--text-muted);stroke-width:1;stroke-dasharray:3 3;opacity:.8;}
.graf-guia-pt{fill:var(--surface);stroke-width:2.5;}
.graf-guia-pt.ant{stroke:var(--text-muted);}
.graf-guia-pt.ads{stroke:var(--amber);}
.graf-guia-pt[hidden]{display:none;}

/* Chip da data, colado na base da guia — o mesmo papel do rótulo destacado no
   eixo X quando o ponteiro está sobre o gráfico. */
.graf-data{position:absolute;bottom:0;transform:translateX(-50%);pointer-events:none;
  background:var(--surface-2);border:1px solid var(--border);border-radius:7px;
  padding:2px 7px;font-size:10.5px;font-family:var(--mono);color:var(--text);
  white-space:nowrap;z-index:3;}

/* Segue a guia no eixo X e é inerte ao ponteiro: capturá-lo faria o próprio
   tooltip disparar o pointerleave que o esconde, e ele piscaria. */
.graf-tooltip{position:absolute;top:8px;transform:translateX(12px);pointer-events:none;
  background:var(--surface-2);border:1px solid var(--border);border-radius:10px;
  padding:8px 10px;font-size:11.5px;line-height:1.45;white-space:nowrap;
  box-shadow:var(--sombra-forte);z-index:4;}
.graf-tooltip.a-esquerda{transform:translateX(calc(-100% - 12px));}
.graf-tip-linha{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:0 8px;}
.graf-tip-linha + .graf-tip-linha{margin-top:3px;}
.graf-tip-linha i{width:8px;height:8px;border-radius:50%;flex:0 0 auto;}
.graf-tip-rot{color:var(--text-muted);}
.graf-tip-val{font-weight:650;font-variant-numeric:tabular-nums;}
.graf-tip-val.vazio{font-weight:400;color:var(--text-muted);font-style:italic;}
.graf-tip-data{font-family:var(--mono);font-size:10px;color:var(--text-muted);}

.graf-topo{display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;margin-bottom:6px;}
.graf-legenda{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;align-items:center;}
.graf-leg-item{display:flex;align-items:center;gap:6px;color:var(--text-muted);}
.graf-leg-ponto{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
.graf-leg-ponto.ant{background:var(--text-muted);opacity:.55;}

/* Botão de alternar a sobreposição de ADS — chip clicável em vez de item de
   legenda inerte, pra deixar claro que é um controle, não só uma cor a mais. */
.graf-leg-toggle{display:flex;align-items:center;gap:6px;font-size:12px;font-family:var(--sans);
  color:var(--text-muted);background:var(--surface-2);border:1px solid var(--border);
  border-radius:20px;padding:3px 10px;cursor:pointer;}
.graf-leg-toggle:hover{border-color:var(--text-muted);}
.graf-leg-toggle.ativo{color:var(--text);border-color:var(--amber);}
.graf-leg-traco{width:14px;height:0;border-top:2px dashed var(--amber);flex:0 0 auto;}

@media (max-width:560px){
  .modal{padding:0;align-items:flex-end;}
  .modal-caixa{max-width:none;max-height:100vh;height:100%;border-radius:0;border:none;}
}

/* ---------- calculadora de CMV (23/08/2026) ----------
   Modal auxiliar pro campo CMV de Despesas Variáveis — PV + custos, mostra o
   % calculado ao vivo. Não salva o detalhamento em lugar nenhum (só o CMV
   final vai pro grupo), então reabre em branco sempre — decisão deliberada,
   ver conversa com o usuário: é uma calculadora "de passagem", não um dado
   do produto que o app precise lembrar. */
/* `align-items:stretch` (padrão do flex, mas explícito aqui) faz o botão
   esticar pra mesma altura do campo ao lado — pedido do usuário, comparando
   com o botão "Excluir agora" de Meu Perfil. `display:flex` no próprio botão
   centraliza o texto nessa altura maior (um <button> normal não centraliza
   verticalmente sozinho). */
.cmv-calc-linha{display:flex;align-items:stretch;gap:8px;}
.cmv-calc-linha input{flex:1 1 auto;}
.cmv-calc-linha .btn{display:flex;align-items:center;justify-content:center;white-space:nowrap;}
.cmv-calc-linha .ic{width:18px;height:18px;flex:0 0 auto;}
.cmv-calc-aviso{color:var(--amber-texto);}

/* Só 5 campos estreitos — os 860px herdados do gráfico expandido (pensados
   pra caber um SVG largo) sobravam quase vazios no desktop. Fora da media
   query de celular (abaixo dela, no cascata) pra não brigar com o
   `max-width:none` que faz o modal virar folha cheia lá — só estreita
   quando a tela já é grande o bastante pra não precisar da folha cheia. */
@media (min-width:561px){
  #cmvCalcModal .modal-caixa{max-width:420px;}
}

.periodo-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px;}
.periodo-btn{background:var(--surface);border:1px solid var(--border);color:var(--text);
  width:38px;height:34px;border-radius:9px;cursor:pointer;font-size:12px;flex:0 0 auto;}
.periodo-btn:disabled{opacity:.3;cursor:not-allowed;}
.periodo-label{flex:1;text-align:center;font-size:13px;color:var(--text-muted);
  font-weight:600;text-transform:capitalize;}

.carregando{text-align:center;color:var(--text-muted);font-size:13px;padding:44px 0;}

/* ---------- sparklines ---------- */
.spark-labels{display:flex;justify-content:space-between;font-size:10px;
  color:var(--text-muted);margin-top:3px;font-family:var(--mono);}
.spark-vazio{font-size:11.5px;color:var(--text-muted);padding:10px 0 4px;}

/* Guia de arraste do sparkline compacto (17/09/2026, `ativarSparklineInterativo`,
   charts.js) — mesma ideia do `.graf-guia` do gráfico ampliado (linha
   pontilhada + ponto sobre a curva), só em escala menor. `pan-y` deixa a
   página rolar verticalmente enquanto o dedo ainda não confirmou arraste
   horizontal (ver limiar em JS), sem brigar com o toque. */
.spark-svg-interativo{touch-action:pan-y;}
.spark-guia-linha{stroke:var(--text-muted);stroke-width:1;stroke-dasharray:2 2;opacity:.7;}
/* Ponto redondo de verdade (17/09/2026, achado do usuário — saía oval): é um
   subcaminho de comprimento zero com ponta arredondada, não um <circle>
   (mesmo motivo do marcador de dia isolado, sparklineSVG/charts.js) — a
   "espessura" do traço É o diâmetro do ponto, não um stroke-width fino. */
.spark-guia-pt{stroke-width:7;}
.spark-guia-pt[hidden]{display:none;}

.metric-block{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:13px 14px;margin-bottom:9px;}

/* Nome da variável (15/08/2026): pequeno e sem peso extra — não pode competir
   visualmente com o valor abaixo dele. `min-height` reserva o espaço de DUAS
   linhas mesmo quando o nome cabe numa só ("CPP"): sem essa reserva, cards
   com nome curto e nome longo ("Pedidos vindos de ADS") tinham o valor, o
   selo e o sparkline começando em alturas diferentes na mesma fileira da
   grade. O line-clamp (em .metric-nome-texto, não aqui) é rede de segurança
   pra um nome ainda maior no futuro — não trunca os nomes de hoje. */
.metric-nome{display:flex;align-items:flex-start;gap:4px;min-height:30px;margin-bottom:2px;}
.metric-nome-texto{font-size:11.5px;font-weight:400;color:var(--text-muted);line-height:1.3;
  flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
/* Data do dia arrastado (17/09/2026, ativarBlocosMetricaInterativos,
   charts.js) — some no canto oposto ao rótulo (`.metric-nome-texto` já
   ocupa todo o espaço sobrando via flex:1, então este irmão cai sozinho na
   borda direita), nasce escondida e só aparece durante o arraste. */
.metric-nome-data{font-size:10px;color:var(--text-muted);font-family:var(--mono);
  flex:0 0 auto;white-space:nowrap;}
.metric-value{font-family:var(--mono);font-size:16px;font-weight:700;display:block;}

/* Selo "seta + X%" de variação vs. período anterior (15/08/2026). Sem regra
   de posição própria: cada contexto que o usa decide onde a linha cai —
   ver .metric-variacao-slot, .lucro-variacao e .metric-row .variacao abaixo. */
.variacao{font-weight:700;white-space:nowrap;font-size:11px;}
.variacao.pos{color:var(--teal);}
.variacao.neg{color:var(--red);}
.variacao.neutra{color:var(--text-muted);}
/* Ícone do selo (01/09/2026) — tamanho em `em` pra acompanhar o font-size de
   cada contexto que usa `.variacao` (11px no padrão, 13px no card de Lucro
   etc.), sem precisar de uma regra por tela. */
.variacao-seta{width:1.25em;height:1.25em;vertical-align:-0.2em;margin-right:2px;}

/* Reserva uma linha pro selo mesmo quando `seloVariacao` devolve vazio (sem
   período anterior pra comparar) — pelo mesmo motivo do .metric-nome acima:
   um card sem selo não pode ficar mais baixo que os vizinhos e deslocar o
   sparkline pra cima em relação aos outros da mesma fileira. */
.metric-variacao-slot{min-height:15px;margin:2px 0 8px;}

/* ---------- card de lucro em destaque ---------- */
.lucro-card.destaque{padding:18px 16px 14px;}
.lucro-topo{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.lucro-cobertura{font-size:10.5px;color:var(--text-muted);font-family:var(--mono);}
.lucro-card.destaque .lucro-valor{font-size:30px;margin:6px 0 2px;}
/* Selo de variação do card de Lucro real: linha própria abaixo do valor. */
.lucro-variacao{margin-bottom:12px;}
.lucro-variacao .variacao{font-size:13px;}
.nota-secao{font-size:11.5px;color:var(--text-muted);margin:-4px 0 10px;line-height:1.45;}

.metric-row.plus .k::before{content:'+ ';color:var(--teal);}
.metric-row.minus .k::before{content:'− ';color:var(--amber-texto);}
.metric-row.eq{border-top:1px solid var(--border);border-bottom:none;
  margin-top:2px;padding-top:10px;}
.metric-row.eq .k::before{content:'= ';color:var(--text-muted);}
/* Balanço (16/08/2026): valor e selo empilhados numa coluna à direita, o
   selo numa linha própria abaixo — mesmo padrão dos 9 cards de
   "Comportamento das variáveis" (.metric-value-col em charts.js). Escopado
   a .metric-row-valor-col, não a .metric-row .v em geral: outras telas
   (Despesas, Lançamento, Análise, Config, ADS, Onboarding) reaproveitam
   .metric-row sem essa coluna, e não podem herdar este layout. */
.metric-row-valor-col{display:flex;flex-direction:column;align-items:flex-end;gap:1px;}
.metric-row-valor-col .variacao{margin-left:0;}
/* Sem negrito no valor do Balanço (21/09/2026, pedido do usuário — "ficou
   pesado") — só aqui, não em `.metric-row .v` geral (herdado por Despesas,
   Lançamento, Análise, Config, ADS, Onboarding, que continuam em negrito). */
.metric-row-valor-col .v{font-weight:400;}

/* Navegação de Despesas variáveis/fixas no Balanço (16/08/2026, virou tela
   própria em 13/09/2026 — ver comparativoBrutoReal, overview.js): o gatilho
   é o próprio "−" da linha (.metric-row.minus .k::before, inalterado) —
   .k vira <button> só nessas duas linhas, com reset pra não parecer botão,
   e o "−"/texto ficam clicáveis porque estão dentro dele. Sem wrapper novo à
   direita: .metric-row continua com exatamente 2 filhos, igual às linhas
   sem navegação — é o que mantém a coluna de valor alinhada com elas.
   (Versão anterior usava um botão à parte à direita, que empurrava essa
   coluna e desalinhava; corrigido a pedido do usuário em 16/08/2026.)
   inline-flex + gap: alinha o texto com o `.perfil-item-seta-nav` (›) que
   vem logo depois, sem precisar de wrapper extra. */
.k-expansivel{display:inline-flex;align-items:center;gap:4px;background:none;
  border:none;font:inherit;color:inherit;padding:0;margin:0;text-align:left;cursor:pointer;}
.k-expansivel:hover{color:var(--text);}

/* ---------- grade da Visão geral ----------
   No celular tudo empilha na ordem do HTML: lucro, métricas, comparativo.
   No PC a mesma marcação vira duas colunas, sem mudar a ordem de leitura
   do celular — a colocação explícita no grid é o que permite isso.        */
.ov-secundario > .section-title:first-child,
.ov-comparativo > .section-title:first-child{margin-top:20px;}
.ov-metricas > .metric-block{margin-bottom:9px;}

@media (min-width:700px){
  .ov-metricas{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
  .ov-metricas > .metric-block{margin-bottom:0;}
}

/* A Visão geral empilha em coluna única em qualquer largura: Lucro real →
   comportamento das variáveis → bruto vs. real. Antes o comparativo ficava numa
   segunda coluna à direita, o que funcionava com 3 gráficos e deixou de
   funcionar com 8 — a leitura que a tela existe para permitir é comparar a
   curva do lucro com a de cada variável, e isso exige as duas no mesmo eixo
   vertical, não lado a lado. No lugar da segunda coluna, os gráficos se
   espalham em quantas colunas couberem. */
@media (min-width:1180px){
  .ov-secundario > .section-title:first-child{margin-top:20px;}
  .ov-metricas{grid-template-columns:repeat(auto-fit,minmax(178px,1fr));}
  .lucro-card.destaque .lucro-valor{font-size:32px;}
}

/* =========================================================
   DESPESAS — alteração e histórico

   O ponto que a tela precisa passar de olhada: salvar não corrige o passado,
   cria uma versão nova valendo de hoje. O texto no topo da tela já explica
   isso uma vez só; aqui na sub-aba, a marca na linha alterada é quem avisa
   que aquele valor específico vai virar versão nova.
   ========================================================= */
.item-acoes{display:flex;align-items:center;gap:10px;}
.selo-vigencia{font-size:10px;color:var(--text-muted);font-weight:500;margin-left:8px;
  text-transform:none;letter-spacing:0;}
.item-historico{background:none;border:none;color:var(--text-muted);font-size:12px;
  cursor:pointer;padding:2px 4px;font-weight:600;text-decoration:underline;}
.item-historico:hover{color:var(--text);}

/* A linha avisa, no instante da digitação, que vai virar versão nova. */
.item-card.alterado,
.item-card.novo{border-color:var(--amber);margin-top:16px;}
.item-card.alterado::before,
.item-card.novo::before{
  position:absolute;top:-9px;left:12px;z-index:1;
  background:var(--amber);color:var(--bg);
  font-size:9.5px;font-weight:700;letter-spacing:0.05em;
  padding:2px 8px;border-radius:20px;white-space:nowrap;
}
.item-card.alterado::before{content:'alteração válida a partir de hoje';}
.item-card.novo::before{content:'novo · vale a partir de hoje';}

.historico{background:var(--surface-2);border-radius:10px;padding:12px;margin-top:12px;}
.historico-titulo{font-size:10.5px;letter-spacing:0.06em;
  color:var(--text-muted);font-weight:700;margin-bottom:10px;}
.historico-item{padding:8px 0;border-bottom:1px solid var(--border);}
.historico-item:last-of-type{border-bottom:none;}
.historico-item.vigente .historico-periodo{color:var(--text);}
.historico-periodo{font-family:var(--mono);font-size:11.5px;color:var(--text-muted);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.historico-valor{font-size:12.5px;margin-top:3px;line-height:1.5;}
.tag-vigente{font-size:9.5px;font-weight:700;letter-spacing:0.05em;
  color:var(--teal);border:1px solid var(--teal);border-radius:20px;padding:1px 7px;
  font-family:var(--sans);}
.historico-nota{font-size:11px;color:var(--text-muted);line-height:1.5;margin:10px 0 0;
  padding-top:10px;border-top:1px solid var(--border);}

.nota-secao.aviso{color:var(--amber-texto);}

/* =========================================================
   ANÚNCIOS (Raio X + Resumo — sub-abas; a Grade de cartões saiu em
   05/09/2026, pedido do usuário: o Raio X já cobre a mesma necessidade)
   ========================================================= */
/* Botão de voltar (e, no detalhe, o de editar apelido) ao lado do título, só
   neste bloco (18/08/2026, pedido do usuário; escopo trocado de #screen-ads
   pra #perfAnuncios em 18/08/2026 quando Anúncios virou sub-aba de
   Performance) — `.tela-head` é compartilhado por vários lugares, então o
   `display:flex` fica restrito a #perfAnuncios pra não empurrar o layout de
   título+subtítulo dos outros. Reaproveita `.periodo-btn` (o mesmo botão
   redondo das setas ◀/▶ de navegar período, logo abaixo) — só o ícone, sem
   texto, mesmo padrão da tela inteira. */
#perfAnuncios .tela-head{display:flex;align-items:center;gap:12px;}

/* Editar apelido (05/09/2026, migrado da Grade pro cabeçalho do detalhe de
   um anúncio) — nome real como lembrete (o apelido some ele de vista em
   todo resto da tela, então ele precisa aparecer aqui), campo, e as duas
   ações. `.anuncio-apelido-input`/`.anuncio-apelido-acoes` já existiam
   desde a Grade — reaproveitadas aqui sem alteração. */
#adsApelidoForm{margin-bottom:16px;}
.anuncio-nome-real{font-size:11px;color:var(--text-muted);margin:0 0 8px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.anuncio-apelido-input{width:100%;background:var(--surface-2);border:1px solid var(--border);
  color:var(--text);border-radius:8px;padding:9px 10px;font-size:13.5px;font-family:var(--sans);}
.anuncio-apelido-input:focus{outline:none;border-color:var(--teal);}
.anuncio-apelido-acoes{display:flex;justify-content:flex-end;gap:14px;margin-top:8px;}

/* A Grade (bolinha colorida) em si não existe mais no app — o Raio X a
   substituiu (05/09/2026). As classes abaixo NÃO têm mais
   chamador em ads.js; ficam vivas só porque `central-ajuda-conteudo.js`
   ainda usa vários mockups dela pra ilustrar o conceito antigo. Remover
   junto da próxima sincronia da Central de Ajuda (pendente, avisado ao
   usuário) — apagar antes disso quebra esses mockups. */
.anuncio-legenda{margin-bottom:16px;}
.anuncio-grid{display:grid;grid-template-columns:1fr;gap:10px;}
.anuncio-card{display:flex;align-items:stretch;
  width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;}
.anuncio-card:hover{border-color:var(--teal);}
.anuncio-card-abrir{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-width:0;background:none;border:none;color:inherit;
  padding:16px;text-align:left;font-family:var(--sans);cursor:pointer;}
.anuncio-nome-linha{display:flex;align-items:center;gap:7px;min-width:0;flex:1;}
.anuncio-nome{font-weight:600;font-size:14.5px;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.anuncio-seta{color:var(--text-muted);font-size:19px;flex:0 0 auto;line-height:1;}
.anuncio-bolinha{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
.anuncio-bolinha--campeao{background:var(--teal);}
.anuncio-bolinha--atencao{background:var(--amber);}
.anuncio-bolinha--critico{background:var(--red);}
.anuncio-legenda-verde{color:var(--teal);}
.anuncio-legenda-amarelo{color:var(--amber-texto);}
.anuncio-legenda-vermelho{color:var(--red);}
.anuncio-editar-btn{flex:0 0 auto;width:42px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;border-left:1px solid var(--border);color:var(--text-muted);
  cursor:pointer;font-size:15px;}
.anuncio-editar-btn:hover{color:var(--teal);background:var(--surface-2);}
.anuncio-card-editando{display:block;padding:14px;}

/* ---------- Raio X dos Anúncios (04/09/2026) ---------- */
/* Toggle Raio X/Grade reaproveita `.seg` (mesmo padrão de período), só sem
   `.seg-scroll` — são sempre 2 botões, cabem inteiros em qualquer largura. */
#anuncioVisaoSeg{margin-bottom:14px;}
.raiox-ads-resumo{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:14px 16px;margin-bottom:14px;}
.raiox-ads-resumo-num{font-family:var(--mono);font-size:19px;font-weight:700;color:var(--text);flex:0 0 auto;}
.raiox-ads-resumo-texto{font-size:12.5px;color:var(--text-muted);}

.raiox-ads-lista{display:flex;flex-direction:column;gap:10px;}

/* Dois cards no topo — ROI do ADS (velocímetro) e Dependência de ADS
   (25/09/2026, pedido do usuário: "como eu sei se está valendo investir
   em ADS... com um único indicador?"). Reaproveita `.lucro-card` (mesmo
   card da Visão geral) pros dois — mesma linguagem visual, sem componente
   novo. ROI centralizado por causa do velocímetro; Dependência segue o
   alinhamento padrão à esquerda de `.lucro-card`. */
.raiox-ads-topo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px;}
.raiox-ads-roi-card{text-align:center;}
/* `.lucro-label` é inline por padrão (span) — sem isto, ficava ao lado do
   velocímetro (também inline) em vez de em cima dele (achado do usuário,
   25/09/2026: "o título... colocar em cima do card"). No card de Lucro
   original isso nunca aparecia porque o próximo irmão já é bloco
   (`.lucro-valor`); aqui o SVG do velocímetro vem logo depois. */
.raiox-ads-roi-card .lucro-label{display:block;}
.raiox-ads-roi-card .velocimetro-svg{margin:4px 0;}
/* Cor da frase substitui o texto "Saudável/Atenção/Crítico" que existiu
   num rascunho — pedido do usuário: "o velocímetro já indica", a cor já
   basta como reforço sem repetir a palavra. */
.raiox-ads-roi-selo{font-size:11.5px;font-weight:600;margin:2px 0 0;}
.raiox-ads-roi-selo--teal{color:var(--teal);}
.raiox-ads-roi-selo--amber{color:var(--amber);}
.raiox-ads-roi-selo--red{color:var(--red);}
.raiox-ads-roi-selo--purple{color:var(--purple);}
.raiox-ads-roi-selo--muted{color:var(--text-muted);}
.raiox-ads-dependencia-variacao{margin:2px 0 0;}
.raiox-ads-dependencia-sub{font-size:11.5px;color:var(--text-muted);font-weight:600;margin:2px 0 0;}

/* Cartão de anúncio (redesign 25/09/2026 — era nome+ícone de veredito no
   cabeçalho e 3 mini-cards de CTR/CPP/Conversões com sparkline embaixo;
   virou velocímetro + nome + CPP numa linha só, depois de 3 rodadas de
   mockup aprovadas pelo usuário: "top 10!!!!" → "acho que congestionou" →
   "e só o CPP?"). Sem borda colorida por veredito — o velocímetro já é o
   único sinal de cor do cartão, mesmo motivo de `.lucro-card` nunca ter
   colorido borda/número (ver comentário lá: não duplicar o mesmo sinal). */
.raiox-ads-card{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  font-family:var(--sans);cursor:pointer;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:10px 14px;}
.raiox-ads-card:hover{border-color:var(--teal);}
.raiox-ads-card .velocimetro-svg{flex:0 0 auto;}
.raiox-ads-textos{flex:1;min-width:0;}
.raiox-ads-nome{display:block;font-size:13.5px;font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.raiox-ads-cpp{display:block;font-size:12px;color:var(--text-muted);font-family:var(--mono);margin-top:2px;}
.raiox-ads-cpp b{color:var(--text);font-weight:600;}

/* ---------- Precificação (25/09/2026) ----------
   Card de preço reaproveita `.lucro-card`/`.btn-editar-linha` (mesmo
   padrão de edição inline do nome da empresa, Meu Perfil). Card de efeito
   é novo — velocímetro grande centralizado (Margem de contribuição) +
   3 mini-velocímetros de apoio, mesma lógica visual do ROI do ADS. */
.preco-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;margin-bottom:14px;}
.preco-card .lucro-label{display:block;}
.preco-desde{font-size:11.5px;color:var(--text-muted);margin:2px 0 0;font-weight:600;}
.preco-vazio{font-size:13px;color:var(--text-muted);margin:4px 0 0;}
.preco-input{width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  border-radius:10px;padding:11px 12px;font-size:20px;font-family:var(--mono);margin-top:2px;}

.efeito-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;}
.efeito-titulo{font-size:15px;font-weight:700;color:var(--text);margin:0 0 2px;text-align:center;}
.efeito-sub{font-size:12.5px;color:var(--text-muted);margin:0 0 4px;text-align:center;}
.efeito-sub b{color:var(--text);font-family:var(--mono);}
.efeito-principal{text-align:center;padding:8px 0 16px;}
.efeito-principal-label{font-size:12.5px;font-weight:700;color:var(--text-muted);letter-spacing:.02em;}
.efeito-principal-valor{font-family:var(--mono);font-size:24px;font-weight:600;margin:2px 0;}
.efeito-principal-rs{font-size:12px;color:var(--text-muted);}
.efeito-mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.efeito-mini{text-align:center;background:var(--surface-2);border-radius:10px;padding:10px 6px;}
.efeito-mini-nome{font-size:10.5px;font-weight:600;color:var(--text-muted);margin-bottom:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.efeito-mini-valor{font-size:12px;font-family:var(--mono);color:var(--text);margin-top:2px;}
.efeito-mini-valor b{font-weight:700;}

/* Usada pela Análise por IA (analise.js) — não é exclusiva de Anúncios. */
.disclaimer-ia{font-size:11.5px;color:var(--text-muted);text-align:center;margin:22px 0 0;
  padding-top:14px;border-top:1px solid var(--border);}

/* Tabela simples de 2 colunas (Dados da Empresa, Meu Perfil) — sem linha
   entre as linhas de propósito (pedido do usuário, 20/08/2026: "mais
   clean"), só o espaçamento vertical separa uma da outra. */
.tabela-simples{width:100%;border-collapse:collapse;}
.tabela-simples td{padding:6px 0;font-size:13px;vertical-align:top;}
.tabela-simples .tk{color:var(--text-muted);width:42%;padding-right:12px;}
.tabela-simples .tv{color:var(--text);font-weight:600;}

/* Lápis de edição inline (Nome da Empresa, Meu Perfil, 22/09/2026) — mesmo
   glifo "✎" do apelido de anúncio (ads.js), só que solto ao lado do texto
   em vez de botão com borda, pra não pesar dentro da tabela. */
.btn-editar-linha{background:none;border:none;color:var(--text-muted);cursor:pointer;
  padding:2px 4px;margin-left:4px;font-size:13px;line-height:1;vertical-align:middle;}
.btn-editar-linha:hover{color:var(--text);}
.editar-linha-tabela input{width:100%;background:var(--surface-2);border:1px solid var(--border);
  color:var(--text);border-radius:8px;padding:8px 10px;font-size:13px;font-weight:600;
  font-family:var(--sans);margin-bottom:6px;}

/* Lista de Meu Perfil (09/09/2026, pedido do usuário — antes eram três
   cartões sempre visíveis, um embaixo do outro; virou uma lista que expande,
   tipo FAQ/menu de configurações de celular, cabeçalho sempre visível,
   conteúdo só quando aberto). Um container só (.perfil-lista) com borda e
   fundo, cada item separado por um traço fino — mesma ideia visual de
   .metric-row, mas em nível de item da lista, não de linha de dado. */
/* 3 grupos separados por espaço (redesign estilo Apple, seção 8), cada um
   sua própria instância de `.perfil-lista`. */
.perfil-lista{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;}
.perfil-lista + .perfil-lista{margin-top:20px;}
.perfil-item + .perfil-item{border-top:1px solid var(--border);}
.perfil-item-cabecalho{display:flex;align-items:center;gap:12px;width:100%;
  padding:14px 16px;background:none;border:none;cursor:pointer;color:var(--text);
  font-size:13.5px;text-align:left;}
.perfil-item-cabecalho:hover{background:var(--surface-2);}
.perfil-item-icone{width:32px;height:32px;border-radius:9px;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--teal);}
.perfil-item-icone svg{width:16px;height:16px;}
.perfil-item-nome{flex:1;font-weight:600;}
.perfil-item-seta{width:16px;height:16px;color:var(--text-muted);flex:0 0 auto;
  transition:transform .15s ease;}
.perfil-item-cabecalho[aria-expanded="true"] .perfil-item-seta{transform:rotate(180deg);}
.perfil-item-corpo{padding:0 16px 16px;}
/* Seção de Excluir minha conta dentro do corpo de Dados da Empresa
   (17/09/2026, pedido do usuário — ação mais drástica e não frequente,
   fica um nível mais escondida em vez de linha isolada própria). Só um
   traço fino separando da tabela de dados acima, texto normal — nada de
   vermelho, mesma leitura visual do resto do corpo. */
.perfil-secao-destrutiva{margin-top:16px;padding-top:16px;border-top:1px solid var(--border);}
.perfil-secao-titulo{font-weight:600;margin-bottom:10px;}
/* Linha que só navega (itemPerfilNav em config-screen.js; #despesasLista
   em app.html) — chevron `›` de texto puro, mesmo risco zero de ícone que
   .anuncio-seta já usa, em vez de outro SVG novo pra desenhar. */
.perfil-item-seta-nav{font-size:18px;color:var(--text-muted);flex:0 0 auto;line-height:1;}
/* #despesasLista/#despCategoriasLista/#performanceLista (redesign estilo
   Apple, 12/09 e 14/09/2026) não têm mais `.perfil-item` por linha — cada
   botão é filho direto da lista, sem corpo pra envolver. O divisor entre
   linhas (que `.perfil-item + .perfil-item` dava antes) precisa de uma
   regra própria aqui. */
.perfil-item-cabecalho[data-sub-despesas] + .perfil-item-cabecalho[data-sub-despesas],
.perfil-item-cabecalho[data-grupo-categoria] + .perfil-item-cabecalho[data-grupo-categoria],
.perfil-item-cabecalho[data-sub-perf] + .perfil-item-cabecalho[data-sub-perf]{
  border-top:1px solid var(--border);}
/* Resumo (participação/CMV) de um grupo de Despesas Variáveis, na lista —
   mesmo espírito de .tela-sub, cor discreta antes do `›`. */
.perfil-item-resumo{font-size:12.5px;color:var(--text-muted);flex:0 0 auto;margin-right:2px;}

/* Faixa fixa de exclusão agendada: acompanha o app inteiro, não só a tela de
   Configurações — durante a carência a conta funciona normalmente. */
.aviso-exclusao{position:sticky;top:0;z-index:25;background:var(--surface-elevado);
  border-bottom:1px solid var(--amber);color:var(--text);
  font-size:12.5px;line-height:1.5;padding:9px 14px;text-align:center;}
.aviso-exclusao .btn.link.tiny{display:inline;margin-left:6px;color:var(--amber-texto);}

/* Frase-veredito do Diagnóstico (Análise) — "Pedidos caíram 5% no
   período.", logo acima das tabelas Contribuíram/Não contribuíram. */
.bloco-ia-veredito{font-size:14px;line-height:1.55;color:var(--text);margin:0 0 10px;}

/* ---------- Raio X (Análise) — o funil como ícones. Chamado "Funil
   Simplificado" até 03/09/2026, quando a versão em caixas de texto
   (.fluxo2-*, removida) saiu de vez e esta virou a única. ---------- */
/* Nota "Últimos 7 dias..." + botão "play" lado a lado (03/09/2026, pedido
   do usuário — gerar o Diagnóstico direto do Raio X, sem trocar de
   sub-aba; 04/09/2026, reaproveitado também no Diagnóstico, no lugar do
   antigo botão de texto largo). margin-bottom: o botão redondo (36px) é
   mais alto que a linha de texto ao lado dele; sem espaço reservado aqui,
   o conteúdo de baixo (o funil no Raio X, o primeiro `.card` no
   Diagnóstico) cola direto na borda inferior do botão. */
.fs-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.fs-topo .nota-secao{margin:0;}

.fs-fluxo{display:flex;flex-direction:column;align-items:center;gap:2px;}
/* Títulos "Tráfego"/"Financeiro" (01/09/2026) à esquerda, não centralizados
   como o resto da coluna — pedido do usuário. */
.fs-fluxo .section-title{align-self:flex-start;}
.fs-linha{display:flex;justify-content:center;gap:26px;}
.fs-linha-dupla,.fs-linha-tripla{gap:30px;}
/* Espaço reservado em cima da linha Orgânico/ADS pra caber a caixa de
   Investimento em ADS empilhada acima do ADS (`.fs-invest-ads-acima`
   abaixo, position:absolute;bottom:100%). 150px (03/09/2026, reajustado
   junto do aumento geral dos elementos do funil — a caixa de 3 linhas
   com CPP+CTR cresceu de ~125px pra ~146px de altura) cobre a altura
   máxima da caixa (3 linhas) com a MESMA folga de ~12px que "Financeiro"
   tem até "Vendas" logo abaixo do título — sem CPP/CTR (caixa de 1 linha
   só) sobra mais espaço em branco aqui, mas nunca cola no título. */
.fs-linha-dupla{margin-top:150px;}
/* Vendas por origem (06/09/2026, mesmo padrão do split Orgânico/Pago de
   Visitantes, agora em Financeiro) reaproveita o `gap` de 30px de
   `.fs-linha-dupla`, mas NÃO o `margin-top:150px` acima — esse espaço
   existe só pra caber a caixa de Invest. ADS flutuando ACIMA da linha de
   Tráfego (`.fs-invest-ads-acima`); aqui não tem nada flutuando, então o
   espaçamento normal entre linhas já basta. */
.fs-linha-dupla.fs-linha-dupla-vendas{margin-top:0;}
/* Caixa de Investimento em ADS repetida acima do nó ADS (mesmo dado do
   nó "ADS" do Financeiro, `t.investimentoAds` — não é um valor novo).
   `position:absolute;bottom:100%` ancora pelo centro horizontal do
   PRÓPRIO nó ADS (`.fs-no`, que já é position:relative) — igual à ideia
   de `.fs-gancho` (`left:100%`), só que pra cima. Alinha sozinho não
   importa a largura da caixa de baixo. */
.fs-invest-ads-acima{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:4px;}
.fs-invest-ads-seta{color:var(--text-muted);display:block;line-height:0;}
.fs-invest-ads-seta svg{width:19px;height:19px;}
/* Taxa de Conversão do Chat flutuando à ESQUERDA do card Carrinho (10/09/2026)
   — mesma ideia de `.fs-invest-ads-acima` (float sem seta de fluxo, só
   contexto ao lado pro usuário comparar visualmente com as taxas de
   conversão do funil), só que ancorado por `right:100%` (borda esquerda do
   próprio `.fs-no`, que já é position:relative) em vez de `bottom:100%`. */
.fs-chat-ao-lado{position:absolute;right:100%;top:0;margin-right:16px;
  display:flex;flex-direction:column;align-items:center;gap:5px;}
/* Linha extra dentro de uma `.fs-caixa-empilhada` — reutilizado pela
   caixa de Invest. ADS (CPP/CTR, 02/09/2026 — testado primeiro só no
   desktop com um gancho lateral, depois só no celular com linhas
   empilhadas; o usuário então confirmou que a versão empilhada é a
   definitiva pros dois tamanhos) e pela caixa de Vendas (Ticket Médio,
   02/09/2026, mesmo padrão). */
.fs-linha-extra{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.fs-rotulo-extra{font-size:13px;color:var(--text-muted);}
.fs-seta{color:var(--text-muted);display:flex;justify-content:center;padding:2px 0;position:relative;}
.fs-seta svg{width:21px;height:21px;}
/* Seta de junção (02/09/2026, pedido do usuário — "ficou bom, mas poderia
   ficar um pouco maior pra igualar com as demais no tamanho") um pouco
   maior que as outras: o ícone "merge" da Lucide tem dois ramos abertos em
   vez de um traço só, e lia visualmente menor que a seta simples mesmo na
   mesma caixa de 18px. */
.fs-seta svg.fs-seta-juncao{width:26px;height:26px;}
.fs-no{display:flex;flex-direction:column;align-items:center;gap:5px;position:relative;}
/* Retângulo (02/09/2026, rascunho do usuário — testando simplificação
   visual) substitui o círculo só-ícone de antes: ícone e seta+% ficam lado
   a lado dentro da mesma caixa, em vez de dois elementos empilhados
   separados. `width:auto` (era 82px fixo) porque a caixa agora precisa
   caber os dois lado a lado, com larguras diferentes por nó (ex.: "-3%"
   é mais estreito que "+34%"). Ícone deliberadamente sem cor (era colorido
   por direção antes) — a seta+% já carrega essa informação, colorir os
   dois seria redundante pro objetivo de simplificar. */
/* Borda + sombra (03/09/2026, pedido do usuário — "no tema escuro está
   difícil de visualizar os cards"): `--surface-elevado` é bem próximo de
   `--bg` no escuro (a caixa "direto sobre a página" do resto do app, mesmo
   token que .cal-lanc/.aviso-exclusao já usam — não é bug só desta tela), e
   `--border` (#2A3040 no escuro) quase não se distingue de `--surface-2`
   (#1E2430) — contraste medido ~1.4:1, bem abaixo de qualquer limiar
   legível. `--text-muted` (já usada na cor do ícone dentro da caixa, então
   não introduz tom novo) dá ~4.6:1 contra o fundo da caixa — borda de
   verdade, não só decorativa. `--sombra-forte` reforça o contorno por
   baixo. */
.fs-caixa{display:flex;align-items:center;gap:7px;height:44px;padding:0 12px;
  border-radius:12px;background:var(--surface-elevado);border:1px solid var(--text-muted);
  box-shadow:var(--sombra-forte);color:var(--text-muted);}
/* Caixa com mais de uma linha empilhada dentro dela (Invest. ADS com
   investimento+CPP+CTR, Vendas com vendas+Ticket Médio) — precisa de
   altura livre em vez do 44px fixo de `.fs-caixa` (depois dela no
   arquivo de propósito, pra vencer o empate de especificidade). */
.fs-caixa-empilhada{flex-direction:column;align-items:stretch;height:auto;padding:9px 12px;gap:5px;}
.fs-icone{display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.fs-icone svg{width:24px;height:24px;}
.fs-nome{font-size:12px;color:var(--text-muted);text-align:center;line-height:1.25;}
.fs-variacao{font-size:13px;font-family:var(--mono);white-space:nowrap;}
/* Taxa de conversão — ícone de gancho preso na borda direita da PRÓPRIA
   caixa (02/09/2026, pedido do usuário — antes era um deslocamento fixo em
   px, calculado a partir de `.fs-seta`, a seta de conexão entre linhas;
   funcionava enquanto a etapa era um círculo de largura fixa, mas parou de
   alcançar a borda direita de verdade quando a caixa virou retangular e de
   largura variável — o texto da % muda de tamanho por etapa). `.fs-no` já
   tem `position:relative`; `left:100%` encosta na borda de verdade sempre,
   não importa a largura da caixa. Só as duas etapas do Tráfego com taxa
   (Visitantes, Carrinho) ganham este filho — `noHtml` (analise.js) só o
   inclui quando chamado com o 2º argumento. `top:0` alinha o topo do
   gancho com o centro vertical de `.fs-caixa` (altura 44px, primeiro filho
   de `.fs-no` — `top:22px` é metade disso; pedido do usuário, 02/09/2026,
   começava muito colado no topo). Caixa QUADRADA (era 18x30) desde a troca
   pro ícone "corner-right-down" da Lucide, nativamente 24x24 — uma caixa
   não quadrada esticaria/distorceria o traço, o problema que o rascunho
   original (não quadrado de propósito) já tinha evitado uma vez. Tamanho
   26px (03/09/2026, aumento geral dos elementos do funil) mantém a
   proporção com a caixa maior. */
.fs-gancho{position:absolute;top:22px;left:100%;width:26px;height:26px;color:var(--text-muted);}
.fs-gancho-icone{width:100%;height:100%;display:block;}
.fs-gancho-taxa{position:absolute;top:0;left:100%;margin-left:5px;white-space:nowrap;}
/* A seta de tendência (`.variacao-seta`, global) escala em `em` do
   font-size de cada contexto — aqui isso deixava a do selo de cada etapa
   (11px) visivelmente menor que a do selo de taxa (herdava ~15,5px, sem
   font-size próprio). Achado do usuário, 01/09/2026: o tamanho da taxa
   ficou melhor — as duas passam a usar o mesmo tamanho fixo, só nesta
   tela, sem mexer no resto do app. */
.fs-no .variacao-seta, .fs-gancho-taxa .variacao-seta{width:21px;height:21px;}

/* Linha tripla (Despesas Fixas/Variáveis/ADS) não cabe no aumento geral
   dos elementos do funil (03/09/2026) em telas estreitas — 3 caixas coladas
   já eram o ponto mais apertado do layout antes desse aumento. Só ela volta
   pro tamanho anterior nesta faixa; as outras linhas (1 ou 2 caixas) têm
   folga de sobra e mantêm o tamanho novo. */
@media (max-width:400px){
  .fs-linha-tripla{gap:10px;}
  /* padding-left/right em vez do shorthand `padding` (06/09/2026, achado do
     usuário: o card ADS ficou apertado no celular) — o card de ADS aqui
     virou `.fs-caixa-empilhada` (ganhou a linha de CPP) e o shorthand
     `padding:0 8px` zerava também o padding VERTICAL de 9px que a caixa
     empilhada precisa pra não espremer as duas linhas — Despesas
     Fixas/Variáveis continuam de 1 linha só, então nunca dependeram desse
     padding vertical (já eram 0 antes). */
  .fs-linha-tripla .fs-caixa{gap:5px;padding-left:8px;padding-right:8px;}
  .fs-linha-tripla .fs-icone svg{width:18px;height:18px;}
  .fs-linha-tripla .fs-nome{font-size:10px;}
  .fs-linha-tripla .fs-variacao{font-size:11px;}
}

/* ---------- Análise: engrenagem (diagnóstico mecânico) (21/09/2026) —
   substitui as antigas sub-abas Raio X/Detalhes: cada painel (Tráfego/
   Financeiro, alternado pelo `.seg` já usado no resto do app — ver
   #screen-analise, app.html) mostra o próprio funil (visual) em cima e o
   diagnóstico mecânico (tabelas Contribuíram/Não contribuíram) embaixo.
   Ver `renderAnalise2` em analise.js. ---------- */
/* Título neutro (22/09/2026, achado do usuário) — "Contribuíram" não é
   sempre notícia ruim: quando o resultado final sobe, é quem ajudou. O
   julgamento bom/ruim mora só no selo de cada linha e na coluna Avaliar
   (`desempenhoNegativo`, analise.js), nunca no título do grupo. */
.eng-titulo-grupo{font-size:13px;font-weight:700;color:var(--text-muted);margin:20px 0 8px;}
.eng-tabela{width:100%;border-collapse:collapse;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  font-size:13px;}
.eng-tabela th{text-align:left;font-size:10.5px;font-weight:700;color:var(--text-muted);
  letter-spacing:.04em;text-transform:uppercase;padding:8px 14px;
  border-bottom:1px solid var(--border);}
.eng-tabela td{padding:9px 14px;border-bottom:1px solid var(--border);vertical-align:top;}
.eng-tabela tr:last-child td{border-bottom:none;}
.eng-tabela .col-var{font-weight:600;color:var(--text);}
.eng-tabela .col-valor{white-space:nowrap;text-align:right;}
.eng-tabela .col-valor .variacao{font-size:13px;font-family:var(--mono);}
.eng-tabela .col-dica{color:var(--text-muted);font-size:12.5px;line-height:1.4;font-style:italic;}

/* ---------- estado vazio ---------- */
.vazio{text-align:center;border:1px dashed var(--border);border-radius:var(--radius);
  padding:38px 22px;}
.vazio-icone{font-size:30px;margin-bottom:10px;}
.vazio h2{font-size:16px;margin:0 0 8px;font-weight:650;}
.vazio p{font-size:13px;color:var(--text-muted);margin:0 auto 18px;max-width:340px;line-height:1.5;}
.vazio .btn{max-width:260px;margin:0 auto;}

/* ---------- Central de Ajuda (24/08/2026) ---------- */
/* Campo de busca com ícone dentro (não `.field`, que pressupõe um <label>
   acima) — mesmas cores/raio/padding de `.field input`, só com respiro à
   esquerda pra caber a lupa. */
.busca-ajuda{position:relative;margin-bottom:12px;}
.busca-ajuda .ic-busca{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--text-muted);pointer-events:none;}
.busca-ajuda input{width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  border-radius:10px;padding:11px 12px 11px 38px;font-size:15px;font-family:var(--sans);}
.busca-ajuda input:focus{outline:none;border-color:var(--teal);}

/* Cartão de treinamento é um <button> de largura cheia estilizado como `.card`
   (mesmo truque de `.anuncio-card-abrir`: reset dos padrões de botão +
   `color:inherit`), não um <div> com onclick — foco de teclado de graça. */
.artigo-card{display:block;width:100%;text-align:left;font-family:var(--sans);cursor:pointer;color:inherit;}
.artigo-card:hover{border-color:var(--teal);}
.artigo-card-cabecalho{display:flex;align-items:center;gap:7px;margin-bottom:4px;}
.artigo-card-titulo{font-weight:600;font-size:14.5px;color:var(--text);}
.artigo-card-resumo{font-size:12.5px;color:var(--text-muted);margin:0;line-height:1.4;}

.treinamento-eyebrow{font-size:11px;font-weight:600;letter-spacing:0.08em;
  color:var(--teal);margin:0 0 6px;}
.artigo-leitura-titulo{font-size:17px;margin:0 0 14px;font-weight:700;}
.artigo-atualizado{font-size:10px;color:var(--text-muted);margin:22px 0 0;padding-top:14px;
  border-top:1px solid var(--border);}
.artigo-leitura p{font-size:14px;line-height:1.55;margin:0 0 14px;}
.artigo-leitura p:last-child{margin-bottom:0;}
.artigo-imagem{margin:0 0 14px;}
.artigo-imagem img{width:100%;border-radius:10px;border:1px solid var(--border);display:block;}
.artigo-imagem figcaption{font-size:11.5px;color:var(--text-muted);margin-top:6px;text-align:center;}

/* Treinamento (27/08/2026): capítulos dentro da mesma .artigo-leitura — cada
   um separado por um fio, com o número do capítulo e, quando existe, uma
   "tela" reaproveitando as classes reais do resto do app (ver
   blocoCapituloTreinamento, central-ajuda.js) — por isso .treinamento-mock
   só dá a caixa/fundo elevado, o miolo já vem estilizado sozinho. */
.treinamento-capitulo{padding-top:26px;margin-top:26px;border-top:1px solid var(--border);}
.treinamento-capitulo:first-child{padding-top:0;margin-top:0;border-top:none;}
.treinamento-cap-titulo{display:flex;align-items:baseline;gap:10px;font-size:16px;font-weight:700;
  margin:0 0 12px;}
.treinamento-cap-num{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--teal);flex:0 0 auto;}
.treinamento-cap-titulo-texto{flex:1 1 auto;}
.btn-ouvir{background:none;border:1px solid var(--border);border-radius:8px;width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;color:var(--text-muted);cursor:pointer;
  flex:0 0 auto;align-self:center;padding:0;}
.btn-ouvir:hover{border-color:var(--teal);color:var(--teal);}
.btn-ouvir.ativo{background:var(--teal-suave);border-color:var(--teal);color:var(--teal);}
.ic-ouvir{width:15px;height:15px;}
.treinamento-leitura-config{display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  background:var(--surface-elevado);border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;margin:0 0 24px;}
.btn-ouvir-tudo{display:flex;align-items:center;gap:6px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:8px;padding:7px 12px;font-size:12.5px;
  font-weight:600;color:var(--text);cursor:pointer;flex:0 0 auto;font-family:var(--sans);}
.btn-ouvir-tudo:hover{border-color:var(--teal);color:var(--teal);}
.btn-ouvir-tudo.ativo{background:var(--teal-suave);border-color:var(--teal);color:var(--teal);}
.btn-ouvir-tudo .ic-ouvir{width:15px;height:15px;}
.field-inline{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-muted);flex:1 1 160px;}
.field-inline select{flex:1 1 auto;background:var(--surface-2);border:1px solid var(--border);
  color:var(--text);border-radius:8px;padding:6px 8px;font-size:12.5px;font-family:var(--sans);}
.treinamento-tela-legenda{font-size:11px;font-weight:600;letter-spacing:.08em;
  color:var(--text-muted);margin:16px 0 8px;}
.treinamento-tela-legenda strong{color:var(--teal);}

.btn-apresentacao{display:flex;align-items:center;gap:6px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:8px;padding:7px 12px;font-size:12.5px;
  font-weight:600;color:var(--text);cursor:pointer;flex:0 0 auto;font-family:var(--sans);}
.btn-apresentacao:hover{border-color:var(--teal);color:var(--teal);}
.btn-apresentacao .ic-ouvir{width:15px;height:15px;}
.ic-apre-badge{display:inline-flex;color:var(--teal);flex:0 0 auto;}
.ic-apre-badge svg{width:15px;height:15px;}
.artigo-leitura-titulo .ic-apre-badge{margin-left:8px;vertical-align:middle;}

/* Modo apresentação (28/08/2026) — modal genérico (.modal, ver graficoModal)
   com um miolo próprio: slide narrado, um capítulo por vez. */
.apre-caixa{max-width:520px;}
.apre-eyebrow{font-size:11px;font-weight:600;letter-spacing:.08em;
  color:var(--teal);margin:0 0 6px;}
.apre-slide-titulo{font-size:17px;font-weight:700;margin:0 0 16px;line-height:1.3;}
.apre-slide{background:var(--surface-elevado);border:1px solid var(--border);border-radius:10px;
  padding:16px;min-height:140px;display:flex;flex-direction:column;justify-content:center;}
.apre-slide-texto{font-size:15px;line-height:1.6;color:var(--text);margin:0;}
.apre-mock{background:none;border:none;padding:0;}
.apre-controles{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:18px;}
.apre-play{width:48px;height:48px;border-radius:50%;background:var(--teal);border:none;color:var(--on-teal);
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;}
.apre-play svg{width:20px;height:20px;}
.apre-nav{width:36px;height:36px;border-radius:50%;background:none;border:1px solid var(--border);
  color:var(--text-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;}
.apre-nav:hover{border-color:var(--teal);color:var(--teal);}
.apre-nav:disabled{opacity:.35;cursor:default;}
.apre-nav:disabled:hover{border-color:var(--border);color:var(--text-muted);}
.ic-apre-nav{width:16px;height:16px;}
.apre-barra{height:4px;background:var(--surface-2);border-radius:3px;overflow:hidden;margin-top:16px;}
.apre-barra span{display:block;height:100%;background:var(--teal);transition:width .3s;}
.apre-legenda{font-size:11.5px;color:var(--text-muted);text-align:center;margin:8px 0 0;}
.treinamento-mock{background:var(--surface-elevado);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px;}
.treinamento-mock .lucro-card{margin-bottom:10px;}
.treinamento-mock .ov-metricas{margin-bottom:0;}

/* Bloco de termo (Glossário) — sigla em destaque + definição, em vez de um
   parágrafo corrido: cada termo precisa ler como sua própria entrada, não
   como continuação do anterior. */
.artigo-termo{margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid var(--border);}
.artigo-termo:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none;}
.artigo-termo-sigla{font-weight:700;font-size:13.5px;color:var(--teal);margin-bottom:2px;}
.artigo-termo-def{font-size:13.5px;line-height:1.5;margin:0;color:var(--text);}

/* Botão de suporte flutuante, fixo no canto inferior direito da tela de
   Central de Ajuda (11/09/2026, pedido do usuário — era um card dentro da
   lista, ficou mais objetivo assim). Verde de marca do WhatsApp — única
   exceção de cor fixa (não `--teal`) porque é a cor que identifica o
   aplicativo de destino, não um estado do app. No celular soma com a altura
   da tabbar (`.nav`) + a área seguro de baixo, senão fica atrás dela. */
.whatsapp-flutuante{position:fixed;right:16px;bottom:16px;z-index:35;
  width:52px;height:52px;border-radius:50%;background:#25d366;color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--sombra-forte);}
.whatsapp-flutuante .ic{width:26px;height:26px;}
.whatsapp-flutuante:hover{filter:brightness(1.06);}
@media (max-width:699px){
  body.com-nav .whatsapp-flutuante{bottom:calc(72px + env(safe-area-inset-bottom));}
}
@media (min-width:700px){
  .whatsapp-flutuante{right:28px;bottom:28px;}
}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(8px);
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  padding:10px 18px;border-radius:22px;font-size:13px;opacity:0;pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;z-index:60;max-width:88vw;text-align:center;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

@media (min-width:700px){
  body{font-size:15.5px;}
  .wrap{padding-top:44px;}
}