/* ══ VAI PRO APP · INÍCIO ══  extrato_saldo_v1.css — Jean · 02/11/2026 · v2 da família (devolutiva de 02/11 à noite)
   O MIOLO do extrato do saldo: vai DENTRO da .rnj--cheia do Fechamento (troca o conteúdo; #wkhVoltar volta ao aluno)
   e DENTRO do card .fsu do cadastro (no lugar do <details> «De onde vem»). A moldura é a v2 — aqui só conteúdo.
   Tokens: usa os --rnj-* do bloco 0 da v2 (no iframe da ficha, carregar a v2 ou pelo menos o bloco 0). Prefixo ext-; zero colisão.
   Convenção (APROVADA): + = a favor do aluno · − = o aluno deve · DIREÇÃO NUNCA É COR — valor em tinta nos dois sinais.
   O herói (saldo de hoje) é TINTA, --fs-xl (v2): o único ouro da tela é o botão «Mandar ao aluno» no pé.
   Status ao lado do herói: deve a você = vermelho ⓘ «a receber» · você deve = tinta ↩ «a devolver» · zero = verde ✓ «em dia».
   Conferência: ✓ verde «bate» · ⚠ limão «sem explicação» (atenção do app, nunca culpa do professor) · zerado = o atestado .ext-atesta.
   Duas vozes (professor · aluno) saem do MESMO HTML: o montador troca as frases pelo dicionário VOZ_ALUNO e filtra o que nunca vai ao aluno.
   Esqueleto emitido (ver renderExtrato()):
   .ext > [.ext-sinal] .ext-topo > .ext-hoje(.rnj-eyebrow .ext-frase .rnj-valor .rnj-status) · .ext-hist · .ext-ls-bl · .ext-como
          details.ext-mes[open] > summary(.ext-mes-n [.ext-rec] i.ext-fil .ext-mes-f .ext-chev) + .ext-linhas.rnj-poco > (.ext-l[data-pt] | details.ext-l.ext-l--abre)
            .ext-g = time.ext-d · .ext-f(.ext-ft [small.ext-tag] [a.ext-ver]) · .ext-v([small.ext-vk]) · .ext-s · [.ext-chev] · [.ext-q > .ext-eq] · [.ext-m]
            .ext-l--ctx (só contexto) · .ext-l--risc (riscada, sem efeito) · .ext-l--furo (⚠ sem explicação) · .ext-l--conta (a conta escrita)
            ul.ext-sub (as aulas do mês) · details.ext-anul > .ext-eqw.ext-eqw--risc (a mesma conta, riscada, «anulado»)
          .ext-aberto · (.ext-conf--ok | --furo | .ext-atesta) · p.rnj-note
   Pé da folha (.rnj-foot): [.rnj-hint «Confira o saldo antes de mandar»] + .rnj-btn.rnj-btn--primary «Mandar ao aluno» [disabled no não-bate e no carregando]
   ── */
/* o gatilho «De onde vem»: a pílula de gesto da casa (tracejado champanhe), 44 de toque; na folha é <span> dentro do <button class="rnc-sal">, no card é <button> largo */
.rn-deonde{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 10px 0 12px;border:1px dashed rgba(var(--rnj-champ),.32);border-radius:11px 11px 11px 5px;background:transparent;color:var(--rnj-text);font:500 var(--fs-xs)/1 var(--rnj-ui);letter-spacing:.02em;white-space:nowrap;cursor:pointer;flex:none;transition:background .15s var(--rnj-ease),border-color .15s var(--rnj-ease)}
.rn-deonde::before{content:"";position:absolute;inset:-2px}
.rn-deonde .i{width:14px;height:14px;color:rgb(var(--rnj-champ))}
.rn-deonde:hover,.rn-deonde:active,.rnc-sal:hover .rn-deonde{border-style:solid;border-color:rgba(var(--rnj-champ),.5);background:rgba(255,255,255,.05)}
.rn-deonde:focus-visible,.rnc-sal:focus-visible{outline:2px solid rgba(var(--rnj-champ),.6);outline-offset:2px}
.rn-deonde--larga{display:flex;width:100%;min-height:48px;margin-top:12px;font-size:var(--fs-sm)}
/* a linha do saldo vira o toque inteiro (button): mesmo desenho, mais a pílula à direita; nome longo → a pílula desce pra 2ª linha (flex-wrap); o OURO SAI do «Você deve a X» */
.rn-pele4 .rnc-janela button.rnc-sal{width:100%;align-items:center;flex-wrap:wrap;row-gap:8px;border:0;background:none;text-align:left;font-family:inherit;cursor:pointer;padding:6px 4px;margin-top:6px;border-radius:11px 11px 11px 5px}
.rn-pele4 .rnc-janela button.rnc-sal svg{margin-top:0}
.rn-pele4 .rnc-janela button.rnc-sal>span:not(.rn-deonde){flex:1 1 180px;min-width:0}
.rn-pele4 .rnc-janela button.rnc-sal .rn-deonde{flex:none;margin-left:auto}
.rn-pele4 .rnc-janela .rnc-sal.favor b{color:var(--p-text)}
.rn-pele4 .rnc-janela .rnc-sal.favor svg{color:var(--p-text2)}
/* o miolo */
.ext{container-type:inline-size;display:flex;flex-direction:column;gap:14px;color:var(--rnj-text2)}
.ext-sinal{display:flex;align-items:center;gap:8px;font:400 var(--fs-xs)/1.3 var(--rnj-ui);color:var(--rnj-text2)}
.ext-sinal .i{width:15px;height:15px;color:var(--rnj-text3);flex:none}
.ext-topo{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ext-topo .ext-hoje{flex:1;min-width:0}
.ext-hoje{display:flex;flex-direction:column;gap:6px}
.ext-hoje .rnj-eyebrow{white-space:nowrap}
.ext-frase{margin:0;font:400 var(--fs-md)/1.3 var(--rnj-ui);color:var(--rnj-text)}
.ext-hoje .rnj-valor{justify-content:flex-start}
.ext-hoje .rnj-valor .v small{font:500 var(--fs-xs)/1 var(--rnj-ui);color:var(--rnj-text3);margin-right:5px;vertical-align:middle}
.ext-status--fato{color:var(--rnj-text2)}
.ext-hist{margin:0;font:400 var(--fs-md)/1.5 var(--rnj-ui);color:var(--rnj-text);text-wrap:pretty}
.ext-como{margin:0;font:400 var(--fs-xs)/1.45 var(--rnj-ui);color:var(--rnj-text2)}
.ext-como b{color:var(--rnj-text);font-weight:500}
/* o caminho do saldo — versão A corrigida (v2) do Jean, escolhida por Raphael em 03/11 (C-2150).
   [CÓPIA] fonte: docs/rodada_extrato_saldo_2026-11-02/DO_JEAN/caminho_saldo_A_v2.html, bloco «A · degraus com números» (.lsA / .labA), letra a letra.
   [BINDING] só os TOKENS: o molde usa --text/--text2/--text3/--text4/--ok/--risco/--cred/--card/--line no :root; aqui valem só dentro de .ext-ls-bl, ligados às cores do app (que mudam no papel A4).
   Conversa com as linhas: tocar numa linha leva o ponto ao degrau dela; tocar num degrau (.ext-ls-hit) rola até a linha (.ext-l--alvo acende 1,2 s). */
.ext-ls-bl{--text:var(--rnj-text);--text2:var(--rnj-text2);--text3:var(--rnj-text3);--text4:#9a9384;--ok:var(--rnj-verde,#3ddc97);--risco:var(--rnj-verm,#f0616b);--cred:#d8c7a0;--card:#151310;--line:rgba(255,255,255,.08);display:block;min-width:0}
.ext-ls-bl>.rnj-eyebrow{display:flex;justify-content:space-between;margin-bottom:10px}   /* [BINDING] o .eyebrow do molde = o .rnj-eyebrow do app */
.ext-ls-bl>.rnj-eyebrow em{font-style:normal;color:var(--text3);letter-spacing:.12em}
.lsA{position:relative;margin:14px 0 4px}
.lsA svg{position:absolute;left:0;top:0;overflow:visible}
.lsA .zero{stroke:var(--text4);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.lsA .cam{fill:none;stroke:var(--text2);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.lsA .n{position:absolute;font-size:var(--fs-xs);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text2);line-height:1}
.lsA .n.up{color:var(--ok)}
.lsA .n.zl{color:var(--text3);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase}
.lsA .dot{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--text);transform:translate(-50%,-50%);box-shadow:0 0 0 3px var(--card)}
.lsA .hj{position:absolute;font-size:var(--fs-sm);font-weight:600;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.labA{position:relative;height:20px;border-top:1px solid var(--line);margin-bottom:22px}
.labA span{position:absolute;top:5px;font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--text3);line-height:1;white-space:nowrap}
.labA i{position:absolute;top:-1px;width:1px;height:5px;background:rgba(255,255,255,.18)}
/* [BINDING do app, fora do molde] degrau clicável e ponto que anda até a linha tocada (400 ms) */
.ext-ls-hit{position:absolute;top:-8px;bottom:-8px;cursor:pointer}
.lsA .dot{transition:left .4s ease-out,top .4s ease-out;pointer-events:none}
.ext-l--alvo>.ext-g,.ext-l--alvo>summary.ext-g{box-shadow:inset 0 0 0 1px rgba(var(--rnj-champ),.5);border-radius:10px 10px 10px 5px;transition:box-shadow .3s}
/* o bloco do mês: título gravado + «fim do mês»; recolhe */
.ext-mes{margin:0}
.ext-mes>summary{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;min-height:44px;padding:4px 0;list-style:none;cursor:pointer}
.ext-mes>summary::-webkit-details-marker{display:none}
.ext-mes-n{display:flex;align-items:center;gap:8px;font:500 var(--fs-micro)/1.2 var(--rnj-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--rnj-text3);white-space:nowrap}
.ext-mes-n::before{content:"";width:14px;height:1px;border-radius:1px;flex:none;background:rgba(var(--rnj-champ),.7)}
.ext-fil{flex:1;min-width:24px;height:1px;background:rgba(255,255,255,.08)}
.ext-mes-f{font:400 var(--fs-xs)/1.3 var(--rnj-ui);color:var(--rnj-text2);white-space:nowrap}
.ext-mes-f b{color:var(--rnj-text);font-weight:500;font-variant-numeric:tabular-nums}
.ext-mes-f .n{color:var(--rnj-text3)}
.ext-chev{width:16px;height:16px;flex:none;color:var(--rnj-text3);transition:transform .35s cubic-bezier(.4,0,.2,1)}
.ext-mes[open]>summary>.ext-chev{transform:rotate(90deg)}
.ext-rec{display:inline-flex;align-items:center;gap:6px;flex-basis:100%;order:9;min-height:24px;font:400 var(--fs-xs)/1.2 var(--rnj-ui);color:var(--rnj-text2)}
.ext-rec .i{width:14px;height:14px;color:var(--rnj-text3);flex:none}
.ext-linhas.rnj-poco{padding:2px 12px}
.ext-linhas>*+*{border-top:1px solid rgba(255,255,255,.06)}
/* <details> abrem com altura interpolada (350 ms, .4 0 .2 1); o chevron gira no mesmo tempo */
.ext details{interpolate-size:allow-keywords}
.ext details::details-content{block-size:0;overflow:clip;transition:block-size .35s cubic-bezier(.4,0,.2,1),content-visibility .35s allow-discrete}
.ext details[open]::details-content{block-size:auto}
/* a linha: data · frase · ± valor · saldo acumulado (· chevron se abre) */
.ext-l{margin:0}
.ext-g{display:grid;grid-template-columns:46px minmax(0,1fr) auto 16px;grid-template-areas:"d f v c" "d f s c";column-gap:10px;row-gap:2px;align-items:start;min-height:48px;padding:10px 0;font:400 var(--fs-sm)/1.35 var(--rnj-ui);color:var(--rnj-text)}
.ext-l[data-pt] .ext-g{cursor:pointer}
summary.ext-g{list-style:none;cursor:pointer}
summary.ext-g::-webkit-details-marker{display:none}
.ext-d{grid-area:d;font-size:var(--fs-xs);color:var(--rnj-text2);font-variant-numeric:tabular-nums;padding-top:2px}
.ext-f{grid-area:f;min-width:0;text-wrap:pretty}
.ext-f .ext-tag{display:block;font-size:var(--fs-xs);color:var(--rnj-text3);margin-top:2px}
.ext-ver{position:relative;display:inline-block;margin-top:2px;font-size:var(--fs-xs);color:var(--rnj-text2);text-decoration:underline;text-decoration-color:rgba(238,231,218,.35);text-underline-offset:3px;white-space:nowrap}
.ext-ver::before{content:"";position:absolute;inset:-13px -8px}   /* toque 44 */
.ext-f .i{width:15px;height:15px;vertical-align:-2px;margin-right:6px}
.ext-v{grid-area:v;justify-self:end;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.ext-s{grid-area:s;justify-self:end;font-size:var(--fs-xs);color:var(--rnj-text3);white-space:nowrap;font-variant-numeric:tabular-nums}
.ext-g>.ext-chev{grid-area:c;align-self:center;justify-self:end}
.ext-l--abre[open]>summary>.ext-chev{transform:rotate(90deg)}
/* só contexto: tracejado, sem valor, «não mexe no saldo» */
.ext-linhas>.ext-l--ctx{margin:6px 0;padding:0 10px;border:1px dashed rgba(255,255,255,.16);border-radius:10px 10px 10px 5px;background:rgba(0,0,0,.26)}
.ext-l--ctx .ext-f{color:var(--rnj-text2)}
.ext-l--ctx .ext-v{color:var(--rnj-text3);font-weight:400}
/* riscada: apagada/anulada, sem efeito — o texto continua legível (text2), só a tag fica de pé. NUNCA vai ao aluno. */
.ext-l--risc .ext-ft,.ext-l--risc .ext-v{text-decoration:line-through;text-decoration-color:rgba(238,231,218,.55);color:var(--rnj-text2)}
/* ⚠ a parte que o app não explica: limão tracejado; o acumulado mostra o número do app. NUNCA vai ao aluno. */
.ext-linhas>.ext-l--furo{margin:6px 0;padding:0 10px;border:1px dashed rgba(253,224,71,.45);border-radius:10px 10px 10px 5px;background:rgba(253,224,71,.04)}
.ext-l--furo .ext-f .i{color:var(--rnj-limao)}
.ext-l--furo .ext-s{color:var(--rnj-text2)}
/* as aulas que compõem o mês: dia · formato (ícone 1 ou 2 pessoas + rótulo) · valor */
.ext-sub{list-style:none;margin:2px 0 8px 56px;padding:4px 0 4px 12px;border-left:1px dashed rgba(238,231,218,.17)}
.ext-sub li{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:32px;font:400 var(--fs-xs)/1.3 var(--rnj-ui);color:var(--rnj-text2)}
.ext-sub li b{color:var(--rnj-text);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.ext-sub li .s-d{font-variant-numeric:tabular-nums}
.ext-sub li .s-t .i{width:14px;height:14px;vertical-align:-3px;margin-right:5px;color:var(--rnj-text3)}
.ext-sub li.dupla .s-t,.ext-sub li.falta .s-t{color:var(--rnj-text)}
/* A CONTA ESCRITA (adendo 1): era → ficou = diferença, sempre nessa ordem; o motivo embaixo.
   <520: recibo em três linhas, números tabulares à direita, um embaixo do outro · ≥520: equação em linha, «→» e «=» em text3.
   A conta fala da AULA («a mais na aula», ▲/▼ SVG 12px em text3); o efeito pra ele está na coluna rotulada «no saldo». */
.ext-l--conta .ext-g{grid-template-areas:"d f v c" "d f s c" "q q q c" "m m m c";row-gap:4px}
.ext-vk{display:block;font:500 var(--fs-micro)/1.2 var(--rnj-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--rnj-text3);margin-bottom:1px}
.ext-q{grid-area:q;display:block;min-width:0;margin-top:2px}
.ext-eq{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px;row-gap:3px;align-items:baseline;font:400 var(--fs-sm)/1.35 var(--rnj-ui);color:var(--rnj-text)}
.ext-eq .ext-op{display:none}
.ext-k{font:400 var(--fs-xs)/1.35 var(--rnj-ui);color:var(--rnj-text3);white-space:nowrap}
.ext-t{min-width:0}
.ext-t .i{width:15px;height:15px;vertical-align:-3px;margin-right:5px;color:var(--rnj-text3)}
.ext-n{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;color:var(--rnj-text)}
.ext-n--dif{font-weight:600}
.ext-dif{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ext-dif .ext-tri{width:12px;height:12px;flex:none;color:var(--rnj-text3)}
.ext-m{grid-area:m;display:block;font:400 var(--fs-xs)/1.4 var(--rnj-ui);color:var(--rnj-text3)}
.ext-m .ext-ver{margin:0 0 0 8px}
.ext-l--ctx .ext-eq,.ext-l--ctx .ext-n{color:var(--rnj-text2)}
/* a mesma conta, anulada: riscada, recolhida, «anulado» — não entra no saldo. NUNCA vai ao aluno. */
.ext-anul{margin:0 0 8px;padding:0 0 0 12px;border-left:1px dashed rgba(238,231,218,.17)}
.ext-anul>summary{display:flex;align-items:center;gap:8px;min-height:44px;list-style:none;cursor:pointer;font:400 var(--fs-xs)/1.3 var(--rnj-ui);color:var(--rnj-text2)}
.ext-anul>summary::-webkit-details-marker{display:none}
.ext-anul[open]>summary>.ext-chev{transform:rotate(90deg)}
.ext-eqw{padding:6px 0 8px}
.ext-eqw+.ext-eqw{border-top:1px solid rgba(255,255,255,.06)}
.ext-eqw--risc .ext-k,.ext-eqw--risc .ext-t,.ext-eqw--risc .ext-n,.ext-eqw--risc .ext-dif{text-decoration:line-through;text-decoration-color:rgba(238,231,218,.55);color:var(--rnj-text2)}
.ext-eqw .ext-tag{display:block;font:400 var(--fs-xs)/1.3 var(--rnj-ui);color:var(--rnj-text3);margin-top:4px}
/* o mês de agora: «isto não entra» — tracejado, anel vazado */
.ext-aberto{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border:1px dashed rgba(255,255,255,.16);border-radius:11px 11px 11px 5px;background:rgba(0,0,0,.26);font:400 var(--fs-xs)/1.3 var(--rnj-ui);color:var(--rnj-text2)}
.ext-anel{display:block;flex:none;width:10px;height:10px;border-radius:50%;border:1.5px solid var(--rnj-text3)}
/* a conferência */
.ext-conf{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid rgba(255,255,255,.08);border-radius:14px 14px 14px 7px;background:rgba(0,0,0,.22)}
.ext-conf .rnj-status{font-size:var(--fs-sm)}
.ext-conf small{font:400 var(--fs-xs)/1.45 var(--rnj-ui);color:var(--rnj-text2)}
.ext-conf--ok{border-color:rgba(61,220,151,.25)}
.ext-conf--furo{border-color:rgba(253,224,71,.3);background:rgba(253,224,71,.05)}
/* O ATESTADO DE QUITAÇÃO (APROVADO): substitui a conferência quando o saldo zera e a soma bate.
   Na 1ª abertura depois de zerar (.ext-atesta--anima): o anel se fecha (600 ms), o ✓ traça 120 ms depois, o texto aparece (350 ms). Imagem e PDF: estático. */
.ext-atesta{display:flex;gap:14px;align-items:flex-start;padding:14px;border:1px solid rgba(61,220,151,.25);border-radius:14px 14px 14px 7px;background:rgba(0,0,0,.22)}
.ext-atesta-i{flex:none;display:block;width:44px;height:44px;color:var(--rnj-verde)}
.ext-atesta-i svg{display:block;width:44px;height:44px;overflow:visible}
.ext-atesta-i .r{fill:none;stroke:rgba(61,220,151,.45);stroke-width:1;transform:rotate(-90deg);transform-origin:50% 50%}
.ext-atesta-i .k{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ext-atesta b{display:block;font:500 var(--fs-lg)/1.2 var(--rnj-serif);color:var(--rnj-text)}
.ext-atesta small{display:block;margin-top:4px;font:400 var(--fs-xs)/1.45 var(--rnj-ui);color:var(--rnj-text2)}
.ext-atesta--anima .r{stroke-dasharray:132;stroke-dashoffset:132;animation:extAnel .6s cubic-bezier(.4,0,.2,1) forwards}
.ext-atesta--anima .k{stroke-dasharray:32;stroke-dashoffset:32;animation:extCheck .3s cubic-bezier(.4,0,.2,1) .72s forwards}
.ext-atesta--anima b,.ext-atesta--anima small{opacity:0;animation:extSurge .35s cubic-bezier(.4,0,.2,1) .9s forwards}
@keyframes extAnel{to{stroke-dashoffset:0}}
@keyframes extCheck{to{stroke-dashoffset:0}}
@keyframes extSurge{to{opacity:1}}
/* o resumo em texto (dentro do fluxo de mandar) */
.ext-resumo{display:flex;flex-direction:column;gap:10px;padding:14px}
.ext-resumo p{margin:0;font:400 var(--fs-sm)/1.5 var(--rnj-ui);color:var(--rnj-text)}
.ext-resumo .rnj-btn{align-self:flex-start}
/* esperando: shimmer honesto NO TEXTO (nunca barra), escalonado 0 / .12 / .24 s — o herói já vem pronto do saldoDoAluno(), só as linhas esperam */
.ext-espera{display:flex;flex-direction:column;gap:10px;padding:14px 12px}
.ext-shimmer{margin:0;font:400 var(--fs-sm)/1.4 var(--rnj-ui);background:linear-gradient(90deg,var(--rnj-text3) 30%,var(--rnj-text) 50%,var(--rnj-text3) 70%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rnjShimmer 1.9s linear infinite}
/* o pé: a dica à esquerda do botão quando ele está desligado */
.ext-foot-hint{flex:1;min-width:0;margin:0;text-align:left}
/* MANDAR AO ALUNO — o miolo da escolha (troca o conteúdo da folha, Voltar volta ao extrato): três saídas com a miniatura REAL do que vai */
.env-op{min-height:auto;padding:10px 10px 10px 10px}
.env-op .l-t{gap:4px}
.env-thumb{flex:none;position:relative;width:94px;height:120px;overflow:hidden;border-radius:7px 7px 7px 4px;border:1px solid rgba(255,255,255,.14);background:#0a0806}
.env-thumb>*{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none}
.env-thumb .im{transform:scale(.25)}
.env-thumb .pcel{transform:scale(.25);box-shadow:none}
.env-thumb .a4{transform:scale(.118);box-shadow:none}
/* A TROCA aluno → extrato → Voltar (coreografia): saída 200 ms ease-in só opacidade · entrada 400 ms (.4 0 .2 1) translateY 8→0 + opacidade · Voltar é o inverso */
.rnj-sai{animation:extSai .2s ease-in both}
.rnj-entra{animation:extEntra .4s cubic-bezier(.4,0,.2,1) both}
.rnj-entra--volta{animation:extEntraVolta .4s cubic-bezier(.4,0,.2,1) both}
@keyframes extSai{to{opacity:0}}
@keyframes extEntra{from{opacity:0;transform:translateY(8px)}}
@keyframes extEntraVolta{from{opacity:0;transform:translateY(-8px)}}
/* Mac / cartão 640 (e qualquer contêiner ≥520): o saldo acumulado ganha coluna própria; a conta vira equação em linha */
@container (min-width:520px){
  .ext-g{grid-template-columns:46px minmax(0,1fr) 104px 118px 16px;grid-template-areas:"d f v s c"}
  .ext-s{padding-top:2px}
  .ext-l--conta .ext-g{grid-template-areas:"d f v s c" "q q q q c" "m m m m c"}
  .ext-eq{display:flex;flex-wrap:wrap;gap:4px 7px;align-items:baseline}
  .ext-eq .ext-op{display:inline;font-style:normal;color:var(--rnj-text3)}
  .ext-eq .ext-k--eq{display:none}
  .ext-eq .ext-n{text-align:left}
  .ext-eq .ext-t{white-space:nowrap}
  .ext-eq .ext-n--dif{order:1}.ext-eq .ext-dif{order:2}
  .ext-anul{margin-left:56px}
}
@media (prefers-reduced-motion:reduce){
  .ext-shimmer{animation:none;color:var(--rnj-text2);background:none}
  .ext-chev,.lsA .dot,.ext-l--alvo>.ext-g{transition:none}
  .ext details::details-content{transition:none}
  .ext-atesta--anima .r,.ext-atesta--anima .k,.ext-atesta--anima b,.ext-atesta--anima small{animation:none;stroke-dashoffset:0;opacity:1}
  .rnj-sai,.rnj-entra,.rnj-entra--volta{animation:none}
}
/* ══ VAI PRO APP · FIM ══ */