/*
 * app.css — o sistema de design do produto, em um arquivo só.
 *
 * Antes cada tela carregava o próprio <style>, e a mesma tabela tinha três
 * aparências. Um produto que parece três produtos é um produto em que ninguém
 * confia dinheiro.
 *
 * Ordem: tokens → base → shell → componentes → telas → responsivo.
 * Os tokens de marca são os MESMOS do site (scopiq-site/public/index.html).
 */

/* ======================================================== 1. tokens
 *
 * A MARCA NÃO TEM COR (2026-09-13). A identidade é preto e branco: `--ink`,
 * os cinzas e `--paper`. O laranja-avermelhado #F02000 saiu inteiro — junto
 * com a paleta quente (papel creme, borda bege, texto marrom) que existia só
 * para acompanhá-lo.
 *
 * `--accent` É O ÚNICO AZUL, E ELE APONTA — NÃO REPRESENTA. Ele existe para
 * dizer o que se clica e o que está selecionado: botão primário, link, item
 * ativo, anel de foco, linha selecionada. Fora disso a tela é neutra.
 * Antes eram DOIS tokens — um laranja de preenchimento e um vermelho que podia
 * virar texto — porque o laranja reprovava como texto. #2563EB passa nos dois
 * papéis (5,17:1 com rótulo branco em cima · 4,95:1 como texto sobre o papel),
 * então os dois tokens viraram um só.
 *
 * REGRA DE CONTENÇÃO: de um a três elementos azuis por tela. Cinco ou mais e a
 * ação principal deixou de se destacar — o acento falhou na única função dele.
 * De relance a tela ainda é preto e branco; o azul é onde o olho pousa.
 *
 * CORES RESERVADAS. Azul e violeta pertencem ao acento; verde e vermelho
 * pertencem a lucro e prejuízo. NENHUMA série de gráfico usa uma cor reservada
 * nem uma vizinha dela — uma barra azul embaixo de um botão azul lê-se como
 * "selecionado", não como dado. Foi por isso que o Mercado Livre saiu do hex
 * da marca: ele era o único canal pintado com a cor institucional.
 *
 * NO ESCURO O RÓTULO INVERTE. `--accent` vira #4D8BFF, e o botão preenchido
 * leva rótulo quase preto: branco sobre #4D8BFF dá 3,25:1 e é ilegível, o
 * mesmo #0B0B0C dá 6,05:1. Conferir contra o fundo REAL, nunca contra o branco
 * por comodidade — a regra que o verde já ensinou três parágrafos abaixo.
 *
 * TEMA CLARO E ESCURO: a paleta clara mora no `:root` puro; o escuro só
 * REDEFINE tokens, nunca regras. Nenhuma cor pode ter a sua única definição
 * dentro de um bloco de tema — senão um dos dois temas nasce sem ela.
 */
:root{
  --accent:#2563EB; --accent-hover:#1D4FD8; --tint:#EAF0FE;
  --ink:#0B0B0C; --grafite:#3A3A3C;
  --paper:#FAFAF9; --border:#E5E5E7; --border-forte:#C7C7CC;
  --text:#0B0B0C; --text-body:#3A3A3C; --text-muted:#6E6E73; --text-faint:#8E8E93;
  --surface:#fff;
  --tint-borda:#C3D7FB;

  /* canais — paleta categórica.
     ⚠ PENDENTE DE REVALIDAÇÃO (2026-09-13). O Mercado Livre era o único canal
     pintado com o hex da MARCA; com a marca monocromática ele teria virado o
     próprio `--accent`, e uma barra da cor do botão lê-se como "selecionado".
     Saiu para #FF6A00, um matiz da camada de dados.
     O que ainda NÃO foi refeito: o Amazon (#3A62C4) é vizinho do acento, e a
     paleta inteira foi validada com o ML no hex antigo — os números daquela
     validação não descrevem mais este conjunto. A camada de dados é governada
     em separado e fecha depois, com checagem de contraste e de daltonismo. */
  --c-mercado_livre:#FF6A00; --c-shopee:#00A08A; --c-amazon:#3A62C4;
  --c-magalu:#B03A8C; --c-loja_propria:#6B7280; --c-outro:#6B7280;

  /* ---- estado: verde e vermelho ------------------------------------------
     NUNCA sozinhas. Vermelho/verde é o par que o daltonismo mais comum apaga,
     então o sinal (− / +) e a palavra ("Sobrou", "Prejuízo") viajam sempre
     junto: a cor acelera a leitura de quem a enxerga e não é a única fonte
     para quem não.

     SÃO DOIS VERDES, e a razão é medida, não estética. Texto pequeno precisa
     de 4,5:1; número grande (≥24px, ou ≥18,7px em negrito) precisa de 3:1.
     O verde forte que se quer ver num número de 27px reprova como texto de
     tabela — e o verde que passa na tabela é apagado no número grande. Um
     token para cada trabalho, cada um conferido contra o fundo em que de fato
     aparece (branco E o tinte), não contra o branco só.

       --pos       #047857  5,48:1 no branco · 4,84:1 no tinte   (texto)
       --pos-vivo  #059669  3,33:1 no tinte                       (número grande)
       --neg       #C81E14  5,75:1 no branco · 5,03:1 no tinte   (texto)
       --neg-vivo  #D92B1C  4,26:1 no tinte                       (número grande)

     `--pos-tinta` é a cor do rótulo DENTRO da fatia colorida (a régua escreve
     "15%" em cima do verde). Ela não é decorativa: escolhida pela luminância
     do preenchimento. No tema escuro o verde é claro, e o branco que estava
     fixo ali dava 2,11:1 — o rótulo existia e não se lia. */
  --pos:#047857; --pos-vivo:#059669; --pos-fraco:#E3F5EC; --pos-borda:#A8DCC4;
  --neg:#C81E14; --neg-vivo:#D92B1C; --neg-fraco:#FDECEA; --neg-borda:#F3C4BE;
  --pos-tinta:#ffffff; --neg-tinta:#ffffff;
  --aviso:#8A5A24; --aviso-fraco:#FDF3E7; --aviso-borda:#E6C9A8;

  /* superfície do que flutua por cima (bolha, dica, gaveta) */
  --flutua:#0B0B0C; --flutua-txt:#FAFAF9; --flutua-txt-forte:#fff;

  --r:10px; --r-g:14px;
  --sombra:0 1px 2px rgba(11,11,12,.04), 0 4px 16px rgba(11,11,12,.05);
  --sombra-alta:0 8px 30px rgba(11,11,12,.12);
  --topo-h:60px; --lateral-w:276px;

  /* escala de texto — nomeada pelo PAPEL, não pelo tamanho, para a hierarquia
     ser uma decisão e não o acaso de quem escreveu a regra por último. */
  --t-num-g:1.7rem;   /* o número que a pessoa veio ver */
  --t-num:1.32rem;    /* número de apoio */
  --t-corpo:.95rem;   /* texto que se lê */
  --t-tabela:.92rem;  /* célula de tabela — era .88 e apertava o dinheiro */
  --t-apoio:.85rem;   /* legenda, observação */
  --t-mini:.78rem;    /* rótulo de campo, unidade */
  --t-etiqueta:.68rem;/* MAIÚSCULA espaçada — só rótulo, nunca informação */
}

/* --- tema escuro ---------------------------------------------------------
 * Duas entradas de propósito: o sistema decide por padrão, e o botão do topo
 * ganha do sistema nos dois sentidos (por isso `[data-tema]` aparece nas duas
 * direções, e não só no escuro).
 */
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --accent:#4D8BFF; --accent-hover:#7BA9FF; --tint:#10244A;
    --ink:#060607;
    --paper:#0B0B0C; --border:#2A2A2D; --border-forte:#3A3A3C;
    --text:#FAFAF9; --text-body:#D4D4D8; --text-muted:#A1A1A6; --text-faint:#8E8E93;
    --surface:#1C1C1E; --tint-borda:#1E3A6B;

    --c-mercado_livre:#FF8A3D; --c-shopee:#1FC0A6; --c-amazon:#6E92E8;
    --c-magalu:#DE73BE; --c-loja_propria:#9AA2AE; --c-outro:#9AA2AE;

    --pos:#2EE08F; --pos-vivo:#2EE08F; --pos-fraco:#12291D; --pos-borda:#245139;
    --neg:#FF6152; --neg-vivo:#FF6152; --neg-fraco:#2E1613; --neg-borda:#552620;
    /* tinta ESCURA sobre a fatia clara: 10,09:1 e 5,87:1 (era branco, 2,11:1) */
    --pos-tinta:#2B0D08; --neg-tinta:#2B0D08;
    --aviso:#E5AC63; --aviso-fraco:#2A1E0E; --aviso-borda:#4C3820;

    --flutua:#2A2A2D; --flutua-txt:#E5E5E7; --flutua-txt-forte:#fff;

    --sombra:0 1px 2px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.3);
    --sombra-alta:0 8px 30px rgba(0,0,0,.55);
  }
}
:root[data-tema="escuro"]{
  --accent:#4D8BFF; --accent-hover:#7BA9FF; --tint:#10244A;
  --ink:#060607;
  --paper:#0B0B0C; --border:#2A2A2D; --border-forte:#3A3A3C;
  --text:#FAFAF9; --text-body:#D4D4D8; --text-muted:#A1A1A6; --text-faint:#8E8E93;
  --surface:#1C1C1E; --tint-borda:#1E3A6B;

  --c-mercado_livre:#FF8A3D; --c-shopee:#1FC0A6; --c-amazon:#6E92E8;
  --c-magalu:#DE73BE; --c-loja_propria:#9AA2AE; --c-outro:#9AA2AE;

  --pos:#2EE08F; --pos-vivo:#2EE08F; --pos-fraco:#12291D; --pos-borda:#245139;
  --neg:#FF6152; --neg-vivo:#FF6152; --neg-fraco:#2E1613; --neg-borda:#552620;
  --pos-tinta:#2B0D08; --neg-tinta:#2B0D08;
  --aviso:#E5AC63; --aviso-fraco:#2A1E0E; --aviso-borda:#4C3820;

  --flutua:#2A2A2D; --flutua-txt:#E5E5E7; --flutua-txt-forte:#fff;

  --sombra:0 1px 2px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.3);
  --sombra-alta:0 8px 30px rgba(0,0,0,.55);
}
:root{color-scheme:light}
:root[data-tema="escuro"]{color-scheme:dark}
@media (prefers-color-scheme:dark){ :root:not([data-tema="claro"]){color-scheme:dark} }

/* ========================================================== 2. base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif; font-size:15px; line-height:1.55;
}
h1,h2,h3,h4,.num,.marca-txt{font-family:'Sora',sans-serif}
h1{font-size:1.5rem; font-weight:800; letter-spacing:-.025em; margin:0}
h2{font-size:1.05rem; font-weight:700; letter-spacing:-.01em; margin:0}
h3{font-size:.92rem; font-weight:700; margin:0}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85em;
  background:var(--tint); padding:1px 5px; border-radius:4px}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.som{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ========================================================= 3. shell */
/*
 * Topo fixo + lateral fixa + conteúdo rolando. Inspirado no que um ERP
 * brasileiro faz, porque é o que o vendedor já sabe usar — a novidade tem que
 * estar no número, nunca em onde fica o botão.
 */
.topo{
  position:sticky; top:0; z-index:60; height:var(--topo-h);
  background:var(--surface); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:22px; padding:0 20px;
}
.topo .marca{display:flex; align-items:center; line-height:0; flex:none}
.topo .marca img{height:22px; width:auto; display:block}

.menu{display:flex; align-items:center; gap:2px; height:100%; min-width:0; overflow:visible}
.menu a{
  display:flex; align-items:center; height:100%; padding:0 13px; position:relative;
  font-size:.9rem; font-weight:500; color:var(--text-body); white-space:nowrap;
}
.menu a:hover{color:var(--text); text-decoration:none; background:var(--paper)}
.menu a.on{color:var(--accent); font-weight:600}
.menu a.on::after{
  content:''; position:absolute; left:13px; right:13px; bottom:-1px; height:2px;
  background:var(--accent); border-radius:2px 2px 0 0;
}
.topo .fim{margin-left:auto; display:flex; align-items:center; gap:6px; flex:none}

.icone{
  width:34px; height:34px; border-radius:9px; border:1px solid transparent; background:transparent;
  display:grid; place-items:center; cursor:pointer; color:var(--text-muted);
}
.icone:hover{background:var(--paper); border-color:var(--border); color:var(--text)}
.icone svg{width:18px; height:18px; display:block}

/* menu da conta */
.conta-b{display:flex; align-items:center; gap:9px; padding:4px 10px 4px 4px; border-radius:99px;
  border:1px solid var(--border); background:var(--surface); cursor:pointer; font:inherit; color:var(--text)}
.conta-b:hover{background:var(--paper)}
.av{width:28px; height:28px; border-radius:50%; background:var(--ink); color:#fff; flex:none;
  display:grid; place-items:center; font-family:'Sora',sans-serif; font-weight:700; font-size:.74rem; letter-spacing:.02em}
.conta-b .nome{font-size:.86rem; font-weight:600; max-width:130px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.conta-b .seta{color:var(--text-faint); font-size:.6rem}

/* `fixed` porque o botão que o abre mora DENTRO da lateral, e a lateral rola
   por dentro (`overflow-y:auto`) — o que recorta qualquer filho posicionado.
   As coordenadas vêm do JS, na hora de abrir. */
.pop{
  position:fixed; z-index:95; width:262px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-g);
  box-shadow:var(--sombra-alta); padding:6px; display:none;
}
.pop.on{display:block}
.pop .quem{padding:12px 12px 11px; border-bottom:1px solid var(--border); margin-bottom:6px}
.pop .quem .n{font-family:'Sora',sans-serif; font-weight:700; font-size:.92rem}
.pop .quem .e{color:var(--text-faint); font-size:.8rem; overflow:hidden; text-overflow:ellipsis}
.pop a,.pop button{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:9px 11px;
  border:0; background:transparent; border-radius:8px; font:inherit; font-size:.88rem;
  color:var(--text-body); cursor:pointer;
}
.pop a:hover,.pop button:hover{background:var(--paper); color:var(--text); text-decoration:none}
.pop hr{border:0; border-top:1px solid var(--border); margin:6px 0}
.pop .sair{color:var(--neg)}

/* corpo
   A LATERAL É FIXA E ENCOSTADA NA BORDA, não um cartão flutuante.
   Antes ela era três cartões arredondados com sombra, empilhados numa coluna
   que rolava junto com a página: em telas curtas o menu subia e sumia, e para
   trocar de aba era preciso rolar de volta ao topo. Presa à esquerda, o menu
   está sempre onde a pessoa deixou — e um painel encostado na borda lê como
   parte da janela, não como um cartão que por acaso tem links dentro. */
.corpo{padding:22px 22px 64px 22px; padding-left:calc(var(--lateral-w) + 30px);
  max-width:calc(1500px + var(--lateral-w)); margin:0 auto}

.lateral{
  position:fixed; left:0; top:var(--topo-h); bottom:0; width:var(--lateral-w);
  display:flex; flex-direction:column; gap:7px; z-index:40;
  background:var(--surface); border-right:1px solid var(--border);
  padding:9px 10px 9px;
  /* Fallback para janela MUITO baixa. O alvo é caber tudo (ver as medidas
     compactas abaixo); mas cortar um item de menu sem alcance nenhum seria
     pior do que uma barra de rolagem que quase nunca aparece. */
  overflow-y:auto; overscroll-behavior:contain;
}
/* Encostada na borda, os blocos perdem a moldura: cartão dentro de painel é
   uma borda dentro de outra, e são as duas dizendo a mesma coisa. */
.lateral .lbloco,.lateral .lnav{background:none; border:0; box-shadow:none; padding:0}
/* Compactos porque a lateral tem de caber sem rolar — ver a nota em shell.js. */
.lateral .lbloco{border-top:1px solid var(--border); padding-top:9px}
.l-topo{display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:6px}
.l-tit{font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color:var(--text-faint);
  font-weight:700; font-family:'Sora',sans-serif}
.l-topo b{font-family:'Sora',sans-serif; font-size:.9rem; font-variant-numeric:tabular-nums}
.lcustos .barra{height:6px; background:var(--paper); border-radius:4px; overflow:hidden; margin-bottom:8px}
.lcustos .barra i{display:block; height:100%; background:var(--accent); border-radius:4px}
.lcustos .barra i.cheio{background:var(--pos)}
.l-obs{margin:0; font-size:.74rem; color:var(--text-faint)}
.ldemo p{margin:0 0 7px; font-size:.78rem; color:var(--text-muted); line-height:1.35}
.lateral .bt.pq{width:100%; justify-content:center; text-align:center}
.lateral .lnav{padding:2px 0}
.lbloco{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-g);
  box-shadow:var(--sombra); padding:15px 16px}
.lbloco h3{font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--text-faint);
  font-weight:700; margin:0 0 10px}

.eu{display:flex; gap:11px; align-items:center; margin-bottom:12px}
.eu .av{width:40px; height:40px; font-size:.92rem}
.eu .t{min-width:0}
.eu .t .n{font-family:'Sora',sans-serif; font-weight:700; font-size:.98rem; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.eu .t .e{color:var(--text-faint); font-size:.78rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.selo{display:inline-block; font-family:'Sora',sans-serif; font-size:.64rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:3px 9px; border-radius:99px;
  background:var(--tint); color:var(--accent); border:1px solid var(--tint-borda)}
.selo.pago{background:var(--pos-fraco); color:var(--pos); border-color:var(--pos-borda)}

/* medidor (mede o que falta cadastrar — é o gesto que destrava o produto) */
.medidor{margin-top:4px}
.medidor .l{display:flex; justify-content:space-between; align-items:baseline; font-size:.82rem; margin-bottom:6px}
.medidor .l b{font-family:'Sora',sans-serif; font-size:.95rem}
.barra{height:7px; border-radius:99px; background:var(--border); overflow:hidden}
.barra i{display:block; height:100%; background:var(--accent); border-radius:99px; transition:width .3s}
.barra i.cheio{background:var(--pos)}
.medidor .obs{color:var(--text-faint); font-size:.78rem; margin-top:7px; line-height:1.4}

/* atalhos */
.atalhos{display:flex; flex-direction:column; gap:2px}
.atalhos a{display:flex; align-items:center; gap:10px; padding:8px 9px; border-radius:8px;
  font-size:.87rem; color:var(--text-body)}
.atalhos a:hover{background:var(--paper); color:var(--text); text-decoration:none}
.atalhos a svg{width:15px; height:15px; color:var(--text-faint); flex:none}
.atalhos a:hover svg{color:var(--accent)}

/* arquivo carregado */
.fonte-dado .arq{font-family:'Sora',sans-serif; font-weight:700; font-size:.9rem; word-break:break-word}
.fonte-dado .meta{color:var(--text-muted); font-size:.8rem; margin-top:3px}
.fonte-dado .acoes{margin-top:11px; display:flex; gap:8px; flex-wrap:wrap}

/* ==================================================== 4. cabeçalho da tela */
.cabeca{display:flex; justify-content:space-between; align-items:flex-start; gap:20px;
  flex-wrap:wrap; margin:0 0 18px}
.cabeca .tit .sup{font-family:'Sora',sans-serif; font-size:var(--t-etiqueta); letter-spacing:.15em;
  text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:5px}
.cabeca .tit p{color:var(--text-muted); font-size:var(--t-corpo); margin:6px 0 0; max-width:76ch}
/* O seletor de período fica AQUI, na linha do título — ver a nota em shell.js.
   `flex-end` para ele alinhar pelo alto, na altura do <h1>, e não no meio de um
   cabeçalho que tem três linhas de altura quando há subtítulo. */
.cabeca .fer{display:flex; gap:9px; align-items:center; flex-wrap:wrap; justify-content:flex-end;
  padding-top:2px}

/* ===================================================== 5. botões e campos */
.bt{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Sora',sans-serif; font-weight:700; font-size:.88rem; line-height:1;
  padding:10px 17px; border-radius:9px; border:1px solid var(--border-forte);
  background:var(--surface); color:var(--text); cursor:pointer; white-space:nowrap;
  transition:background .14s, border-color .14s, transform .08s;
}
.bt:hover{background:var(--paper); text-decoration:none}
.bt:active{transform:translateY(1px)}
.bt[disabled]{opacity:.5; cursor:not-allowed; transform:none}
.bt.forte{background:var(--accent); border-color:var(--accent); color:#fff}
.bt.forte:hover{background:var(--accent-hover); border-color:var(--accent-hover)}
.bt.perigo{color:var(--neg); border-color:var(--neg-borda)}
.bt.perigo:hover{background:var(--neg-fraco)}
.bt.pq{padding:6px 12px; font-size:.8rem; border-radius:7px}
.bt svg{width:15px; height:15px}

input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],select,textarea{
  font-family:'Inter',sans-serif; font-size:.9rem; padding:9px 11px; width:100%;
  border:1px solid var(--border-forte); border-radius:8px; background:var(--surface); color:var(--text);
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--tint)}
select{cursor:pointer}
label{font-weight:600; font-size:.88rem}
.campo{display:grid; gap:6px; margin-bottom:16px}
.campo .obs{color:var(--text-faint); font-size:.81rem; line-height:1.45}
.campo.linha{display:flex; align-items:flex-start; gap:20px}
.campo.linha > label{padding-top:9px; flex:0 0 230px}
.curto{max-width:190px}

/* ====================================================== 6. cartões/blocos */
.cartao{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-g);
  box-shadow:var(--sombra); padding:20px 22px; margin-bottom:20px}
.cartao > .cab{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:3px}
.dica{color:var(--text-muted); font-size:var(--t-apoio); margin:3px 0 16px; max-width:78ch}
.dica:last-child{margin-bottom:0}
.vazio{color:var(--text-faint); font-size:.9rem; padding:26px 0; text-align:center; margin:0}

.grade2{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px}
.grade2 .cartao{margin:0}

.bloco{border-radius:var(--r); padding:13px 15px; margin:12px 0 0; font-size:.88rem}
.bloco:first-child{margin-top:0}
.bloco.aviso{background:var(--aviso-fraco); border:1px solid var(--aviso-borda); color:var(--aviso)}
.bloco.erro{background:var(--neg-fraco); border:1px solid var(--neg-borda); color:var(--neg)}
.bloco.bom{background:var(--pos-fraco); border:1px solid var(--pos-borda); color:var(--pos)}
.bloco.neutro{background:var(--paper); border:1px solid var(--border); color:var(--text-body)}
.bloco ul{margin:6px 0 0; padding-left:18px}
.bloco li{margin:2px 0}
.bloco strong{font-family:'Sora',sans-serif}

/* ============================================================= 7. KPIs */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:var(--r-g); overflow:hidden}
.kpi{background:var(--surface); padding:14px 16px}
.kpi dt,.kpi .r{font-size:var(--t-mini); color:var(--text-muted); letter-spacing:.01em; margin:0 0 4px; font-weight:500}
.kpi dd,.kpi .v{margin:0; font-family:'Sora',sans-serif; font-weight:700; font-size:var(--t-num); letter-spacing:-.02em; line-height:1.15}
.kpi .d{font-size:var(--t-mini); color:var(--text-faint); margin-top:4px; line-height:1.4}

/* destaque do resultado */
.resultado{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-g);
  box-shadow:var(--sombra); padding:24px 26px; margin-bottom:20px;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:28px; align-items:center}
.resultado .rotulo{font-family:'Sora',sans-serif; font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:6px}
.resultado .grande{font-family:'Sora',sans-serif; font-size:clamp(2rem,4.6vw,3rem); font-weight:800;
  letter-spacing:-.03em; line-height:1.05; margin:0}
.resultado .apoio{color:var(--text-body); margin:10px 0 0; font-size:.94rem; max-width:52ch}

/* ========================================================== 8. tabelas */
.rolagem{overflow-x:auto; margin:0 -22px; padding:0 22px}
table{border-collapse:collapse; width:100%; font-size:var(--t-tabela)}
.rolagem table{min-width:660px}
th{text-align:left; font-family:'Sora',sans-serif; font-size:var(--t-etiqueta); letter-spacing:.07em;
  text-transform:uppercase; color:var(--text-faint); font-weight:700;
  padding:0 12px 8px 0; border-bottom:1px solid var(--border); white-space:nowrap}
td{padding:9px 12px 9px 0; border-bottom:1px solid var(--border); vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
th:not(:first-child),td:not(:first-child){padding-left:14px}
.n{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.clicavel{cursor:pointer}
.clicavel:hover{background:var(--tint)}
.canal{display:inline-flex; align-items:center; gap:7px; white-space:nowrap}
.canal i{width:9px; height:9px; border-radius:3px; flex:none}
.sku{font-weight:600}
.sku small{display:block; font-weight:400; color:var(--text-faint); font-size:.78rem}
th.orden{cursor:pointer; user-select:none}
th.orden:hover{color:var(--text)}
th.orden .s{opacity:.4; margin-left:3px}
th.orden.on .s{opacity:1; color:var(--accent)}

/* ============================================================ 9. sinais */
.pos{color:var(--pos); font-weight:600}
.neg{color:var(--neg); font-weight:600}

/* A pastilha de valor: usada nas COLUNAS que têm lado (Sobrou, Margem).
   Numa tabela de trinta linhas, cor de letra não se acha varrendo a coluna —
   um verde e um preto do mesmo peso são quase a mesma mancha. O fundo dá área
   à cor. Contorno junto porque no tema escuro o fundo sozinho quase não separa
   da linha. Números tabulares para as casas ficarem alinhadas na vertical. */
.val{display:inline-block; padding:2px 8px; border-radius:7px; font-weight:700;
  font-variant-numeric:tabular-nums; border:1px solid; line-height:1.35;
  font-size:.86rem; white-space:nowrap}
.val.pos{color:var(--pos); background:var(--pos-fraco); border-color:var(--pos-borda)}
.val.neg{color:var(--neg); background:var(--neg-fraco); border-color:var(--neg-borda)}

/* ---- o seletor de período, no topo -------------------------------------
   Fica no topo e não dentro das telas: o período é a pergunta que todas
   respondem, não uma propriedade de nenhuma. O RÓTULO fica escrito — um ícone
   de calendário sozinho não responde "de quando são estes números?", que é o
   que a pessoa precisa saber antes de acreditar em qualquer valor da tela. */
.bt-periodo{
  display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 11px;
  border:1px solid var(--border); background:var(--surface); color:var(--text-body);
  border-radius:9px; cursor:pointer; font:inherit; font-size:.86rem; font-weight:600;
  white-space:nowrap; transition:background .12s, border-color .12s, color .12s;
}
.bt-periodo:hover{background:var(--tint); border-color:var(--tint-borda); color:var(--accent)}
.bt-periodo svg{flex:none; opacity:.8}
.bt-periodo .seta{color:var(--text-faint); font-size:.7rem}
.bt-periodo:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (max-width:620px){ .bt-periodo span:not(.seta){display:none} }

.pop-periodo{padding:6px}
.pop-periodo button[data-periodo]{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  padding:8px 10px; border:0; background:none; border-radius:7px; cursor:pointer;
  font:inherit; font-size:.88rem; color:var(--text-body);
}
.pop-periodo button[data-periodo]:hover{background:var(--paper); color:var(--text)}
.pop-periodo button[data-periodo].on{color:var(--accent); font-weight:600; background:var(--tint)}
.pop-periodo .tique{width:15px; flex:none; display:grid; place-items:center}
.pop-periodo .datas{border-top:1px solid var(--border); margin-top:6px; padding:10px 10px 6px;
  display:flex; flex-direction:column; gap:8px}
.pop-periodo .datas label{display:flex; align-items:center; gap:8px; font-size:.82rem;
  color:var(--text-muted)}
.pop-periodo .datas input{flex:1; min-width:0; font:inherit; font-size:.84rem; padding:5px 8px;
  border:1px solid var(--border); border-radius:7px; background:var(--surface); color:var(--text)}
.pop-periodo .erro{margin:0; font-size:.78rem; color:var(--neg); font-weight:600}

/* ---- páginas de tabela: 30 linhas e as setas ---------------------------- */
.pag{display:inline-flex; align-items:center; gap:8px}
.pag-conta{color:var(--text-muted); font-variant-numeric:tabular-nums}
.pag-qual{font-variant-numeric:tabular-nums; color:var(--text-body); font-weight:600;
  min-width:52px; text-align:center}
.pag-bt{display:grid; place-items:center; width:30px; height:30px; padding:0;
  border:1px solid var(--border); background:var(--surface); color:var(--text-body);
  border-radius:8px; cursor:pointer; transition:background .12s, border-color .12s, color .12s}
.pag-bt:hover:not(:disabled){background:var(--tint); border-color:var(--tint-borda); color:var(--accent)}
.pag-bt:disabled{opacity:.38; cursor:default}
.pag-bt:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.tag{display:inline-block; font-size:.68rem; padding:2px 7px; border-radius:99px;
  border:1px solid var(--border); color:var(--text-muted); background:var(--paper);
  white-space:nowrap; margin:1px 3px 1px 0}
.tag.alerta{border-color:var(--aviso-borda); background:var(--aviso-fraco); color:var(--aviso)}
.tag.ruim{border-color:var(--neg-borda); background:var(--neg-fraco); color:var(--neg)}
.tag.bom{border-color:var(--pos-borda); background:var(--pos-fraco); color:var(--pos)}
.tag.fonte-payload,.tag.fonte-repasse{border-color:var(--pos-borda); background:var(--pos-fraco); color:var(--pos)}
.tag.fonte-estimado{border-color:var(--aviso-borda); background:var(--aviso-fraco); color:var(--aviso)}

/* ========================================================= 10. gráficos */
svg{display:block; overflow:visible}
svg.g{width:100%; height:auto}
.grade{stroke:var(--border); stroke-width:1}
.eixo{fill:var(--text-faint); font-size:11px; font-family:'Inter',sans-serif}
.rot{fill:var(--text-body); font-size:11.5px; font-family:'Inter',sans-serif}
.valor{fill:var(--text); font-size:11.5px; font-weight:600; font-family:'Sora',sans-serif}
.rosca-n{fill:var(--text); font-size:22px; font-weight:800; font-family:'Sora',sans-serif}
.legenda{display:flex; gap:14px; flex-wrap:wrap; font-size:.8rem; color:var(--text-body); margin:0 0 12px}
.legenda i{width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:6px; vertical-align:-1px}
.empilhada{display:flex; height:14px; border-radius:99px; overflow:hidden; background:var(--border)}
.empilhada .fatia{display:block; height:100%}

.tip{position:fixed; z-index:110; pointer-events:none; opacity:0; transition:opacity .09s;
  background:var(--flutua); color:var(--flutua-txt-forte); border-radius:8px; padding:9px 11px; font-size:.8rem;
  line-height:1.45; box-shadow:0 6px 24px rgba(0,0,0,.22); max-width:270px}
.tip.on{opacity:1}
.tip b{font-family:'Sora',sans-serif; display:block; margin-bottom:3px}
.tip .l{display:flex; justify-content:space-between; gap:16px}
.tip .l span:last-child{font-variant-numeric:tabular-nums}
.tip em{font-style:normal; color:var(--text-faint)}

/* =========================================================== 11. gaveta */
.fundo{position:fixed; inset:0; background:rgba(11,11,12,.42); opacity:0; visibility:hidden;
  transition:opacity .18s; z-index:90}
.fundo.on{opacity:1; visibility:visible}
.gaveta{position:fixed; top:0; right:0; height:100%; width:min(470px,100%); background:var(--surface);
  z-index:91; transform:translateX(100%); transition:transform .22s ease; overflow-y:auto;
  box-shadow:-8px 0 32px rgba(11,11,12,.14)}
.gaveta.on{transform:none}
.gaveta .topo-g{padding:20px 22px 14px; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:var(--surface); z-index:2}
.gaveta .corpo-g{padding:16px 22px 44px}
.fechar{position:absolute; top:16px; right:16px; border:1px solid var(--border); background:var(--paper);
  width:32px; height:32px; border-radius:8px; cursor:pointer; font-size:16px; color:var(--text-muted); line-height:1}
.fechar:hover{background:var(--tint)}
.linha{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:8px 0;
  border-bottom:1px dashed var(--border)}
.linha:last-child{border-bottom:0}
.linha .r{color:var(--text-body)}
.linha .v{font-family:'Sora',sans-serif; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.linha.total{border-top:2px solid var(--ink); border-bottom:0; margin-top:6px; padding-top:11px}
.linha.total .r{font-weight:700; color:var(--text)}
.linha.total .v{font-size:1.15rem}

/* ======================================================== 12. faixa topo */
/*
 * O HTML nasce com a faixa de "Demonstração" visível; a classe .real no <html>
 * inverte para "Seus dados". Nesta ordem de propósito: se o script falhar, o
 * aviso de fictício é o que sobra. O erro seguro é avisar à toa, nunca calar.
 */
.faixa{font-size:.78rem; letter-spacing:.04em; padding:9px 0; color:#fff; background:var(--ink)}
.faixa .dentro{max-width:1500px; margin:0 auto; padding:0 22px; display:flex; gap:12px;
  align-items:center; flex-wrap:wrap}
.faixa b{font-family:'Sora',sans-serif; letter-spacing:.14em; text-transform:uppercase;
  background:var(--accent); color:#fff; padding:3px 9px; border-radius:99px; font-size:.68rem}
.faixa span{color:var(--text-faint)}
.faixa a{color:#fff; margin-left:auto; font-weight:600; white-space:nowrap}
.seu{display:none}
html.real .fake{display:none}
html.real .seu{display:block; background:#14503A}
html.real .seu b{background:#0F3D2C}
html.real .seu span{color:#d8ebe2}

/* ======================================================== 13. filtros */
.barra-filtro{display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-g);
  box-shadow:var(--sombra); padding:11px 13px; margin-bottom:20px}
.barra-filtro .grupo{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.barra-filtro .grupo.datas input{width:150px; padding:6px 9px; font-size:.83rem}
.barra-filtro .ate{color:var(--text-faint); font-size:.83rem}
.barra-filtro .busca{flex:1; min-width:170px}
.barra-filtro .busca input{padding:7px 11px; font-size:.85rem}
.barra-filtro > .bt{margin-left:auto}

.pilula{display:inline-flex; align-items:center; gap:7px; font-family:'Inter',sans-serif;
  font-size:.83rem; font-weight:500; padding:6px 12px; border-radius:99px; cursor:pointer;
  border:1px solid var(--border-forte); background:var(--surface); color:var(--text-body)}
.pilula:hover{background:var(--paper); color:var(--text)}
.pilula.on{background:var(--ink); border-color:var(--ink); color:#fff; font-weight:600}
.pilula i{width:9px; height:9px; border-radius:3px; flex:none}
.pilula.on i{box-shadow:0 0 0 1.5px rgba(255,255,255,.5)}

/* ================================================= 13b. edição em linha */
input.custo{padding:6px 9px; font-size:.86rem; font-variant-numeric:tabular-nums; text-align:right}
input.custo::placeholder{font-size:.8rem; color:var(--text-faint)}
input.custo.ruim{border-color:var(--neg); background:var(--neg-fraco)}
.marca-salvo{display:block; min-height:15px; font-size:.72rem; margin-top:3px; text-align:right}
.marca-salvo .salvo{color:var(--pos); font-weight:600}
.marca-salvo .salvando{color:var(--text-faint)}
.marca-salvo .aviso-campo{color:var(--neg)}
.marca-salvo .origem{color:var(--text-faint)}
input.custo.do-arquivo{border-style:dashed; color:var(--text-muted)}
textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85rem; line-height:1.6; resize:vertical}

/* ==================================================== 14. cards de perda */
/* Vendido no prejuízo: LISTA, não cartões — ver a nota em `desenharPerdas`.
   A pergunta é "qual é o pior", que é comparação, e comparação quer os valores
   empilhados numa coluna alinhada pela direita. Numa grade de três colunas o
   segundo pior fica ao lado do quinto e a ordem deixa de se ler. */
.perdas-cab,.perda-l{
  display:grid; align-items:center; gap:14px;
  grid-template-columns:minmax(0,2.1fr) minmax(0,1fr) minmax(96px,auto) minmax(150px,auto) 14px;
}
.perdas-cab{padding:0 10px 7px; border-bottom:1px solid var(--border-forte)}
.perdas-cab span{font-size:var(--t-mini); text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-faint); font-weight:700; font-family:'Sora',sans-serif}
.perdas-cab .n{text-align:right}
.perdas-lista{display:flex; flex-direction:column}

.perda-l{
  width:100%; text-align:left; font:inherit; cursor:pointer;
  background:none; border:0; border-bottom:1px solid var(--border);
  padding:10px; border-radius:8px; transition:background .12s;
}
.perda-l:hover{background:var(--neg-fraco)}
.perda-l:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
/* `align-items:flex-start` porque `<code>` tem fundo próprio: num flex-column o
   padrão é `stretch`, e a pastilha do SKU esticava a coluna inteira — uma barra
   rosa de 400px atrás de oito caracteres. */
.perda-l .nome{min-width:0; display:flex; flex-direction:column; gap:1px; align-items:flex-start}
.perda-l .nome strong{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.perda-l .nome code{font-size:.72rem; color:var(--text-faint); max-width:100%}
.perda-l .cnl{min-width:0; overflow:hidden}
.perda-l .fat{display:flex; flex-direction:column; align-items:flex-end;
  font-variant-numeric:tabular-nums; color:var(--text-body); white-space:nowrap}
.perda-l .fat small{color:var(--text-faint); font-size:.72rem}
.perda-l .perdeu{display:flex; align-items:center; justify-content:flex-end; gap:9px}
/* A barra dá a proporção entre os prejuízos: sem ela, R$ 3.122 e R$ 1.679 são
   dois números parecidos numa coluna, e o dobro não aparece como dobro. */
.perda-l .perdeu .trilho{width:64px; height:7px; background:var(--paper);
  border-radius:4px; overflow:hidden; flex:none}
.perda-l .perdeu .trilho i{display:block; height:100%; background:var(--neg); border-radius:4px}
.perda-l .ir{color:var(--text-faint); font-size:1.05rem; line-height:1}
.perda-l:hover .ir{color:var(--neg)}

@media (max-width:760px){
  .perdas-cab,.perda-l{grid-template-columns:minmax(0,1.6fr) minmax(120px,auto) 14px}
  .perdas-cab span:nth-child(2),.perdas-cab span:nth-child(3),
  .perda-l .cnl,.perda-l .fat{display:none}
  .perda-l .perdeu .trilho{display:none}
}

/* ============================================== 14b. mesmo produto, canais */
.comparo{border:1px solid var(--border); border-radius:var(--r); padding:13px 15px; margin-bottom:11px}
.comparo:last-child{margin-bottom:0}
.comparo .cabec{display:flex; justify-content:space-between; align-items:center; gap:12px;
  flex-wrap:wrap; margin-bottom:9px}
.linhas-c{display:flex; flex-direction:column; gap:5px}
.linha-c{display:grid; grid-template-columns:minmax(120px,1.3fr) 70px 1fr 1fr 72px;
  gap:12px; align-items:center; font-size:.86rem; padding:5px 0; border-top:1px dashed var(--border)}
.linha-c:first-child{border-top:0}
.linha-c .p{color:var(--text-faint); font-size:.8rem}
.linha-c .f,.linha-c .s,.linha-c .m{text-align:right; font-variant-numeric:tabular-nums}
@media (max-width:660px){
  .linha-c{grid-template-columns:1fr 1fr; gap:4px 10px}
  .linha-c .c{grid-column:1/-1}
}

/* ============================================ 14c. o que guarda / não guarda */
.dois-lados{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px}
.lado{border-radius:var(--r); padding:15px 17px; border:1px solid var(--border); background:var(--paper)}
.lado h3{font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; margin:0 0 9px}
.lado ul{margin:0; padding-left:18px; font-size:.88rem; line-height:1.7}
.lado .obs{color:var(--text-muted); font-size:.82rem; margin:10px 0 0}
.lado.bom-lado{background:var(--pos-fraco); border-color:var(--pos-borda)}
.lado.bom-lado h3{color:var(--pos)}
.lado.neutro-lado{background:var(--tint); border-color:var(--tint-borda)}
.lado.neutro-lado h3{color:var(--accent)}

/* ================================================ 14d. fichas e listas */
.fichas{display:grid; gap:11px; margin:0}
.fichas > div{display:grid; grid-template-columns:150px minmax(0,1fr); gap:12px; align-items:baseline}
.fichas dt{color:var(--text-faint); font-size:.82rem; margin:0}
.fichas dd{margin:0; font-weight:600; font-size:.92rem; overflow-wrap:anywhere}
@media (max-width:520px){ .fichas > div{grid-template-columns:1fr; gap:2px} }

.lista-check{list-style:none; padding:0; margin:0; display:grid; gap:7px; font-size:.89rem}
.lista-check li{padding-left:26px; position:relative; color:var(--text-body)}
.lista-check li::before{position:absolute; left:0; top:0; font-family:'Sora',sans-serif; font-weight:700}
.lista-check li.sim::before{content:'✓'; color:var(--pos)}
.lista-check li.nao::before{content:'○'; color:var(--text-faint)}
.lista-check li.nao{color:var(--text-faint)}

/* ========================================================= 14e. fontes */
.fontes{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px}
.fonte{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-g);
  box-shadow:var(--sombra); padding:18px 20px}
.fonte.ativa{border-color:var(--pos-borda); box-shadow:0 0 0 3px var(--pos-fraco), var(--sombra)}
.fonte .topo-f{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:9px}
.fonte .nome{font-family:'Sora',sans-serif; font-weight:700; font-size:1rem}
.fonte p{font-size:var(--t-corpo); color:var(--text-body); margin:0 0 10px}
.fonte p:last-of-type{margin-bottom:0}
.fonte .obs{color:var(--text-faint); font-size:.83rem}
.fonte .bt{margin-top:12px}

/* ====================================================== 14f. importador */
.passos{display:grid; gap:18px}
.cartao.off{opacity:.45; pointer-events:none}
.passo{font-family:'Sora',sans-serif; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); font-weight:700; margin:0 0 6px}

.solta{border:2px dashed var(--border-forte); border-radius:var(--r); padding:34px 20px; text-align:center;
  background:var(--paper); cursor:pointer; transition:border-color .15s, background .15s}
.solta:hover,.solta.sobre{border-color:var(--accent); background:var(--tint)}
.solta p{margin:8px 0 0; color:var(--text-muted); font-size:.9rem}
.solta strong{font-family:'Sora',sans-serif; font-size:1.02rem; color:var(--text)}
input[type=file]{display:none}

#mapa td{vertical-align:top}
#mapa .rot{font-weight:600}
#mapa select{max-width:280px}
#mapa select.vazio{border-color:var(--neg-borda); background:var(--neg-fraco)}
#mapa select.ok{border-color:var(--pos-borda)}
.obrig{color:var(--accent); font-size:.78rem; font-family:'Sora',sans-serif}
.porque{color:var(--text-faint); font-size:.8rem; margin-top:3px}
.semele{color:var(--text-muted); font-size:.8rem; margin-top:3px}

.resumo{display:flex; gap:26px; flex-wrap:wrap; margin:4px 0 0}
.resumo div{min-width:88px}
.resumo .n{font-family:'Sora',sans-serif; font-size:var(--t-num); font-weight:700; display:block;
  line-height:1.2; text-align:left}
.resumo .l{color:var(--text-faint); font-size:.76rem; text-transform:uppercase; letter-spacing:.07em}

.acoes{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:18px}
.acoes .obs{color:var(--text-faint); font-size:.83rem}
.privado{display:flex; gap:11px; align-items:flex-start; margin:0 0 20px;
  background:var(--pos-fraco); border:1px solid var(--pos-borda); border-radius:var(--r);
  padding:14px 16px; color:var(--pos); font-size:.89rem}
.privado b{font-family:'Sora',sans-serif}
.privado svg{flex:0 0 auto; margin-top:2px}

/* ====================================================== 15. estado vazio */
.nada{background:var(--surface); border:1px dashed var(--border-forte); border-radius:var(--r-g);
  padding:46px 30px; text-align:center}
.nada .ico{width:52px; height:52px; border-radius:14px; background:var(--tint); color:var(--accent);
  display:grid; place-items:center; margin:0 auto 16px}
.nada .ico svg{width:24px; height:24px}
.nada h2{margin-bottom:7px}
.nada p{color:var(--text-muted); font-size:.92rem; max-width:52ch; margin:0 auto 18px}

/* ===================================================== 14. guarda de página */
html.verificando body > *:not(.barra-conta){visibility:hidden}

/* ======================================================== 15. responsivo */
@media (max-width:1080px){
  .corpo{grid-template-columns:1fr}
  .lateral{position:static; order:2; display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
  .conteudo{order:1}
  .resultado{grid-template-columns:1fr; gap:20px}
}
@media (max-width:820px){
  .menu{display:none}
  .menu.aberto{
    display:flex; position:absolute; top:var(--topo-h); left:0; right:0; flex-direction:column;
    align-items:stretch; background:var(--surface); border-bottom:1px solid var(--border);
    box-shadow:var(--sombra-alta); padding:6px; z-index:65;
  }
  .menu.aberto a{height:auto; padding:11px 13px; border-radius:8px}
  .menu.aberto a.on::after{display:none}
  .menu.aberto a.on{background:var(--tint)}
  .hamburguer{display:grid!important}
  .conta-b .nome{display:none}
  .campo.linha{flex-direction:column; gap:6px}
  .campo.linha > label{padding-top:0; flex:none}
  .corpo{padding:16px 14px 54px}
  .cartao{padding:17px 16px}
  .rolagem{margin:0 -16px; padding:0 16px}
}
.hamburguer{display:none}

@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }
@media print{ .topo,.lateral,.faixa{display:none} .corpo{grid-template-columns:1fr} }

/* ================================================ 20. navegação na lateral
   Era um menu horizontal no topo. Com treze telas não cabe numa linha — e a
   barra lateral com grupos é o desenho que o vendedor já conhece de qualquer
   ERP brasileiro. Em tela estreita ela vira gaveta, aberta pelo hambúrguer. */
.lnav{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-g);
  box-shadow:var(--sombra); padding:10px 8px}
.lgrupo + .lgrupo{margin-top:6px; padding-top:6px; border-top:1px solid var(--border)}
.lgrupo h3{font-size:.61rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint);
  margin:0 0 2px; padding:0 8px; font-family:'Sora',sans-serif; font-weight:700; line-height:1.5}
/* 5px de recuo vertical: são catorze abas mais as seções abertas numa coluna
   que não pode rolar, e cada pixel por linha vale 14 no total. */
.lnav a{display:flex; align-items:center; gap:10px; padding:5px 10px; border-radius:8px;
  font-size:.86rem; font-weight:500; color:var(--text-body); transition:background .12s, color .12s}
.lnav a:hover{background:var(--paper); color:var(--text); text-decoration:none}
.lnav .lrow > a.on{background:var(--tint); color:var(--accent); font-weight:600}
.lnav a svg{flex:none; opacity:.75}
.lnav .lrow > a.on svg{opacity:1}
/* `:not(.pino)` NÃO é detalhe. O contador também é um <span> filho direto do
   link, então esta regra o pegava junto e o `flex:1` daqui vencia o `flex:none`
   dele por especificidade (0,1,2 contra 0,1,0). Resultado: a pilulazinha de
   "3" esticava para 101px e dividia a linha meio a meio com o rótulo — que
   então era cortado ("Vincular a…"). O contador tem de encolher para o
   tamanho do número; a largura é do rótulo. */
.lnav a > span:not(.pino){flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---- a aba que abre: seta + lista das seções daquela tela ---------------
   A seta fica FORA do link (botão dentro de âncora é HTML inválido, e o clique
   navegaria junto). O alvo tem 30px de largura para dar onde clicar no dedo
   sem roubar largura do rótulo. */
.lrow{display:flex; align-items:center; gap:2px}
.lrow > a{flex:1; min-width:0}
.bt-seta{flex:none; width:24px; height:24px; display:grid; place-items:center;
  border:0; background:none; padding:0; cursor:pointer; border-radius:7px;
  color:var(--text-faint); transition:background .12s, color .12s}
.bt-seta:hover{background:var(--paper); color:var(--text)}
.bt-seta svg{transition:transform .16s ease}
.litem.aberto > .lrow > .bt-seta{color:var(--text-muted)}
.litem.aberto > .lrow > .bt-seta svg{transform:rotate(90deg)}

/* A lista das seções. O filete à esquerda é o que diz "isto pertence à aba de
   cima" sem precisar de recuo grande — a coluna tem 220px e não sobra. */
.lsub{list-style:none; margin:1px 0 4px; padding:0 0 0 20px; position:relative}
.lsub::before{content:""; position:absolute; left:20px; top:2px; bottom:2px;
  width:1px; background:var(--border)}
/* 20px do filete + 17px daqui = 37px, que é exatamente onde começa o rótulo da
   aba acima (10 de recuo + 17 do ícone + 10 do vão). As duas colunas de texto
   alinham em vez de quase alinhar. */
.lsub a{position:relative; padding:3px 9px 3px 17px; font-size:.79rem; font-weight:450;
  color:var(--text-muted); border-radius:7px; display:block;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lsub a:hover{background:var(--paper); color:var(--text)}
.lsub a:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
/* A seção que está na tela. Sem isto a lista vira um menu que não diz onde a
   pessoa está — e como só uma seção aparece por vez, "onde estou" é metade da
   informação. O filete grosso à esquerda é o mesmo gesto do marcador de aba. */
.lsub a.on{color:var(--accent); font-weight:600; background:var(--tint)}
.lsub a.on::before{content:""; position:absolute; left:-1px; top:4px; bottom:4px;
  width:3px; border-radius:2px; background:var(--accent)}
/* O contador de pendências: um número no menu é o que faz alguém abrir a tela. */
.pino{flex:none; min-width:19px; height:19px; padding:0 5px; border-radius:99px;
  background:var(--accent); color:#fff; font-family:'Sora',sans-serif; font-weight:700;
  font-size:.68rem; display:grid; place-items:center}

/* ---- o estado de carregando do roteador -------------------------------- */
.conteudo:focus{outline:none}
.carregando{display:flex; align-items:center; gap:10px; color:var(--text-muted);
  padding:64px 0; font-size:.92rem}
.giro{width:16px; height:16px; border:2px solid var(--border-forte); border-top-color:var(--accent);
  border-radius:50%; animation:giro .7s linear infinite; flex:none}
@keyframes giro{to{transform:rotate(360deg)}}

/* ---- a lateral vira gaveta em tela estreita ----------------------------- */
@media (min-width:1081px){ .hamburguer{display:none} }
@media (max-width:1080px){
  /* Em tela estreita a lateral fixa comeria a tela inteira: volta a ser gaveta,
     e o conteúdo recupera a largura toda. */
  .corpo{padding-left:22px}
  .conteudo{order:1}
  .lateral{
    z-index:70; width:min(86vw,300px);
    box-shadow:var(--sombra-alta);
    transform:translateX(-101%); transition:transform .18s ease;
  }
  .lateral.aberta{transform:none}
  .hamburguer{display:grid!important}
}

/* ================================================ 21. peças das telas novas
   Anúncios, Vincular, Comparar, Despesas e Fechamento do mês. */

/* ---- aviso dentro da página (o `.faixa` preto é outra coisa: a tarja do topo) */
.nota{background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--text-faint);
  border-radius:var(--r); padding:13px 16px; font-size:var(--t-corpo); color:var(--text-body);
  line-height:1.55; margin-bottom:18px; box-shadow:var(--sombra)}
.nota.aviso{border-left-color:var(--aviso); background:var(--aviso-fraco); border-color:var(--aviso-borda)}
.nota.boa{border-left-color:var(--pos); background:var(--pos-fraco); border-color:var(--pos-borda)}
.nota .bt{margin-left:8px; vertical-align:baseline}

/* ---- tira de indicadores solta, fora do bloco grande ------------------- */
.kpis-tira{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:var(--r-g);
  overflow:hidden; margin-bottom:18px; box-shadow:var(--sombra)}

/* ---- barra de filtros -------------------------------------------------- */
.filtros-linha{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.filtros-linha select{min-width:150px}
.campo-busca{flex:1; min-width:200px}
.chave{display:flex; align-items:center; gap:7px; font-size:.86rem; color:var(--text-body);
  cursor:pointer; user-select:none; white-space:nowrap}
.chave input{accent-color:var(--accent); width:15px; height:15px; cursor:pointer}

/* ---- células de tabela ------------------------------------------------- */
.nome-forte{font-weight:600; color:var(--text)}
/* `width:fit-content` porque `code` tem fundo tingido: em `display:block` puro a
   pastilha do código estica pela largura INTEIRA da célula e vira uma tarja
   rosa atravessando a tabela. Só não aparecia porque a coluna "Produto" era
   estreita — com 7 colunas ela nunca sobrava. Reduzir a tabela para 4 colunas
   no modo simples alargou a coluna e o defeito apareceu; a correção vale para
   os dois modos, porque um nome de produto curto produzia a mesma tarja. */
.sub-sku{display:block; width:fit-content; max-width:100%; font-size:.75rem;
  color:var(--text-faint); margin-top:2px}
tfoot td{border-top:2px solid var(--border-forte); border-bottom:none; padding-top:11px}
.tabela-lista tbody tr:hover{background:var(--paper)}

/* ---- curva ABC --------------------------------------------------------- */
.abc-grade{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px}
.abc-cartao{display:flex; flex-direction:column; gap:3px; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:13px 14px; font:inherit; color:var(--text); transition:border-color .15s, box-shadow .15s}
.abc-cartao:hover{border-color:var(--border-forte)}
.abc-cartao.on{border-color:var(--accent); box-shadow:0 0 0 3px var(--tint)}
.abc-cartao .letra{font-family:'Sora',sans-serif; font-weight:800; font-size:1.5rem; line-height:1}
.abc-cartao .n{font-weight:600; font-size:.86rem}
.abc-cartao .d{font-size:.76rem; color:var(--text-faint); line-height:1.35}
.abc-cartao .p{font-size:.76rem; color:var(--text-muted); margin-top:3px}
.curva{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:6px;
  font-family:'Sora',sans-serif; font-weight:700; font-size:.76rem; color:#fff}
.c-A{color:#147D4B} .c-B{color:#3A62C4} .c-C{color:#8A5A24} .c-D{color:#8E8E93} .c-Z{color:var(--text-faint)}
.curva.c-A{background:#147D4B; color:#fff} .curva.c-B{background:#3A62C4; color:#fff}
.curva.c-C{background:#B98A3E; color:#fff} .curva.c-D{background:#a9a099; color:#fff}
.curva.c-Z{background:var(--border-forte); color:var(--text-muted)}

/* ---- pendências de vínculo --------------------------------------------- */
.pendencia{display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  padding:14px 0; border-bottom:1px solid var(--border)}
.pendencia:last-child{border-bottom:0; padding-bottom:0}
.pq-info{min-width:220px; flex:1}
.pq-acao{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.pq-acao select{min-width:210px}

/* ---- comparar períodos -------------------------------------------------- */
.comparar-topo{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.comparar-topo label{display:flex; align-items:center; gap:8px; font-size:.88rem; color:var(--text-body)}
.seta-comp{color:var(--text-faint); font-size:1.1rem}
.comparar-grade{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px; margin-bottom:18px}
.comp-cartao{padding:16px 18px}
.comp-cartao .r{font-size:.75rem; color:var(--text-faint); margin-bottom:4px}
.comp-cartao .v{font-family:'Sora',sans-serif; font-weight:700; font-size:var(--t-num); letter-spacing:-.02em}
.comp-cartao .d{font-size:.78rem; color:var(--text-faint); margin-top:5px}
.delta{display:inline-block; font-weight:600; font-size:.76rem; padding:1px 6px; border-radius:99px;
  background:var(--paper); color:var(--text-muted); border:1px solid var(--border)}
.delta.boa{background:var(--pos-fraco); color:var(--pos); border-color:var(--pos-borda)}
.delta.ruim{background:var(--neg-fraco); color:var(--neg); border-color:var(--neg-borda)}

/* ---- despesas ----------------------------------------------------------- */
.duas-colunas{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px}
.cat-linha{display:grid; grid-template-columns:12px 1fr 2fr auto; gap:10px; align-items:center;
  padding:8px 0; border-bottom:1px solid var(--border); font-size:.87rem}
.cat-linha:last-child{border-bottom:0}
.cat-cor{width:12px; height:12px; border-radius:3px}
.cat-nome{color:var(--text-body)}
.cat-barra{height:7px; background:var(--paper); border-radius:99px; overflow:hidden}
.cat-barra i{display:block; height:100%; border-radius:99px}
.cat-valor{font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.cat-valor small{color:var(--text-faint); font-weight:400}

/* ---- importador desligado ----------------------------------------------- */
.solta.desligada{opacity:.6; cursor:not-allowed; border-style:dashed}
.solta.desligada:hover{border-color:var(--border-forte); background:var(--paper)}
.zona-ico{font-size:1.9rem; line-height:1}
.zona-t{font-family:'Sora',sans-serif; font-weight:700; font-size:1rem; margin:10px 0 4px!important;
  color:var(--text)!important}
.passo-linha{display:flex; gap:14px; align-items:flex-start}
.passo-num{font-family:'Sora',sans-serif; font-weight:800; font-size:1.05rem; color:var(--accent);
  background:var(--tint); border-radius:8px; padding:5px 9px; flex:none}
.passo-linha h3{font-family:'Sora',sans-serif; font-size:.98rem; margin:2px 0 4px}
.passo-linha p{font-size:.88rem; color:var(--text-body); margin:0; line-height:1.55}

/* ---- conexões ------------------------------------------------------------ */
.fonte-topo{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.fonte-ico{display:grid; place-items:center; width:34px; height:34px; border-radius:9px;
  background:var(--tint); color:var(--accent); flex:none}
.fonte-topo h2{font-family:'Sora',sans-serif; font-size:1.02rem; margin:0}
.fonte-linha{font-size:.89rem; color:var(--text-body); margin:0 0 12px}
.fonte-itens{list-style:none; padding:0; margin:0 0 12px; display:grid; gap:6px}
.fonte-itens li{display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-size:.87rem; padding:7px 10px; background:var(--paper); border-radius:7px}

/* ---- variações de etiqueta que faltavam --------------------------------- */
.tag.boa{border-color:var(--pos-borda); background:var(--pos-fraco); color:var(--pos)}
.tag.aviso{border-color:var(--aviso-borda); background:var(--aviso-fraco); color:var(--aviso)}

/* ---- gráfico próprio do fechamento -------------------------------------- */
.graf{width:100%; height:auto; display:block}

/* ============================================ 22. explicação no CLIQUE do "i"
   As telas tinham um parágrafo embaixo de cada seção. Junto vira parede de
   texto — e parede de texto é o que faz alguém fechar a aba.

   Era hover no título inteiro. Dois problemas reais: no celular não existe
   passar o mouse, e a bolha abria sozinha só de o ponteiro cruzar o título a
   caminho de outra coisa. Agora quem abre é um BOTÃO "i" — um alvo declarado,
   que funciona no toque, no teclado e no leitor de tela, e que só abre quando
   alguém pediu. */
.tem-dica{position:relative; display:inline-flex; align-items:center; gap:7px}
.marca-dica{
  display:grid; place-items:center; width:17px; height:17px; border-radius:50%; padding:0;
  border:1px solid var(--border-forte); background:var(--surface); color:var(--text-muted);
  font-family:'Inter',sans-serif; font-size:.66rem; font-weight:700; font-style:italic;
  line-height:1; flex:none; cursor:pointer; transition:background .15s, color .15s, border-color .15s;
}
.marca-dica:hover{background:var(--tint); color:var(--accent); border-color:var(--tint-borda)}
.marca-dica[aria-expanded="true"]{background:var(--accent); color:#fff; border-color:var(--accent)}
.bolha{
  position:absolute; top:calc(100% + 9px); left:0; z-index:80; width:min(330px,78vw);
  background:var(--flutua); color:var(--flutua-txt); border-radius:var(--r); padding:12px 14px;
  font-family:'Inter',sans-serif; font-size:var(--t-apoio); font-weight:400; line-height:1.55;
  letter-spacing:0; text-transform:none; box-shadow:var(--sombra-alta); display:none;
}
.bolha::before{content:''; position:absolute; bottom:100%; left:16px; border:6px solid transparent;
  border-bottom-color:var(--flutua)}
.bolha.aberta{display:block}
.bolha strong{color:var(--flutua-txt-forte)}

/* ================================================= 22b. seção que recolhe
   Telas longas (Visão geral tinha sete blocos seguidos) só são navegáveis se a
   pessoa puder fechar o que já leu. `<details>` de propósito: o navegador já
   resolve teclado, foco e busca na página — e o conteúdo continua existindo
   para quem imprime ou usa leitor de tela. */
.secao{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-g);
  box-shadow:var(--sombra); margin-bottom:16px; overflow:hidden}
.secao[hidden]{display:none}
.cabeca-s{
  display:flex; align-items:center; gap:12px; padding:15px 20px;
  border-bottom:1px solid var(--border);
}
.cabeca-s h2{flex:1; min-width:0}
.cabeca-s h2:focus{outline:none}
.cabeca-s .resumo-s{
  font-size:var(--t-apoio); color:var(--text-muted); font-variant-numeric:tabular-nums;
  white-space:nowrap; display:flex; align-items:center; gap:10px;
}
.secao > .dentro{padding:2px 20px 20px}
.secao > .dentro > :first-child{margin-top:16px}
@media (max-width:600px){
  .cabeca-s{padding:13px 15px}
  .secao > .dentro{padding:2px 15px 16px}
  .cabeca-s .resumo-s{display:none}
}

/* O resto do texto longo que sobrou vira algo que se abre, em vez de sumir. */
.legenda-fontes{margin:0 0 20px; font-size:.83rem; color:var(--text-muted)}
.legenda-fontes summary{cursor:pointer; color:var(--text-body); font-weight:500; padding:6px 0;
  list-style:none; display:flex; align-items:center; gap:7px}
.legenda-fontes summary::-webkit-details-marker{display:none}
.legenda-fontes summary::before{content:'+'; font-family:'Sora',sans-serif; font-weight:700;
  color:var(--accent); width:14px; display:inline-block}
.legenda-fontes[open] summary::before{content:'−'}
.legenda-fontes p{margin:4px 0 0 21px; line-height:1.6}

/* ============================================================ 23. central de IA */
.cartoes-ia{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:12px}
.ia-cartao{border:1px solid var(--border); border-radius:var(--r); padding:15px 17px;
  background:var(--paper); border-left:3px solid var(--text-faint)}
.ia-cartao.alerta{border-left-color:var(--neg); background:var(--neg-fraco); border-color:var(--neg-borda)}
.ia-cartao.sugestao{border-left-color:var(--pos); background:var(--pos-fraco); border-color:var(--pos-borda)}
.ia-cartao h3{font-family:'Sora',sans-serif; font-size:.95rem; margin:0 0 6px; line-height:1.35}
.ia-cartao p{font-size:var(--t-corpo); color:var(--text-body); line-height:1.6; margin:0 0 12px}
.ia-cartao .bt{background:var(--surface)}

.ideias-grade{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px}
.ideia{border:1px solid var(--border); border-radius:var(--r); padding:14px 16px; background:var(--surface)}
.ideia-topo{display:flex; justify-content:space-between; align-items:flex-start; gap:8px}
.ideia-topo h3{font-family:'Sora',sans-serif; font-size:.92rem; margin:0; line-height:1.3}
.ideia-nicho{font-size:.78rem; color:var(--text-faint); margin:3px 0 11px}
.ideia-dados{display:grid; gap:7px; margin:0}
.ideia-dados > div{display:flex; justify-content:space-between; gap:10px; font-size:.81rem}
.ideia-dados dt{color:var(--text-faint); margin:0}
.ideia-dados dd{margin:0; font-weight:600; font-variant-numeric:tabular-nums}
.pino.fraco{background:var(--tint); color:var(--accent); font-size:.62rem; letter-spacing:.04em}

/* ============================================ 24. a barra de rolagem da lateral
   SEM `max-height` AQUI. Havia um `calc(100vh - topo - 44px)`, herdado de quando
   a lateral era um cartão `sticky` dentro da coluna que rolava — os 44px eram o
   respiro de baixo daquele desenho. Depois que ela virou `fixed` com `bottom:0`,
   o teto passou a brigar com a posição: o painel parava 44px antes do fim da
   janela e sobrava uma faixa do fundo da página embaixo dele, que se lê como
   pedaço faltando. A altura agora vem de `top`+`bottom`, e só disso.

   `overscroll-behavior:contain` para o fim da lista não empurrar a página
   junto, que é o efeito que faz parecer que a rolagem "escapou". */
@media (min-width:1081px){
  .lateral{
    overscroll-behavior:contain;
    scrollbar-width:thin; scrollbar-color:var(--border-forte) transparent;
  }
  .lateral::-webkit-scrollbar{width:8px}
  .lateral::-webkit-scrollbar-thumb{background:var(--border-forte); border-radius:99px;
    border:2px solid transparent; background-clip:content-box}
  .lateral::-webkit-scrollbar-track{background:transparent}
}

/* ===================================================== 25. tabela padrão
   TODA tabela do produto usa esta casca: ferramentas em cima, tabela no meio,
   rodapé embaixo — tudo dentro da MESMA moldura.

   Antes a barra de filtros era um cartão solto flutuando acima de outro cartão.
   Dois retângulos empilhados leem como duas coisas sem relação, e o vendedor
   não liga o campo de busca à tabela que ele filtra. Uma moldura só é uma coisa
   só. */
.tabela-bloco{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-g);
  box-shadow:var(--sombra); overflow:hidden; margin-bottom:20px;
}
.tabela-bloco > .ferramentas{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:11px 16px; background:var(--paper); border-bottom:1px solid var(--border);
}
.tabela-bloco > .ferramentas .busca-t{flex:1; min-width:180px; position:relative}
.tabela-bloco > .ferramentas .busca-t input{padding:7px 11px 7px 32px; font-size:var(--t-apoio)}
.tabela-bloco > .ferramentas .busca-t svg{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; color:var(--text-faint); pointer-events:none;
}
.tabela-bloco > .ferramentas select{width:auto; min-width:140px; padding:7px 10px; font-size:var(--t-apoio)}
.tabela-bloco > .ferramentas .separa{width:1px; height:22px; background:var(--border); flex:none}
.tabela-bloco > .ferramentas .direita{margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap}

.tabela-bloco > .rolagem{margin:0; padding:0}
.tabela-bloco table{min-width:660px}
.tabela-bloco th{padding:11px 12px 10px 0; background:var(--surface); position:sticky; top:0; z-index:1}
.tabela-bloco th:first-child,.tabela-bloco td:first-child{padding-left:16px}
.tabela-bloco th:last-child,.tabela-bloco td:last-child{padding-right:16px}
.tabela-bloco tbody tr:last-child td{border-bottom:0}
.tabela-bloco > .rodape{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:10px 16px; background:var(--paper); border-top:1px solid var(--border);
  font-size:var(--t-apoio); color:var(--text-muted);
}
.tabela-bloco > .rodape .nada-achado{color:var(--text-faint)}

/* O indicador de ordem tem largura FIXA e existe em toda coluna ordenável,
   inclusive apagado. Sem isso, clicar para ordenar troca a largura do rótulo,
   a coluna se reajusta e a tabela inteira "pula" a cada clique. */
th.orden{cursor:pointer; user-select:none; white-space:nowrap}
th.orden .s{display:inline-block; width:9px; margin-left:5px; text-align:center; opacity:.32}
th.orden:hover .s{opacity:.7}
th.orden.on{color:var(--text)}
th.orden.on .s{opacity:1; color:var(--accent)}

/* ======================================================= 26. tema e privacidade
   O ÍCONE do botão é decidido no JS, não aqui. Tentar trocá-lo só com CSS exige
   repetir a media query em quatro sentidos (sistema claro, sistema escuro, e a
   escolha manual sobrepondo cada um) — e basta uma delas discordar para o botão
   mostrar o sol enquanto a tela está escura. Uma fonte de verdade só. */

/* Modo privacidade: borra o dinheiro para abrir o painel na frente de alguém. */
html.privado .n,html.privado .kpi dd,html.privado .kpi .v,html.privado .valor,
html.privado .linha .v,html.privado .comp-cartao .v,html.privado .perda .q{
  filter:blur(7px); transition:filter .12s; cursor:default;
}
html.privado .n:hover,html.privado .kpi dd:hover{filter:none}

/* =================================== 27. o botão da conta, agora NO TOPO
   Ele já morou na lateral (bloco com avatar, nome, e-mail e selo do plano) e
   voltou para a barra de cima. O motivo é altura: na lateral custava ~86px, e
   eram esses 86px que empurravam o menu para fora da janela quando várias
   listas de seções ficavam abertas. Na barra do topo ele custa zero altura,
   porque a barra já existe e o que sobra ali é largura.

   O E-MAIL NÃO VEM PARA O BOTÃO — só o nome da loja. O e-mail é longo, é o que
   mais varia de pessoa para pessoa, e no topo obrigaria a truncar. Ele vive no
   menu que este botão abre, onde há largura. */
.eu-topo{
  display:flex; align-items:center; gap:8px; max-width:210px; padding:4px 9px 4px 5px;
  border:1px solid transparent; border-radius:100px; background:transparent;
  font:inherit; color:var(--text); cursor:pointer; text-align:left;
  transition:background .12s, border-color .12s;
}
.eu-topo:hover{background:var(--paper); border-color:var(--border)}
.eu-topo[aria-expanded="true"]{background:var(--tint); border-color:var(--tint-borda)}
.eu-topo:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.eu-topo .av{width:26px; height:26px; font-size:.72rem}
.eu-topo .n{
  font-family:'Sora',sans-serif; font-weight:600; font-size:.88rem; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.eu-topo .seta{color:var(--text-faint); font-size:.6rem; flex:none}

/* Abaixo de 560px só o avatar: o nome da loja seria a primeira coisa a espremer
   a marca e os dois ícones, e o avatar sozinho continua sendo um alvo de toque
   de 26px com o menu inteiro atrás dele. */
@media (max-width:560px){
  .eu-topo{max-width:none; padding:4px; gap:0}
  .eu-topo .n,.eu-topo .seta{display:none}
}

/* O selo do plano desceu para o menu, junto do nome e do e-mail — os três são
   "quem sou eu", e agora moram no mesmo lugar. */
#pop-conta .quem .selo{margin-top:7px}

/* ============================================ 28. os quatro números iguais
   Era um número gigante (o lucro) e quatro pequenininhos ao lado. O gigante
   ganhava a atenção toda e os outros viravam enfeite — mas "faturou quanto" e
   "quantos pedidos" são o que dá SENTIDO ao lucro. Quatro do mesmo tamanho, o
   lucro em primeiro: a ordem carrega a importância, o tamanho não precisa. */
.kpis-destaque{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:var(--r-g);
  overflow:hidden; box-shadow:var(--sombra); margin-bottom:14px;
}
/* A TIRA É BAIXA DE PROPÓSITO.
   Ela é a resposta, não a tela: ocupava 100px de altura no alto de todas as
   telas e empurrava para baixo justamente o que a pessoa veio ver. O que
   encolheu foi o AR (recuo de 17 para 11, entrelinhas apertadas) e a legenda
   de apoio, que virou uma linha só com reticências — o número em si não
   diminuiu um ponto. */
.kpis-destaque .kpi{background:var(--surface); padding:11px 16px 12px}
.kpis-destaque .kpi .r{
  font-size:var(--t-mini); color:var(--text-muted); font-weight:500;
  margin:0 0 2px; display:flex; align-items:center; gap:6px; line-height:1.3;
}
.kpis-destaque .kpi .v{
  font-family:'Sora',sans-serif; font-weight:800; font-size:var(--t-num-g);
  letter-spacing:-.03em; line-height:1.05;
}
/* Uma linha só: "depois de taxas, produto, anúncios e imposto" quebrava em duas
   e era ela, sozinha, que dava à tira a altura de um cartão. */
.kpis-destaque .kpi .d{font-size:var(--t-mini); color:var(--text-faint); margin-top:2px;
  line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* O fundo do indicador diz o LADO, não a marca.
   Era o tinte laranja no primeiro cartão — laranja é a identidade do Scopiq e
   não tem lado: o mesmo fundo aparecia com lucro e com prejuízo. Agora quem
   pinta é o resultado, e só nos dois cartões que têm resultado (ver a nota em
   `desenharResultado`). O número usa `--pos-vivo`, que só é legível porque
   tem 27px em negrito; `--pos` seria apagado nesse tamanho e `--pos-vivo`
   reprovaria numa célula de tabela. */
.kpis-destaque .kpi.bom{background:var(--pos-fraco); box-shadow:inset 3px 0 0 var(--pos)}
/* A legenda de apoio cabe inteira no celular, onde a coluna é larga. */
@media (max-width:900px){ .kpis-destaque .kpi .d{white-space:normal} }
.kpis-destaque .kpi.bom .r{color:var(--pos); font-weight:600}
.kpis-destaque .kpi.bom .v{color:var(--pos-vivo)}
.kpis-destaque .kpi.ruim{background:var(--neg-fraco); box-shadow:inset 3px 0 0 var(--neg)}
.kpis-destaque .kpi.ruim .r{color:var(--neg); font-weight:600}
.kpis-destaque .kpi.ruim .v{color:var(--neg-vivo)}
@media (max-width:900px){ .kpis-destaque{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:420px){ .kpis-destaque{grid-template-columns:1fr} }

/* ================================ 29. para onde foi o dinheiro (régua + lista)
   Substitui a cascata.
   A cascata codifica uma SEQUÊNCIA de variações, e nada aqui é sequencial: a
   comissão não acontece "depois" do custo do produto. Ela obrigava a comparar
   comprimentos apoiados em nove bases diferentes, que é a comparação que a
   leitura de gráfico faz pior — e o "Sobrou", a resposta da própria pergunta,
   saía como um risco de 5px porque a margem é pequena.
   Agora: uma régua de 100% (a proporção) e uma lista com base ZERO comum (o
   ranking). Cada marca faz uma coisa só.

   Em HTML/CSS e não em SVG de propósito: o SVG tinha `viewBox` fixo e escalava
   junto com a tela, então num celular o rótulo de 11px virava 4px. Div com
   largura em % reflui em vez de encolher. */
.regua{display:flex; height:34px; border-radius:var(--r); overflow:hidden;
  background:var(--border); gap:2px; margin:4px 0 10px}
.regua .fatia{
  min-width:3px; display:grid; place-items:center; position:relative;
  font-family:'Sora',sans-serif; font-size:.72rem; font-weight:700;
  overflow:hidden; white-space:nowrap;
}
/* A fatia "não dá para dizer": listrada, sem cor de estado. Verde ali seria o
   desenho afirmando um lucro que ninguém calculou — ver `desenharCanais`. */
.regua .fatia.incerta{
  color:var(--text-muted); font-weight:700;
  background:repeating-linear-gradient(45deg,
    var(--paper) 0 6px, var(--border) 6px 12px);
}
.regua .fatia.sobrou{background:var(--pos); color:var(--pos-tinta)}
.regua .fatia.sobrou.ruim{background:var(--neg); color:var(--neg-tinta)}
.regua-legenda{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:var(--t-mini);
  color:var(--text-muted); margin-bottom:20px}
.regua-legenda span{display:inline-flex; align-items:center; gap:6px}
/* A porcentagem na legenda cobre as fatias finas, onde nao cabe texto dentro:
   sem isto "Publicidade" e a unica sem numero, e some do que da para comparar. */
.regua-legenda b{font-variant-numeric:tabular-nums; color:var(--text-body); font-weight:700}
.regua-legenda i{width:10px; height:10px; border-radius:3px; flex:none}

.saidas{display:grid; gap:2px}
.saida{
  display:grid; grid-template-columns:minmax(120px,1.15fr) minmax(0,2.4fr) 96px 92px;
  gap:14px; align-items:center; padding:7px 0; font-size:var(--t-tabela);
}
.saida .nome{color:var(--text-body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.saida .trilho{height:15px; background:var(--paper); border-radius:5px; overflow:hidden}
.saida .trilho i{display:block; height:100%; border-radius:5px}
.saida .rs{text-align:right; font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap}
.saida .cem{text-align:right; font-variant-numeric:tabular-nums; color:var(--text-muted); white-space:nowrap}
.saida.total{border-top:2px solid var(--border-forte); margin-top:7px; padding-top:11px}
.saida.total .nome{font-family:'Sora',sans-serif; font-weight:700; color:var(--text)}
.saida.total .rs,.saida.total .cem{font-family:'Sora',sans-serif; font-weight:700}
.saida.total .rs{font-size:1.02rem}
.saidas-cab{
  display:grid; grid-template-columns:minmax(120px,1.15fr) minmax(0,2.4fr) 96px 92px;
  gap:14px; font-size:var(--t-etiqueta); letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-faint); font-family:'Sora',sans-serif; font-weight:700;
  padding-bottom:7px; border-bottom:1px solid var(--border); margin-bottom:4px;
}
.saidas-cab .rs,.saidas-cab .cem{text-align:right}
@media (max-width:620px){
  .saida,.saidas-cab{grid-template-columns:minmax(0,1fr) 92px 86px}
  .saida .trilho,.saidas-cab .trilho-h{display:none}
}

/* A frase que abre — é ela que entrega a conclusão antes de qualquer gráfico. */
.frase-topo{font-size:1.02rem; color:var(--text-body); margin:0 0 14px; line-height:1.5}
.frase-topo strong{font-family:'Sora',sans-serif; color:var(--text)}

/* ---- canais: um cartão com a régua de 100% por canal --------------------
   A mesma régua da Visão geral, repetida por canal, com a MESMA paleta e a
   MESMA ordem de grupos — é a ordem fixa que permite comparar dois cartões
   pela posição da faixa. Ver a nota longa em `desenharCanais`. */
.canais-cartoes{display:grid; gap:13px; grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.canal-cartao{border:1px solid var(--border); border-radius:var(--r-g); padding:13px 15px;
  background:var(--surface)}
.canal-cartao.ruim{border-color:var(--neg-borda); background:var(--neg-fraco)}
.canal-cartao .topo-c{display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:9px}
.canal-cartao .topo-c .nome{font-weight:600}
.canal-cartao .topo-c .sobra{display:flex; align-items:center; gap:6px; white-space:nowrap}
.canal-cartao .topo-c .sobra small{color:var(--text-faint); font-size:.72rem}
.canal-cartao .regua{height:26px; margin:0 0 9px}
.canal-cartao .regua .fatia{font-size:.68rem}
.canal-cartao .rodape-c{display:flex; flex-wrap:wrap; gap:4px 14px;
  font-size:var(--t-mini); color:var(--text-muted)}
.canal-cartao .rodape-c strong{color:var(--text-body); font-variant-numeric:tabular-nums}
/* Uma legenda só, acima de todos os cartões: repeti-la em cada um seria a mesma
   lista escrita quatro vezes, e ela é idêntica por construção. */
.legenda-canais{margin-bottom:13px}

/* ===================================== 30. canais: UMA linha por canal
   Eram dois gráficos lado a lado, com os mesmos nomes escritos duas vezes e a
   comparação feita indo e voltando entre as duas listas. Numa linha só, "vende
   muito e sobra pouco" é uma barra comprida ao lado de uma pastilha pequena.
   Ver a nota longa em `desenharCanais`. */
.canais-lista{display:flex; flex-direction:column}
.linha-c{
  display:grid; align-items:center; gap:14px; padding:9px 0;
  grid-template-columns:minmax(92px,1fr) minmax(60px,2fr) auto auto minmax(112px,auto);
  font-size:var(--t-tabela); border-bottom:1px solid var(--border);
}
.linha-c:last-child{border-bottom:0}
.linha-c .rot{color:var(--text); font-weight:600; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.linha-c .trilho{height:16px; background:var(--paper); border-radius:5px; position:relative}
.linha-c .trilho i{display:block; height:100%; border-radius:5px; background:var(--s3)}
.linha-c .fat{text-align:right; font-variant-numeric:tabular-nums; font-weight:600;
  white-space:nowrap; min-width:96px; color:var(--text-body)}
.linha-c .sobra{text-align:right; min-width:92px}
/* A comparação com a média em PALAVRA: funciona sem cor, e deixa o verde e o
   vermelho falarem só de sinal (sobrou / faltou).
   `.med`, e NÃO `.nota`: `.nota` já é a caixa de recado do sistema (fundo,
   contorno, filete à esquerda), e reusar o nome punha cada célula desta coluna
   dentro de um retângulo que ainda por cima transbordava o cartão. */
.linha-c .med{text-align:right}
.comp-med{font-size:var(--t-mini); color:var(--text-faint); white-space:nowrap}
.comp-med.baixo{color:var(--aviso); font-weight:600}

/* O cabeçalho da lista: mesma grade, sem barra, sem linha embaixo. */
.linha-c.cab{border-bottom:1px solid var(--border-forte); padding-bottom:7px}
.linha-c.cab span{font-size:var(--t-mini); text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-faint); font-weight:700; font-family:'Sora',sans-serif}
.linha-c.cab .fat,.linha-c.cab .sobra{text-align:right}

@media (max-width:720px){
  .linha-c{grid-template-columns:minmax(80px,1fr) auto auto; gap:9px}
  .linha-c .trilho,.linha-c .med{display:none}
  .linha-c.cab .trilho{display:none}
}
.media-txt{font-size:var(--t-mini); color:var(--text-faint); margin-top:10px}

/* ================================ 31. a rampa sequencial das saídas de dinheiro
   Seis degraus, do maior gasto para o menor. Definidos por TEMA e não por
   `opacity`: opacidade compõe com o que estiver atrás, então um único valor
   vira duas cores diferentes no claro e no escuro, e nenhuma delas dá para
   conferir. No escuro a rampa inverte o brilho — o maior gasto é o mais claro,
   porque é o fundo que ficou escuro, não a hierarquia. */
:root{
  --s1:#B81900; --s2:#D4331A; --s3:#E8543D; --s4:#F08170; --s5:#F5AEA3; --s6:#E4BEB8;
  /* A tinta do rotulo DENTRO de cada fatia, escolhida pela luminancia dela e
     conferida uma a uma. Branco fixo dava 1,59:1 sobre #F5C3A3.
     ESTAS SEIS LINHAS PRECISAM EXISTIR NOS TRES BLOCOS DE TEMA. Faltaram no
     `[data-tema="escuro"]` uma vez, e trocar o tema no botao (nao no sistema)
     deixava texto escuro sobre fatia escura.
     RECONFERIDAS no matiz 8 (2026-08-13): a `--s2` TROCOU de tinta escura para
     branca (4,90:1 contra 3,68:1). Deslocar o matiz muda qual tinta ganha, entao
     esta lista nao acompanha a rampa por copia — cada uma foi medida de novo. */
  --s1-t:#ffffff; --s2-t:#ffffff; --s3-t:#2B0D08;
  --s4-t:#2B0D08; --s5-t:#2B0D08; --s6-t:#2B0D08;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --s1:#4D8BFF; --s2:#E8513A; --s3:#C9432E; --s4:#A63625; --s5:#822A1D; --s6:#5E1F15;
    --s1-t:#2B0D08; --s2-t:#2B0D08; --s3-t:#ffffff;
    --s4-t:#ffffff; --s5-t:#ffffff; --s6-t:#ffffff;
  }
}
:root[data-tema="escuro"]{
  --s1:#4D8BFF; --s2:#E8513A; --s3:#C9432E; --s4:#A63625; --s5:#822A1D; --s6:#5E1F15;
  --s1-t:#2B0D08; --s2-t:#2B0D08; --s3-t:#ffffff;
  --s4-t:#ffffff; --s5-t:#ffffff; --s6-t:#ffffff;
}

/* ============================== 32. cartões da Central de IA que se abrem
   Antes cada cartão trazia o parágrafo inteiro. Com seis ou sete deles, a tela
   virava uma parede de texto e ninguém lia nenhum — o título, que é a
   informação, ficava competindo com a explicação, que é o detalhe.
   Agora o título é a tela; a explicação abre no clique. */
.ia-cartao{padding:0; overflow:hidden}
.ia-cartao > summary{
  display:flex; align-items:flex-start; gap:11px; padding:14px 16px; cursor:pointer;
  list-style:none; user-select:none;
}
.ia-cartao > summary::-webkit-details-marker{display:none}
.ia-cartao > summary:hover{background:rgba(0,0,0,.02)}
.ia-cartao > summary h3{flex:1; min-width:0; font-family:'Sora',sans-serif; font-size:.95rem;
  margin:0; line-height:1.4; font-weight:700}
.ia-cartao > summary .seta-ia{flex:none; color:var(--text-faint); transition:transform .18s; margin-top:2px}
.ia-cartao[open] > summary .seta-ia{transform:rotate(90deg)}
.ia-cartao > .ia-dentro{padding:0 16px 15px 40px}
.ia-cartao > .ia-dentro p{font-size:var(--t-corpo); color:var(--text-body); line-height:1.6; margin:0 0 12px}
.ia-cartao .ponto{flex:none; width:9px; height:9px; border-radius:50%; margin-top:7px}
.ia-cartao.alerta .ponto{background:var(--neg)}
.ia-cartao.sugestao .ponto{background:var(--pos)}

/* ================================ 33. o bloco que puxa o cliente pela manga
   "Descobrir produtos" subiu para o topo da Central de IA e ganhou moldura
   própria — é o que faz alguém querer o produto antes de ter usado. */
.destaque-ia{
  border:1px solid var(--tint-borda); background:var(--tint); border-radius:var(--r-g);
  padding:20px 22px; margin-bottom:20px; box-shadow:var(--sombra);
}
.destaque-ia > .cab{margin-bottom:4px}
.destaque-ia h2{font-size:1.15rem}
.destaque-ia .ideia{background:var(--surface); border-color:var(--tint-borda)}
.destaque-ia .sub{color:var(--text-body); font-size:var(--t-corpo); margin:6px 0 16px; max-width:70ch}
/* A marca de exemplo fica NO DADO, não num aviso separado que se lê uma vez e
   nunca mais. Quem olhar um número saberá de onde ele veio. */
.marca-exemplo{
  display:inline-block; font-size:var(--t-etiqueta); letter-spacing:.08em; text-transform:uppercase;
  font-family:'Sora',sans-serif; font-weight:700; padding:2px 7px; border-radius:99px;
  background:var(--surface); color:var(--text-muted); border:1px solid var(--border-forte);
}
/* a ideia também abre no clique */
.ideia{padding:0}
.ideia > summary{display:flex; justify-content:space-between; align-items:flex-start; gap:8px;
  padding:14px 16px; cursor:pointer; list-style:none}
.ideia > summary::-webkit-details-marker{display:none}
.ideia > summary:hover{background:var(--paper)}
.ideia > summary h3{font-family:'Sora',sans-serif; font-size:.92rem; margin:0; line-height:1.3}
.ideia .ideia-nicho,.ideia .ideia-dados,.ideia > p{padding-left:16px; padding-right:16px}
.ideia > p:last-child{padding-bottom:14px}
.ideia .ideia-nicho{margin:0 0 10px}

/* ============================================ 34. peças da tela de ajustes */
.opcoes{display:flex; flex-wrap:wrap; gap:7px}
.opcao{
  display:inline-flex; align-items:center; font-family:'Inter',sans-serif; font-size:var(--t-apoio);
  font-weight:500; padding:6px 13px; border-radius:99px; border:1px solid var(--border-forte);
  background:var(--surface); color:var(--text-body); cursor:pointer;
}
button.opcao:hover{background:var(--paper); color:var(--text)}
.opcao.on{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}

.chaves{display:grid; gap:2px}
.chave-linha{
  display:flex; align-items:flex-start; gap:11px; padding:11px 0;
  border-bottom:1px solid var(--border); cursor:default;
}
.chave-linha:last-child{border-bottom:0}
.chave-linha input{accent-color:var(--accent); width:16px; height:16px; margin-top:2px; flex:none}
.chave-linha span{font-size:var(--t-corpo); color:var(--text-body); line-height:1.5}
.chave-linha strong{font-weight:600; color:var(--text)}
.chave-linha em{display:block; font-style:normal; color:var(--text-faint);
  font-size:var(--t-apoio); margin-top:2px}

/* A MARCA NO TEMA ESCURO — ver a mesma regra em conta.css.
   O wordmark é um PNG de tinta escura e sumiria no fundo escuro. `invert`
   sozinho jogaria o laranja para ciano; o `hue-rotate(180deg)` devolve o matiz
   (21° → 201° → 21°), então sai um wordmark claro com o ponto ainda laranja. */
:root[data-tema="escuro"] .marca img{filter:invert(1) hue-rotate(180deg)}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .marca img{filter:invert(1) hue-rotate(180deg)}
}
/* tabela dentro de uma seção que recolhe: a moldura da seção já fecha embaixo */
.secao .tabela-bloco{margin-bottom:0; box-shadow:none}

/* O campo de ajuste alinha à ESQUERDA e tem largura de leitura.
   Sem isto, a coluna do valor herda a largura inteira da seção e o campo
   flutua longe do próprio rótulo — com a linha de pontos entre os dois, quem
   lê tem de atravessar a tela para ligar uma coisa à outra. */
.campo.linha > div{flex:1 1 auto; min-width:0; max-width:560px; text-align:left}
.campo.linha > div > input,.campo.linha > div > .opcoes{width:100%}
.campo.linha > div > input.curto{width:auto; min-width:190px}
.campo.linha{border-bottom:1px dashed var(--border); padding-bottom:16px; margin-bottom:16px}
.campo.linha:last-child{border-bottom:0; padding-bottom:0; margin-bottom:0}

/* ============================== 34. a faixa de resumo da IA, no alto de cada tela
   UMA LINHA, e a primeira coisa que se lê depois do título.

   "Destacado" aqui é POSIÇÃO e CONTRASTE DE FUNDO, não tamanho de letra. A
   faixa já ganha a atenção por estar sozinha entre o título e o conteúdo, num
   fundo que nenhum outro bloco da tela usa. Aumentar a fonte junto disso faria
   ela competir com o <h1> logo acima — e o título é que diz onde a pessoa está.

   O texto usa `--text` (12,67:1 no tinte claro, 15,75:1 no escuro), NUNCA
   `--accent`: vermelho sobre tinte vermelho é 4,50:1 no limite, e esta é a
   linha mais lida da tela. O vermelho fica no filete e no selo, que são forma,
   não leitura. */
.ia-linha{
  display:flex; align-items:flex-start; gap:11px;
  background:var(--tint); border:1px solid var(--tint-borda);
  border-left:4px solid var(--accent);
  border-radius:var(--r); padding:12px 15px; margin:0 0 18px;
}
.ia-marca{
  display:inline-flex; align-items:center; gap:5px; flex:none;
  font-family:'Sora',sans-serif; font-size:var(--t-etiqueta); font-weight:700;
  letter-spacing:.1em; color:var(--accent); text-transform:uppercase;
  padding-top:2px;
}
.ia-marca svg{display:block}
/* A frase e a sugestão na MESMA linha enquanto couber: são duas metades de uma
   leitura só ("isto está assim" + "faça isto"), e separá-las em dois parágrafos
   faria a segunda parecer opcional. Em tela estreita a sugestão cai para baixo
   sozinha, pelo `inline`. */
.ia-frase{margin:0; font-size:var(--t-corpo); line-height:1.45; color:var(--text)}
.ia-frase strong{font-weight:700}
.ia-sug{color:var(--text-muted)}
.ia-sug strong{color:var(--text); font-weight:600}

@media (max-width:720px){
  .ia-linha{flex-direction:column; gap:7px; padding:11px 13px}
  .ia-sug{display:block; margin-top:3px}
}

/* Modo privacidade: a faixa cita dinheiro, então borra junto com o resto. Sem
   isto, esconder os valores deixaria o faturamento escrito por extenso no alto
   da tela — o vazamento mais visível possível, logo no bloco mais destacado. */
html.privado .ia-frase strong{filter:blur(5px)}

/* ==========================================================================
   MODO SIMPLES
   ==========================================================================
   Quase tudo o que este modo faz acontece no JavaScript: as telas, as seções e
   as colunas que não entram simplesmente não são DESENHADAS. Isso é de
   propósito — esconder com `display:none` deixaria o gráfico ser calculado e
   desenhado dentro de uma caixa invisível, e num aparelho antigo (o de quem
   liga este modo) esse é justamente o custo que se queria tirar.

   O que sobra para o CSS são três coisas que o HTML não resolve: a chave no
   topo, a tira de dois números em vez de quatro, e o empilhamento das seções.
   ========================================================================== */

/* --- a chave, no topo, ao lado do olho e do tema -------------------------
   É a única das três que tem RÓTULO em texto. O olho e a lua são convenções
   que a pessoa já traz de outros produtos; "modo simples" não é convenção
   nenhuma — um ícone sozinho ali seria um terceiro quadradinho misterioso, e
   quem mais precisa do modo é exatamente quem não clica em quadradinho
   misterioso para descobrir o que ele faz. */
.chave-simples{
  display:flex; align-items:center; gap:7px; height:34px; padding:0 11px 0 9px;
  border:1px solid var(--border); border-radius:100px; background:transparent;
  font:inherit; font-size:.82rem; font-weight:500; color:var(--text-muted);
  cursor:pointer; white-space:nowrap;
  transition:background .12s, border-color .12s, color .12s;
}
.chave-simples svg{width:17px; height:17px; display:block; flex:none}
.chave-simples:hover{background:var(--paper); color:var(--text); border-color:var(--border-forte)}
.chave-simples:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* Ligado, ele usa o tinte da marca — o mesmo tratamento do seletor de período
   aberto e do botão da conta aberto. Não é uma cor nova: é o estado "isto está
   ativo" que o produto inteiro já usa, então não há um vocabulário a aprender. */
.chave-simples[aria-checked="true"]{
  background:var(--tint); border-color:var(--tint-borda); color:var(--accent); font-weight:600;
}

/* Abaixo de 900px fica só o ícone. O rótulo é a primeira coisa a espremer a
   marca e os outros dois botões, e nessa largura o topo já perdeu o nome da
   loja pelo mesmo motivo. O `title` continua dizendo o que é, e a segunda
   porta (Configurações → Aparência) continua tendo o nome escrito por extenso. */
@media (max-width:900px){
  .chave-simples{padding:0; width:34px; justify-content:center; border-color:transparent}
  .chave-simples .rot{display:none}
  .chave-simples[aria-checked="true"]{border-color:var(--tint-borda)}
}

/* --- dois números em vez de quatro ---------------------------------------
   A grade é de quatro colunas fixas; com dois filhos, cada um ocuparia metade
   da largura e o número cresceria para um tamanho que grita. Duas colunas de
   verdade mantêm a mesma altura de tira e a mesma escala tipográfica — muda o
   que está na tela, não o quanto ela berra. */
.kpis-destaque.dois{grid-template-columns:repeat(2,minmax(0,1fr))}
/* ⚠ E A REGRA DE CELULAR TEM DE SER REPETIDA AQUI.
   `.kpis-destaque.dois` são duas classes contra a uma de
   `@media (max-width:420px){ .kpis-destaque{grid-template-columns:1fr} }` — ela
   ganha por especificidade, em qualquer largura, e a media query acima passa a
   não valer. Foi medido: a 390px os dois números saíam CORTADOS ("R$ 95.729,5"
   e "R$ 629.937,"), porque cada célula ficava com ~175px para um número de 27px
   que não quebra linha. Nenhuma asserção pegaria isso; apareceu na captura.
   Repetir a regra com a mesma especificidade é o conserto — não aumentar a
   fonte, não encolher o número. */
@media (max-width:420px){ .kpis-destaque.dois{grid-template-columns:1fr} }

/* O aviso que desceu do "De cada R$ 100" para a linha do "Sobrou" quando falta
   custo. Cor de aviso, não de erro: o número não está errado, está incompleto.
   Herda o tamanho da linha `.d`, então não empurra a tira para baixo. */
.kpis-destaque .kpi .d .alerta-inline{color:var(--aviso); font-weight:600}

/* --- as seções empilham ---------------------------------------------------
   No modo completo elas são ABAS: `mostrarParte` deixa uma visível e esconde as
   outras. No modo simples são duas seções curtas e todas ficam visíveis, então
   precisam do respiro entre elas que o modo de aba nunca precisou — sem isto os
   dois blocos encostam e leem-se como um só. */
html.simples #tela .secao + .secao{margin-top:18px}

/* Sem grupos na lateral, a linha divisória entre eles não tem o que dividir. */
html.simples .lgrupo + .lgrupo{margin-top:0; padding-top:0; border-top:0}