/* Ábaco: identidade visual.

   Dois temas em OKLCH, com o contraste conferido por
   `scripts/conferir_contraste.py` a cada mudança:

     escuro  (padrão)  fundo profundo, o único que ele usa
     claro             slate neutro, para o dia claro e para imprimir
*/

@layer tokens, base, componentes;

@layer tokens {
  /* Dois temas, não três.
   *
   * Havia três: um verde-petróleo, um cinza-quente e o escuro. O Neto usa o
   * escuro, e disse com todas as letras que os claros o incomodam. Manter
   * três paletas significa conferir toda mudança de CSS em três lugares,
   * custo triplo por duas que ninguém abre.
   *
   * Sobrou um claro só, para o dia claro e para imprimir.
   *
   * Cuidado ao editar: este bloco já esteve com os tokens duplicados, dois
   * conjuntos completos dentro das mesmas chaves. O CSS usa o último, então
   * o primeiro virava código morto sem quebrar nada nem acusar no
   * verificador. Um `--ground` por tema, e só.
   */

  /* A identidade `atual` aparece nos dois seletores de proposito.
   *
   * `:root[data-tema=...]` cobre a pagina inteira, como sempre. O segundo
   * cobre uma ILHA: um `<div data-visual="atual" data-tema="...">` na tela de
   * Aparencia, que precisa mostrar o `atual` mesmo quando a raiz esta em onix.
   *
   * Sem ele, a amostra de "Atual" herdava a identidade ativa e as tres colunas
   * mostravam a mesma coisa - o que dava a impressao de que as identidades nao
   * mudavam nada.
   */
  /* TEMA: claro */
  :root[data-tema="claro"],
  [data-visual="atual"][data-tema="claro"] {
    color-scheme: light;

    --ground:       oklch(0.928 0.007 85.0);
    --surface:      oklch(1.000 0.000 0.0);
    --surface-alt:  oklch(0.948 0.006 85.0);
    --ink:          oklch(0.193 0.014 278.0);
    --ink-soft:     oklch(0.429 0.017 272.0);
    --ink-faint:    oklch(0.600 0.017 273.0);
    --rule:         oklch(0.850 0.010 85.0);
    --rule-soft:    oklch(0.945 0.006 85.0);
    --accent:       oklch(0.487 0.132 162.0);
    --accent-forte: oklch(0.420 0.135 162.0);
    --accent-soft:  oklch(0.956 0.024 170.0);
    --sobre-accent: oklch(1.000 0.000 0.0);
    /* 0.535 e nao 0.550: em cima de --warm-soft, a pilula de parcela ficava
       em 4.28:1, abaixo dos 4.5 que texto pequeno pede. Mesma matiz, mesma
       saturacao, 1.5% mais escuro - imperceptivel ao lado, e leva o par para
       4.55:1. De quebra, sobre o cartao vai de 4.96 para 5.28. */
    --warm:         oklch(0.535 0.140 73.0);
    --warm-soft:    oklch(0.950 0.030 73.0);

    /* O segundo laranja, para duas deducoes lado a lado terem cores proprias.
       Matiz 35 contra 73 do --warm: 38 graus de distancia, que separa a olho
       sem virar vermelho e sem ser confundido com --bad, que e matiz 10.
       Sobre o cartao branco da 5.98:1. */
    --warm-alt:     oklch(0.520 0.170 35.0);
    --good:         oklch(0.510 0.130 162.0);
    --good-soft:    oklch(0.956 0.024 170.0);
    --bad:          oklch(0.520 0.200 10.0);
    --bad-soft:     oklch(0.940 0.030 10.0);

    --sombra:      0 1px 3px 0 rgba(20, 30, 50, 0.05), 0 2px 8px -1px rgba(20, 30, 50, 0.06);
    --sombra-alta: 0 8px 24px -2px rgba(20, 30, 50, 0.10);
  }
  /* FIM TEMA */

  /* O escuro é o padrão, porque é o único que ele usa.

     No escuro a sombra quase não separa nada: preto sobre preto não projeta.
     A profundidade tem que vir da luminosidade, e por isso o `surface` sobe
     mais acima do `ground` do que subiria num tema claro. Com 0.210 o cartão
     ficava a 1,10:1 do fundo, praticamente colado nele.

     O marcador abaixo fica numa linha só de propósito. O `conferir_contraste`
     procura o rótulo do tema e para no primeiro asterisco, então explicação
     dentro do próprio marcador faz o bloco sumir do verificador - foi o que
     acabou de acontecer aqui, duas vezes seguidas. */

  /* TEMA: escuro */
  :root,
  :root[data-tema="escuro"],
  [data-visual="atual"][data-tema="escuro"] {
    color-scheme: dark;

    --ground:       oklch(0.160 0.014 240);
    --surface:      oklch(0.228 0.017 240);
    --surface-alt:  oklch(0.298 0.021 240);
    --ink:          oklch(0.910 0.008 240);
    --ink-soft:     oklch(0.730 0.012 240);
    --ink-faint:    oklch(0.570 0.014 240);
    --rule:         oklch(0.345 0.018 240);
    --rule-soft:    oklch(0.285 0.017 240);
    --accent:       oklch(0.720 0.110 180);
    --accent-forte: oklch(0.800 0.100 180);
    --accent-soft:  oklch(0.270 0.035 180);
    --sobre-accent: oklch(0.160 0.014 240);
    --warm:         oklch(0.760 0.100 65);
    --warm-soft:    oklch(0.290 0.040 65);
    --warm-alt:     oklch(0.780 0.105 40);   /* 8.17:1 sobre o cartao */
    --good:         oklch(0.740 0.110 145);
    --good-soft:    oklch(0.270 0.040 145);
    --bad:          oklch(0.700 0.130 25);
    --bad-soft:     oklch(0.290 0.050 25);

    --sombra:      0 2px 8px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.3);
    --sombra-alta: 0 4px 14px rgba(0, 0, 0, 0.45), 0 16px 36px rgba(0, 0, 0, 0.4);
  }
  /* FIM TEMA */


  /* O tratamento de cartao, num lugar so.
   *
   * `.bloco`, `.painel` e `.tabela-caixa` repetiam as mesmas quatro linhas.
   * Enquanto era texto repetido, mudar a linguagem visual do sistema pedia
   * quatro arquivos; agora e um bloco de valores, e e isso que permite ter
   * mais de uma identidade sem duplicar componente.
   *
   * Estes sao os valores da identidade `atual`, iguais aos de sempre. Uma
   * identidade nova sobrescreve o que quiser em `[data-visual="..."]`.
   */
  :root {
    --carta-fundo:        var(--surface);
    --carta-borda:        1px solid var(--rule);
    --carta-raio:         var(--raio-grande);
    --carta-sombra:       var(--sombra);
    --carta-sombra-alta:  var(--sombra-alta);
    --carta-respiro:      1.75rem;
    --painel-respiro:     1.35rem 1.4rem;
    --carta-levanta:      translateY(-2px);

    /* Densidade e escala. Nao sao enfeite: sao o que separa uma linguagem
       visual de outra de verdade.
       Ele viu as tres primeiras identidades e disse "nao vi quase diferenca
       nenhuma", com razao - eu tinha mexido so em cor, canto e sombra, que
       sao os tokens faceis. Duas telas com o mesmo espacamento e a mesma
       escala de numero sao a mesma tela pintada de outra cor. */
    --linha-respiro:          .6rem .85rem;
    --numerao-tamanho:        clamp(2.4rem, 5.5vw, 3.4rem);
    --painel-numero-tamanho:  1.85rem;
    --grade-gap:              1.5rem;
  }

  :root {
    --f-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --f-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --f-mono:    "IBM Plex Mono", Consolas, monospace;

    --raio:        8px;
    --raio-grande: 12px;
    --raio-sm:     6px;

    /* Escala de espaçamento unificada */
    --space-xs:  0.25rem;  /*  4px */
    --space-sm:  0.5rem;   /*  8px */
    --space-md:  0.75rem;  /* 12px */
    --space-lg:  1rem;     /* 16px */
    --space-xl:  1.5rem;   /* 24px */
    --space-2xl: 2rem;     /* 32px */
    --space-3xl: 3rem;     /* 48px */

    --transicao: 200ms cubic-bezier(.16, 1, .3, 1);
  }

  /* As identidades vem DEPOIS dos padroes de proposito.
   *
   * `:root` e `[data-visual="x"]` tem a mesma especificidade, entao quem vence
   * e quem vem por ultimo. Com os blocos la em cima, o `:root` abaixo
   * devolvia `--carta-raio` e `--raio-grande` ao valor padrao, e as tres
   * identidades saiam com o mesmo canto de 12px - sem erro nenhum, so ordem.
   * Apareceu ao medir o estilo computado das tres; a olho as fotos pareciam
   * diferentes por causa da cor.
   */
  /* =====================================================================
     IDENTIDADES VISUAIS
     =====================================================================

     `data-tema` decide claro ou escuro. `data-visual` decide a LINGUAGEM:
     com caixa ou sem, densa ou arejada, sobria ou vibrante. Sao perguntas
     diferentes, e por isso sao dois atributos.

     Sem `data-visual`, vale `atual`, que e o que sempre existiu. A garantia
     nao e promessa: os estilos computados de `.bloco`, `.painel` e
     `.tabela-caixa` foram comparados antes e depois da extracao dos tokens, e
     deram zero diferenca.

     Tres opcoes, para ele escolher vendo:

       atual   cartao com borda e sombra suave, verde-petroleo. O de hoje.
       papel   sem caixa nenhuma. Regua fina e espaco separam o conteudo, e a
               tipografia carrega a hierarquia. Denso e calmo, como extrato
               impresso. Minimalismo de tirar elementos, nao de encolher.
       onix    cartao flutuando em fundo profundo, raio generoso, um acento
               vibrante so. Moderno no sentido de aplicativo financeiro.

     Os seletores nao usam `:root` de proposito: assim um `<div>` com
     `data-visual` e `data-tema` proprios vale como uma ilha da outra
     identidade, e a tela de Aparencia mostra as tres lado a lado, com os
     componentes de verdade, em vez de descrever com palavras.

     **Isto e uma fase de escolha, nao um estado final.** Tres paletas custam
     conferencia tripla em toda mudanca de CSS, e este projeto ja reduziu de
     tres temas para dois exatamente por isso (ver DECISOES). Quando ele
     escolher, as outras saem.
     ===================================================================== */

  /* ---------------------------------------------------------- PAPEL ---- */

  /* TEMA: papel-escuro */
  [data-visual="papel"][data-tema="escuro"] {
    color-scheme: dark;

    /* Fundo e cartao sao a MESMA cor, de proposito: sem caixa, o fundo e a
       superficie de leitura, e por isso ele clareia um pouco em relacao ao
       tema escuro atual. Fundo de pagina e fundo de cartao tem trabalhos
       diferentes. */
    --ground:       oklch(0.178 0.010 250);
    --surface:      oklch(0.178 0.010 250);
    --surface-alt:  oklch(0.238 0.012 250);
    --ink:          oklch(0.935 0.005 250);
    --ink-soft:     oklch(0.760 0.008 250);
    --ink-faint:    oklch(0.610 0.010 250);
    --rule:         oklch(0.330 0.012 250);
    --rule-soft:    oklch(0.250 0.010 250);
    --accent:       oklch(0.780 0.075 205);
    --accent-forte: oklch(0.860 0.065 205);
    --accent-soft:  oklch(0.270 0.028 205);
    --sobre-accent: oklch(0.150 0.010 250);
    --warm:         oklch(0.790 0.090 70);
    --warm-soft:    oklch(0.285 0.035 70);
    --warm-alt:     oklch(0.795 0.095 40);
    --good:         oklch(0.780 0.090 155);
    --good-soft:    oklch(0.270 0.032 155);
    --bad:          oklch(0.740 0.115 25);
    --bad-soft:     oklch(0.290 0.045 25);

    --sombra:      none;
    --sombra-alta: none;
  }
  /* FIM TEMA */

  /* TEMA: papel-claro */
  [data-visual="papel"][data-tema="claro"] {
    color-scheme: light;

    --ground:       oklch(0.988 0.002 250);
    --surface:      oklch(0.988 0.002 250);
    --surface-alt:  oklch(0.938 0.005 250);
    --ink:          oklch(0.215 0.012 250);
    --ink-soft:     oklch(0.435 0.014 250);
    --ink-faint:    oklch(0.585 0.014 250);
    --rule:         oklch(0.855 0.008 250);
    --rule-soft:    oklch(0.925 0.005 250);
    --accent:       oklch(0.480 0.105 235);
    --accent-forte: oklch(0.400 0.110 235);
    --accent-soft:  oklch(0.950 0.022 235);
    --sobre-accent: oklch(1.000 0.000 0);
    --warm:         oklch(0.520 0.140 65);
    --warm-soft:    oklch(0.948 0.030 65);
    --warm-alt:     oklch(0.505 0.165 35);
    --good:         oklch(0.480 0.115 160);
    --good-soft:    oklch(0.950 0.025 160);
    --bad:          oklch(0.505 0.195 20);
    --bad-soft:     oklch(0.945 0.028 20);

    --sombra:      none;
    --sombra-alta: none;
  }
  /* FIM TEMA */

  /* A linguagem do papel, igual nos dois temas.
     Sem fundo, sem borda em volta, sem sombra, sem raio. O que separa um
     bloco do proximo e uma regua fina no topo e o espaco. */
  [data-visual="papel"] {
    /* Denso: mais linha na tela sem apertar o texto, que e o ponto de um
       extrato. E o numero grande DESCE - sem cartao para conter, um numero de
       3,4rem vira grito. A hierarquia vem do peso, nao do tamanho. */
    --linha-respiro:          .42rem .7rem;
    --numerao-tamanho:        clamp(1.9rem, 4vw, 2.5rem);
    --painel-numero-tamanho:  1.5rem;
    --grade-gap:              1.1rem;

    --carta-fundo:       transparent;
    --carta-borda:       0;
    --carta-raio:        0;
    --carta-sombra:      none;
    --carta-sombra-alta: none;
    --carta-respiro:     1.5rem 0 0;
    --painel-respiro:    1.1rem 0 0;
    --carta-levanta:     none;
    --raio:              4px;
    --raio-grande:       4px;
    --raio-sm:           3px;
  }

  /* ----------------------------------------------------------- ONIX ---- */

  /* TEMA: onix-escuro */
  [data-visual="onix"][data-tema="escuro"] {
    color-scheme: dark;

    /* Aqui e o contrario do papel: o fundo desce quase ao preto para o cartao
       poder subir. A profundidade e o assunto desta identidade. */
    --ground:       oklch(0.128 0.012 268);
    --surface:      oklch(0.212 0.016 268);
    --surface-alt:  oklch(0.272 0.020 268);
    --ink:          oklch(0.945 0.006 268);
    --ink-soft:     oklch(0.755 0.010 268);
    --ink-faint:    oklch(0.595 0.013 268);
    --rule:         oklch(0.330 0.019 268);
    --rule-soft:    oklch(0.270 0.016 268);
    --accent:       oklch(0.800 0.155 158);
    --accent-forte: oklch(0.870 0.140 158);
    --accent-soft:  oklch(0.275 0.048 158);
    --sobre-accent: oklch(0.128 0.012 268);
    --warm:         oklch(0.805 0.135 78);
    --warm-soft:    oklch(0.285 0.048 78);
    --warm-alt:     oklch(0.795 0.130 42);
    --good:         oklch(0.800 0.155 158);
    --good-soft:    oklch(0.275 0.048 158);
    --bad:          oklch(0.735 0.160 18);
    --bad-soft:     oklch(0.290 0.060 18);

    --sombra:      0 2px 10px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.40);
    --sombra-alta: 0 6px 18px rgba(0, 0, 0, 0.55), 0 22px 48px rgba(0, 0, 0, 0.48);
  }
  /* FIM TEMA */

  /* TEMA: onix-claro */
  [data-visual="onix"][data-tema="claro"] {
    color-scheme: light;

    --ground:       oklch(0.932 0.006 270);
    --surface:      oklch(1.000 0.000 0);
    --surface-alt:  oklch(0.952 0.005 270);
    --ink:          oklch(0.185 0.015 270);
    --ink-soft:     oklch(0.420 0.016 270);
    --ink-faint:    oklch(0.590 0.016 270);
    --rule:         oklch(0.890 0.008 270);
    --rule-soft:    oklch(0.940 0.005 270);
    --accent:       oklch(0.482 0.142 158);
    --accent-forte: oklch(0.428 0.142 158);
    --accent-soft:  oklch(0.950 0.030 158);
    --sobre-accent: oklch(1.000 0.000 0);
    --warm:         oklch(0.535 0.140 73);
    --warm-soft:    oklch(0.950 0.030 73);
    --warm-alt:     oklch(0.520 0.170 35);
    --good:         oklch(0.505 0.140 158);
    --good-soft:    oklch(0.952 0.028 158);
    --bad:          oklch(0.520 0.200 10);
    --bad-soft:     oklch(0.940 0.030 10);

    --sombra:      0 1px 3px rgba(16, 24, 40, 0.06), 0 8px 24px -4px rgba(16, 24, 40, 0.08);
    --sombra-alta: 0 4px 8px -1px rgba(16, 24, 40, 0.08), 0 16px 36px -4px rgba(16, 24, 40, 0.14);
  }
  /* FIM TEMA */

  /* A linguagem do onix: raio generoso, borda quase invisivel, sombra fazendo
     o trabalho de separar. O cartao flutua em vez de ser recortado. */
  [data-visual="onix"] {
    /* Arejado: o cartao flutua, entao ele precisa de ar dentro. O numero e o
       assunto da tela e cresce; a linha da tabela respira. */
    --linha-respiro:          .82rem 1rem;
    --numerao-tamanho:        clamp(2.8rem, 6.5vw, 4.1rem);
    --painel-numero-tamanho:  2.2rem;
    --grade-gap:              1.9rem;

    --carta-fundo:       var(--surface);
    --carta-borda:       1px solid var(--rule-soft);
    --carta-raio:        18px;
    --carta-sombra:      var(--sombra);
    --carta-sombra-alta: var(--sombra-alta);
    --carta-respiro:     1.9rem;
    --painel-respiro:    1.5rem 1.6rem;
    --carta-levanta:     translateY(-3px);
    --raio:              12px;
    --raio-grande:       18px;
    --raio-sm:           9px;
  }

}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--f-body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* O tema troca sem piscar. `startViewTransition` faz o resto no JS. */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 260ms;
  }

  a {
    color: var(--accent);
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: color var(--transicao);
  }

  a:hover { color: var(--accent-forte); }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--raio-sm);
  }

  ::selection {
    background: var(--accent-soft);
    color: var(--ink);
  }

  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: var(--ground); }
  ::-webkit-scrollbar-thumb {
    background: var(--rule);
    border-radius: 99px;
    border: 2px solid var(--ground);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

  .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      transition: none !important;
      animation: none !important;
    }
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none; }
  }
}

@layer componentes {
  /* ---------- tela de entrada ---------- */

  .entrada {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background:
      radial-gradient(ellipse 70% 55% at 50% 0%,
        color-mix(in oklab, var(--accent) 12%, transparent), transparent 70%),
      var(--ground);
  }

  .entrada-caixa { width: 100%; max-width: 400px; }

  .marca {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin-bottom: .3rem;
  }

  .marca-nome {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 2.2rem;
    letter-spacing: -.02em;
    margin: 0;
  }

  .marca-nota {
    font-family: var(--f-mono);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ink-faint);
  }

  .entrada-dica {
    color: var(--ink-soft);
    font-size: .95rem;
    margin: 0 0 1.8rem;
  }

  .cartao {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--raio-grande);
    box-shadow: var(--sombra);
    padding: 2rem;
  }

  /* ---------- formulário moderno ---------- */

  .campo { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.15rem; min-width: 0; }

  .campo label {
    font-family: var(--f-body);
    font-size: .84rem;
    color: var(--ink-soft);
    font-weight: 600;
  }

  .campo input,
  .campo select,
  .campo textarea {
    font-family: var(--f-body);
    font-size: .95rem;
    padding: .72rem .9rem;
    border: 1px solid var(--rule);
    border-radius: var(--raio);
    background: var(--surface);
    color: var(--ink);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    transition: border-color var(--transicao), box-shadow var(--transicao),
                background var(--transicao);
  }

  .campo input:hover,
  .campo select:hover { border-color: var(--ink-faint); }

  .campo input:focus,
  .campo select:focus,
  .campo textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent);
  }

  .campo input.codigo {
    font-family: var(--f-mono);
    font-size: 1.6rem;
    letter-spacing: .5em;
    text-align: center;
    padding: .7rem .5rem .7rem 1rem;
  }

  .botao {
    width: 100%;
    font-family: var(--f-body);
    font-size: .95rem;
    font-weight: 600;
    padding: .72rem 1.4rem;
    border: 0;
    border-radius: var(--raio);
    background: linear-gradient(180deg, var(--accent), var(--accent-forte));
    color: var(--sobre-accent);
    cursor: pointer;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05),
                0 4px 14px -3px color-mix(in oklab, var(--accent) 45%, transparent);
    transition: background var(--transicao), transform var(--transicao),
                box-shadow var(--transicao);
  }

  .botao:hover {
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.08),
                0 6px 20px -3px color-mix(in oklab, var(--accent) 55%, transparent);
    transform: translateY(-1px);
  }

  .botao:active { transform: translateY(1px); }

  .aviso {
    border-left: 4px solid var(--bad);
    background: var(--bad-soft);
    color: var(--ink);
    padding: .75rem 1rem;
    border-radius: var(--raio);
    font-size: .92rem;
    margin-bottom: 1.1rem;
    border: 1px solid color-mix(in oklab, var(--bad) 25%, transparent);
    border-left-width: 4px;
  }

  .aviso.bom {
    border-color: color-mix(in oklab, var(--good) 25%, transparent);
    border-left-color: var(--good);
    background: var(--good-soft);
  }

  .aviso.atencao {
    border-color: color-mix(in oklab, var(--warm) 25%, transparent);
    border-left-color: var(--warm);
    background: var(--warm-soft);
  }

  .rodape-nota {
    font-family: var(--f-mono);
    font-size: .75rem;
    color: var(--ink-faint);
    text-align: center;
    margin-top: 1.4rem;
    line-height: 1.5;
  }
}

@layer base {
  .so-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

.rolagem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  padding: 1.4rem 0 2.4rem;
}

.rolagem-conta {
  margin: 0;
  font-size: .8rem;
  letter-spacing: .02em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.rolagem.carregando::after {
  content: "";
  width: 2.4rem;
  height: 3px;
  border-radius: 3px;
  background: var(--accent);
  animation: rolagem-pulso 900ms ease-in-out infinite;
}

@keyframes rolagem-pulso {
  0%, 100% { opacity: .25; transform: scaleX(.5); }
  50%      { opacity: 1;   transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .rolagem.carregando::after { animation: none; opacity: .6; }
}

.topo-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .15rem;
}

.topo-total-rotulo {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-faint);
  font-weight: 600;
}

.topo-total-valor {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}