/* ==========================================================================
   Acabamento — o "leve up" do visual (cereja do bolo).
   Só refina o que o app.css já desenha: superfícies, estados, tabelas, cores de texto,
   ritmo. Nada de layout novo. Para voltar ao visual anterior basta tirar o <link> deste arquivo.
   Ordem: app.css → acabamento.css → fundos.css → retro.css (a retrospectiva não é tocada aqui).
   ========================================================================== */

/* ----------------------------- tokens ----------------------------- */
:root{
  /* cinza de apoio um tom mais firme (passa AA também sobre o --bg2) — só no claro:
     os blocos escuros do app.css têm especificidade maior e continuam valendo */
  --muted:#67616E;
  /* tom da sombra ("R G B"): marrom de papel no claro, preto no escuro */
  --tom:78 56 28;
  /* superfícies: fio de contorno + sombra quente em camadas (papel sobre papel) */
  --sombra:0 0 0 1px rgba(78,56,28,.055),0 1px 2px rgba(78,56,28,.06),0 12px 28px -18px rgba(78,56,28,.3);
  --sombra-forte:0 0 0 1px rgba(78,56,28,.06),0 2px 6px rgba(78,56,28,.07),0 26px 52px -26px rgba(78,56,28,.45);
  /* texto sobre as tintas bom/ruim/alerta com contraste AA */
  --good-txt:#0B7D3E; --bad-txt:#C8292F; --warn-txt:#9A6300;
  /* dedução (custo) em tom de vinho: o vermelho cheio fica só para o prejuízo */
  --custo:color-mix(in srgb,var(--bad) 45%,var(--ink2));
  /* realce leve de linha de tabela / faixa de total */
  --realce:color-mix(in srgb,var(--bg) 55%,var(--card));
  --seg-on:var(--card);
  --esq-luz:color-mix(in srgb,var(--card) 70%,transparent);
  --selecao:color-mix(in srgb,var(--emp) 24%,transparent);
  --rola-sombra:rgb(23 21 28 / .13);
  /* setinha única da casa (selects e filtros) */
  --seta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2367616E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){ :root:not([data-tema="claro"]){
  --tom:0 0 0;
  /* no escuro sombra preta não aparece: um fio de luz recorta o cartão */
  --sombra:0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.035),0 14px 34px -22px rgba(0,0,0,.85);
  --sombra-forte:0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.05),0 28px 60px -24px rgba(0,0,0,.9);
  --good-txt:#2BB866; --bad-txt:#F4595E; --warn-txt:#F0A92A;
  --seg-on:var(--line2);
  --esq-luz:color-mix(in srgb,var(--line2) 80%,transparent);
  --selecao:color-mix(in srgb,var(--emp) 45%,transparent);
  --rola-sombra:rgb(0 0 0 / .5);
  --seta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A09AA8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
} }
:root[data-tema="escuro"]{
  --tom:0 0 0;
  --sombra:0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.035),0 14px 34px -22px rgba(0,0,0,.85);
  --sombra-forte:0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.05),0 28px 60px -24px rgba(0,0,0,.9);
  --good-txt:#2BB866; --bad-txt:#F4595E; --warn-txt:#F0A92A;
  --seg-on:var(--line2);
  --esq-luz:color-mix(in srgb,var(--line2) 80%,transparent);
  --selecao:color-mix(in srgb,var(--emp) 45%,transparent);
  --rola-sombra:rgb(0 0 0 / .5);
  --seta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A09AA8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ----------------------------- tipografia ----------------------------- */
/* manchetes em linhas equilibradas; parágrafos sem palavra sozinha na última linha */
.cab h1,.manchete h1,.modal-cab h2{text-wrap:balance}
.cab p,.manchete p,.leitura p,.card .sub,.nota,.aviso>div,.vazio{text-wrap:pretty}
/* hierarquia de pesos: apoio em 500; 700/800 ficam para rótulo e número */
.cab p,.manchete p,.card .sub,.kpi-rod,.lm,.nota,.leitura p,.dre-l .n small,.marca-txt small,.t td,.vazio{font-weight:500}
.t td.pos,.t td.neg{font-weight:600}
.rodape{color:var(--muted);font-weight:500}
/* "R$" e "mil" menores nos números grandes (span criado por moedaMenor no app.js) */
.kpi-val .rs,.cc-val .rs{font-size:.58em;letter-spacing:-.01em;opacity:.72}
/* números que se empilham ou se comparam: algarismos de largura fixa */
.lm b,.rank-v,.delta,.estado,.resumo-v .lin b,.cal span,.marca-txt small,.t td{font-variant-numeric:tabular-nums}
/* rótulos em caixa-alta com um tamanho e um espaçamento só; o olho um pouco mais aberto */
.t th,.campo label,.campo>span{font-size:11.5px;letter-spacing:.06em}
.olho{font-size:11.5px;letter-spacing:.11em}
/* título de seção um degrau acima do título do cartão, com mais ar antes */
.secao{font-size:22px;letter-spacing:-.025em;margin:36px 0 14px;flex-wrap:wrap;row-gap:2px}
.secao small{font-weight:500}
/* seletor de mês: "Setembro de 2026" (o capitalize inline fazia "Setembro De 2026") */
.btn-ico[data-mes]+b{text-transform:none!important;font-variant-numeric:tabular-nums}
.btn-ico[data-mes]+b::first-letter{text-transform:uppercase}
/* saudação: o emoji não fica sozinho numa linha no celular */
.manchete .saud{flex-wrap:nowrap;align-items:flex-start}
.manchete .saud .sol{flex-shrink:0}

/* ----------------------------- superfícies ----------------------------- */
/* topo: vidro que guarda a cor do que passa por baixo; fio e sombra só depois de rolar */
.topo{-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px)}
@supports (animation-timeline:scroll()){
  /* (página curta, que não rola: a linha do tempo fica inativa e vale o topo de sempre, com o fio) */
  .topo{animation:topo-solto linear both;animation-timeline:scroll();animation-range:0 64px}
  @keyframes topo-solto{
    from{box-shadow:0 12px 24px -22px transparent;border-bottom-color:transparent}
    to{box-shadow:0 12px 24px -22px rgb(var(--tom) / .55);border-bottom-color:var(--line)}
  }
}
/* Jardim: palmeira e céu passam atrás do topo; o fio fica sempre, senão o desenho é cortado a seco */
:root[data-fundo="jardim"] .topo{animation:none}
/* cartões coloridos: sombra na cor da própria plataforma + fio de luz em cima */
.cc{--cc-s:var(--emp-deep);--cc-anel:rgba(0,0,0,.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px var(--cc-anel),
    0 1px 2px color-mix(in srgb,var(--cc-s) 25%,transparent),0 18px 32px -22px color-mix(in srgb,var(--cc-s) 85%,transparent)}
.cc-ML{--cc-s:var(--ml-deep)} .cc-Shopee{--cc-s:var(--sh-deep)} .cc-Externa{--cc-s:var(--ext-deep)} .cc-TikTok{--cc-s:#000}
.cc.clicavel:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px var(--cc-anel),
  0 2px 4px color-mix(in srgb,var(--cc-s) 25%,transparent),0 28px 44px -24px color-mix(in srgb,var(--cc-s) 95%,transparent)}
/* TikTok preto some no fundo escuro: anel de luz */
@media (prefers-color-scheme: dark){ :root:not([data-tema="claro"]) .cc-TikTok{--cc-anel:rgba(255,255,255,.1)} }
:root[data-tema="escuro"] .cc-TikTok{--cc-anel:rgba(255,255,255,.1)}
/* cartão colorido ao lado de cartão branco usa o mesmo raio (a vitrine do Início continua mais redonda) */
.grade:has(>.card)>.cc{border-radius:var(--r-lg)}
/* avisos com fio da própria cor */
.aviso{box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 14%,transparent)}
.log .aviso{box-shadow:none}
/* selos da manchete no escuro: vidro tingido em vez de pastel claro */
.selo.ouro{--sl:#FFC53D;--sl-txt:#FFD66B} .selo.fogo{--sl:#FF6B3D;--sl-txt:#FFAE94}
.selo.alvo{--sl:#12A150;--sl-txt:#7EDCA5} .selo.foguete{--sl:#6C4CF1;--sl-txt:#C4B5FF}
@media (prefers-color-scheme: dark){ :root:not([data-tema="claro"]) .selo:is(.ouro,.fogo,.alvo,.foguete){background:color-mix(in srgb,var(--sl) 20%,var(--card));color:var(--sl-txt);filter:none} }
:root[data-tema="escuro"] .selo:is(.ouro,.fogo,.alvo,.foguete){background:color-mix(in srgb,var(--sl) 20%,var(--card));color:var(--sl-txt);filter:none}
/* trilhos das barras levemente fundos: a cor "enche" um canal */
.barra,.rank-b,.prog{box-shadow:inset 0 1px 2px rgb(var(--tom) / .08)}
/* no escuro o trilho --bg2 quase some no cartão: um tom acima */
@media (prefers-color-scheme: dark){ :root:not([data-tema="claro"]) :is(.barra,.rank-b,.prog){background:var(--line)} }
:root[data-tema="escuro"] :is(.barra,.rank-b,.prog){background:var(--line)}

/* ----------------------------- KPIs ----------------------------- */
/* ícone do rótulo vira pastilha com a cor do assunto (o mesmo vocabulário da tela Anúncios) */
.kpi-rot>i.ph{--k:var(--muted);width:26px;height:26px;margin:-4px 0;border-radius:8px;display:inline-grid;place-items:center;flex-shrink:0;font-size:15px;
  color:color-mix(in srgb,var(--k) 78%,var(--ink));background:color-mix(in srgb,var(--k) 14%,transparent)}
.kpi-rot>i:is(.ph-hand-coins,.ph-target){--k:var(--good)}
.kpi-rot>i:is(.ph-megaphone,.ph-wallet){--k:var(--c-ads)}
.kpi-rot>i:is(.ph-rocket-launch,.ph-currency-circle-dollar){--k:var(--emp)}
.kpi-rot>i:is(.ph-shopping-cart,.ph-shopping-bag,.ph-package,.ph-footprints){--k:var(--c-frete)}
.kpi-rot>i:is(.ph-ticket,.ph-tag,.ph-receipt){--k:var(--c-tarifa)}
.kpi-rot>i.ph-users-three{--k:var(--c-afil)}
.kpi-rot>i:is(.ph-trophy,.ph-crown-simple){--k:var(--warn)}
.kpi-rot>i:is(.ph-storefront,.ph-plant,.ph-chart-donut,.ph-chart-pie-slice){--k:var(--ext)}
.kpi-rot>i.ph-x-circle{--k:var(--bad)}
.kpi-rot>i.ph-percent{--k:var(--sh)}
/* TikTok: ali o pacote é "custo + tarifas" — roxo do custo, como no Lucro */
.grade:has(>.cc-TikTok) .kpi-rot>i.ph-package{--k:var(--c-custo)}
/* tela Anúncios: a pastilha de 38px desce para o mesmo tamanho */
.kpi-rot>.kpi-ico{width:26px;height:26px;margin:-4px 0;border-radius:8px;font-size:15px}
/* linha rótulo · valor: rótulo não quebra ("Mais / cresceu"), valor alinha à direita */
.lm{align-items:baseline}
.lm>span:first-child{flex:0 0 auto;max-width:60%}
.lm>b{margin-left:auto;text-align:right}

/* ----------------------------- cores de texto ----------------------------- */
.delta.up,.estado.hit,.aviso.bom,.t .pos{color:var(--good-txt)}
.delta.down,.aviso.ruim,.t .neg{color:var(--bad-txt)}
.estado.behind,.aviso.alerta{color:var(--warn-txt)}
/* "no ritmo" tinha lavanda fixa que acendia no escuro */
.estado.ok{background:color-mix(in srgb,var(--emp) 14%,transparent);color:var(--emp-txt)}
/* custo em vinho; vermelho cheio só no prejuízo (lucro e margem = 2 últimas colunas) */
.t td.r.neg:not(:nth-last-child(-n+2)){color:var(--custo)}
.dre-l.neg .v{color:var(--custo)}
/* DRE: o ícone veste a cor da sua fatia na barra de cascata */
.dre-l.neg>i:is(.ph-storefront,.ph-credit-card){color:var(--c-tarifa)}
.dre-l.neg>i.ph-package{color:var(--c-custo)}
.dre-l.neg>i.ph-receipt{color:var(--c-imposto)}
.dre-l.neg>i.ph-truck{color:var(--c-frete)}
.dre-l.neg>i.ph-users-three{color:var(--c-afil)}
.dre-l.neg>i.ph-megaphone{color:var(--c-ads)}
.dre-l.total>i{color:var(--good)} .dre-l.total.ruim>i{color:var(--bad)}

/* ----------------------------- tabelas ----------------------------- */
/* cabeçalho com fio fino; total vira uma faixa de papel */
.t th{border-bottom:1px solid var(--line2);padding-bottom:9px}
.t tfoot td{border-top:0;background:var(--realce);padding-top:12px;padding-bottom:12px;color:var(--ink)}
.t tfoot td:first-child{border-radius:10px 0 0 10px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.t tfoot td:last-child{border-radius:0 10px 10px 0}
/* a linha sob o mouse acende de leve (ajuda a seguir as 9 colunas do Lucro); a clicável um tom mais forte */
@media (hover:hover){
  .t tbody tr:where(:not(.det,.aberto)):hover>td{background:var(--realce)}
  .t tr.linha-click .ph-caret-right{display:inline-block;transition:transform .15s}
  .t tr.linha-click:hover .ph-caret-right{transform:translateX(3px)}
}
.t td{transition:background-color .12s}
/* tabela larga: sombra na borda avisa que tem mais para o lado */
.tab-rola{background:
  linear-gradient(90deg,var(--card) 22px,transparent 44px) 0 0/44px 100% no-repeat local,
  linear-gradient(270deg,var(--card) 22px,transparent 44px) 100% 0/44px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,var(--rola-sombra),transparent) 0 0/12px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%,var(--rola-sombra),transparent) 100% 0/12px 100% no-repeat scroll}

/* ----------------------------- botões ----------------------------- */
/* hover que funciona no claro E no escuro (o brightness não clareia o que já é claro) */
.btn:not(.retro *){transition:background-color .15s,box-shadow .15s,color .15s,transform .1s}
.btn:not(.retro *,.aviso-retro *):hover{filter:none}
.btn:not(.sec,.cor,.verde,.perigo):not(.retro *,.aviso-retro *):hover,.periodo-btn:hover{background:color-mix(in srgb,var(--ink) 84%,var(--emp))}
.periodo-btn{transition:background-color .15s,transform .1s}
/* botões cheios com relevo discreto: fio de luz em cima + sombra na própria cor */
.btn:not(.sec,.perigo):not(.retro *),.periodo-btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgb(var(--tom) / .16),0 8px 16px -10px rgb(var(--tom) / .45)}
.btn.cor:not(.retro *){box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgb(var(--tom) / .14),0 10px 20px -10px color-mix(in srgb,var(--emp) 75%,transparent)}
.btn.cor:not(.retro *):hover{background:color-mix(in srgb,var(--emp) 72%,var(--emp-deep))}
.btn.verde:not(.retro *){box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgb(var(--tom) / .14),0 10px 20px -10px color-mix(in srgb,var(--good) 75%,transparent)}
.btn.verde:not(.retro *):hover{background:color-mix(in srgb,var(--good) 86%,#000)}
/* secundário: o fio da --sombra já dá a borda (dentro do cartão branco ele sumia) */
.btn.sec:not(.retro *):hover{background:color-mix(in srgb,var(--ink) 5%,var(--card))}
.btn.perigo:not(.retro *):hover{background:var(--bad);color:#fff}
/* botão-ícone: hover visível e toque */
.btn-ico{transition:color .15s,background-color .15s,transform .1s}
.btn-ico:not(:disabled):hover{background:color-mix(in srgb,var(--ink) 5%,var(--card))}
.btn-ico:disabled{cursor:default}
/* botão desligado sem relevo (não pode parecer clicável) */
.btn:is([disabled],:disabled):not(.retro *){box-shadow:none}
/* botão ocupado: o botão não parece desligado */
.btn[disabled]:not(.retro *):has(.ph-circle-notch){opacity:.85}
.limpar{transition:color .15s}
.limpar:hover{color:var(--ink)}

/* ----------------------------- controles ----------------------------- */
/* toque no celular sem o retângulo azul do navegador; o :active faz o papel dele */
html{-webkit-tap-highlight-color:transparent}
.nav a{transition:background-color .15s,color .15s,transform .1s}
.nav a:not(.on):hover{color:var(--ink)}
.chip,.chip-sel{transition:box-shadow .15s,color .15s,transform .1s}
.chip:not(.on):hover,.chip-sel:not(.on):hover{color:var(--ink);box-shadow:0 0 0 1px var(--line2),var(--sombra)}
/* chip selecionado: mesmo contorno de tinta, agora por sombra (libera o outline para o foco) */
.chip.on,.chip-sel.on{outline:0;box-shadow:0 0 0 2px var(--ink),var(--sombra)}
/* segmentado: opção ativa legível também no escuro, hover nas outras */
.seg button{transition:color .15s,background-color .15s,box-shadow .15s,transform .1s}
.seg button:not(.on):hover{color:var(--ink2);background:color-mix(in srgb,var(--card) 50%,transparent)}
.seg button.on{background:var(--seg-on);box-shadow:0 1px 2px rgb(var(--tom) / .1),0 3px 8px -3px rgb(var(--tom) / .18)}
/* "Quem paga a taxa?" ocupa o campo inteiro, com a altura dos inputs */
.campo>.seg{display:flex;flex-wrap:nowrap}
.campo>.seg button{flex:1;min-height:36px}
/* chave: o trilho reage ao hover */
.chave:hover input:not(:checked){background:color-mix(in srgb,var(--line2) 60%,var(--faint))}
.chave:hover input:checked{background:color-mix(in srgb,var(--good) 88%,#000)}
/* selects no padrão dos filtros (a seta nativa destoava) */
select.inp{-webkit-appearance:none;appearance:none;padding-right:38px;cursor:pointer;background-image:var(--seta);background-repeat:no-repeat;background-position:right 14px center}
.chip-sel{background-image:var(--seta);cursor:pointer}
/* campo: hover, placeholder no tom da casa, calendário nativo mais discreto */
.inp:hover:not(:focus):not(.erro):not(:disabled){border-color:color-mix(in srgb,var(--line2) 55%,var(--faint))}
.inp::placeholder{color:var(--muted);opacity:.75}
.inp[type=date]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer;transition:opacity .15s}
.inp[type=date]:hover::-webkit-calendar-picker-indicator,.inp[type=date]:focus::-webkit-calendar-picker-indicator{opacity:.9}
/* links no meio do texto: sublinhado fino e afastado; no hover, roxo da marca */
main a:not([class]),.modal a:not([class]){text-decoration-thickness:1.5px;text-underline-offset:.2em;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);transition:color .15s,text-decoration-color .15s}
main a:not([class]):hover,.modal a:not([class]):hover{color:var(--emp-txt);text-decoration-color:currentColor}

/* ----------------------------- foco de teclado ----------------------------- */
/* anel roxo da marca, só no teclado (nunca no clique) */
:focus-visible{outline:2px solid var(--emp-txt);outline-offset:2px}
.cc:focus-visible,.card:focus-visible{outline-offset:3px}
.chip.on:focus-visible,.chip-sel.on:focus-visible{outline:2px solid var(--emp-txt);outline-offset:4px}
.menu-pop :focus-visible{outline-offset:-2px}
/* a nav rola de lado e cortava o anel em cima: 4px de folga sem mexer no desenho */
.nav{padding-top:4px;margin-top:-4px}
/* a retrospectiva fica como está */
.retro:focus-visible,.retro :focus-visible{outline:revert;outline-offset:revert}

/* ----------------------------- camadas ----------------------------- */
/* menu "…": ícone acende no hover */
.menu-pop{transform-origin:top right}
.menu-pop a,.menu-pop button{transition:background-color .12s}
.menu-pop i{transition:color .12s}
.menu-pop a:hover i,.menu-pop button:hover i{color:var(--emp-txt)}
/* janela: a página por trás desfoca de leve (menos no seletor de fundo, que precisa mostrar a página) */
.modal-fundo:not(.leve){-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.modal{max-height:calc(100dvh - 36px)}
/* aviso rápido: sobe reto (o keyframe "sobe" apagava o translateX(-50%) e ele entrava na diagonal) */
.toast{animation-name:toastSobe;bottom:calc(24px + env(safe-area-inset-bottom,0px));padding-left:14px}
@keyframes toastSobe{from{opacity:0;transform:translate(-50%,14px)}}
.toast i{font-size:20px;flex-shrink:0;color:var(--good)}
.toast.erro i{color:inherit}

/* ----------------------------- carregando / vazio ----------------------------- */
/* esqueleto: um brilho claro que passa (antes era uma faixa mais escura) */
.esq{background:linear-gradient(100deg,transparent 40%,var(--esq-luz) 50%,transparent 60%) var(--bg2);background-size:250% 100%;background-repeat:no-repeat;animation:none}
@keyframes esqLuz{from{background-position:100% 0}to{background-position:0 0}}
/* vazio: ícone num ladrilho lilás, no tom dos ícones de seção; erro em vermelho */
.vazio>i:first-child{width:60px;height:60px;border-radius:20px;display:grid;place-items:center;margin:0 auto 12px;font-size:30px;color:var(--emp-txt);background:color-mix(in srgb,var(--emp) 9%,var(--card))}
.vazio>i.ph-warning-circle:first-child{color:var(--bad-txt);background:var(--bad-bg)}
/* conserto: o ícone do botão "Tentar de novo" herdava 42px e virava bloco */
.vazio .btn i{font-size:18px;display:inline;margin:0;color:inherit}
.vazio p{max-width:48ch;margin-inline:auto}

/* ----------------------------- detalhes dos dados ----------------------------- */
/* meta: o preenchimento no degradê do cartão da empresa; o marcador de ritmo sai do trilho */
.barra>i{background:linear-gradient(90deg,var(--emp),#8B5CF6)}
.barra:has(.ritmo){overflow:visible}
.barra .ritmo{width:4px;top:-5px;bottom:-5px;margin-left:-2px;border-radius:4px;box-shadow:0 0 0 2px var(--card)}
/* calendário: dia que ainda não chegou só no contorno; hoje com anel */
.cal span.fut{background:none;box-shadow:inset 0 0 0 1px var(--line);color:var(--faint)}
.cal span.hj{box-shadow:inset 0 0 0 2px var(--ink)}
/* foco: passar o mouse numa fatia / estado apaga os outros */
.cascata i{transition:opacity .15s}
.mapa path{stroke-linejoin:round}
@media (hover:hover){
  .cal span[title]:hover{outline:2px solid var(--ink);outline-offset:1px}
  .cascata:hover i{opacity:.4}
  .cascata i:hover{opacity:1}
  .mapa svg:has(path:hover) path:not(:hover){opacity:.45}
  .mapa path:hover{opacity:1}
}
/* log da sincronização: console de verdade, recuo das subetapas preservado */
.log{font:500 12.5px/1.6 ui-monospace,'Cascadia Mono','Segoe UI Mono',Consolas,Menlo,monospace;white-space:pre-wrap;gap:1px;box-shadow:inset 0 0 0 1px var(--line)}
.log .aviso{font-size:inherit;color:var(--warn-txt)}
/* seleção de texto no lilás da marca (a retrospectiva fica de fora) */
.topo ::selection,.filtros ::selection,main ::selection,.modal ::selection{background:var(--selecao)}
.cc ::selection{background:rgba(255,255,255,.32)}
.cc-ML ::selection{background:rgba(0,0,0,.14)}
/* barras de rolagem finas no tom do papel */
.tab-rola,.log,.modal,.menu-pop,textarea.inp{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--faint) 55%,transparent) transparent}

/* ----------------------------- ritmo ----------------------------- */
/* g4 nunca passa de 4 colunas: em 1320px cabiam 5 e os 8 cartões ficavam 5+3 */
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,max(230px,calc((100% - 42px)/4 - .1px))),1fr))}
/* rodapé dos cartões na base: pontilhado, sparkline e botão de salvar alinham entre vizinhos */
.grade>.card:has(>.kpi-rod+.linhas-mini:last-child),
.grade>.card:has(>.spark:last-child),
.g2>.card:has(>.btn:last-child){display:flex;flex-direction:column}
.grade>.card>.kpi-rod+.linhas-mini:last-child{margin-top:auto}
.grade>.card>.kpi-rod:has(+.linhas-mini:last-child){margin-bottom:12px}
.grade>.card>.spark:last-child{margin-top:auto}
.grade>.card>:has(+.spark:last-child){margin-bottom:10px}
.g2>.card>.btn:last-child{margin-top:auto;align-self:flex-start}
.g2>.card>:has(+.btn:last-child){margin-bottom:14px}
/* cartões de pessoa: subtítulo sempre com 2 linhas reservadas, o valor alinha entre vizinhos */
.grade>.card[data-i] .sub{min-height:2.9em}
/* tablet: 8 KPIs em 2+2+2+2 (antes 3+3+2 com um buraco no fim) */
@media (min-width:750px) and (max-width:993px){.g4:has(>:nth-child(8):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
/* nome da conta nas tabelas que rolam de lado: uma linha só ("ML / João / Silva" virava 3 andares) */
.tab-rola .t td>.flex>b{white-space:nowrap}
/* celular estreito: o ranking devolve a largura dos algarismos para o nome da conta */
@media (max-width:400px){.rank-v{font-variant-numeric:normal}}
/* Lançar venda: o resumo ao vivo volta para a coluna da direita (app2.js zera o grid inline em telas >= 900px) */
@media (min-width:1100px){#gLanc{grid-template-columns:minmax(0,1fr) minmax(280px,340px)}}
/* faixa colorida do Início entre 641 e 1199px: empresa em cima, as 4 plataformas embaixo (antes 4+1) */
@media (min-width:641px) and (max-width:1199px){
  .g5:has(>:nth-child(5):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
  .g5:has(>:nth-child(5):last-child)>.cc-emp{grid-column:1/-1}
}
@media (min-width:641px) and (max-width:899px){
  .g5:has(>:nth-child(5):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* DRE: o ícone não encosta na borda arredondada das faixas bege/verde */
.dre-l{padding:9px 10px}
.dre-l.total{padding:14px 12px}
@media (max-width:640px){
  /* título da seção numa linha, o comentário embaixo alinhado ao texto (ícone 19px + 10px) */
  .secao{font-size:19px;margin-top:30px}
  .secao small{flex-basis:100%;padding-left:29px}
  /* .card.pad-l ficava com 24px (a regra de 16px do app.css perde na especificidade) */
  main .card.pad-l{padding:16px}
  /* folha de baixo: altura pela área visível de verdade, último botão acima da barra de gestos */
  .modal{max-height:92dvh;padding-bottom:env(safe-area-inset-bottom,0px)}
  /* filtros rolam de lado no celular: a borda direita esmaece para avisar que tem mais */
  .filtros{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .filtros::after{content:'';flex:0 0 12px}
}
/* o menu rola de lado quando não cabe (celular, tablet): a borda direita esmaece; o ::after deixa a última aba fora do esmaecido */
.nav{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.nav::after{content:'';flex:0 0 12px}
/* toque: alvos maiores só em telas de dedo; 16px no campo evita o zoom do iPhone */
@media (pointer:coarse){
  .nav a{padding-top:10px;padding-bottom:10px}
  .chip,.chip-sel,.btn.peq{height:38px}
  .seg button{padding-top:9px;padding-bottom:9px}
  .limpar{padding:10px 8px}
  .inp{font-size:16px}
  select.chip-sel{font-size:16px;padding-right:32px}
  /* chave liga/desliga: área de toque de 40px sem mexer no desenho */
  .chave{padding:9px 0;margin:-9px 0}
}

/* ----------------------------- impressão ----------------------------- */
@media print{
  .cc,.aviso,.barra,.rank-b,.prog,.log{box-shadow:none}
  .tab-rola{background:none}
  .t tfoot td{background:none;border-top:2px solid #ddd}
  .menu-pop,.toast{display:none!important}
}

/* ----------------------------- movimento ----------------------------- */
@media (prefers-reduced-motion: no-preference){
  .menu-pop{animation:abreMenu .16s cubic-bezier(.2,.8,.2,1)}
  .esq{animation:esqLuz 1.4s linear infinite}
  .btn-ico:not(:disabled):active{transform:scale(.94)}
  .periodo-btn:active,.nav a:active,.chip:active,.chip-sel:active,.seg button:active{transform:scale(.97)}
  .btn:not(.retro *) .ph-circle-notch{display:inline-block;animation:gira .8s linear infinite}
  .chave input::after{transition:left .28s cubic-bezier(.3,1.45,.5,1),width .15s}
  .chave input:active::after{width:21px}
  .chave input:checked:active::after{left:14px}
}
@keyframes abreMenu{from{opacity:0;transform:translateY(-6px) scale(.97)}}
@keyframes gira{to{transform:rotate(360deg)}}
/* movimento reduzido: o que ainda se mexia sozinho para (deixe este bloco no FIM do arquivo) */
@media (prefers-reduced-motion: reduce){
  .esq,.carregando .pulso,.modal-fundo,.modal,.toast{animation:none}
  .cc-marca,.chave input,.chave input::after{transition:none}
  .clicavel:hover,.clicavel:active,.fundo-op:hover,.btn:not(.retro *):active{transform:none}
  .cc:hover .cc-marca{transform:rotate(-14deg)}
  .t tr.linha-click:hover .ph-caret-right{transform:none}
}