/* ==========================================================================
   solitpmt · sistema de layout compartilhado (css/solit.css)

   Direção: institucional. Fundo branco amplo, títulos em Outfit fino, estrutura
   feita de linhas de 1 px e uma grade assimétrica (rótulo à esquerda, conteúdo
   à direita). O navy é a única cor de marca. O verde aparece só como sinal de
   concluído ("Liberado", "Concluído") ou de serviço operando. Cores de aviso,
   erro e informação são semânticas: aparecem quando algo pede atenção, nunca
   como enfeite.

   Regras deste arquivo
   - Componentes usam só tokens (cores, fontes, tamanhos, espaços, raios,
     sombras, transições). Para mudar o visual, mude o token.
   - O tema claro é o padrão. O escuro redefine os mesmos tokens em dois
     lugares: @media (prefers-color-scheme: dark) com :root:not([data-theme="light"])
     e :root[data-theme="dark"] (escolha manual feita por js/site.js).
   - Pontos de quebra (media queries não aceitam variáveis): 480, 560, 640,
     768, 1024 e 1200 px. Os blocos em "em" (seção 19) não seguem a largura:
     respondem à fonte maior escolhida pela pessoa no navegador.
   - Sem JavaScript o conteúdo continua inteiro. O JS só acrescenta o menu
     recolhido do celular, a troca de tema, o "Mostrar senha" e o ano do rodapé.
   - O bloco próprio da página inicial fica em css/inicio.css; a casca e os
     padrões da área logada, em css/painel.css.
   - A seção 21 (barra de demonstração) é só do protótipo: ao aplicar ao
     projeto, apague-a.

   Sumário
    1. Tokens: tema claro
    2. Tokens: tema escuro
    3. Base
    4. Utilitários
    5. Tipografia por classe
    6. Botões, links e seletor segmentado
    7. Marca
    8. Cabeçalho, navegação e menu do celular
    9. Etiqueta e selos de situação
   10. Alertas
   11. Formulários
   12. Cartões, código mostrado uma vez, QR e diálogo
   13. Saldos, valores a entrar, extrato e resumo do saque
   14. Tabelas
   15. Seções e faixa navy
   16. Rodapé e controle de tema
   17. Lista vazia, carregando e índice da documentação
   18. Movimento
   19. Fonte ampliada pelo navegador
   20. Alto contraste do sistema (forced-colors)
   21. Barra de demonstração (só no protótipo)

   Contraste WCAG medido com `node _ferramentas/sonda.mjs contraste`
   (AA: 4,5:1 texto normal; 3:1 texto grande e elementos de interface)

   Medido em 07/10/2026.

   Claro                                   sobre #FFFFFF   sobre #F3F5F9
   --tinta        #0B1F3A                  16,52           15,13
   --texto        #475467                   7,69            7,04
   --texto-suave  #5D6A7D                   5,49            5,03
   --verde-texto  #0A7C49                   5,26            4,82
   --aviso-texto  #B45309                   5,02            4,60
   --erro-texto   #B91C1C                   6,47            5,93
   --info-texto   #0369A1                   5,93            5,44
   --borda-campo  #7D8A9C (contorno, UI)    3,51            3,21
   --erro         #DC2626 (contorno, UI)    4,83
   --foco         #1F385C (anel de foco)   11,81
   botão: #FFFFFF sobre #0B1F3A 16,52 · sobre #1F385C (hover) 11,81
   botão de perigo: #FFFFFF sobre #B91C1C 6,47 · sobre #991B1B (hover) 8,31
     contorno: #B91C1C sobre #FFFFFF 6,47 · sobre --erro-fundo (hover) 5,90
   linha sob o mouse (--superficie-linha #F3F5F9): os pares da coluna da
     direita (texto-suave 5,03; verde-texto 4,82; aviso-texto 4,60)
   faixa navy: texto #B9C4D3 9,36 · título #FFFFFF 16,52 · botão
               #0B1F3A sobre #FFFFFF 16,52 e sobre #E2E7EE (hover) 13,29
   alertas: --texto sobre --sucesso-fundo 7,09 · --aviso-fundo 7,16 ·
            --erro-fundo 7,01 · --info-fundo 7,03; ícone (cor -texto)
            sobre o próprio fundo: 4,85 · 4,68 · 5,90 · 5,43
   barra de liberação: #0B1F3A sobre o trilho #C6CFDB 10,50
   link no texto: sublinhado --texto-suave 5,49 (distingue o link do texto)
   --verde #0E9A5B sobre #FFFFFF 3,63: só ícone e barra, nunca texto.

   Escuro (só cores da folha de identidade; cartões em Main Navy)
                                  sobre #050C18  sobre #0B1F3A  sobre #0A1424
   --tinta        #F3F5F9         17,94          15,13          16,90
   --texto        #B3BDCB         10,31           8,70           9,71
   --texto-suave  #8F9CAE          7,03           5,93           6,62
   --verde-texto  #12B66E          7,41           6,25           6,98
   --aviso-texto  #F59E0B          9,12           7,69
   --erro-texto   #F87171          7,08           5,97
   --info-texto   #38BDF8          9,14           7,71
   --borda-campo  #6B7A90 (UI)     4,49           3,78
   --foco         #9FB4D4          9,28           7,83
   botão: #0B1F3A sobre #E2E7EE 13,29 · sobre #F3F5F9 (hover) 15,13
   hover discreto: #F3F5F9 sobre #1F385C (Light Navy) 10,82
   botão de perigo: #050C18 sobre #F87171 7,08 · sobre #FCA5A5 (hover) 10,32
     contorno: #F87171 sobre #0B1F3A 5,97 · sobre --erro-fundo (hover) 6,49
   linha sob o mouse (--superficie-linha #11284A): --texto-suave 5,28 ·
     --texto 7,75 · --tinta 13,49 · verde 5,57 · aviso 6,86 · erro 5,32
   faixa navy: texto #B9C4D3 9,36 · título #F3F5F9 15,13
   alertas: --texto sobre --sucesso-fundo 8,80 · --aviso-fundo 9,13 ·
            --erro-fundo 9,45 · --info-fundo 9,00
   Superfícies: cartão #0B1F3A sobre o fundo #050C18 1,19 e sobre #0A1424
   1,12; o cabeçalho do cartão é da mesma cor, separado só pela linha.
   Nunca texto sobre Light Navy #1F385C além de --tinta: #8F9CAE dá 4,24.
   Por isso --superficie-hover fica para o que tem só --tinta por cima
   (botão discreto, item atual da navegação, segmentado marcado); linha de
   lista ou de tabela sob o mouse, com texto suave, usa --superficie-linha.

   Linhas decorativas (não carregam informação): claro --linha #E2E7EE
   1,24:1 e --linha-forte #C6CFDB 1,57:1 sobre #FFFFFF; escuro --linha
   #22324D 1,52:1 sobre #050C18 e 1,28:1 sobre #0B1F3A; --linha-forte
   #2E405E 1,88:1 e 1,58:1. Campos usam --borda-campo, nunca --linha.
   ========================================================================== */


/* ==========================================================================
   1. Tokens: tema claro (padrão)
   ========================================================================== */
:root {
  /* Superfícies */
  --fundo: #ffffff;
  --fundo-suave: #f3f5f9;        /* Off-White: seções de pausa, como Taxas */
  --superficie: #ffffff;         /* cartões, extrato, campos */
  --superficie-cab: #f3f5f9;     /* faixa de título dos cartões */
  --superficie-hover: #f3f5f9;   /* botão discreto e opção marcada: só --tinta por cima */
  --superficie-linha: #f3f5f9;   /* linha de lista ou tabela sob o mouse ou em foco */
  --qr-fundo: #ffffff;           /* moldura do QR: clara nos dois temas */
  --veu: rgba(5, 12, 24, 0.55);  /* fundo atrás do diálogo */

  /* Texto */
  --tinta: #0b1f3a;              /* Main Navy: títulos, marca, valores */
  --texto: #475467;              /* Dark Slate: texto corrido */
  --texto-suave: #5d6a7d;        /* legendas e rótulos */

  /* Linhas (decorativas: estruturam, não informam) */
  --linha: #e2e7ee;              /* Light Slate */
  --linha-forte: #c6cfdb;
  --borda-campo: #7d8a9c;        /* contorno de campo: 3:1 exigido */
  --sublinhado: var(--linha-forte);       /* links soltos (com seta, rodapé) */
  --sublinhado-texto: var(--texto-suave); /* link no meio da frase */

  /* Ação */
  --botao: #0b1f3a;
  --botao-texto: #ffffff;
  --botao-hover: #1f385c;        /* Light Navy */
  --foco: #1f385c;
  --selecao: #d6deea;

  /* Ação que não se desfaz (botão cheio, só dentro da confirmação) */
  --perigo: #b91c1c;
  --perigo-hover: #991b1b;
  --perigo-texto: #ffffff;

  /* Sinal de concluído (Trust Emerald) */
  --verde: #0e9a5b;              /* ícones e barras, nunca texto pequeno */
  --verde-texto: #0a7c49;        /* mesmo matiz, escurecido para texto */
  --sucesso-fundo: #eef8f3;

  /* Funcionais (folha de identidade); a versão -texto passa AA */
  --aviso: #d97706;
  --aviso-texto: #b45309;
  --aviso-fundo: #fdf6ec;
  --erro: #dc2626;
  --erro-texto: #b91c1c;
  --erro-fundo: #fdf2f2;
  --info: #0284c7;
  --info-texto: #0369a1;
  --info-fundo: #eef6fb;

  /* Faixa navy (chamada final): devolve ao navy o papel estrutural */
  --faixa-fundo: #0b1f3a;
  --faixa-linha: #1f385c;
  --faixa-titulo: #ffffff;
  --faixa-texto: #b9c4d3;
  --faixa-botao: #ffffff;
  --faixa-botao-texto: #0b1f3a;
  --faixa-botao-hover: #e2e7ee;

  /* Sombras: só em cartões elevados e no que flutua (menu, diálogo) */
  --sombra-cartao: 0 1px 2px rgba(11, 31, 58, 0.04), 0 18px 40px -24px rgba(11, 31, 58, 0.18);
  --sombra-menu: 0 16px 32px -18px rgba(11, 31, 58, 0.28);

  /* Fontes. O IBM Plex Mono só é carregado nas páginas com código (guia,
     /docs e a entrada); nas outras vale a pilha de reserva. */
  --fonte-marca: "Outfit", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --fonte-texto: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fonte-codigo: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Escala tipográfica */
  --tam-micro: 0.75rem;          /* 12 px: rótulos em caixa alta, etiqueta */
  --tam-legenda: 0.8125rem;      /* 13 px: datas, notas, selos */
  --tam-pequeno: 0.875rem;       /* 14 px */
  --tam-ui: 0.9375rem;           /* 15 px: botões, menus, tabelas */
  --tam-campo: 1rem;             /* 16 px: campos (evita zoom no iOS) */
  --tam-corpo: 1.0625rem;        /* 17 px: texto corrido */
  --tam-lead: 1.125rem;          /* 18 px: abertura de seção e da faixa */
  --tam-destaque: 1.1875rem;     /* 19 px: texto de abertura da página */
  --tam-bloco: 1.1875rem;        /* h3 */
  --tam-saldo: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem);
  --tam-numero: clamp(1.75rem, 1.4rem + 1vw, 2.375rem);
  --tam-secao: clamp(1.875rem, 1.35rem + 1.7vw, 2.75rem);
  --tam-exibicao: clamp(2.5rem, 1.6rem + 3vw, 3.125rem);

  /* Pesos do Outfit: o 300 fica só em títulos de 40 px ou mais */
  --peso-exibicao: 300;
  --peso-secao: 300;

  /* Espaços (múltiplos de 4) */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 20px;
  --esp-6: 24px;
  --esp-7: 32px;
  --esp-8: 40px;
  --esp-9: 48px;
  --esp-10: 56px;
  --esp-11: 72px;
  --respiro: clamp(72px, 9vw, 128px);   /* topo e base de cada seção */

  /* Raios: quase retos, nada de "pílula" em tudo */
  --raio: 3px;
  --raio-cartao: 6px;
  --raio-pilula: 999px;

  /* Contêiner */
  --largura: 1200px;
  --margem: clamp(16px, 4.5vw, 56px);
  --largura-texto: 36em;
  --topo-altura: 72px;           /* barra do cabeçalho a partir de 768 px */

  /* Movimento: um único ritmo, calmo */
  --transicao: 220ms ease-out;

  /* Ícones dos selos e alertas (máscaras; a cor vem de currentColor) */
  --icone-pendente: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.8' fill='none' stroke='%23000' stroke-width='1.5' stroke-dasharray='2.3 2.25'/%3E%3C/svg%3E");
  --icone-relogio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M8 4.9v3.3l2.1 1.4' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --icone-ponto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Ccircle cx='8' cy='8' r='2.6'/%3E%3C/svg%3E");
  --icone-setas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.9 6.4A5.2 5.2 0 0 0 3.6 5.1'/%3E%3Cpath d='M3.3 2.5v2.9h2.9'/%3E%3Cpath d='M3.1 9.6a5.2 5.2 0 0 0 9.3 1.3'/%3E%3Cpath d='M12.7 13.5v-2.9H9.8'/%3E%3C/g%3E%3C/svg%3E");
  --icone-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.3 8.4l3 3 6.4-6.8' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icone-ampulheta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 2.5h7M4.5 13.5h7M5.5 2.5c0 3.2 5 3.3 5 5.5s-5 2.3-5 5.5M10.5 2.5c0 3.2-5 3.3-5 5.5s5 2.3 5 5.5' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --icone-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M6 6l4 4M10 6l-4 4' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --icone-encerrado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M3.9 12.1l8.2-8.2' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
  --icone-devolucao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.3 3.4L3.1 6.6l3.2 3.2'/%3E%3Cpath d='M3.5 6.6h5.7a3.4 3.4 0 0 1 0 6.8H6.9'/%3E%3C/g%3E%3C/svg%3E");
  --icone-sucesso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M6.4 10.3l2.5 2.5 4.8-5.2' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icone-aviso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.8l7.6 13.4H2.4z' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M10 8v4' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.3' r='1'/%3E%3C/svg%3E");
  --icone-erro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M7.4 7.4l5.2 5.2M12.6 7.4l-5.2 5.2' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --icone-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M10 9v5' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='6.4' r='1'/%3E%3C/svg%3E");
  --icone-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 6.5h14M3 13.5h14' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --icone-fechar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 5l10 10M15 5L5 15' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  /* seta do <select>: imagem de fundo, então a cor vai no próprio SVG (--texto) */
  --seta-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%23475467' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  color-scheme: light;
}


/* ==========================================================================
   2. Tokens: tema escuro (desenhado, não invertido)
   Fundo Dark Navy #050C18 e cartões em Main Navy #0B1F3A, com textos da
   própria folha de identidade (Off-White, Mid Slate, Emerald escuro). O
   hover usa Light Navy #1F385C, como a folha indica. Outfit um pouco mais
   pesado, porque traço claro sobre fundo escuro parece mais fino.
   O bloco aparece duas vezes, com os mesmos valores: mantenha os dois iguais.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #050c18;
    --fundo-suave: #0a1424;
    --superficie: #0b1f3a;
    --superficie-cab: #0b1f3a;
    --superficie-hover: #1f385c;
    --superficie-linha: #11284a;
    --veu: rgba(0, 0, 0, 0.7);
    --tinta: #f3f5f9;
    --texto: #b3bdcb;
    --texto-suave: #8f9cae;
    --linha: #22324d;
    --linha-forte: #2e405e;
    --borda-campo: #6b7a90;
    --botao: #e2e7ee;
    --botao-texto: #0b1f3a;
    --botao-hover: #f3f5f9;
    --foco: #9fb4d4;
    --selecao: #1f385c;
    --perigo: #f87171;
    --perigo-hover: #fca5a5;
    --perigo-texto: #050c18;
    --verde: #12b66e;
    --verde-texto: #12b66e;
    --sucesso-fundo: #0b2219;
    --aviso: #f59e0b;
    --aviso-texto: #f59e0b;
    --aviso-fundo: #22190a;
    --erro: #f87171;
    --erro-texto: #f87171;
    --erro-fundo: #251115;
    --info: #38bdf8;
    --info-texto: #38bdf8;
    --info-fundo: #0a1d2e;
    --faixa-fundo: #0b1f3a;
    --faixa-linha: #1f385c;
    --faixa-titulo: #f3f5f9;
    --faixa-texto: #b9c4d3;
    --faixa-botao: #e2e7ee;
    --faixa-botao-texto: #0b1f3a;
    --faixa-botao-hover: #f3f5f9;
    --sombra-cartao: none;
    --sombra-menu: 0 18px 40px -20px rgba(0, 0, 0, 0.7);
    --seta-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%23B3BDCB' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --peso-exibicao: 350;
    --peso-secao: 400;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --fundo: #050c18;
  --fundo-suave: #0a1424;
  --superficie: #0b1f3a;
  --superficie-cab: #0b1f3a;
  --superficie-hover: #1f385c;
  --superficie-linha: #11284a;
  --veu: rgba(0, 0, 0, 0.7);
  --tinta: #f3f5f9;
  --texto: #b3bdcb;
  --texto-suave: #8f9cae;
  --linha: #22324d;
  --linha-forte: #2e405e;
  --borda-campo: #6b7a90;
  --botao: #e2e7ee;
  --botao-texto: #0b1f3a;
  --botao-hover: #f3f5f9;
  --foco: #9fb4d4;
  --selecao: #1f385c;
  --perigo: #f87171;
  --perigo-hover: #fca5a5;
  --perigo-texto: #050c18;
  --verde: #12b66e;
  --verde-texto: #12b66e;
  --sucesso-fundo: #0b2219;
  --aviso: #f59e0b;
  --aviso-texto: #f59e0b;
  --aviso-fundo: #22190a;
  --erro: #f87171;
  --erro-texto: #f87171;
  --erro-fundo: #251115;
  --info: #38bdf8;
  --info-texto: #38bdf8;
  --info-fundo: #0a1d2e;
  --faixa-fundo: #0b1f3a;
  --faixa-linha: #1f385c;
  --faixa-titulo: #f3f5f9;
  --faixa-texto: #b9c4d3;
  --faixa-botao: #e2e7ee;
  --faixa-botao-texto: #0b1f3a;
  --faixa-botao-hover: #f3f5f9;
  --sombra-cartao: none;
  --sombra-menu: 0 18px 40px -20px rgba(0, 0, 0, 0.7);
  --seta-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%23B3BDCB' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --peso-exibicao: 350;
  --peso-secao: 400;
  color-scheme: dark;
}


/* ==========================================================================
   3. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: var(--tam-corpo);
  line-height: 1.65;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, h4, figure, dl, dd, blockquote, pre { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
strong { font-weight: 600; color: var(--tinta); }
[hidden] { display: none !important; }

/* Calço de transição: o JS atual do projeto (common.js) esconde e mostra
   pela classe .hidden do Tailwind. Ao portar, troque show/hide por
   node.hidden e apague esta regra. */
.hidden { display: none !important; }

/* Nos elementos, só família, cor e peso. Os tamanhos ficam nas classes
   (.titulo-exibicao, .titulo-secao, .titulo-bloco), para o painel, o login e
   as docs não herdarem 50 px em traço fino. */
h1, h2, h3, h4 {
  font-family: var(--fonte-marca);
  font-weight: 500;
  line-height: 1.25;
  color: var(--tinta);
  text-wrap: balance;
}

/* Código: chaves, exemplos da documentação e códigos digitados. O <pre>
   quebra as linhas longas (pre-wrap) em vez de alargar a página ou pedir
   rolagem lateral no celular. */
code, kbd, samp {
  font-family: var(--fonte-codigo);
  font-size: 0.9em;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--tinta);
}
pre {
  max-width: 100%;
  overflow-x: auto;
  padding: var(--esp-4) var(--esp-5);
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  background: var(--fundo-suave);
  color: var(--tinta);
  font-family: var(--fonte-codigo);
  font-size: var(--tam-pequeno);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}
pre code { font-size: inherit; }

/* Código em linha é um nome só (--borda-campo, .topo--sem-acoes,
   /v1/client/deposits): não quebra no hífen nem na barra. Com a fonte
   ampliada (abaixo de 22 em, seção 19), volta a quebrar para não alargar a
   página. Trecho com espaços, como uma pilha de fontes, leva .trecho e
   quebra nos espaços. */
:not(pre) > code { white-space: nowrap; }
code.trecho { white-space: normal; }

::selection { background: var(--selecao); color: var(--tinta); }

/* Foco sempre visível no teclado */
:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Títulos que recebem foco por script (troca de estado ou de etapa, com
   tabindex="-1"): o leitor de tela anuncia o título; o anel não aparece.
   Só títulos: um componente com tabindex itinerante mantém o anel. */
:where(h1, h2, h3, h4)[tabindex="-1"]:focus { outline: none; }

/* Página curta com o rodapé no fim da tela (entrada, painel) */
.pagina-cheia {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.pagina-cheia > main { flex: 1 0 auto; }


/* ==========================================================================
   4. Utilitários
   ========================================================================== */
.envelope {
  width: 100%;
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin-inline: auto;
  padding-inline: var(--margem);
}

/* números alinhados em coluna: valores, datas, horas */
.num { font-variant-numeric: tabular-nums lining-nums; }

.nowrap { white-space: nowrap; }

/* valores longos sem espaço (chave de API, PIX copia e cola) */
.quebra-tudo { overflow-wrap: anywhere; }

/* visível só para leitor de tela */
.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* "Pular para o conteúdo": aparece no primeiro Tab */
.pular {
  position: absolute;
  left: var(--margem);
  top: -100px;
  z-index: 20;
  padding: var(--esp-3) var(--esp-4);
  background: var(--botao);
  color: var(--botao-texto);
  border-radius: var(--raio);
  font-size: var(--tam-ui);
  font-weight: 500;
  text-decoration: none;
}
.pular:focus { top: var(--esp-3); }

/* Rótulo em caixa alta, discreto. Vira maiúsculas: o nome solitpmt nunca
   entra num rótulo (nem em .etiqueta ou cabeçalho de tabela). */
.rotulo {
  font-family: var(--fonte-texto);
  font-size: var(--tam-micro);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.icone { width: 16px; height: 16px; flex: none; }


/* ==========================================================================
   5. Tipografia por classe
   As classes trazem família e cor: valem num h2 ou num <p>, <legend>…
   ========================================================================== */
.titulo-exibicao,
.titulo-secao,
.titulo-bloco {
  font-family: var(--fonte-marca);
  color: var(--tinta);
}

.titulo-exibicao {
  font-size: var(--tam-exibicao);
  font-weight: var(--peso-exibicao);
  line-height: 1.07;
  letter-spacing: -0.025em;
}

/* 400 até 1199 px; o 300 só a partir de 1200 px, onde o título tem 42 px */
.titulo-secao {
  font-size: var(--tam-secao);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
@media (min-width: 1200px) {
  .titulo-secao { font-weight: var(--peso-secao); }
}

.titulo-bloco {
  font-size: var(--tam-bloco);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

.lead {
  max-width: var(--largura-texto);
  font-size: var(--tam-destaque);
  line-height: 1.6;
}

.texto-suave { color: var(--texto-suave); }
.texto-pequeno { font-size: var(--tam-pequeno); }


/* ==========================================================================
   6. Botões, links e seletor segmentado
   Primário navy (a ação principal da tela: um por tela), secundário com
   contorno e discreto (sem caixa, para ações de apoio). Altura mínima de
   44 px. O texto quebra só se não couber (fonte ampliada, tela estreita).
   ========================================================================== */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: 44px;
  padding: var(--esp-2) var(--esp-6);
  border: 1px solid transparent;
  border-radius: var(--raio);
  background: transparent;
  font-family: var(--fonte-texto);
  font-size: var(--tam-ui);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.botao--primario { background: var(--botao); color: var(--botao-texto); }
.botao--primario:hover { background: var(--botao-hover); }

.botao--secundario {
  background: var(--superficie);
  color: var(--tinta);
  border-color: var(--linha-forte);
}
.botao--secundario:hover { border-color: var(--texto-suave); }

.botao--discreto { color: var(--tinta); padding-inline: var(--esp-3); }
.botao--discreto:hover { background: var(--superficie-hover); }

/* sobre a faixa navy */
.botao--claro { background: var(--faixa-botao); color: var(--faixa-botao-texto); }
.botao--claro:hover { background: var(--faixa-botao-hover); }

/* Ação que não se desfaz (cancelar o pedido, revogar a chave, apagar,
   encerrar sessões). O botão que abre a confirmação usa o contorno; o
   cheio fica só dentro dela (.dialogo), à direita da ação segura, que é
   discreta. O texto diz a ação ("Cancelar pedido"), nunca só "OK". Numa
   lista com uma ação por linha (Revogar, Apagar, Encerrar), o botão da
   linha fica discreto, para a lista não virar uma coluna vermelha; o
   perigo aparece na confirmação. */
.botao--perigo { background: var(--perigo); color: var(--perigo-texto); }
.botao--perigo:hover { background: var(--perigo-hover); }

.botao--perigo-contorno {
  background: var(--superficie);
  color: var(--erro-texto);
  border-color: var(--linha-forte);
}
.botao--perigo-contorno:hover { border-color: var(--erro-texto); background: var(--erro-fundo); }

.botao--grande { min-height: 48px; padding-inline: var(--esp-7); font-size: var(--tam-campo); }
.botao--bloco { display: flex; width: 100%; }

.botao:disabled,
.botao[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* Link com seta: a segunda ação, mais leve que um botão. Serve em <a> e
   em <button> (ações que não navegam, como "← Voltar"). A seta vai num
   <span aria-hidden="true">, antes ou depois; o sublinhado fica no texto. */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: 44px;
  color: var(--tinta);
  font-size: var(--tam-ui);
  font-weight: 500;
  text-decoration: none;
}
.link-seta > span:not([aria-hidden]) {
  text-decoration: underline;
  text-decoration-color: var(--sublinhado);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.link-seta:hover > span:not([aria-hidden]) { text-decoration-color: currentColor; }

/* link dentro de texto corrido: o sublinhado em --texto-suave (5,49:1)
   separa o link do texto em volta */
.link {
  color: var(--tinta);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--sublinhado-texto);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.link:hover { text-decoration-color: currentColor; }

/* <button class="link"> e <button class="link-seta">: sem a caixa do navegador */
button:is(.link, .link-seta) {
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

/* Seletor segmentado: Sistema · Claro · Escuro, ou estados de uma tela.
   <div class="segmentado" role="group"> com <button aria-pressed>. */
.segmentado {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
}
.segmentado button {
  min-height: 44px;
  padding: 0 var(--esp-3);
  border: 0;
  border-radius: var(--raio);
  background: transparent;
  color: var(--texto);
  font-size: var(--tam-legenda);
  line-height: 1.2;
  cursor: pointer;
}
.segmentado button:hover { color: var(--tinta); }
/* marcado: fundo, contorno de 3:1 (--borda-campo) e peso 500 */
.segmentado button[aria-pressed="true"] {
  background: var(--superficie-hover);
  box-shadow: inset 0 0 0 1px var(--borda-campo);
  color: var(--tinta);
  font-weight: 500;
}


/* ==========================================================================
   7. Marca: símbolo em SVG inline (fill="currentColor") + "solitpmt"
   O símbolo herda a cor do link (--tinta), então segue o tema sem filtro.
   Tudo deriva da altura do símbolo, nas proporções da folha de identidade:
   nome = 0,67 × símbolo (a tinta do nome fica em ~0,62), vão = 0,24 ×.
   Para mudar o tamanho, defina --marca-tamanho na marca ou num pai.
   No HTML, o <svg> leva width e height (ex.: 22 × 34), para a marca não
   estourar se o CSS não carregar.
   ========================================================================== */
.marca {
  --marca-altura: var(--marca-tamanho, 34px);
  display: inline-flex;
  align-items: center;
  gap: calc(var(--marca-altura) * 0.24);
  min-height: 44px;
  color: var(--tinta);
  text-decoration: none;
}

.marca__simbolo {
  flex: none;
  height: var(--marca-altura);
  width: calc(var(--marca-altura) * 0.661);  /* proporção do viewBox 208,63 x 315,61 */
}

/* Outfit 600: o peso mais próximo do logotipo da folha de identidade */
.marca__nome {
  font-family: var(--fonte-marca);
  font-size: calc(var(--marca-altura) * 0.67);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  padding-bottom: calc(var(--marca-altura) * 0.107);   /* centro ótico: o "p" desce */
}

.marca--pequena { --marca-tamanho: 30px; }


/* ==========================================================================
   8. Cabeçalho, navegação e menu do celular

   Modo padrão (site, poucos links): abaixo de 768 px a navegação vira uma
   segunda linha, alinhada à esquerda, sempre visível e sem JS.
   Modo .topo--recolhe (guia, docs): abaixo de 768 px a navegação fica atrás
   do botão "Menu" (js/site.js cuida de aria-expanded, Esc e foco).
   Sem JS, o modo recolhido mostra a navegação aberta.
   O painel não usa este cabeçalho: tem casca própria, em css/painel.css.
   .topo--sem-acoes: cabeçalho que só tem o botão Menu (some a partir de
   768 px, sem deixar a coluna vazia).
   .topo__acoes--alinha-direita: quando o último item é um botão discreto,
   o texto dele alinha à margem direita (o fundo do hover avança na margem).
   ========================================================================== */
.topo {
  position: relative;
  background: var(--fundo);
  border-bottom: 1px solid var(--linha);
}

.topo__barra {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "marca acoes"
    "nav nav";
  align-items: center;
  column-gap: var(--esp-4);
}

.topo__barra > .marca { grid-area: marca; justify-self: start; min-height: 64px; }

.topo__acoes {
  grid-area: acoes;
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}
.topo__acoes--alinha-direita { margin-right: calc(-1 * var(--esp-3)); }

.nav { grid-area: nav; border-top: 1px solid var(--linha); }

.nav__lista { display: flex; flex-wrap: wrap; column-gap: var(--esp-7); }

.nav__lista a {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  font-size: var(--tam-ui);
  color: var(--texto);
  text-decoration: none;
}
.nav__lista a:hover { color: var(--tinta); }
.nav__lista a[aria-current="page"],
.nav__lista a[aria-current="location"] {
  color: var(--tinta);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/* botão "Menu": só aparece com JS e no modo recolhido */
.topo__menu { padding-inline: var(--esp-3); }
.topo__menu::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--icone-menu) center / contain no-repeat;
  mask: var(--icone-menu) center / contain no-repeat;
}
.topo__menu[aria-expanded="true"]::before {
  -webkit-mask-image: var(--icone-fechar);
  mask-image: var(--icone-fechar);
}

@media (max-width: 767px) {
  .js .topo--recolhe .nav { display: none; }
  .js .topo--recolhe .nav[data-aberto] {
    display: block;
    padding-bottom: var(--esp-3);
  }
  .js .topo--recolhe .nav__lista { flex-direction: column; }
  .js .topo--recolhe .nav__lista li + li { border-top: 1px solid var(--linha); }
  .js .topo--recolhe .nav__lista a { display: flex; min-height: 48px; }
}

@media (min-width: 768px) {
  .topo__barra {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "marca nav acoes";
    column-gap: var(--esp-8);
    min-height: var(--topo-altura);
  }
  .topo__barra > .marca { min-height: 44px; }
  .nav { border-top: 0; justify-self: end; }
  .nav__lista { column-gap: var(--esp-2); }
  .nav__lista a { justify-content: center; padding-inline: var(--esp-3); }
  .topo__menu { display: none; }

  .topo--sem-acoes .topo__acoes { display: none; }
  .topo--sem-acoes .topo__barra {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "marca nav";
  }
}

@media (min-width: 1024px) {
  .nav__lista { column-gap: var(--esp-4); }
}


/* ==========================================================================
   9. Etiqueta e selos de situação
   Selo = ícone + palavra. A forma muda junto com a cor, para quem não
   distingue cores. Os rótulos seguem os do produto (domain/status.py).
   Cor: o que está em andamento fica em navy (--tinta); o que encerrou sem
   movimentar o saldo, em cinza (--texto-suave); o verde só no concluído;
   âmbar e vermelho quando pede atenção.
     anel tracejado   Aguardando pagamento
     relógio          A entrar (pago, esperando a liberação)
     visto (verde)    Liberado (depósito), Concluído (saque), Operacional
     ampulheta        Aguardando aprovação (aviso)
     anel com ponto   Aprovado (em preparação)
     setas            Em processamento
     xis em círculo   Recusado, Falhou, Fora do ar (erro)
     círculo cortado  Expirado, Cancelado, Prazo do PIX encerrado,
                      Não concluído (valor devolvido)
     seta de volta    Em devolução (aviso)
     triângulo        Degradado (aviso)
   ========================================================================== */
.etiqueta {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 var(--esp-2);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-pilula);
  background: var(--superficie);
  font-size: var(--tam-micro);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-suave);
  white-space: nowrap;
}

.selo {
  --selo-icone: var(--icone-pendente);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--tam-legenda);
  font-weight: 500;
  line-height: 1.35;
  color: var(--texto-suave);
  white-space: nowrap;
  vertical-align: middle;   /* alinha com o texto da linha (ex.: célula de tabela) */
}
.selo::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--selo-icone) center / contain no-repeat;
  mask: var(--selo-icone) center / contain no-repeat;
}

.selo--aguardando  { --selo-icone: var(--icone-pendente); color: var(--tinta); }
.selo--entrar      { --selo-icone: var(--icone-relogio); color: var(--tinta); }
.selo--analise     { --selo-icone: var(--icone-ampulheta); color: var(--aviso-texto); }
.selo--aprovado    { --selo-icone: var(--icone-ponto); color: var(--tinta); }
.selo--processando { --selo-icone: var(--icone-setas); color: var(--tinta); }
.selo--liberado,
.selo--concluido,
.selo--operacional { --selo-icone: var(--icone-check); color: var(--verde-texto); }
.selo--recusado,
.selo--fora        { --selo-icone: var(--icone-x); color: var(--erro-texto); }
.selo--encerrado   { --selo-icone: var(--icone-encerrado); }
.selo--devolucao   { --selo-icone: var(--icone-devolucao); color: var(--aviso-texto); }
.selo--degradado   { --selo-icone: var(--icone-aviso); color: var(--aviso-texto); }

/* versão com contorno, para listas densas do painel */
.selo--contorno {
  padding: 3px var(--esp-3) 3px var(--esp-2);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-pilula);
  background: var(--superficie);
}


/* ==========================================================================
   10. Alertas
   Fundo levemente tingido, barra de 3 px à esquerda e ícone próprio.
   No HTML: role="status" (sucesso, informação) ou role="alert" (erro, aviso
   que exige ação).
   ========================================================================== */
.alerta {
  --alerta-cor: var(--info);
  --alerta-icone-cor: var(--info-texto);
  --alerta-fundo: var(--info-fundo);
  --alerta-icone: var(--icone-info);
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-content: start;      /* esticado por uma grade vizinha, não espalha as linhas */
  column-gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-5) var(--esp-4) var(--esp-4);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--alerta-cor);
  border-radius: var(--raio);
  background: var(--alerta-fundo);
  color: var(--texto);
  font-size: var(--tam-ui);
  line-height: 1.55;
}
.alerta::before {
  content: "";
  grid-row: 1 / span 3;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: var(--alerta-icone-cor);
  -webkit-mask: var(--alerta-icone) center / contain no-repeat;
  mask: var(--alerta-icone) center / contain no-repeat;
}
.alerta__titulo {
  font-family: var(--fonte-texto);
  font-size: var(--tam-ui);
  font-weight: 600;
  line-height: 1.4;
  color: var(--tinta);
}
.alerta__texto { grid-column: 2; }
.alerta__titulo + .alerta__texto { margin-top: 2px; }
/* o link de ação tem 44 px de alvo; as margens negativas devolvem o
   espaço, e o texto fica onde ficaria com 23 px */
.alerta .link {
  grid-column: 2;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -6px -11px;
}

.alerta--sucesso {
  --alerta-cor: var(--verde);
  --alerta-icone-cor: var(--verde-texto);
  --alerta-fundo: var(--sucesso-fundo);
  --alerta-icone: var(--icone-sucesso);
}
.alerta--aviso {
  --alerta-cor: var(--aviso);
  --alerta-icone-cor: var(--aviso-texto);
  --alerta-fundo: var(--aviso-fundo);
  --alerta-icone: var(--icone-aviso);
}
.alerta--erro {
  --alerta-cor: var(--erro);
  --alerta-icone-cor: var(--erro-texto);
  --alerta-fundo: var(--erro-fundo);
  --alerta-icone: var(--icone-erro);
}
.alerta--info {
  --alerta-cor: var(--info);
  --alerta-icone-cor: var(--info-texto);
  --alerta-fundo: var(--info-fundo);
  --alerta-icone: var(--icone-info);
}


/* ==========================================================================
   11. Formulários
   <div class="campo">
     <label class="campo__rotulo" for="x">Usuário</label>
     <input class="campo__entrada" id="x" aria-describedby="x-ajuda">
     <p class="campo__ajuda" id="x-ajuda">…</p>
     <p class="campo__erro" id="x-erro">…</p>   (com aria-invalid="true" no input)
   </div>
   Rótulo com ação à direita ("Esqueci a senha", "Sacar tudo"): .campo__topo
   em volta do <label> e do <a> ou do <button class="link">.
   Campo de senha: .campo__senha envolve o input e o botão [data-senha-alternar].
   Valor em reais com "R$" fixo: .campo-moeda envolve o símbolo e o input.
   Código curto (6 algarismos): .campo--codigo.
   Código longo (recuperação, reserva): .campo--codigo-longo, em IBM Plex
   Mono, que cabe em 360 px com qualquer combinação de letras.
   Dois campos lado a lado: .formulario__par (pela largura do cartão).
   Erro: o .campo__erro vem vazio e com hidden; o id dele entra no
   aria-describedby do campo só enquanto o erro aparece (um elemento oculto
   citado no aria-describedby ainda é lido).
   ========================================================================== */
.formulario { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-6); }

/* Dois campos lado a lado quando o contêiner (o .cartao) tem 36 rem ou
   mais; abaixo, um embaixo do outro. Um campo sozinho fica na primeira
   coluna, alinhado com os de cima. align-items: start — sem ele, o campo
   de ajuda curta estica até a altura do vizinho e desce. */
.formulario__par {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--esp-5) var(--esp-6);
}
@container (min-width: 36rem) {
  .formulario__par { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.campo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-2); }

.campo__rotulo {
  font-size: var(--tam-ui);
  font-weight: 500;
  line-height: 1.4;
  color: var(--tinta);
}
.campo__rotulo .opcional { font-weight: 400; color: var(--texto-suave); }

/* rótulo à esquerda e ação à direita, na mesma linha. A ação (<a> ou
   <button class="link">) ganha 44 px de alvo (16 + 20 + 8) sem empurrar o
   campo e sem invadir o campo abaixo. */
.campo__topo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0 var(--esp-4);
}
.campo__topo :is(a, .link) {
  margin: -16px calc(-1 * var(--esp-3)) -8px;
  padding: 16px var(--esp-3) 8px;
  color: var(--texto);
  font-size: var(--tam-pequeno);
  font-weight: 400;
  line-height: 20px;
  text-decoration: underline;
  text-decoration-color: var(--sublinhado);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.campo__topo :is(a, .link):hover { color: var(--tinta); text-decoration-color: currentColor; }

.campo__entrada {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--esp-4);
  border: 1px solid var(--borda-campo);
  border-radius: var(--raio);
  background: var(--superficie);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: var(--tam-campo);
  line-height: 1.4;
  appearance: none;
}
textarea.campo__entrada { min-height: 112px; padding-block: var(--esp-3); resize: vertical; }
/* <select>: a seta volta como imagem de fundo (appearance: none tira a do sistema) */
select.campo__entrada {
  padding-right: var(--esp-9);
  background: var(--superficie) var(--seta-select) no-repeat right var(--esp-4) center / 12px 12px;
  cursor: pointer;
}
.campo__entrada::placeholder { color: var(--texto-suave); opacity: 1; }
.campo__entrada:hover { border-color: var(--texto); }
.campo__entrada:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 1px;
  border-color: var(--foco);
}
.campo__entrada:disabled {
  background: var(--fundo-suave);
  color: var(--texto-suave);
  cursor: not-allowed;
}
.campo__entrada[aria-invalid="true"] { border-color: var(--erro); }
.campo__entrada[aria-invalid="true"]:focus-visible { outline-color: var(--erro); }

.campo__ajuda {
  font-size: var(--tam-legenda);
  line-height: 1.5;
  color: var(--texto-suave);
}

.campo__erro {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--tam-legenda);
  font-weight: 500;
  line-height: 1.5;
  color: var(--erro-texto);
}
.campo__erro::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  background: currentColor;
  -webkit-mask: var(--icone-x) center / contain no-repeat;
  mask: var(--icone-x) center / contain no-repeat;
}

/* senha com "Mostrar" dentro do campo; a reserva cresce com a fonte */
.campo__senha { position: relative; }
.campo__senha .campo__entrada { padding-right: calc(2 * var(--esp-4) + 4.5em); }
.campo__mostrar {
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  min-height: 0;
  padding-block: 0;
  padding-inline: var(--esp-4);
  border-radius: calc(var(--raio) - 1px);
  font-size: var(--tam-pequeno);
  white-space: nowrap;
}

/* Valor em reais (depósito, saque): "R$" fixo dentro do campo, no mesmo
   corpo e na mesma família do número. Os dois ficam centrados na mesma
   altura de linha, então dividem a linha de base. O recuo do número é em
   "em": cresce junto com o corpo e com a fonte ampliada.
   <div class="campo-moeda">
     <span class="campo-moeda__simbolo" aria-hidden="true">R$</span>
     <input class="campo__entrada" inputmode="decimal" …>
   </div> */
.campo-moeda {
  position: relative;
  font-family: var(--fonte-marca);
  font-size: var(--tam-saldo);
}
.campo-moeda__simbolo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--esp-4);
  display: flex;
  align-items: center;
  font-weight: 400;
  line-height: 1.4;
  color: var(--texto);
  pointer-events: none;
}
.campo-moeda .campo__entrada {
  min-height: 56px;
  padding-left: calc(var(--esp-4) + 1.85em);
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums lining-nums;
}

/* código curto (verificação de 6 dígitos): algarismos espaçados e tabulares */
.campo--codigo .campo__entrada {
  max-width: 15rem;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  font-variant-numeric: tabular-nums lining-nums;
}

/* código longo (recuperação AAAAA-AAAAA-AAAAA-AAAAA, reserva MFA-…):
   largura inteira, monoespaçado e em maiúsculas. Recuperação: 23 de 23
   caracteres visíveis em 360 px (275 de 284 px úteis). O de reserva (35)
   cabe a partir de ~480 px; abaixo disso o campo rola, sem cortar o texto. */
.campo--codigo-longo .campo__entrada {
  max-width: none;
  font-family: var(--fonte-codigo);
  font-size: var(--tam-campo);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* caixa de seleção e opção */
.opcao {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  min-height: 44px;
  padding-top: var(--esp-2);
  font-size: var(--tam-ui);
  color: var(--texto);
  cursor: pointer;
}
.opcao input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--botao);
}

/* Rádio desenhado com os tokens (o nativo, com accent-color, vira um disco
   cinza-escuro no tema escuro): anel --borda-campo (3:1 sobre o cartão e
   sobre --fundo-suave) e, marcado, anel e miolo em --tinta. Use
   <input type="radio" class="radio">; dentro do .opcao vale sozinho. O foco
   fica com quem envolve o rádio (a linha da opção), ou com o anel padrão.
   No alto contraste do sistema volta o nativo (seção 20). */
.radio,
.opcao input[type="radio"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  border: 1.5px solid var(--borda-campo);
  border-radius: 50%;
  background: var(--superficie);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.radio:checked,
.opcao input[type="radio"]:checked {
  border-color: var(--tinta);
  background: radial-gradient(circle, var(--tinta) 0 4.5px, transparent 5px), var(--superficie);
}


/* ==========================================================================
   12. Cartões, código mostrado uma vez, QR e diálogo
   Fundo de superfície, linha de 1 px e raio de 6 px. Sombra só com
   .cartao--elevado (o extrato do topo e o formulário de entrada); o resto é
   plano. No escuro, o cartão é Main Navy e não tem sombra.
   ========================================================================== */
/* O cartão é um contêiner de consulta (container-type): saldos e
   lançamentos dentro dele se arrumam pela largura do próprio cartão quando
   a fonte ampliada não cabe (seção 19). A largura do cartão vem do pai;
   não o use num contexto que encolhe ao conteúdo (inline-block, float). */
.cartao {
  container-type: inline-size;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  overflow: hidden;
}
.cartao--elevado { box-shadow: var(--sombra-cartao); }

.cartao__cab {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--esp-1) var(--esp-4);
  padding: var(--esp-4) var(--esp-6);
  border-bottom: 1px solid var(--linha);
  background: var(--superficie-cab);
}

.cartao__titulo {
  font-family: var(--fonte-marca);
  font-size: var(--tam-campo);
  font-weight: 500;
  line-height: 1.3;
  color: var(--tinta);
}

.cartao__corpo { padding: var(--esp-6); }
/* partes do mesmo cartão (o valor e a conta; a conta e o destino):
   separadas por uma linha. A linha vem de qualquer parte visível antes
   (uma parte de outro estado, com hidden, não conta). */
.cartao__corpo:not([hidden]) ~ .cartao__corpo { border-top: 1px solid var(--linha); }

.cartao__rodape {
  padding: var(--esp-4) var(--esp-6);
  border-top: 1px solid var(--linha);
  font-size: var(--tam-legenda);
  line-height: 1.5;
  color: var(--texto-suave);
}

@media (max-width: 479px) {
  .cartao__cab, .cartao__corpo, .cartao__rodape { padding-inline: var(--esp-4); }
}

/* Código mostrado uma única vez: código de recuperação, chave de API,
   códigos de reserva. Cabeçalho com rótulo e "Copiar"; valor selecionável
   de uma vez (user-select: all).
     padrão               duas metades (.codigo-unico__par): em tela estreita,
                          quebra só entre elas
     .codigo-unico--longo valor sem grupos (chave de API, PIX copia e cola):
                          quebra em qualquer ponto
     .codigo-unico__lista lista de códigos (<ol>), um por linha */
.codigo-unico {
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-cartao);
  background: var(--fundo-suave);
}

.codigo-unico__cab {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--esp-2) var(--esp-3);
  padding: var(--esp-2) var(--esp-2) var(--esp-2) var(--esp-4);
  border-bottom: 1px solid var(--linha);
}

/* o rótulo encolhe primeiro: o Copiar fica à direita, na mesma linha,
   também no celular (com uma etiqueta ao lado, ela é que desce) */
.codigo-unico__rotulo {
  flex: 1 1 8rem;
  min-width: 0;
  font-size: var(--tam-pequeno);
  font-weight: 500;
  line-height: 1.4;
  color: var(--tinta);
}
.codigo-unico__rotulo .etiqueta { margin-left: var(--esp-2); vertical-align: 1px; }

.codigo-unico__copiar { padding-inline: var(--esp-4); }

.codigo-unico__valor {
  padding: var(--esp-5) var(--esp-4) var(--esp-6);
  font-family: var(--fonte-codigo);
  font-size: clamp(1.125rem, 0.95rem + 0.7vw, 1.375rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: var(--tinta);
  -webkit-user-select: all;
  user-select: all;
}
.codigo-unico__par { display: inline-block; white-space: nowrap; }

.codigo-unico--longo .codigo-unico__valor {
  font-size: var(--tam-campo);
  line-height: 1.6;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
  word-break: break-all; /* linhas cheias por igual: nada de "?" sozinho no fim */
}

/* 35 caracteres (MFA-XXXXX-…-X) em 13 px cabem numa linha a partir de
   ~390 px; abaixo, cada código quebra em duas linhas equilibradas */
.codigo-unico__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--esp-2) var(--esp-6);
  padding: var(--esp-4) var(--esp-4) var(--esp-5);
  font-family: var(--fonte-codigo);
  font-size: var(--tam-legenda);
  font-weight: 500;
  line-height: 1.5;
  color: var(--tinta);
  -webkit-user-select: all;
  user-select: all;
}
.codigo-unico__lista li { text-wrap: balance; }

/* QR (depósito por PIX, configuração do autenticador): moldura sempre
   clara, com zona de respiro, também no tema escuro */
.qr {
  display: inline-block;
  padding: var(--esp-4);
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  background: var(--qr-fundo);
  line-height: 0;
}
.qr img,
.qr svg {
  width: 176px;
  height: 176px;
  image-rendering: pixelated;
}

/* QR que não vale mais (prazo encerrado, indisponível): a moldura fica no
   mesmo tamanho, vazia e tracejada, com o estado escrito. A linha
   tracejada é decorativa; o texto e o aviso ao lado dizem o estado.
   <div class="qr qr--vazio" aria-hidden="true">QR expirado</div> */
.qr--vazio {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--esp-2);
  width: calc(176px + 2 * var(--esp-4) + 2px);
  height: calc(176px + 2 * var(--esp-4) + 2px);
  border: 1px dashed var(--linha-forte);
  background: var(--fundo-suave);
  font-size: var(--tam-legenda);
  font-weight: 500;
  line-height: 1.4;
  color: var(--texto-suave);
}
.qr--vazio::before {
  content: "";
  width: 28px;
  height: 28px;
  background: currentColor;
  -webkit-mask: var(--icone-encerrado) center / contain no-repeat;
  mask: var(--icone-encerrado) center / contain no-repeat;
}

/* Diálogo sobre <dialog> nativo (showModal: foco preso e Esc do próprio
   navegador). Dentro, as partes do cartão: __cab, __corpo, __rodape.
   Ações: no HTML, a segura primeiro (Cancelar, Manter) e a principal
   depois. No computador ficam lado a lado, a principal à direita; abaixo
   de 480 px, uma embaixo da outra, na mesma ordem do Tab. */
.dialogo {
  width: min(32rem, 100% - 2 * var(--margem));
  max-height: calc(100dvh - 2 * var(--margem));
  padding: 0;
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  background: var(--superficie);
  color: var(--texto);
  box-shadow: var(--sombra-menu);
}
.dialogo::backdrop { background: var(--veu); }
.dialogo__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-6);
  border-top: 1px solid var(--linha);
}
@media (max-width: 479px) {
  .dialogo__acoes { flex-direction: column; align-items: stretch; padding-inline: var(--esp-4); }
}

/* Abrir e fechar: <details class="abre-fecha"><summary>…</summary>…
   O resumo leva "+" ou "−" num círculo de 20 px; abre sem JS. Para uma
   linha inteira de lista, acrescente o recuo no lugar de uso. */
.abre-fecha > summary {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: 44px;
  color: var(--tinta);
  font-size: var(--tam-ui);
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.abre-fecha > summary::-webkit-details-marker { display: none; }
.abre-fecha > summary::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border: 1px solid var(--linha-forte);
  border-radius: 50%;
  font-size: var(--tam-ui);
  font-weight: 400;
  line-height: 1;
  color: var(--texto);
}
.abre-fecha[open] > summary::before { content: "\2212"; }


/* ==========================================================================
   13. Saldos, valores a entrar, extrato e resumo do saque
   ========================================================================== */

/* Blocos de número: "Disponível" e "Valores a entrar" lado a lado */
.saldos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.saldo { padding: var(--esp-5) var(--esp-6) var(--esp-6); }
.saldo + .saldo { border-left: 1px solid var(--linha); }

.saldo__rotulo { font-size: var(--tam-legenda); color: var(--texto-suave); }

.saldo__valor {
  margin-top: 6px;
  font-size: var(--tam-saldo);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--tinta);
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}

/* "R$" menor e em Dark Slate; o número fica em navy */
.moeda {
  margin-right: 0.2em;
  font-size: 0.62em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--texto);
}

.saldo__nota {
  margin-top: var(--esp-1);
  font-size: var(--tam-legenda);
  line-height: 1.45;
  color: var(--texto-suave);
}

/* Número de destaque, um por bloco: o saldo do início, o valor a pagar de
   um PIX, o valor de um pedido aberto. Outfit no tamanho --tam-numero,
   rótulo maior. Vale num .saldo ou sozinho, num bloco sem moldura:
   <div class="saldo--destaque"> com .saldo__rotulo, .saldo__valor e
   .saldo__nota. Os números secundários (faixas, indicadores) ficam no
   .saldo__valor comum. */
.saldo--destaque .saldo__rotulo {
  font-size: var(--tam-pequeno);
  font-weight: 500;
  color: var(--texto);
}
.saldo--destaque .saldo__valor {
  margin-top: var(--esp-2);
  font-family: var(--fonte-marca);
  font-size: var(--tam-numero);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.saldo--destaque .saldo__nota { margin-top: var(--esp-2); font-size: var(--tam-pequeno); }
/* valor que voltou ou não saiu (pedido encerrado) */
.saldo__valor.valor--neutro,
.saldo__valor.valor--neutro .moeda { color: var(--texto-suave); }

/* Barra de liberação: tempo já corrido até a liberação (navy sobre trilho).
   Use <progress class="progresso" max="24" value="6" aria-label="…">. */
.progresso {
  display: block;
  width: 100%;
  height: 4px;
  border: 0;
  border-radius: 2px;
  background: var(--linha-forte);
  color: var(--tinta);
  overflow: hidden;
  appearance: none;
}
.progresso::-webkit-progress-bar { background: var(--linha-forte); border-radius: 2px; }
.progresso::-webkit-progress-value { background: var(--tinta); border-radius: 2px; }
.progresso::-moz-progress-bar { background: var(--tinta); border-radius: 2px; }

/* Lançamento do extrato (lista curta: resumo, topo do site, valores a
   entrar). Para o histórico completo do painel, use .extrato-tabela (14).
   nome · valor / data · selo / [barra de liberação · prazo] */
.lancamentos > li + li { border-top: 1px solid var(--linha); }

.lanc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "nome valor"
    "quando selo"
    "progresso progresso";
  align-items: baseline;
  gap: 2px var(--esp-4);
  padding: var(--esp-4) var(--esp-6);
}

.lanc__nome {
  grid-area: nome;
  font-size: var(--tam-ui);
  font-weight: 500;
  color: var(--tinta);
  white-space: nowrap;
}
.lanc__valor {
  grid-area: valor;
  font-size: var(--tam-ui);
  font-weight: 500;
  color: var(--tinta);
  text-align: right;
  white-space: nowrap;
}
.lanc__quando {
  grid-area: quando;
  font-size: var(--tam-legenda);
  color: var(--texto-suave);
  white-space: nowrap;
}
.lanc .selo { grid-area: selo; justify-self: end; }

.lanc__progresso {
  grid-area: progresso;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-1) var(--esp-4);
  margin-top: var(--esp-3);
}
.lanc__progresso .progresso { flex: 1 1 96px; width: auto; }
.lanc__prazo {
  font-size: var(--tam-legenda);
  color: var(--texto);
  white-space: nowrap;
}

/* valor que não movimenta o saldo (PIX ainda não pago, saque recusado) */
.valor--neutro,
.tabela--lista .valor--neutro { font-weight: 400; color: var(--texto-suave); }

/* telas estreitas: data e selo em linhas próprias */
@media (max-width: 559px) {
  .lanc {
    grid-template-areas:
      "nome valor"
      "quando quando"
      "selo selo"
      "progresso progresso";
    padding-inline: var(--esp-4);
  }
  .lanc .selo { justify-self: start; margin-top: var(--esp-1); }
  .saldo { padding-inline: var(--esp-4); }
}

/* Conta: parcelas que fecham um total exato. O resumo do saque (exemplo
   da página inicial; estimativa, confirmação e pedido no painel) e a
   estimativa do depósito (Valor do PIX − Taxa = Você recebe).
   <dl class="conta"> com .conta__parcela e os operadores --soma (+),
   --menos (−) e --total (=).
   Em linhas (rótulo à esquerda, valor à direita) no celular e em contêiner
   estreito; em colunas a partir de 768 px de tela, desde que o contêiner
   (o .cartao) tenha 48 rem ou mais. Num cartão estreito, como o do saque
   em 1024 px, as colunas quebrariam os rótulos em três linhas. */
.conta { font-variant-numeric: tabular-nums lining-nums; }

.conta__parcela {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--esp-4);
  padding: var(--esp-3) 0;
  border-top: 1px solid var(--linha);
}
.conta__parcela:first-child { border-top: 0; padding-top: 0; }
.conta__parcela + .conta__parcela { padding-left: 34px; }

/* operadores + e = em círculos de 1 px */
.conta__parcela + .conta__parcela::before {
  position: absolute;
  top: 50%;
  left: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border: 1px solid var(--linha-forte);
  border-radius: 50%;
  background: var(--superficie);
  font-size: var(--tam-pequeno);
  line-height: 1;
  color: var(--texto);
}
.conta__parcela--soma::before { content: "+"; }
.conta__parcela--menos::before { content: "\2212"; }
.conta__parcela--total::before { content: "="; }

.conta dt { font-size: var(--tam-ui); color: var(--texto); }
.conta dd {
  font-weight: 500;
  color: var(--tinta);
  white-space: nowrap;
}
.conta__parcela--total { border-top-color: var(--linha-forte); }
.conta__parcela--total dt { font-weight: 500; color: var(--tinta); }

@media (min-width: 768px) {
  /* colunas de no mínimo 8,5 rem: com fonte ampliada, quebra em 3 ou 2 */
  .conta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  }
  /* rótulo em cima, valor embaixo; os valores ficam na mesma linha mesmo
     quando um rótulo quebra */
  .conta__parcela,
  .conta__parcela:first-child {
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
    padding: var(--esp-1) var(--esp-5) var(--esp-1) var(--esp-7);
    border-top: 0;
  }
  .conta__parcela:first-child { padding-left: 0; }
  .conta__parcela + .conta__parcela { border-left: 1px solid var(--linha); }
  .conta__parcela + .conta__parcela::before { left: -12px; }
  .conta dt { font-size: var(--tam-legenda); }
  .conta dd {
    font-family: var(--fonte-marca);
    font-size: clamp(1.1875rem, 0.95rem + 0.6vw, 1.5rem);
    font-weight: 400;
    letter-spacing: -0.01em;
  }
}

/* Contêiner com menos de 48 rem (cartão do painel, detalhe lateral): volta
   às linhas. Sem contêiner em volta (o exemplo da página inicial), vale só
   a regra da tela, acima. */
@container (max-width: 47.99rem) {
  .conta { display: block; }
  .conta__parcela,
  .conta__parcela:first-child {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--esp-4);
    padding: var(--esp-3) 0;
    border-top: 1px solid var(--linha);
    border-left: 0;
  }
  .conta__parcela:first-child { border-top: 0; padding-top: 0; }
  .conta__parcela + .conta__parcela { padding-left: 34px; border-left: 0; }
  .conta__parcela + .conta__parcela::before { left: 0; }
  .conta__parcela--total { border-top-color: var(--linha-forte); }
  .conta dt { font-size: var(--tam-ui); }
  .conta dd {
    font-family: var(--fonte-texto);
    font-size: inherit;
    font-weight: 500;
    letter-spacing: 0;
  }
}


/* ==========================================================================
   14. Tabelas
   .tabela          rótulo à esquerda (com nota abaixo) e valor à direita,
                    sem quebra; para taxas, limites e dados da conta.
   .tabela--lista   várias colunas com cabeçalho visível (capacidades da
                    API, tokens). Valores com .a-direita.
   .tabela-empilha  .tabela--lista que, abaixo de 768 px, vira um bloco por
                    linha; cada célula mostra o rótulo da coluna, vindo de
                    data-rotulo, em recuo pendente.
   .extrato-tabela  histórico do painel dentro de um .cartao; abaixo de
                    768 px, lançamento e valor em cima, data e situação
                    embaixo. Células: .ext-data, .ext-desc (th), .ext-sit,
                    .ext-valor.
   .tabela-rolagem  último recurso: rola dentro da própria caixa.
   ========================================================================== */
.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tam-ui);
  line-height: 1.5;
  font-variant-numeric: tabular-nums lining-nums;
}

.tabela caption {
  padding-bottom: var(--esp-4);
  text-align: left;
  font-family: var(--fonte-marca);
  font-size: var(--tam-bloco);
  font-weight: 500;
  line-height: 1.35;
  color: var(--tinta);
}

.tabela th,
.tabela td {
  padding: 15px 0;
  border-bottom: 1px solid var(--linha);
  vertical-align: top;
}

.tabela tbody tr:first-child > * { border-top: 1px solid var(--linha-forte); }

.tabela tbody th {
  width: 60%;
  padding-right: var(--esp-5);
  text-align: left;
  font-weight: 400;
  color: var(--texto);
}

.tabela td {
  text-align: right;
  font-weight: 500;
  color: var(--tinta);
  white-space: nowrap;
}

.tabela__nota {
  display: block;
  margin-top: 2px;
  font-size: var(--tam-legenda);
  line-height: 1.45;
  color: var(--texto-suave);
}

/* várias colunas, cabeçalho visível */
.tabela--lista thead th {
  padding: 0 var(--esp-4) var(--esp-3) 0;
  border-bottom: 1px solid var(--linha-forte);
  text-align: left;
  font-family: var(--fonte-texto);
  font-size: var(--tam-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.tabela--lista tbody tr:first-child > * { border-top: 0; }
.tabela--lista tbody th { width: auto; }
.tabela--lista td { padding-right: var(--esp-4); text-align: left; font-weight: 400; color: var(--texto); white-space: normal; }
.tabela--lista th:last-child,
.tabela--lista td:last-child { padding-right: 0; }
.tabela--lista .a-direita { text-align: right; }
.tabela--lista .valor { font-weight: 500; color: var(--tinta); white-space: nowrap; }
.tabela--lista .valor--neutro { font-weight: 400; color: var(--texto-suave); }
.tabela--lista tbody tr:last-child > * { border-bottom: 0; }

/* sim / não (capacidades): "Sim" em navy com visto navy; o verde fica
   reservado para "concluído" */
.sim,
.nao {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  vertical-align: top;
  white-space: nowrap;
}
.sim { color: var(--tinta); font-weight: 500; }
.sim::before,
.nao::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--icone-check) center / contain no-repeat;
  mask: var(--icone-check) center / contain no-repeat;
}
.nao { color: var(--texto); }
.nao::before {
  width: 10px;
  height: 1.5px;
  -webkit-mask: none;
  mask: none;
  background: var(--texto-suave);
}

/* Extrato em tabela */
.extrato-tabela .ext-desc { font-weight: 500; color: var(--tinta); }
.extrato-tabela .tabela__nota { font-weight: 400; }
.extrato-tabela .ext-data { color: var(--texto); white-space: nowrap; }

/* 48 em = 768 px com a fonte padrão; com a fonte ampliada, as tabelas
   empilham antes (150 %: abaixo de 1152 px) */
@media (min-width: 48em) {
  .extrato-tabela thead th { padding-top: var(--esp-4); }
  .extrato-tabela th:first-child,
  .extrato-tabela td:first-child { padding-left: var(--esp-6); }
  .extrato-tabela th:last-child,
  .extrato-tabela td:last-child { padding-right: var(--esp-6); }
}

@media (max-width: 47.99em) {
  /* o cabeçalho fica só para leitor de tela (mesmas regras do .oculto) */
  .tabela-empilha thead,
  .extrato-tabela thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .tabela-empilha,
  .tabela-empilha tbody,
  .tabela-empilha tr { display: block; }
  /* a legenda volta a ser bloco: como table-caption, fora de uma tabela de
     verdade, ela ficaria numa tabela anônima da largura mínima e quebraria
     uma palavra por linha ("Status / do / serviço") */
  .tabela-empilha caption,
  .extrato-tabela caption { display: block; }
  .tabela-empilha tr { padding: var(--esp-3) 0; border-bottom: 1px solid var(--linha); }
  .tabela-empilha tbody tr:first-child { border-top: 1px solid var(--linha-forte); }
  .tabela-empilha th,
  .tabela-empilha td {
    display: block;
    padding: 2px 0;
    border: 0;
    text-align: left;
    white-space: normal;
  }
  .tabela-empilha tbody th { width: auto; padding-bottom: var(--esp-2); }
  /* rótulo da coluna à esquerda, em recuo pendente: o conteúdo da célula
     continua em fluxo normal, mesmo com vários elementos dentro */
  .tabela-empilha td {
    position: relative;
    padding-left: calc(5.5rem + var(--esp-3));
  }
  .tabela-empilha td::before {
    content: attr(data-rotulo);
    content: attr(data-rotulo) / "";   /* texto alternativo vazio: o leitor de tela já tem o cabeçalho */
    position: absolute;
    top: 2px;
    left: 0;
    width: 5.5rem;
    font-size: var(--tam-legenda);
    line-height: 1.9;
    color: var(--texto-suave);
  }

  .extrato-tabela,
  .extrato-tabela tbody { display: block; }
  .extrato-tabela tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "desc valor"
      "data data"
      "sit sit";
    gap: 2px var(--esp-4);
    padding: var(--esp-4) var(--esp-6);
    border-top: 1px solid var(--linha);
  }
  .extrato-tabela tbody tr:first-child { border-top: 0; }
  .extrato-tabela th,
  .extrato-tabela td { display: block; padding: 0; border: 0; }
  .extrato-tabela .ext-desc { grid-area: desc; }
  .extrato-tabela .ext-valor { grid-area: valor; text-align: right; white-space: nowrap; }
  .extrato-tabela .ext-data { grid-area: data; margin-top: var(--esp-1); font-size: var(--tam-legenda); color: var(--texto-suave); }
  .extrato-tabela .ext-sit { grid-area: sit; margin-top: var(--esp-1); }
}
@media (max-width: 479px) {
  .extrato-tabela tr { padding-inline: var(--esp-4); }
}

/* último recurso: rola dentro da própria caixa, não a página */
.tabela-rolagem {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* ==========================================================================
   15. Seções e faixa navy
   .secao__grade: rótulo à esquerda (3 colunas) e conteúdo à direita (9),
   a partir de 1024 px. O rótulo (class="rotulo secao__rotulo") acompanha a
   leitura (sticky), sem JS.
   ========================================================================== */
.secao {
  padding-block: var(--respiro);
  border-top: 1px solid var(--linha);
}
.secao--suave { background: var(--fundo-suave); border-top-color: var(--linha); }

.secao__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-5) var(--esp-9);
  align-items: start;
}

.secao__cab .titulo-secao { max-width: 19em; }

.secao__lead {
  margin-top: var(--esp-5);
  max-width: var(--largura-texto);
  font-size: var(--tam-lead);
}

@media (min-width: 1024px) {
  .secao__grade { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
  .secao__rotulo {
    position: sticky;
    top: calc(var(--topo-altura) + var(--esp-6));
    padding-top: 1.05rem;
  }
}

/* Faixa navy: chamada final em Main Navy, título claro */
.faixa {
  padding-block: var(--respiro);
  border-block: 1px solid var(--faixa-linha);
  background: var(--faixa-fundo);
  color: var(--faixa-texto);
}
.faixa h2 { color: var(--faixa-titulo); }
.faixa :focus-visible { outline-color: var(--faixa-titulo); }

.faixa__link {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: 44px;
  color: var(--faixa-titulo);
  font-size: var(--tam-ui);
  font-weight: 500;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.faixa__link > span:not([aria-hidden]) {
  text-decoration: underline;
  text-decoration-color: var(--faixa-texto);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.faixa__link:hover > span:not([aria-hidden]) { text-decoration-color: currentColor; }


/* ==========================================================================
   16. Rodapé e controle de tema
   Linha de cima, exceto logo depois da faixa navy (que já fecha a página).
   ========================================================================== */
.rodape {
  padding-block: var(--esp-9) var(--esp-7);
  border-top: 1px solid var(--linha);
  font-size: var(--tam-ui);
}
main:has(> .faixa:last-child) + .rodape { border-top: 0; }

.rodape__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-6) var(--esp-9); }

.rodape__marca p {
  margin-top: var(--esp-2);
  font-size: var(--tam-pequeno);
  color: var(--texto-suave);
}

.rodape__links { display: flex; flex-wrap: wrap; column-gap: var(--esp-7); }

.rodape__links a {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--texto);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  overflow-wrap: anywhere;
}
.rodape__links a:hover { color: var(--tinta); text-decoration-color: currentColor; }
.rodape__links a[aria-current="page"] {
  color: var(--tinta);
  font-weight: 500;
  text-decoration-color: currentColor;
}

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--esp-3) var(--esp-6);
  margin-top: var(--esp-7);
  padding-top: var(--esp-5);
  border-top: 1px solid var(--linha);
  font-size: var(--tam-legenda);
  color: var(--texto-suave);
}

@media (min-width: 768px) {
  .rodape__grade { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .rodape__grade > nav { justify-self: end; }
}

/* Tema: Sistema · Claro · Escuro (aparece só com JS), num .segmentado */
.tema {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-3);
}


/* ==========================================================================
   17. Lista vazia, carregando e índice da documentação
   ========================================================================== */
/* lista sem itens: o que falta e, se houver, a ação que resolve */
.lista-vazia {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: var(--esp-2);
  padding: var(--esp-7) var(--esp-6);
  font-size: var(--tam-ui);
  line-height: 1.55;
  color: var(--texto-suave);
}
.lista-vazia__titulo { font-weight: 500; color: var(--tinta); }
@media (max-width: 479px) {
  .lista-vazia { padding-inline: var(--esp-4); }
}

/* carregando: texto e relógio parado, sem animação. O aria-busy="true" vai
   no contêiner que espera (o cartão ou a tabela), nunca numa região viva
   (role="status"), que ele calaria. O anúncio ("Carregando…" e, no fim,
   "N itens") vai num role="status" que já estava na página; o .carregando
   é só o texto visível. Ao terminar, troque pelo conteúdo. */
[aria-busy="true"] { cursor: progress; }
.carregando {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-7) var(--esp-6);
  font-size: var(--tam-ui);
  color: var(--texto-suave);
}
.carregando::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--icone-relogio) center / contain no-repeat;
  mask: var(--icone-relogio) center / contain no-repeat;
}

/* Índice lateral da documentação: grupos com .rotulo e links de 44 px;
   fixo na lateral a partir de 1024 px. O link da seção lida leva
   aria-current="location". */
.docs-indice { font-size: var(--tam-ui); }
.docs-indice__grupo + .docs-indice__grupo { margin-top: var(--esp-6); }
.docs-indice__grupo > .rotulo { margin-bottom: var(--esp-1); }
.docs-indice a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-left: var(--esp-4);
  border-left: 1px solid var(--linha);
  color: var(--texto);
  text-decoration: none;
}
.docs-indice a:hover { color: var(--tinta); border-left-color: var(--texto-suave); }
.docs-indice a[aria-current] {
  border-left: 2px solid var(--tinta);
  padding-left: calc(var(--esp-4) - 1px);
  color: var(--tinta);
  font-weight: 500;
}
@media (min-width: 1024px) {
  .docs-indice {
    position: sticky;
    top: var(--esp-6);
    max-height: calc(100dvh - 2 * var(--esp-6));
    overflow-y: auto;
  }
}


/* ==========================================================================
   18. Movimento
   Só transições de cor, num único ritmo (--transicao), e só para quem não
   pediu menos movimento.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .botao,
  .link-seta > span,
  .link,
  .nav__lista a,
  .rodape__links a,
  .faixa__link > span,
  .campo__topo a,
  .campo__entrada,
  .segmentado button,
  .docs-indice a {
    transition:
      background-color var(--transicao),
      border-color var(--transicao),
      color var(--transicao),
      text-decoration-color var(--transicao);
  }
}


/* ==========================================================================
   19. Fonte ampliada pelo navegador
   Media queries em "em" usam o tamanho de fonte escolhido pela pessoa (no
   Chrome, Configurações > Aparência > Tamanho da fonte), não o da página.
   22 em = 352 px com a fonte padrão: nada aqui muda a tela de 360 px com
   fonte normal; com 150 % (24 px) vale até 528 px e com 200 % até 704 px.
   O que não cabe deixa de ser "sem quebra" e quebra a linha.
   Pelo mesmo motivo, as tabelas que empilham usam 48 em (seção 14), e as
   grades de uma coluna usam minmax(0, 1fr): sem isso, um valor sem
   espaço alarga a coluna e a página.
   Testado com a fonte do navegador em 150 % e 200 % (Page.setFontSizes):
   index e entrar sem rolagem lateral em 360, 390 e 1024 px.
   ========================================================================== */
@media (max-width: 22em) {
  :not(pre) > code,
  .tabela td,
  .selo,
  .conta dd,
  .sim,
  .nao { white-space: normal; }
  .conta__parcela { flex-wrap: wrap; }
  .conta__parcela + .conta__parcela { padding-left: 28px; }
}

/* Dentro do cartão, pela largura do cartão em em (a fonte do cartão cresce
   com a do navegador): 18 em = 306 px com a fonte padrão, abaixo dos 326 px
   que o cartão tem na tela de 360 px. Com a fonte em 150 %, o extrato do
   topo, em 1024 px, cai aqui e empilha. */
@container (max-width: 18em) {
  .saldos { grid-template-columns: minmax(0, 1fr); }
  .saldo + .saldo { border-left: 0; border-top: 1px solid var(--linha); }
  .lanc {
    grid-template-areas:
      "nome valor"
      "quando quando"
      "selo selo"
      "progresso progresso";
  }
  .lanc .selo { justify-self: start; margin-top: var(--esp-1); }
  .lanc__nome,
  .lanc__valor,
  .lanc__quando,
  .lanc__prazo,
  .lanc .selo { white-space: normal; }
}


/* ==========================================================================
   20. Alto contraste do sistema (forced-colors: Windows e outros)
   O navegador troca as cores pelas do sistema. Os ícones feitos com máscara
   sobre background: currentColor sumiriam (o fundo vira Canvas): eles
   ganham a cor do texto do sistema. Estado atual que dependia só de fundo
   ou de sombra ganha um contorno.
   ========================================================================== */
@media (forced-colors: active) {
  .selo::before,
  .alerta::before,
  .campo__erro::before,
  .carregando::before,
  .topo__menu::before,
  .sim::before,
  .nao::before,
  .qr--vazio::before {
    forced-color-adjust: none;
    background: CanvasText;
  }
  .segmentado button[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .radio,
  .opcao input[type="radio"] { -webkit-appearance: auto; appearance: auto; }
  .progresso { border: 1px solid CanvasText; }
}


/* ==========================================================================
   21. Barra de demonstração (só no protótipo; apague ao aplicar)
   Alterna os estados de uma tela (entrar.html e o painel). Não vai para o
   produto: no produto, o JS decide o estado pelo dado da API.
   ========================================================================== */
.demo {
  background: var(--fundo-suave);
  border-bottom: 1px dashed var(--linha-forte);
}
.demo__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-4);
  padding-block: var(--esp-2);
}
.demo__opcoes { background: var(--superficie); }