/*
 * Painel da Gestão. Desde 07/10/2026 (Fase A, D-069) o tema é o "Vidro ciano"
 * da mesa de operação, escuro (padrão) e claro: tokens abaixo e
 * docs/design/tema-vidro-ciano-2026-10-07.md. Componentes vindos da "versão
 * profissional" (D-023, docs/design/especificacao-visual-pro.md).
 * Revisão 3 (legibilidade): cores de texto, tamanhos e pesos saem dos tokens
 * --texto-*, --tam-*, --peso-* e --esp-rotulo; não escrever valores soltos.
 * Fontes servidas daqui mesmo (static/fonts), sem CDN: funciona sem internet.
 */

/* ---------- Fontes (self-hosted, subconjunto latin, SIL OFL) ---------- */
@font-face {
  font-family: "Orbitron";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/orbitron-variavel.5d281085f727.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-400.81419bf5abb5.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/barlow-500.8e986e86d57e.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-600.a1e2a2d7d4c0.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-700.15481e4eab6d.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400.79936b18df9f.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500.b1c8a895f5fd.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-600.5a2ce7798732.woff2") format("woff2");
}

/* ---------- Tokens ----------
 * Fase A do visual (D-069): o tema do projeto inteiro é o "Vidro ciano" da
 * mesa de operação (D-068), em duas versões, escura (padrão) e clara, trocadas
 * pelo data-tema do <html>. Contraste medido em
 * docs/design/tema-vidro-ciano-2026-10-07.md (texto ≥ 4,5:1, bordas de
 * controle ≥ 3:1, compondo o vidro sobre o fundo e os brilhos).
 * Cores com transparência usam os canais *-rgb, para valer nos dois temas:
 * rgba(var(--ciano-rgb), 0.12). Nada de cor solta nas folhas.
 */

/* O que não muda com o tema: fontes, tamanhos, pesos, espaços, cantos e medidas. */
:root {
  /* Fontes */
  --fonte-marca: "Orbitron", "Barlow", system-ui, sans-serif;
  --fonte-texto: "Barlow", system-ui, sans-serif;
  --fonte-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Tipografia (Revisão 3) */
  --tam-corpo: 15px;          /* corpo, tabela, menu, botões, campos */
  --tam-apoio: 14px;          /* sublinhas, subtítulos, ajudas, notas */
  --tam-selo: 13px;
  --tam-rotulo: 13px;         /* rótulos em maiúsculas (Plex Mono) */
  --tam-rotulo-tabela: 12px;  /* cabeçalhos de tabela (colunas estreitas) */
  /* Nomes e números de destaque das telas de conta (crítica r2, B15: nada de px solto nas folhas) */
  --tam-titulo-bloco: 16px;          /* título de bloco recolhível, nome e saldo na lista de contas */
  --tam-nome-conta: 24px;            /* nome da conta no cabeçalho da Conta atual */
  --tam-nome-detalhe: 22px;          /* nome da conta no detalhe de Contas */
  --tam-numero-saldo: 38px;          /* saldo do cabeçalho da conta: o maior número da tela */
  --tam-numero-saldo-medio: 34px;
  --tam-numero-saldo-estreito: 30px;
  --tam-numero-faixa: 26px;          /* números da faixa de resultados */
  --tam-numero-medio: 24px;
  --tam-numero-destaque: 22px;       /* número longo da faixa */
  --tam-numero-pequeno: 20px;        /* saldo no detalhe de Contas */
  --tam-numero-metrica: 18px;        /* métricas do bloco técnico da conta */
  --alt-linha: 1.5;
  --peso-corpo: 500;
  --peso-forte: 600;
  --peso-titulo: 700;
  --esp-rotulo: 0.5px;        /* letter-spacing das maiúsculas (máx. 0.6px) */

  /* Espaçamento (4, 8, 12, 16, 20, 24, 32) */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 20px;
  --e6: 24px;
  --e8: 32px;

  /* Cantos da mesa de operação: painéis 16, controles 12, itens 10, selos 8 */
  --raio-painel: 16px;
  --raio-controle: 12px;
  --raio-item: 10px;
  --raio-pequeno: 8px;
  --raio-pilula: 999px;

  /* Medidas */
  --lateral: 248px;
  --barra: 64px;
  --transicao: 140ms ease;
}

/* Tema escuro (padrão): fundo profundo, brilhos ciano e laranja parados,
   vidro translúcido com fio claro. Valores da mesa (temas-tokens/01-vidro-ciano). */
:root,
:root[data-tema="escuro"] {
  color-scheme: dark;

  /* Fundo e brilhos (estáticos: sem animação nesta fase) */
  --fundo: #040912;
  --fundo-fim: #060d18;
  --brilho-1: rgba(0, 255, 234, 0.20);   /* ciano, alto à esquerda */
  --brilho-2: rgba(255, 77, 29, 0.18);   /* laranja, embaixo à direita */
  --brilho-3: rgba(0, 140, 255, 0.12);   /* azul, no meio */
  --grade: rgba(0, 255, 234, 0.03);

  /* Superfícies opacas (listas que abrem por cima, colunas presas, opções) */
  --superficie-1: #0a1520;
  --superficie-2: #0f1d2b;
  --superficie-opaca: #09131e;
  --superficie-opaca-2: #07101a;
  --campo: #07111c;
  --linha: #1a2a38;
  --linha-forte: #26394a;
  --linha-hover: #3a5063;
  /* Borda de campos e botões: ≥ 3:1 sobre qualquer fundo do tema (WCAG 1.4.11) */
  --borda-controle: #7890a6;
  --borda-controle-hover: #a3b6c8;

  /* Texto: ≥ 4,5:1 até no pior fundo (página sobre o brilho ciano) */
  --texto-titulo: #ffffff;
  --texto-1: #eef4fa;
  --texto-2: #c9d6e1;
  --texto-3: #a8bacb;
  --texto-4: #9fb2c4;   /* placeholder e itens desativados */

  /* Papéis de cor: ciano = ativo; laranja = só a ação principal;
     verde = comprador/ganho; vermelho = vendedor/perda */
  --ciano: #00ffea;
  --ciano-rgb: 0, 255, 234;
  --ciano-link-hover: #8bfff5;
  --laranja: #ff4d1d;
  --laranja-rgb: 255, 77, 29;
  --laranja-2: #ff8c00;
  --laranja-2-rgb: 255, 140, 0;
  --verde: #7dd9a0;
  --verde-rgb: 125, 217, 160;
  --vermelho: #ff8585;
  --vermelho-rgb: 255, 120, 120;
  --vermelho-barra: #c9444c;
  --ambar: #f5b945;
  --ambar-rgb: 245, 185, 69;
  --roxo: #c7a8f5;
  --roxo-rgb: 199, 168, 245;
  --azul: #7fbdf2;
  --azul-rgb: 127, 189, 242;
  --positivo: #7dd9a0;
  --negativo: #ff8a8a;

  /* Canais para transparências: realce (hover, fios), cinza (barras de
     rolagem, trilhos) e sombra */
  --realce-rgb: 255, 255, 255;
  --cinza-rgb: 120, 144, 160;
  --sombra-rgb: 0, 0, 0;

  /* Vidro */
  --vidro-painel: rgba(12, 24, 38, 0.55);
  --vidro-painel-solido: #0b1622;
  --vidro-borda: rgba(255, 255, 255, 0.09);
  --vidro-divisoria: rgba(255, 255, 255, 0.07);
  --vidro-cabecalho: rgba(255, 255, 255, 0.025);
  --vidro-lateral: rgba(10, 20, 33, 0.62);
  --vidro-lateral-solido: #08121d;
  --vidro-topo: rgba(5, 12, 22, 0.70);
  --vidro-topo-solido: #060e18;
  --vidro-rodape: rgba(255, 255, 255, 0.02);
  --vidro-fio: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --vidro-sombra: 0 10px 40px rgba(0, 0, 0, 0.35);
  --vidro-filtro: blur(18px) saturate(150%);
  --sombra-flutuante: 0 18px 40px rgba(0, 0, 0, 0.5);
  --campo-fundo: rgba(4, 10, 20, 0.55);
  --campo-fundo-foco: rgba(4, 10, 20, 0.78);
  --hover-leve: rgba(255, 255, 255, 0.05);

  /* Ação principal: vidro laranja com brilho (a única ação laranja da tela) */
  --acao-fundo: rgba(255, 77, 29, 0.22);
  --acao-fundo-hover: rgba(255, 77, 29, 0.32);
  --acao-borda: rgba(255, 77, 29, 0.60);
  --acao-texto: #ffd8cc;
  --acao-brilho: 0 0 24px rgba(255, 77, 29, 0.30);
  --acao-brilho-hover: 0 0 30px rgba(255, 77, 29, 0.42);

  /* Ativo (item atual, selecionado, ligado): ciano */
  --ativo-texto: #00ffea;
  --ativo-solido: #0b2c33;

  /* Marca e títulos */
  --marca-1: #00ffea;
  --marca-2: #ff4d1d;
  --marca-brilho: drop-shadow(0 0 6px rgba(0, 255, 234, 0.35));
  --titulo-brilho: 0 0 18px rgba(0, 255, 234, 0.35);
}

/* Tema claro: vidro claro sobre fundo claro, mesmos papéis de cor (ciano ativo,
   laranja só na ação principal, verde comprador, vermelho vendedor), em tons
   escuros o bastante para o texto passar de 4,5:1. */
:root[data-tema="claro"] {
  color-scheme: light;

  --fundo: #e9eff5;
  --fundo-fim: #e2e9f0;
  --brilho-1: rgba(0, 190, 180, 0.18);
  --brilho-2: rgba(255, 110, 45, 0.14);
  --brilho-3: rgba(60, 130, 255, 0.10);
  --grade: rgba(0, 95, 110, 0.05);

  --superficie-1: #ffffff;
  --superficie-2: #f1f5f9;
  --superficie-opaca: #fbfcfe;
  --superficie-opaca-2: #f1f5f9;
  --campo: #ffffff;
  --linha: #d4dde6;
  --linha-forte: #bac8d5;
  --linha-hover: #8b9db0;
  --borda-controle: #66798d;
  --borda-controle-hover: #46596c;

  --texto-titulo: #06121e;
  --texto-1: #0f1c29;
  --texto-2: #2b3c4e;
  --texto-3: #425567;
  --texto-4: #4b5e72;

  --ciano: #005f58;
  --ciano-rgb: 0, 95, 88;
  --ciano-link-hover: #00403b;
  --laranja: #c2410c;
  --laranja-rgb: 194, 65, 12;
  --laranja-2: #b45309;
  --laranja-2-rgb: 180, 83, 9;
  --verde: #0a6435;
  --verde-rgb: 10, 100, 53;
  --vermelho: #a01c28;
  --vermelho-rgb: 168, 32, 44;
  --vermelho-barra: #b4323c;
  --ambar: #7b4b00;
  --ambar-rgb: 150, 95, 0;
  --roxo: #6339b3;
  --roxo-rgb: 99, 57, 179;
  --azul: #1a579f;
  --azul-rgb: 26, 87, 159;
  --positivo: #0a6435;
  --negativo: #a01c28;

  --realce-rgb: 12, 35, 58;
  --cinza-rgb: 70, 92, 112;
  --sombra-rgb: 12, 35, 58;

  --vidro-painel: rgba(255, 255, 255, 0.62);
  --vidro-painel-solido: #fbfcfe;
  --vidro-borda: rgba(12, 35, 58, 0.12);
  --vidro-divisoria: rgba(12, 35, 58, 0.10);
  --vidro-cabecalho: rgba(12, 35, 58, 0.025);
  --vidro-lateral: rgba(255, 255, 255, 0.66);
  --vidro-lateral-solido: #f7f9fc;
  --vidro-topo: rgba(250, 252, 254, 0.74);
  --vidro-topo-solido: #f7f9fc;
  --vidro-rodape: rgba(12, 35, 58, 0.02);
  --vidro-fio: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --vidro-sombra: 0 1px 2px rgba(12, 35, 58, 0.06), 0 10px 32px rgba(12, 35, 58, 0.10);
  --vidro-filtro: blur(18px) saturate(140%);
  --sombra-flutuante: 0 18px 40px rgba(12, 35, 58, 0.18);
  --campo-fundo: rgba(255, 255, 255, 0.82);
  --campo-fundo-foco: #ffffff;
  --hover-leve: rgba(12, 35, 58, 0.05);

  --acao-fundo: rgba(234, 88, 12, 0.14);
  --acao-fundo-hover: rgba(234, 88, 12, 0.22);
  --acao-borda: rgba(194, 65, 12, 0.60);
  --acao-texto: #8a2c06;
  --acao-brilho: 0 0 18px rgba(234, 88, 12, 0.16);
  --acao-brilho-hover: 0 0 24px rgba(234, 88, 12, 0.26);

  --ativo-texto: #005f58;
  --ativo-solido: #d3ebe8;

  --marca-1: #007a71;
  --marca-2: #d4480f;
  --marca-brilho: none;
  --titulo-brilho: none;
}

/* Derivados: valem nos dois temas porque saem dos canais *-rgb do tema. */
:root {
  --ciano-fundo: rgba(var(--ciano-rgb), 0.06);
  --ciano-borda: rgba(var(--ciano-rgb), 0.35);
  --sombra-rolagem: rgba(var(--ciano-rgb), 0.28);
  --ativo-fundo: rgba(var(--ciano-rgb), 0.10);
  --ativo-borda: rgba(var(--ciano-rgb), 0.38);
  --verde-fundo: rgba(var(--verde-rgb), 0.10);
  --verde-borda: rgba(var(--verde-rgb), 0.35);
  --vermelho-fundo: rgba(var(--vermelho-rgb), 0.10);
  --vermelho-borda: rgba(var(--vermelho-rgb), 0.40);
  --ambar-fundo: rgba(var(--ambar-rgb), 0.08);
  --ambar-borda: rgba(var(--ambar-rgb), 0.35);
  --roxo-fundo: rgba(var(--roxo-rgb), 0.10);
  --roxo-borda: rgba(var(--roxo-rgb), 0.38);
  --azul-fundo: rgba(var(--azul-rgb), 0.10);
  --azul-borda: rgba(var(--azul-rgb), 0.38);
  --comprador: var(--verde);
  --vendedor: var(--vermelho);

  /* Foco (F01): anel sólido de 2px em ciano, ≥ 3:1 em qualquer superfície. */
  --anel-foco: 0 0 0 2px var(--ciano);
  --anel-campo: 0 0 0 1px var(--ciano), 0 0 0 4px rgba(var(--ciano-rgb), 0.18);
  --anel-erro: 0 0 0 3px rgba(var(--vermelho-rgb), 0.18);
}

/* Sem backdrop-filter no navegador: vidro vira superfície opaca (mesmas cores). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root,
  :root[data-tema="escuro"],
  :root[data-tema="claro"] {
    --vidro-painel: var(--vidro-painel-solido);
    --vidro-lateral: var(--vidro-lateral-solido);
    --vidro-topo: var(--vidro-topo-solido);
  }
}

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

html {
  background: var(--fundo);
}

body {
  margin: 0;
  min-height: 100vh;
  background: transparent;
  color: var(--texto-1);
  font-family: var(--fonte-texto);
  font-weight: var(--peso-corpo);
  font-size: var(--tam-corpo);
  line-height: var(--alt-linha);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--ciano);
  text-decoration: none;
  transition: color var(--transicao);
}
a:hover {
  color: var(--ciano-link-hover);
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--anel-foco);
}

h1,
h2,
h3,
p {
  margin: 0;
}

svg {
  flex-shrink: 0;
}

/* Idade e unidade que não podem quebrar no meio ("há 20 / min", crítica r2, B3). */
.sem-quebra { white-space: nowrap; }
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mono {
  font-family: var(--fonte-mono);
}
.num {
  font-family: var(--fonte-mono);
  font-variant-numeric: tabular-nums;
}
.texto-2 {
  color: var(--texto-2);
}
.texto-3 {
  color: var(--texto-3);
}

/* ---------- Fundo da mesa de operação (Fase A, D-069) ----------
   Três brilhos radiais parados (ciano no alto à esquerda, laranja embaixo à
   direita, azul no meio) e a grade de 40px, numa camada fixa atrás de tudo:
   o vidro dos painéis desfoca o que está atrás. Sem animação nesta fase. */
.raiz {
  position: relative;
  display: flex;
  min-height: 100vh;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle 452px at 120px 80px, var(--brilho-1), transparent 68%),
    radial-gradient(circle 509px at calc(100% - 120px) calc(100% - 60px), var(--brilho-2), transparent 66%),
    radial-gradient(circle 368px at calc(42% + 260px) calc(26% + 260px), var(--brilho-3), transparent 70%),
    linear-gradient(var(--grade) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, var(--grade) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(180deg, var(--fundo) 0%, var(--fundo-fim) 100%);
}

/* ---------- Marca ----------
   A moldura (menu lateral por áreas, barra superior e cabeçalho da página)
   fica em moldura.css (Fase A, D-069). Aqui só o que a tela de entrar também usa. */
.marca {
  height: var(--barra);
  flex-shrink: 0;
  padding: 0 var(--e4);
  display: flex;
  align-items: center;
  gap: var(--e3);
  color: inherit;
}
.marca:hover {
  color: inherit;
}
.marca__icone {
  stroke: var(--marca-1);
  filter: var(--marca-brilho);
}
.marca__icone .marca__cruz {
  stroke: var(--marca-2);
}
.marca__textos {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.marca__nome {
  font-family: var(--fonte-marca);
  font-weight: 700;
  font-size: 17px;
  line-height: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--texto-titulo);
  text-shadow: var(--titulo-brilho);
}
.marca__linha {
  font-family: var(--fonte-mono);
  font-weight: var(--peso-corpo);
  font-size: var(--tam-rotulo-tabela);
  line-height: 16px;
  letter-spacing: var(--esp-rotulo);
  text-transform: uppercase;
  color: var(--texto-3);
}

.rotulo {
  font-family: var(--fonte-mono);
  font-weight: var(--peso-forte);
  font-size: var(--tam-rotulo);
  line-height: 18px;
  letter-spacing: var(--esp-rotulo);
  text-transform: uppercase;
  color: var(--texto-3);
}

/* Contador (pílula): menu e grupos do seletor de conta */
.menu__contador {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  background: rgba(var(--realce-rgb), 0.07);
  border-radius: var(--raio-pilula);
  font-family: var(--fonte-mono);
  font-weight: var(--peso-forte);
  font-size: var(--tam-rotulo-tabela);
  line-height: 16px;
  color: var(--texto-1);
  font-variant-numeric: tabular-nums;
}

/* ---------- Área de conteúdo ---------- */
.area {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.trilha {
  font-weight: var(--peso-corpo);
  font-size: var(--tam-apoio);
  line-height: 20px;
  color: var(--texto-3);
  white-space: nowrap;
}
.trilha a {
  color: var(--texto-3);
}
.trilha a:hover {
  color: var(--texto-1);
}

.conteudo {
  flex-grow: 1;
  padding: var(--e5) var(--e8) var(--e8);
  display: flex;
  flex-direction: column;
  gap: var(--e6);
}

/* ---------- Selos ---------- */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 var(--e2);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-pequeno);
  background: transparent;
  font-family: var(--fonte-texto);
  font-weight: var(--peso-forte);
  font-size: var(--tam-selo);
  line-height: 16px;
  color: var(--texto-2);
  white-space: nowrap;
}
.selo--num {
  font-family: var(--fonte-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.selo--verde {
  border-color: var(--verde-borda);
  background: var(--verde-fundo);
  color: var(--verde);
}
.selo--vermelho {
  border-color: var(--vermelho-borda);
  background: var(--vermelho-fundo);
  color: var(--vermelho);
}
.selo--ambar {
  border-color: var(--ambar-borda);
  background: var(--ambar-fundo);
  color: var(--ambar);
}
.selo svg {
  stroke: currentColor;
}

.ponto-ar {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--verde);
  animation: pulsar 2.4s ease-in-out infinite;
}
@keyframes pulsar {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ponto-ar {
    animation: none;
  }
  /* F01: vale para o painel inteiro (inclusive girar/pulsar de outras telas):
     sem animação contínua e sem rolagem suave. */
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Botão principal em vidro laranja (Fase A: o da mesa de operação) ----------
   Vidro laranja com brilho, cantos de 12px, a única ação laranja da tela.
   O invólucro .brilho continua nas telas (era o brilho do chanfro antigo). */
.brilho {
  display: inline-flex;
}

.botao-principal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 44px;
  height: auto;
  padding: 0 var(--e5);
  margin: 0;
  background: var(--acao-fundo);
  border: 1px solid var(--acao-borda);
  border-radius: var(--raio-controle);
  box-shadow: var(--acao-brilho);
  color: var(--acao-texto);
  font-family: var(--fonte-texto);
  font-weight: var(--peso-titulo);
  font-size: var(--tam-corpo);
  line-height: 20px;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}
.botao-principal svg {
  stroke: currentColor;
}
.botao-principal:hover {
  background: var(--acao-fundo-hover);
  border-color: var(--laranja);
  box-shadow: var(--acao-brilho-hover);
  color: var(--acao-texto);
}
.botao-principal:focus-visible {
  outline: 2px solid var(--ciano);
  outline-offset: 2px;
  color: var(--acao-texto);
}
.botao-principal:disabled,
.botao-principal[aria-disabled="true"] {
  background: rgba(var(--laranja-rgb), 0.06);
  border-color: rgba(var(--laranja-rgb), 0.35);
  box-shadow: none;
  color: var(--texto-4);
  cursor: not-allowed;
}

/* ---------- Secundário, fantasma e perigo (Revisão 2, item 3) ---------- */
.botao,
.botao-fantasma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  height: 40px;
  margin: 0;
  border-radius: var(--raio-pequeno);
  font-family: var(--fonte-texto);
  font-weight: var(--peso-forte);
  font-size: var(--tam-corpo);
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  transition: background-color var(--transicao), border-color var(--transicao), color var(--transicao);
}
.botao svg,
.botao-fantasma svg {
  stroke: currentColor;
}

.botao {
  padding: 0 var(--e4);
  background: rgba(var(--realce-rgb), 0.02);
  border: 1px solid var(--borda-controle);
  color: var(--texto-1);
}
.botao:hover {
  border-color: var(--ciano);
  background: rgba(var(--ciano-rgb), 0.04);
  color: var(--texto-titulo);
}
.botao--compacto {
  height: 32px;
}
.botao--largo {
  flex: 1;
}
.botao--perigo {
  border-color: var(--vermelho-borda);
  color: var(--vermelho);
}
.botao--perigo:hover {
  border-color: var(--vermelho);
  background: var(--vermelho-fundo);
  color: var(--vermelho);
}

.botao-fantasma {
  padding: 0 var(--e3);
  background: transparent;
  border: 0;
  color: var(--texto-2);
}
.botao-fantasma:hover {
  background: var(--hover-leve);
  color: var(--texto-1);
}
.botao-fantasma--nav {
  color: var(--ciano);
}
.botao-fantasma--nav:hover {
  color: var(--ciano-link-hover);
  background: var(--hover-leve);
}
.botao-fantasma--perigo {
  color: var(--vermelho);
}
.botao-fantasma--perigo:hover {
  background: var(--vermelho-fundo);
  color: var(--vermelho);
}
.botao-fantasma--icone {
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--texto-2);
}

.botao:disabled,
.botao[aria-disabled="true"],
.botao-fantasma:disabled,
.botao-fantasma[aria-disabled="true"] {
  background: transparent;
  border-color: var(--linha);
  color: var(--texto-4);
  cursor: not-allowed;
}
.botao-fantasma:disabled,
.botao-fantasma[aria-disabled="true"] {
  border-color: transparent;
}

/* ---------- Painéis em vidro (Fase A: o vidro da mesa de operação) ---------- */
.painel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--vidro-painel);
  -webkit-backdrop-filter: var(--vidro-filtro);
  backdrop-filter: var(--vidro-filtro);
  border: 1px solid var(--vidro-borda);
  box-shadow: var(--vidro-fio), var(--vidro-sombra);
  border-radius: var(--raio-painel);
}
.painel__cabecalho {
  height: 52px;
  flex-shrink: 0;
  padding: 0 var(--e5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  background: var(--vidro-cabecalho);
  border-bottom: 1px solid var(--vidro-divisoria);
}
.painel__cabecalho--duplo {
  height: 68px;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
}
.painel__titulo-linha {
  display: flex;
  align-items: center;
  gap: var(--e2);
}
.painel h2,
.titulo-secao {
  font-weight: var(--peso-titulo);
  font-size: 17px;
  line-height: 24px;
  color: var(--texto-titulo);
}
.subtitulo {
  font-weight: var(--peso-corpo);
  font-size: var(--tam-apoio);
  line-height: 20px;
  color: var(--texto-2);
}
p.subtitulo {
  line-height: var(--alt-linha);
}
.painel__cabecalho--duplo p.subtitulo {
  line-height: 20px;
}
.painel__corpo {
  padding: var(--e5) var(--e5) var(--e6);
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  min-height: 0;
}
.painel__rodape {
  flex-shrink: 0;
  margin-top: auto;
  padding: var(--e4) var(--e5);
  background: var(--vidro-rodape);
  border-top: 1px solid var(--vidro-divisoria);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e2);
}
.painel__rodape form {
  margin: 0;
  display: flex;
}
.contador-passos {
  font-family: var(--fonte-mono);
  font-weight: var(--peso-corpo);
  font-size: var(--tam-rotulo);
  line-height: 18px;
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
}

/* Marcas de mira: só no bloco-instrumento de cada tela */
.mira {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 0 solid rgba(var(--ciano-rgb), 0.8);
  pointer-events: none;
}
.mira--ne { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.mira--nd { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
.mira--se { bottom: -1px; left: -1px; border-bottom-width: 1px; border-left-width: 1px; }
.mira--sd { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }

/* ---------- Faixa de indicadores ---------- */
.indicadores {
  min-height: 88px;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.indicador {
  padding: var(--e4) var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  min-width: 0;
}
.indicador + .indicador {
  border-left: 1px solid var(--vidro-divisoria);
}
.indicador__valor {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.indicador__valor--icone {
  align-items: center;
  gap: var(--e2);
}
.indicador__valor--icone svg {
  stroke: var(--verde);
}
.indicador__valor--alerta svg {
  stroke: var(--vermelho);
}
.numero-grande {
  font-family: var(--fonte-mono);
  font-weight: 600;
  font-size: 28px;
  line-height: 32px;
  letter-spacing: -0.5px;
  color: var(--texto-titulo);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.numero-grande--vazio {
  color: var(--texto-3);
}
.unidade {
  font-family: var(--fonte-mono);
  font-weight: var(--peso-corpo);
  font-size: var(--tam-apoio);
  line-height: 16px;
  color: var(--texto-2);
}
.indicador__nota {
  font-size: var(--tam-apoio);
  line-height: 20px;
  color: var(--texto-3);
}

/* ---------- Tabela de contas (Revisão 2, item 5) ---------- */
.tabela {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--cinza-rgb), 0.25) transparent;
}
.tabela::-webkit-scrollbar {
  width: 6px;
}
.tabela::-webkit-scrollbar-thumb {
  background: rgba(var(--cinza-rgb), 0.25);
}
.tabela::-webkit-scrollbar-track {
  background: transparent;
}
.tabela__cabecalho,
.tabela__linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 156px 140px 120px;
  gap: var(--e4);
  padding: 0 var(--e5);
  align-items: center;
  flex-shrink: 0;
  border-bottom: 1px solid var(--vidro-divisoria);
}
.tabela__cabecalho {
  height: 40px;
  white-space: nowrap;
  background: var(--vidro-cabecalho);
  font-family: var(--fonte-mono);
  font-weight: var(--peso-forte);
  font-size: var(--tam-rotulo-tabela);
  line-height: 16px;
  letter-spacing: var(--esp-rotulo);
  text-transform: uppercase;
  color: var(--texto-3);
}
.tabela__linha {
  min-height: 64px;
  padding-top: var(--e2);
  padding-bottom: var(--e2);
  color: var(--texto-1);
  cursor: pointer;
  transition: background 120ms ease;
}
.tabela__linha:hover {
  background: rgba(var(--realce-rgb), 0.035);
  color: var(--texto-1);
}
/* F01 r1 (F01-UX-009): a linha é um <div role="row">; o link de verdade fica no
   nome (.tabela__abrir) e cobre a linha inteira com ::after. O anel vai na linha. */
.tabela__linha { position: relative; }
.tabela__abrir { color: inherit; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabela__abrir:hover { color: inherit; }
.tabela__abrir::after { content: ""; position: absolute; inset: 0; }
.tabela__abrir:focus-visible { outline: none; box-shadow: none; }
.tabela__linha:has(.tabela__abrir:focus-visible) {
  outline: 2px solid var(--ciano);
  outline-offset: -2px;
}
.tabela__linha[data-atual] {
  background: linear-gradient(90deg, rgba(var(--ciano-rgb), 0.12), rgba(var(--ciano-rgb), 0.04) 60%);
  box-shadow: inset 2px 0 0 var(--ciano);
}
.tabela__linha[data-atual]:hover {
  background: linear-gradient(90deg, rgba(var(--ciano-rgb), 0.16), rgba(var(--ciano-rgb), 0.04) 60%);
}
.a-direita {
  text-align: right;
  justify-self: end;
}
.tabela__conta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tabela__nome {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-width: 0;
  font-weight: var(--peso-forte);
  font-size: var(--tam-corpo);
  line-height: 22px;
  color: var(--texto-titulo);
}
.tabela__nome span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Sublinha em Barlow (mais legível que mono em texto corrido); só o final
   da chave fica em Plex Mono, para não confundir l, 1 e I. */
.tabela__sub {
  font-size: var(--tam-apoio);
  line-height: 20px;
  color: var(--texto-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tabela__sub .mono {
  font-size: 13px; /* Plex Mono parece maior que Barlow no mesmo tamanho */
}
.tabela__linha[data-atual] .tabela__sub {
  color: var(--texto-2);
}
.tabela__celula-seg {
  justify-self: start;
}
.tabela__quando {
  font-size: var(--tam-corpo);
  line-height: 22px;
  color: var(--texto-2);
}
.tabela__saldo {
  font-family: var(--fonte-mono);
  font-weight: var(--peso-corpo);
  font-size: var(--tam-corpo);
  line-height: 22px;
  color: var(--texto-titulo);
  font-variant-numeric: tabular-nums;
}
.tabela__saldo--vazio {
  color: var(--texto-3);
}
.tabela__vazia {
  flex-grow: 1;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--e5);
  font-size: var(--tam-corpo);
  line-height: 22px;
  color: var(--texto-2);
}
.tabela__rodape {
  margin-top: auto;
  padding: var(--e5) var(--e5) var(--e6);
}

/* ---------- Avisos e mensagens ---------- */
.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--vidro-divisoria);
  background: rgba(var(--ciano-rgb), 0.03);
  box-shadow: inset 2px 0 0 var(--ciano);
  font-size: var(--tam-apoio);
  line-height: 22px;
  color: var(--texto-2);
}
.aviso svg {
  margin-top: 3px;
  stroke: var(--ciano);
}
.aviso strong {
  font-weight: 600;
  color: var(--texto-titulo);
}
.aviso--risco {
  border-color: var(--ambar-borda);
  background: var(--ambar-fundo);
  box-shadow: inset 2px 0 0 var(--ambar);
}
.aviso--risco svg {
  stroke: var(--ambar);
}
.aviso--erro {
  border-color: var(--vermelho-borda);
  background: var(--vermelho-fundo);
  box-shadow: inset 2px 0 0 var(--vermelho);
  color: var(--texto-1);
}
.aviso--erro svg {
  stroke: var(--vermelho);
}
.aviso--sucesso {
  border-color: var(--verde-borda);
  background: var(--verde-fundo);
  box-shadow: inset 2px 0 0 var(--verde);
  color: var(--texto-1);
}
.aviso--sucesso svg {
  stroke: var(--verde);
}
.aviso p + p {
  margin-top: var(--e1);
}
.mensagens {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}

/* ---------- Lista de dados (dl) e lista de conferência ---------- */
.dados {
  margin: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--vidro-divisoria);
}
.dados > div {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  border-bottom: 1px solid var(--vidro-divisoria);
}
.dados dt {
  font-size: var(--tam-corpo);
  line-height: 22px;
  color: var(--texto-3);
}
.dados dd {
  margin: 0;
  font-size: var(--tam-corpo);
  line-height: 22px;
  color: var(--texto-1);
  text-align: right;
}
.dados dd.mono {
  font-size: var(--tam-apoio);
}
.dados--guia dt {
  font-weight: var(--peso-corpo);
  font-size: var(--tam-corpo);
  color: var(--texto-1);
}

.bloco {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}
.checagem {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.checagem li {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: var(--tam-corpo);
  line-height: 22px;
}
.checagem__nome {
  flex-grow: 1;
  color: var(--texto-1);
}
.checagem__valor {
  color: var(--texto-2);
}
.checagem__valor--ok {
  font-weight: 600;
  color: var(--verde);
}
.checagem__valor--perigo {
  font-weight: 600;
  color: var(--vermelho);
}
.icone-ok { stroke: var(--verde); }
.icone-perigo { stroke: var(--vermelho); }
.icone-neutro { stroke: var(--texto-3); }

/* Saldos por ativo no painel de detalhes */
.mini-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tam-corpo);
  line-height: 22px;
}
.mini-tabela th {
  height: 32px;
  padding: 0;
  text-align: left;
  font-family: var(--fonte-mono);
  font-weight: var(--peso-forte);
  font-size: var(--tam-rotulo-tabela);
  line-height: 16px;
  letter-spacing: var(--esp-rotulo);
  text-transform: uppercase;
  color: var(--texto-3);
  border-bottom: 1px solid var(--vidro-divisoria);
}
.mini-tabela td {
  height: 36px;
  padding: 0;
  border-bottom: 1px solid var(--vidro-divisoria);
  color: var(--texto-1);
}
.mini-tabela th + th,
.mini-tabela td + td {
  padding-left: var(--e2);
}
.mini-tabela td.num {
  text-align: right;
  font-size: var(--tam-apoio);
  color: var(--texto-titulo);
}
.mini-tabela th.num {
  text-align: right;
}
.mini-tabela .ativo {
  font-family: var(--fonte-mono);
  font-weight: var(--peso-forte);
  font-size: var(--tam-apoio);
}

/* Últimas atividades */
.atividades {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--vidro-divisoria);
}
.atividades li {
  padding: var(--e3) 0;
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  border-bottom: 1px solid var(--vidro-divisoria);
}
.atividades__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e2);
  font-size: var(--tam-corpo);
  line-height: 22px;
  font-weight: var(--peso-forte);
  color: var(--texto-1);
}
.atividades__quando {
  font-family: var(--fonte-mono);
  font-weight: var(--peso-corpo);
  font-size: var(--tam-apoio);
  line-height: 20px;
  color: var(--texto-3);
  white-space: nowrap;
}
.atividades__msg {
  font-size: var(--tam-apoio);
  line-height: 21px;
  color: var(--texto-2);
}
.atividades__falha .atividades__topo {
  color: var(--vermelho);
}
.atividades__desativada .atividades__topo {
  color: var(--ambar);
}
.vazio-curto {
  font-size: var(--tam-apoio);
  line-height: 21px;
  color: var(--texto-3);
}

/* ---------- Páginas ---------- */
.painel--crescer {
  flex-grow: 1;
}
.contas-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--e6);
  align-items: stretch;
  flex-grow: 1;
  min-height: 0;
}
.detalhe__topo {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}
.detalhe__nome {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e2);
}
.painel .detalhe__nome h2 {
  font-size: 20px;
  line-height: 26px;
  overflow-wrap: anywhere;
}
.detalhe__saldo {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.detalhe__saldo .num {
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  color: var(--texto-titulo);
}
.detalhe__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  width: 100%;
}
.detalhe__acoes form {
  flex: 1 1 auto;
  display: flex;
}
.detalhe__acoes .botao {
  flex: 1;
  padding: 0 var(--e3);
}

/* Início: passos */
.progresso {
  height: 2px;
  background: var(--vidro-borda);
  display: flex;
}
.progresso__feito {
  width: 33.333%;
  height: 2px;
  background: var(--ciano);
}
.passos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e4);
}
.passo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e3);
}
.passo__numero {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linha-forte);
  font-family: var(--fonte-marca);
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: var(--texto-3);
}
.passo__textos {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
}
.painel .passo h3 {
  font-weight: var(--peso-titulo);
  font-size: 17px;
  line-height: 24px;
  color: var(--texto-2);
}
.passo p {
  max-width: 340px;
  font-size: var(--tam-apoio);
  line-height: 21px;
  color: var(--texto-2);
}
.passo[aria-current="step"] .passo__numero {
  background: var(--ciano);
  border-color: var(--ciano);
  color: var(--fundo);
}
.painel .passo[aria-current="step"] h3 {
  color: var(--texto-titulo);
}
.passo .brilho {
  margin-top: var(--e1);
}

/* ---------- Adicionar conta ---------- */
.adicionar-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--e6);
  align-items: start;
}
.formulario-painel {
  margin: 0;
}
.etapas {
  margin: 0;
  height: 52px;
  flex-shrink: 0;
  padding: 0 var(--e5);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--e6);
  background: var(--vidro-cabecalho);
  border-bottom: 1px solid var(--vidro-divisoria);
}
.etapa {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-weight: var(--peso-forte);
  font-size: var(--tam-apoio);
  line-height: 20px;
  color: var(--texto-3);
  white-space: nowrap;
}
.etapa__circulo {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--linha-forte);
  font-family: var(--fonte-marca);
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  color: var(--texto-3);
}
.etapa--feita {
  color: var(--texto-1);
}
.etapa--feita .etapa__circulo {
  background: var(--verde);
  border-color: var(--verde);
}
.etapa--feita .etapa__circulo svg {
  stroke: var(--fundo);
}
.etapa[aria-current="step"] {
  color: var(--texto-titulo);
}
.etapa[aria-current="step"] .etapa__circulo {
  background: var(--ciano);
  border-color: var(--ciano);
  color: var(--fundo);
}
.etapa__traco {
  width: 24px;
  height: 1px;
  flex-shrink: 0;
  background: rgba(var(--cinza-rgb), 0.35);
}
.formulario__corpo {
  padding: var(--e5) var(--e5) var(--e6);
  display: flex;
  flex-direction: column;
  gap: var(--e6);
}
.secao {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}
.secao legend {
  padding: 0 0 var(--e3);
  margin: 0;
}
.secao__num {
  color: var(--texto-3);
}

/* Cartões de rádio: rádio de verdade, visual do protótipo */
.tipos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e3);
}
.cartao-radio {
  position: relative;
  min-height: 72px;
  padding: var(--e3) var(--e4);
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  background: var(--campo-fundo);
  border: 1px solid var(--borda-controle);
  cursor: pointer;
  transition: background-color var(--transicao), border-color var(--transicao), box-shadow var(--transicao);
}
.cartao-radio:hover {
  border-color: var(--borda-controle-hover);
}
.cartao-radio input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.cartao-radio__marca {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  border-radius: 50%;
  border: 1.5px solid var(--texto-3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transicao);
}
.cartao-radio__marca::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  transition: background-color var(--transicao);
}
.cartao-radio__textos {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  min-width: 0;
}
.cartao-radio__titulo {
  font-weight: var(--peso-titulo);
  font-size: var(--tam-corpo);
  line-height: 22px;
  color: var(--texto-titulo);
}
.cartao-radio__texto {
  font-size: var(--tam-apoio);
  line-height: 21px;
  color: var(--texto-2);
}
.cartao-radio:has(input:checked) {
  background: linear-gradient(90deg, rgba(var(--ciano-rgb), 0.10), rgba(var(--ciano-rgb), 0.03));
  border-color: rgba(var(--ciano-rgb), 0.6);
  box-shadow: inset 2px 0 0 var(--ciano);
}
.cartao-radio:has(input:checked) .cartao-radio__marca {
  border-color: var(--ciano);
}
.cartao-radio:has(input:checked) .cartao-radio__marca::after {
  background: var(--ciano);
}
.cartao-radio:has(input:focus-visible) {
  box-shadow: inset 2px 0 0 var(--ciano), var(--anel-foco);
}
.cartao-radio:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ---------- Campos (Revisão 2, item 6) ---------- */
.campo {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  min-width: 0;
}
.campo label,
.campo__rotulo {
  font-weight: var(--peso-forte);
  font-size: var(--tam-apoio);
  line-height: 20px;
  color: var(--texto-1);
}
.campo input[type="text"],
.campo input[type="password"],
.campo input[type="email"],
.campo input:not([type]) {
  width: 100%;
  height: 40px;
  padding: 0 var(--e3);
  background: var(--campo-fundo);
  border: 1px solid var(--borda-controle);
  border-radius: var(--raio-pequeno);
  color: var(--texto-titulo);
  caret-color: var(--ciano);
  font-family: var(--fonte-texto);
  font-weight: var(--peso-corpo);
  font-size: var(--tam-corpo);
  outline: none;
  transition: border-color var(--transicao), box-shadow var(--transicao), background-color var(--transicao);
}
.campo input.mono {
  font-family: var(--fonte-mono);
  font-weight: 400;
  font-size: var(--tam-apoio);
}
.campo input::placeholder {
  color: var(--texto-4);
  font-weight: 400;
  opacity: 1;
}
.campo input:hover {
  border-color: var(--borda-controle-hover);
}
.campo input:focus,
.campo input:focus-visible {
  border-color: var(--ciano);
  background: var(--campo-fundo-foco);
  box-shadow: var(--anel-campo);
}
.campo input:disabled {
  border-color: var(--linha);
  color: var(--texto-4);
  cursor: not-allowed;
}
.campo--erro input[type="text"],
.campo--erro input[type="password"],
.campo--erro input[type="email"],
.campo--erro input:not([type]) {
  border-color: var(--vermelho);
  box-shadow: var(--anel-erro);
}
.campo__pilha {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
}
.campo__ajuda {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--tam-apoio);
  line-height: 20px;
  color: var(--texto-3);
}
.campo__ajuda svg {
  stroke: var(--texto-3);
}
.campo__ajuda ul {
  margin: 0;
  padding-left: var(--e4);
}
.campo__erro {
  font-size: var(--tam-apoio);
  line-height: 20px;
  color: var(--vermelho);
}
.campos-duplos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e4);
  align-items: start;
}

/* Lista da conferência (Adicionar conta) */
.conferencia {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--vidro-divisoria);
}
.conferencia li {
  height: 40px;
  display: flex;
  align-items: center;
  gap: var(--e3);
  border-bottom: 1px solid var(--vidro-divisoria);
}
.conferencia__ponto {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--linha-hover);
}
.conferencia__nome {
  flex-grow: 1;
  font-size: var(--tam-corpo);
  line-height: 22px;
  color: var(--texto-1);
}
.conferindo .conferencia__ponto {
  border-color: var(--ciano);
  background: var(--ciano);
  animation: pulsar 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .conferindo .conferencia__ponto {
    animation: none;
  }
}

/* Caixa só de leitura (tipo a caixa do IP do protótipo) */
.caixa-info {
  min-height: 36px;
  padding: var(--e2) var(--e3);
  display: block;
  background: var(--campo-fundo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-pequeno);
  font-size: var(--tam-apoio);
  line-height: 21px;
  color: var(--texto-2);
}

/* ---------- Confirmação de remoção ---------- */
.confirmacao {
  max-width: 560px;
}

/* ---------- Entrar e primeiro acesso (cartão central) ---------- */
.entrada {
  flex: 1;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e6);
  padding: var(--e8) var(--e4);
}
.entrada .marca {
  height: auto;
  border: 0;
  padding: 0;
}
.entrada__cartao {
  width: 100%;
  max-width: 420px;
}
.entrada__cartao h1 {
  font-family: var(--fonte-marca);
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--texto-titulo);
}
.entrada__form {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}
.entrada__form .brilho,
.entrada__form .botao-principal {
  width: 100%;
}

/* ---------- Responsivo ---------- */
@media (max-width: 1280px) {
  .contas-grade {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
  .tabela__cabecalho,
  .tabela__linha {
    grid-template-columns: minmax(0, 1fr) 156px 140px 104px;
  }
}
@media (max-width: 1180px) {
  .contas-grade,
  .adicionar-grade {
    grid-template-columns: minmax(0, 1fr);
  }
  .indicadores {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .indicador:nth-child(odd of .indicador) {
    border-left: 0;
  }
  .indicador:nth-child(n + 3 of .indicador) {
    border-top: 1px solid var(--vidro-divisoria);
  }
}
@media (max-width: 1023px) {
  .passos {
    grid-template-columns: minmax(0, 1fr);
  }
  .tabela__cabecalho,
  .tabela__linha {
    grid-template-columns: minmax(0, 1fr) 120px;
  }
  .tabela__cabecalho > :nth-child(2),
  .tabela__cabecalho > :nth-child(3),
  .tabela__linha > :nth-child(2),
  .tabela__linha > :nth-child(3) {
    display: none;
  }
}
@media (max-width: 640px) {
  .tipos,
  .campos-duplos,
  .indicadores {
    grid-template-columns: minmax(0, 1fr);
  }
  .indicador + .indicador {
    border-left: 0;
    border-top: 1px solid var(--vidro-divisoria);
  }
  /* Etapas do formulário quebram linha no celular em vez de alargar a página */
  .etapas {
    height: auto;
    min-height: 52px;
    padding: var(--e3) var(--e5);
    flex-wrap: wrap;
    gap: var(--e2) var(--e4);
  }
  .etapa__traco {
    display: none;
  }
}

/* ---------- Ajustes finais ---------- */
.caixa-info strong {
  font-weight: 600;
  color: var(--texto-titulo);
}
.painel__rodape .detalhe__acoes + .botao-fantasma {
  margin-left: auto;
}
.entrada__rodape {
  font-size: 13px;
  line-height: 18px;
  color: var(--texto-3);
  text-align: center;
}
div.campo__ajuda {
  display: block;
}

/* =====================================================================
 * Fase 2 — Telas A: seletor de conta, área da conta, simulação, Início,
 * alertas e gráfico. Protótipos docs/design/prototipo/Area*.dc.html, com a
 * legibilidade da Revisão 3 (tokens --texto-*, --tam-*, --peso-*).
 * ===================================================================== */

/* ---------- Utilitários ---------- */
.texto-1 { color: var(--texto-1); }
.texto-perigo { color: var(--vermelho); font-weight: var(--peso-forte); }
.forte { font-weight: var(--peso-forte); color: var(--texto-titulo); }
.num--vazio { color: var(--texto-3) !important; font-weight: var(--peso-corpo) !important; }
.unidade-pequena {
  font-family: var(--fonte-mono);
  font-weight: var(--peso-corpo);
  font-size: var(--tam-rotulo-tabela);
  line-height: 16px;
  color: var(--texto-3);
}
.rotulo-tabela {
  font-family: var(--fonte-mono);
  font-weight: var(--peso-forte);
  font-size: var(--tam-rotulo-tabela);
  line-height: 16px;
  letter-spacing: var(--esp-rotulo);
  text-transform: uppercase;
  color: var(--texto-3);
}
.variacao--positivo { color: var(--positivo) !important; }
.variacao--negativo { color: var(--negativo) !important; }
.variacao {
  font-size: var(--tam-apoio);
  line-height: 20px;
  font-weight: var(--peso-forte);
  color: var(--texto-2);
  white-space: nowrap;
}
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--peso-forte);
  font-size: var(--tam-apoio);
  line-height: 20px;
  white-space: nowrap;
}
.link-seta svg { stroke: currentColor; }
.tecla {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-pequeno);
  font-family: var(--fonte-mono);
  font-weight: var(--peso-corpo);
  font-size: var(--tam-rotulo-tabela);
  line-height: 16px;
  color: var(--texto-3);
}

/* Selos novos */
.selo--simulacao {
  border-color: var(--roxo-borda);
  background: var(--roxo-fundo);
  color: var(--roxo);
}
.selo--novo {
  border-color: rgba(var(--ciano-rgb), 0.35);
  background: rgba(var(--ciano-rgb), 0.06);
  color: var(--ciano);
}
.selo--mov-deposito { border-color: var(--verde-borda); background: var(--verde-fundo); color: var(--verde); }
.selo--mov-saque { border-color: var(--vermelho-borda); background: var(--vermelho-fundo); color: var(--vermelho); }
.selo--mov-transferencia_entrada,
.selo--mov-transferencia_saida { border-color: var(--azul-borda); background: var(--azul-fundo); color: var(--azul); }
.selo--mov-ajuste { border-color: var(--roxo-borda); background: var(--roxo-fundo); color: var(--roxo); }
.estado { display: inline-flex; align-items: center; gap: 6px; }
.estado--ok { color: var(--verde); }
.estado--perigo { color: var(--vermelho); }
.estado--inativo { color: var(--texto-3); }
.estado svg { stroke: currentColor; }
.estado__ponto {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--verde);
}
.menu__contador--aviso {
  background: var(--ambar-fundo);
  color: var(--ambar);
  box-shadow: inset 0 0 0 1px var(--ambar-borda);
}

/* ---------- Seletor de conta (barra superior; tamanho em moldura.css) ---------- */

.seletor {
  position: relative;
  /* Não é espremido pelo título (o título é que encolhe com reticências). */
  flex: 0 0 auto;
  width: min(400px, 34vw);
  min-width: 220px;
}
.seletor__gatilho {
  width: 100%;
  max-width: 400px;
  height: 44px;
  padding: 0 var(--e3);
  display: flex;
  align-items: center;
  gap: var(--e3);
  list-style: none;
  background: var(--campo-fundo);
  border: 1px solid var(--borda-controle);
  border-radius: var(--raio-pequeno);
  color: var(--texto-1);
  cursor: pointer;
  outline: none;
  transition: border-color var(--transicao), background-color var(--transicao);
}
.seletor__gatilho::-webkit-details-marker { display: none; }
.seletor__gatilho:hover { border-color: var(--borda-controle-hover); }
.seletor__gatilho:focus-visible { border-color: var(--ciano); box-shadow: var(--anel-foco); }
.seletor[open] .seletor__gatilho {
  background: var(--superficie-opaca);
  border-color: var(--ciano);
  box-shadow: 0 0 0 3px rgba(var(--ciano-rgb), 0.12);
}
.seletor__icone {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--ciano-rgb), 0.06);
  border: 1px solid rgba(var(--ciano-rgb), 0.35);
  border-radius: var(--raio-pequeno);
  color: var(--ciano);
}
.seletor__icone svg { stroke: currentColor; }
.seletor__icone--simulacao {
  background: var(--roxo-fundo);
  border-color: var(--roxo-borda);
  color: var(--roxo);
}
.seletor__icone--grande { width: 32px; height: 32px; }
.seletor__nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--peso-forte);
  font-size: var(--tam-corpo);
  line-height: 20px;
  color: var(--texto-titulo);
}
.seletor__nome--vazio { color: var(--texto-3); font-weight: var(--peso-corpo); }
.seletor__saldo {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: var(--e1);
  white-space: nowrap;
}
.seletor__saldo .num {
  font-weight: 600;
  font-size: var(--tam-corpo);
  line-height: 20px;
  color: var(--texto-1);
}
.seletor__seta {
  stroke: var(--texto-3);
  flex-shrink: 0;
  transform-origin: 50% 50%;
  transition: transform var(--transicao);
}
.seletor[open] .seletor__seta { transform: rotate(180deg); stroke: var(--ciano); }
.seletor__gatilho .seletor__seta { margin-left: 0; }
.seletor__gatilho .seletor__nome + .selo + .seletor__saldo,
.seletor__gatilho .seletor__nome--vazio { margin-left: 0; }
.seletor__gatilho .seletor__nome--vazio { margin-right: auto; }

.seletor__painel {
  position: absolute;
  top: 52px;
  left: 0;
  z-index: 20;
  width: 440px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linha-forte);
  background: var(--superficie-opaca);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  box-shadow: var(--vidro-fio), var(--sombra-flutuante);
}
.seletor__busca { padding: var(--e3); border-bottom: 1px solid var(--vidro-divisoria); }
.seletor__campo {
  height: 40px;
  padding: 0 var(--e3);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--campo-fundo);
  border: 1px solid var(--borda-controle);
  border-radius: var(--raio-pequeno);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.seletor__campo:focus-within { border-color: var(--ciano); box-shadow: var(--anel-campo); }
.seletor__campo svg { stroke: var(--texto-3); }
.seletor__campo input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--texto-1);
  caret-color: var(--ciano);
  font-family: var(--fonte-texto);
  font-weight: var(--peso-corpo);
  font-size: var(--tam-corpo);
}
.seletor__campo input::placeholder { color: var(--texto-4); opacity: 1; }
.seletor__campo input::-webkit-search-cancel-button { display: none; }
.seletor__grupo {
  padding: var(--e3) var(--e5) 6px;
  display: flex;
  align-items: center;
  gap: var(--e2);
}
.seletor__grupo .menu__contador { margin-left: 0; }
.seletor__form { margin: 0; }
.seletor__lista {
  max-height: min(360px, 55vh);
  overflow-y: auto;
  padding: 0 var(--e2) var(--e2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--cinza-rgb), 0.25) transparent;
}
.seletor__opcao {
  width: 100%;
  min-height: 64px;
  padding: var(--e2) var(--e3);
  display: flex;
  align-items: center;
  gap: var(--e3);
  border: 0;
  background: transparent;
  color: var(--texto-1);
  text-align: left;
  font: inherit;
  cursor: pointer;
  outline: none;
  transition: background 120ms ease;
}
.seletor__opcao:hover { background: rgba(var(--realce-rgb), 0.035); }
.seletor__opcao:focus-visible { box-shadow: inset var(--anel-foco); }
.seletor__opcao[aria-selected="true"] {
  background: linear-gradient(90deg, rgba(var(--ciano-rgb), 0.12), rgba(var(--ciano-rgb), 0.04));
  box-shadow: inset 2px 0 0 var(--ciano);
}
.seletor__opcao[hidden] { display: none; }
.seletor__textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.seletor__linha { display: flex; align-items: center; gap: var(--e2); min-width: 0; }
.seletor__sub {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: var(--tam-apoio);
  line-height: 20px;
  color: var(--texto-2);
}
.seletor__sub .mono { font-size: 13px; color: var(--texto-1); }
.seletor__ponto { color: var(--texto-3); }
/* No celular a linha "Dinheiro de mentira · Ativa" quebra: sem o ponto separador,
   para ele não ficar sozinho no começo da segunda linha. */
.seletor__sub-texto, .seletor__sub .estado { white-space: nowrap; }
/* Crítica r2 (B7): o tipo tem uma grafia só, "Conta principal da Binance", que não cabe na linha
   com a chave; o tipo fica numa linha e a chave (e a situação) na de baixo, sem ponto solto. */
.seletor__sub .seletor__tipo { flex-basis: 100%; }
@media (max-width: 480px) {
  .seletor__sub { column-gap: var(--e2); row-gap: 0; }
  .seletor__sub .seletor__ponto { display: none; }
}
.seletor__marca { width: 16px; flex-shrink: 0; stroke: var(--ciano); }
.seletor__nada,
.seletor__vazio {
  margin: 0;
  padding: var(--e3) var(--e5) var(--e4);
  font-size: var(--tam-apoio);
  line-height: 21px;
  color: var(--texto-3);
}
.seletor__rodape {
  padding: var(--e2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  border-top: 1px solid var(--vidro-divisoria);
  background: var(--vidro-rodape);
}

/* ---------- Seletor da Fase 4 (D-031): grupos Real/Simulação, principal e "Somar" ----------
   Os seletores levam o prefixo .seletor para vencer o privacidade.css, que é
   carregado depois e tinha a primeira versão da caixa "Somar". */
.seletor .seletor__painel {
  z-index: 40;
  /* Fundo opaco: o conteúdo do Início não aparece por trás da lista. */
  background: var(--superficie-opaca);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--vidro-fio), var(--sombra-flutuante);
}
.seletor__estrela,
.seletor__principal svg { fill: var(--ciano); stroke: var(--ciano); flex-shrink: 0; }
.seletor .seletor__lista { padding: var(--e1) var(--e2) var(--e2); gap: 0; }
.seletor__bloco[hidden] { display: none; }
.seletor .seletor__grupo {
  height: 36px;
  padding: var(--e3) var(--e3) var(--e1);
}
.seletor__itens { display: flex; flex-direction: column; }
.seletor .seletor__item { gap: var(--e1); }
.seletor .seletor__item--atual {
  background: linear-gradient(90deg, rgba(var(--ciano-rgb), 0.12), rgba(var(--ciano-rgb), 0.03) 60%);
  box-shadow: inset 2px 0 0 var(--ciano);
}
/* O destaque da selecionada fica na linha inteira (botão + caixa), como no desenho. */
.seletor .seletor__item--atual .seletor__opcao[aria-current="true"] { background: transparent; box-shadow: none; }
.seletor .seletor__item .seletor__opcao { min-height: 60px; padding: var(--e2) var(--e3); }
.seletor__principal {
  height: 22px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  flex-shrink: 0;
  border: 1px solid rgba(var(--ciano-rgb), 0.35);
  background: rgba(var(--ciano-rgb), 0.06);
  border-radius: var(--raio-pequeno);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: var(--ciano-link-hover);
  white-space: nowrap;
}
.seletor .seletor__marca { stroke: var(--ciano); }
.seletor .seletor__somar {
  flex: 0 0 88px;
  align-self: stretch;
  padding: 0 var(--e3) 0 var(--e2);
  flex-direction: row;
  justify-content: flex-end;
  gap: var(--e2);
  background: transparent;
  box-shadow: none;
  color: var(--texto-1);
  font-size: 13px;
}
.seletor .seletor__somar-texto { color: var(--texto-1); }
.seletor .seletor__item--somada .seletor__somar-texto { color: var(--texto-1); }
/* Caixa desativada (selecionada ou de outro modo): cinza e cursor proibido. */
.seletor .seletor__item--bloqueada .seletor__somar,
.seletor .seletor__item--bloqueada .seletor__somar input { cursor: not-allowed; }
.seletor .seletor__item--bloqueada .seletor__somar-texto { color: var(--texto-4); }
.seletor .seletor__item--bloqueada .seletor__somar:hover { background: transparent; }
.seletor .seletor__somadas {
  padding: var(--e3) var(--e5);
  gap: var(--e4);
}
.seletor .seletor__somadas-texto {
  font-weight: 500;
  font-size: var(--tam-apoio);
  line-height: 20px;
  color: var(--texto-2);
}
.seletor__aplicar {
  height: 36px;
  flex-shrink: 0;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  background: rgba(var(--ciano-rgb), 0.12);
  border: 1px solid rgba(var(--ciano-rgb), 0.55);
  border-radius: var(--raio-pequeno);
  font-family: var(--fonte-texto);
  font-weight: 700;
  font-size: 15px;
  line-height: 20px;
  color: var(--texto-titulo);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao);
}
.seletor__aplicar:hover { background: rgba(var(--ciano-rgb), 0.18); border-color: var(--ciano); }
.seletor__aplicar:focus-visible { outline: none; box-shadow: var(--anel-foco); }
@media (min-width: 1024px) {
  .seletor .seletor__painel { width: 560px; }
}
@media (max-width: 640px) {
  .seletor .seletor__somar { flex-basis: 72px; padding-right: var(--e2); }
  .seletor .seletor__somadas { flex-wrap: wrap; padding: var(--e3); }
  .seletor__aplicar { margin-left: auto; }
}

/* ---------- Cabeçalho da conta e abas ---------- */
.conta-cab { flex-shrink: 0; }
.conta-cab__topo {
  min-height: 72px;
  padding: var(--e3) var(--e5);
  display: flex;
  align-items: center;
  gap: var(--e6);
}
.conta-cab__id {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e1);
}
.conta-cab__nome { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2); min-width: 0; }
.painel .conta-cab__nome h2 {
  font-size: 22px;
  line-height: 28px;
  overflow-wrap: anywhere;
}
.conta-cab__linha {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e2);
  font-size: var(--tam-apoio);
  line-height: 20px;
  color: var(--texto-2);
}
.conta-cab__chave { font-size: var(--tam-apoio); color: var(--texto-1); }
.conta-cab__ponto { color: var(--texto-3); }
.conta-cab__saldo { display: flex; flex-direction: column; gap: var(--e1); flex-shrink: 0; }
.conta-cab__valor { display: flex; align-items: baseline; gap: 6px; }
.conta-cab__valor .num {
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
  color: var(--texto-titulo);
  letter-spacing: -0.3px;
}
.conta-cab__quando {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: var(--tam-apoio);
  line-height: 20px;
  color: var(--texto-3);
  white-space: nowrap;
}
.conta-cab__quando svg { stroke: var(--texto-3); }
.conta-cab__divisor { width: 1px; height: 40px; flex-shrink: 0; background: var(--vidro-borda); }
.conta-cab__acoes { display: flex; align-items: center; gap: var(--e2); flex-shrink: 0; }
.conta-cab__acoes form { margin: 0; display: flex; }

.abas {
  height: 48px;
  flex-shrink: 0;
  padding: 0 var(--e2);
  display: flex;
  align-items: stretch;
  gap: var(--e1);
  border-top: 1px solid var(--vidro-divisoria);
  overflow-x: auto;
  scrollbar-width: none;
}
.abas::-webkit-scrollbar { display: none; }
.abas__item {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: 0 var(--e3);
  font-weight: var(--peso-corpo);
  font-size: var(--tam-corpo);
  line-height: 20px;
  color: var(--texto-2);
  white-space: nowrap;
  outline: none;
  transition: color var(--transicao), background-color var(--transicao);
}
.abas__item:hover { color: var(--texto-1); background: var(--hover-leve); }
.abas__item:focus-visible { box-shadow: inset var(--anel-foco); }
.abas__item[aria-current="page"] {
  font-weight: 600;
  color: var(--texto-titulo);
  background: linear-gradient(180deg, rgba(var(--ciano-rgb), 0) 0%, rgba(var(--ciano-rgb), 0.07) 100%);
  box-shadow: inset 0 -2px 0 var(--ciano);
}
.abas__contador {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  background: rgba(var(--realce-rgb), 0.05);
  border-radius: var(--raio-pequeno);
  font-family: var(--fonte-mono);
  font-weight: var(--peso-corpo);
  font-size: var(--tam-rotulo-tabela);
  line-height: 16px;
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}
.abas__item[aria-current="page"] .abas__contador { color: var(--texto-titulo); background: rgba(var(--ciano-rgb), 0.10); }

/* ---------- Faixas de indicadores da área da conta ---------- */
.indicadores--conta { min-height: 104px; }
.indicadores--conta .indicador { padding: var(--e3) var(--e5); gap: var(--e1); justify-content: center; }
.indicadores--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.indicador__valor--texto { align-items: center; min-height: 32px; }

/* ---------- Grades de página ---------- */
.conta-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--e6);
  align-items: start;
}
.coluna { display: flex; flex-direction: column; gap: var(--e6); min-width: 0; }
.coluna > .painel--crescer { flex-grow: 1; }
.painel__corpo--grafico { padding: var(--e4) var(--e5) var(--e5); gap: var(--e2); }

/* ---------- Distribuição do saldo ---------- */
.distribuicao { display: flex; flex-direction: column; gap: 6px; }
.distribuicao__barra {
  height: 12px;
  display: flex;
  gap: 2px;
  background: var(--vidro-divisoria);
  overflow: hidden;
}
.distribuicao__fatia { flex: 1 1 0; min-width: 3px; }
.distribuicao__fatia--minima { flex: 0 0 3px !important; }
.legenda {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--e6);
}
.legenda__item {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: var(--e2);
  border-bottom: 1px solid var(--vidro-divisoria);
  min-width: 0;
}
.legenda__cor { width: 10px; height: 10px; flex-shrink: 0; }
.legenda__cor--sem-preco { border: 1px dashed var(--texto-3); background: transparent !important; }
.legenda__nome {
  font-family: var(--fonte-mono);
  font-weight: 600;
  font-size: var(--tam-apoio);
  color: var(--texto-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.legenda__nota {
  font-size: var(--tam-apoio);
  color: var(--texto-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.legenda__valor { margin-left: auto; font-size: var(--tam-apoio); color: var(--texto-1); white-space: nowrap; }
.legenda__pct { width: 64px; flex-shrink: 0; text-align: right; font-size: var(--tam-apoio); color: var(--texto-2); }
.legenda__nota + .legenda__pct { margin-left: auto; }

/* ---------- Tabelas em grade (área da conta) ---------- */
.grade-tabela {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--cinza-rgb), 0.25) transparent;
}
.grade-tabela__cabecalho,
.grade-tabela__linha,
.grade-tabela__total {
  display: grid;
  grid-template-columns: var(--colunas);
  gap: var(--e4);
  padding: 0 var(--e5);
  align-items: center;
  flex-shrink: 0;
  min-width: var(--largura-minima, 0);
  border-bottom: 1px solid var(--vidro-divisoria);
}
.grade-tabela__cabecalho {
  height: 40px;
  white-space: nowrap;
  background: var(--vidro-cabecalho);
  font-family: var(--fonte-mono);
  font-weight: var(--peso-forte);
  font-size: var(--tam-rotulo-tabela);
  line-height: 16px;
  letter-spacing: var(--esp-rotulo);
  text-transform: uppercase;
  color: var(--texto-3);
}
.grade-tabela__linha {
  min-height: 56px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: var(--tam-corpo);
  line-height: 20px;
  color: var(--texto-1);
  transition: background 120ms ease;
}
.grade-tabela__linha:hover { background: rgba(var(--realce-rgb), 0.035); }
.grade-tabela__linha--link { cursor: pointer; }
.grade-tabela__linha--link:hover { color: var(--texto-1); }
.grade-tabela__linha--link:focus-visible { outline: 2px solid var(--ciano); outline-offset: -2px; box-shadow: none; }
.grade-tabela__linha--selecionada {
  background: linear-gradient(90deg, rgba(var(--ciano-rgb), 0.12), rgba(var(--ciano-rgb), 0.04) 60%);
  box-shadow: inset 2px 0 0 var(--ciano);
}
.grade-tabela__total {
  min-height: 56px;
  background: var(--vidro-cabecalho);
  font-size: var(--tam-corpo);
}
.grade-tabela .num { font-size: var(--tam-corpo); font-weight: var(--peso-corpo); color: var(--texto-1); white-space: nowrap; }
.grade-tabela .num.forte { font-weight: 600; color: var(--texto-titulo); }
.grade-tabela form { margin: 0; display: inline-flex; }
.grade-tabela--resumo { --colunas: 88px minmax(0, 1fr) 88px 112px 120px 104px; }
.grade-tabela--carteira { --colunas: minmax(140px, 1fr) 150px 112px 150px 112px 112px 112px; --largura-minima: 1040px; }
.grade-tabela--ordens { --colunas: minmax(120px, 1fr) 88px 72px 112px 136px 136px 104px 80px 104px; --largura-minima: 1080px; }
.grade-tabela--historico { --colunas: 104px minmax(120px, 1fr) 88px 128px 160px 128px 168px; --largura-minima: 1000px; }
.grade-tabela--movimentacoes { --colunas: 96px 200px 72px 168px minmax(160px, 1fr) 128px; --largura-minima: 960px; }

.celula-dupla { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.celula-dupla > span:first-child,
.celula-dupla > a:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.celula-dupla__sub {
  font-size: var(--tam-apoio);
  line-height: 20px;
  color: var(--texto-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.celula-dupla__sub.num { font-size: 13px; color: var(--texto-3); }
.par {
  font-family: var(--fonte-mono);
  font-weight: 600;
  font-size: var(--tam-corpo);
  line-height: 20px;
  color: var(--texto-titulo);
}
.par--link:hover { color: var(--ciano); }
.celula-moeda { display: flex; align-items: center; gap: var(--e3); min-width: 0; }
.celula-pct { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.celula-pct .num { font-size: var(--tam-apoio); color: var(--texto-2); }
.mini-barra {
  display: flex;
  width: 72px;
  height: 3px;
  background: var(--vidro-divisoria);
}
.mini-barra > span { display: block; height: 3px; min-width: 0; }
.mini-barra--cheia { width: 100%; }
.mini-barra--cheia > span { background: var(--ciano); }
.celula-preenchido { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.celula-preenchido__textos { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.celula-preenchido__textos .num { font-size: var(--tam-apoio); }
.celula-texto {
  min-width: 0;
  font-size: var(--tam-apoio);
  line-height: 20px;
  color: var(--texto-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mov-entrada { color: var(--positivo) !important; }
.mov-saida { color: var(--negativo) !important; }
.tabela__vazia--curta { min-height: 72px; }
.tabela__rodape--linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--e3) var(--e4);
  padding: var(--e4) var(--e5) var(--e5);
  font-size: var(--tam-apoio);
}
.tabela__rodape--linha .aviso { flex: 1 1 360px; }

/* Interruptor "Ocultar saldos pequenos" */
.chave-liga {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 var(--e1);
  font-weight: var(--peso-corpo);
  font-size: var(--tam-corpo);
  color: var(--texto-2);
  white-space: nowrap;
}
.chave-liga:hover { color: var(--texto-1); }
.chave-liga__trilho {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  border: 1px solid var(--borda-controle);
  border-radius: 10px;
  background: var(--campo-fundo);
  transition: background-color var(--transicao), border-color var(--transicao);
}
.chave-liga__botao {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--texto-3);
  transition: transform var(--transicao), background-color var(--transicao);
}
.chave-liga[aria-checked="true"] .chave-liga__trilho { border-color: var(--ciano); background: rgba(var(--ciano-rgb), 0.12); }
.chave-liga[aria-checked="true"] .chave-liga__botao { transform: translateX(16px); background: var(--ciano); }

/* ---------- Listas de dados ---------- */
.dados-grade {
  margin: 0;
  padding: var(--e4) var(--e5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--e6);
}
.dados-grade > div,
.dados--painel > div {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  border-bottom: 1px solid var(--vidro-divisoria);
}
.dados-grade dt,
.dados--painel dt { font-size: var(--tam-corpo); line-height: 22px; color: var(--texto-2); }
.dados-grade dd,
.dados--painel dd { margin: 0; font-size: var(--tam-corpo); line-height: 22px; color: var(--texto-1); text-align: right; }
.dados--painel { margin: 0; padding: var(--e4) var(--e5); display: flex; flex-direction: column; border-top: 0; }
.dados--icones > div { justify-content: flex-start; }
.dados--icones dd { margin-left: auto; }
.dados .num { font-size: var(--tam-apoio); }

/* ---------- Formulário de nova ordem (simulação) ---------- */
.formulario-ordem { margin: 0; scroll-margin-top: 80px; }
.formulario-ordem:target { border-color: rgba(var(--ciano-rgb), 0.45); }
.formulario-ordem .painel__rodape { gap: var(--e3); }
.campo--grupo { margin: 0; padding: 0; border: 0; }
.campo--grupo legend { padding: 0; margin-bottom: var(--e2); }
.segmentos {
  display: flex;
  width: 100%;
  border: 1px solid var(--borda-controle);
  border-radius: var(--raio-pequeno);
  background: var(--campo-fundo);
}
.segmento {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  cursor: pointer;
}
.segmento + .segmento { border-left: 1px solid var(--linha-forte); }
.segmento input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.campo .segmento span,
.segmento span {
  height: 38px;
  padding: 0 var(--e2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--peso-corpo);
  font-size: var(--tam-apoio);
  line-height: 20px;
  color: var(--texto-2);
  white-space: nowrap;
  transition: background-color var(--transicao), color var(--transicao);
}
.segmento:hover span { color: var(--texto-1); background: var(--hover-leve); }
.segmento input:checked + span {
  font-weight: 600;
  color: var(--texto-titulo);
  background: rgba(var(--ciano-rgb), 0.10);
  box-shadow: inset 0 -2px 0 var(--ciano);
}
.segmento--compra input:checked + span { background: var(--verde-fundo); color: var(--verde); box-shadow: inset 0 -2px 0 var(--verde); }
.segmento--venda input:checked + span { background: var(--vermelho-fundo); color: var(--vermelho); box-shadow: inset 0 -2px 0 var(--vermelho); }
.segmento input:focus-visible + span { box-shadow: inset var(--anel-foco); }
.seletor-campo,
.filtro__campo {
  width: 100%;
  height: 40px;
  padding: 0 32px 0 var(--e3);
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--campo-fundo);
  background-image: linear-gradient(45deg, transparent 50%, var(--texto-3) 50%), linear-gradient(135deg, var(--texto-3) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  border: 1px solid var(--borda-controle);
  border-radius: var(--raio-pequeno);
  color: var(--texto-titulo);
  font-family: var(--fonte-texto);
  font-weight: var(--peso-corpo);
  font-size: var(--tam-corpo);
  outline: none;
  cursor: pointer;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.seletor-campo.mono { font-family: var(--fonte-mono); font-size: var(--tam-apoio); }
.seletor-campo:hover,
.filtro__campo:hover { border-color: var(--borda-controle-hover); }
.seletor-campo:focus-visible,
.filtro__campo:focus-visible { border-color: var(--ciano); box-shadow: var(--anel-campo); }
.seletor-campo option,
.filtro__campo option { background: var(--superficie-1); color: var(--texto-1); }

/* ---------- Filtros ---------- */
.painel__cabecalho--filtros {
  height: auto;
  min-height: 64px;
  padding-top: var(--e3);
  padding-bottom: var(--e3);
  flex-wrap: wrap;
  justify-content: flex-start;
}
.painel__cabecalho--filtros > .botao,
.painel__cabecalho--filtros > .grafico-controles { margin-left: auto; }
.cabecalho__divisor { width: 1px; height: 24px; background: var(--vidro-borda); }
.filtros { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2); }
.filtro {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
}
.filtro .filtro__campo { width: auto; min-width: 128px; }
.filtro__rotulo,
.campo .filtro__rotulo {
  font-family: var(--fonte-mono);
  font-weight: var(--peso-forte);
  font-size: var(--tam-rotulo-tabela);
  line-height: 16px;
  letter-spacing: var(--esp-rotulo);
  text-transform: uppercase;
  color: var(--texto-3);
}
.barra-filtros {
  margin: 0;
  min-height: 68px;
  padding: var(--e3) var(--e5);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e3) var(--e4);
  border-bottom: 1px solid var(--vidro-divisoria);
}
.segmentos--filtro { width: auto; flex-wrap: wrap; }
.segmento-link {
  height: 36px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-weight: var(--peso-corpo);
  font-size: var(--tam-corpo);
  line-height: 20px;
  color: var(--texto-2);
  white-space: nowrap;
  outline: none;
  transition: background-color var(--transicao), color var(--transicao);
}
.segmento-link + .segmento-link { border-left: 1px solid var(--linha-forte); }
.segmento-link:hover { color: var(--texto-1); background: var(--hover-leve); }
.segmento-link:focus-visible { box-shadow: inset var(--anel-foco); }
.segmento-link[aria-checked="true"] {
  font-weight: 600;
  color: var(--texto-titulo);
  background: rgba(var(--ciano-rgb), 0.10);
  box-shadow: inset 0 -2px 0 var(--ciano);
}
.grafico-controles { display: flex; flex-wrap: wrap; gap: var(--e2); }
.grafico-controles .segmento-link { height: 32px; padding: 0 var(--e3); font-size: var(--tam-apoio); }
/* Seletor de períodos do gráfico (M-017): 5 opções numa linha só até 390px. */
.segmentos--periodos { flex-wrap: nowrap; max-width: 100%; }
@media (max-width: 480px) {
  .grafico-controles .segmentos--periodos .segmento-link { padding: 0 8px; }
}

/* ---------- Paginação ---------- */
.paginacao { display: flex; align-items: center; gap: var(--e1); margin-left: auto; }
.paginacao__conta { margin-right: var(--e2); font-size: var(--tam-apoio); color: var(--texto-3); white-space: nowrap; }
.paginacao__conta .num { color: var(--texto-1); }
.paginacao__atual {
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--ciano-rgb), 0.45);
  border-radius: var(--raio-pequeno);
  font-size: var(--tam-apoio);
  color: var(--texto-titulo);
}

/* ---------- Linha do tempo (atividade, eventos) ---------- */
.linha-tempo { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.linha-tempo__item {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: var(--e3);
  align-items: start;
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--vidro-divisoria);
}
.linha-tempo__item:first-child { padding-top: 0; }
.linha-tempo__ponto {
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--ciano);
}
.linha-tempo__item--falha .linha-tempo__ponto,
.linha-tempo__item--erro .linha-tempo__ponto,
.linha-tempo__item--risco .linha-tempo__ponto { background: var(--vermelho); }
.linha-tempo__item--desativada .linha-tempo__ponto,
.linha-tempo__item--pausado .linha-tempo__ponto { background: var(--ambar); }
.linha-tempo__item--saldo_atualizado .linha-tempo__ponto,
.linha-tempo__item--conferida .linha-tempo__ponto,
.linha-tempo__item--ligado .linha-tempo__ponto,
.linha-tempo__item--ordem .linha-tempo__ponto { background: var(--verde); }
.linha-tempo__item--desligado .linha-tempo__ponto { background: var(--texto-3); }
.linha-tempo__textos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.linha-tempo__titulo { font-weight: 600; font-size: var(--tam-corpo); line-height: 22px; color: var(--texto-1); }
.linha-tempo__msg { font-size: var(--tam-apoio); line-height: 21px; color: var(--texto-2); overflow-wrap: anywhere; }
.linha-tempo__quando {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 13px;
  line-height: 18px;
  color: var(--texto-3);
  white-space: nowrap;
}
.linha-tempo__quando .num { font-size: var(--tam-apoio); color: var(--texto-2); }

/* ---------- Gráfico de linha (tag grafico_linha) ---------- */
.grafico { display: block; width: 100%; height: auto; overflow: visible; }
.grafico--vazio {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--vidro-borda);
  font-size: var(--tam-apoio);
  color: var(--texto-3);
}
.grafico__grade { stroke: var(--vidro-divisoria); stroke-width: 1; shape-rendering: crispEdges; }
.grafico__eixo {
  fill: var(--texto-3);
  font-family: var(--fonte-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.grafico__linha { stroke: var(--cor-grafico, var(--ciano)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico__area-topo { stop-color: var(--cor-grafico, var(--ciano)); stop-opacity: 0.22; }
.grafico__area-fim { stop-color: var(--cor-grafico, var(--ciano)); stop-opacity: 0; }
.grafico__ponto { fill: var(--cor-grafico, var(--ciano)); stroke: var(--fundo); stroke-width: 1.5; }
.grafico__halo { fill: var(--cor-grafico, var(--ciano)); fill-opacity: 0.18; }
.grafico__ultimo {
  fill: var(--texto-titulo);
  font-family: var(--fonte-mono);
  font-weight: 600;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  paint-order: stroke;
  stroke: var(--fundo);
  stroke-width: 3px;
}
.grafico--verde { --cor-grafico: var(--verde); }
.grafico--vermelho { --cor-grafico: var(--vermelho); }
.grafico--ambar { --cor-grafico: var(--ambar); }

/* ---------- Início: robôs, alertas e atalhos ---------- */
.lista-cartoes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.lista-cartoes__item {
  min-height: 64px;
  padding: var(--e2) var(--e5);
  display: flex;
  align-items: center;
  gap: var(--e3);
  border-bottom: 1px solid var(--vidro-divisoria);
  color: var(--texto-1);
  transition: background 120ms ease;
}
.lista-cartoes__item:hover { background: rgba(var(--realce-rgb), 0.035); color: var(--texto-1); }
.lista-cartoes__textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lista-cartoes__titulo { font-weight: 600; font-size: var(--tam-corpo); line-height: 22px; color: var(--texto-titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-cartoes__sub { font-size: var(--tam-apoio); line-height: 20px; color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-cartoes__lado { display: flex; flex-direction: column; align-items: flex-end; gap: var(--e1); }

.lista-alertas { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.alerta {
  position: relative;
  padding: var(--e4) var(--e5);
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  border-bottom: 1px solid var(--vidro-divisoria);
}
.alerta__marca {
  width: 8px;
  height: 8px;
  margin-top: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--texto-3);
}
.alerta--atencao .alerta__marca { background: var(--ambar); }
.alerta--critico .alerta__marca { background: var(--vermelho); }
.alerta--info .alerta__marca { background: var(--ciano); }
.alerta--novo { background: rgba(var(--ciano-rgb), 0.03); box-shadow: inset 2px 0 0 var(--ciano); }
.alerta--novo.alerta--critico { background: var(--vermelho-fundo); box-shadow: inset 2px 0 0 var(--vermelho); }
.alerta__textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--e1); }
.alerta__topo { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2); }
.alerta__titulo { font-weight: 600; font-size: var(--tam-corpo); line-height: 22px; color: var(--texto-titulo); }
.alerta__msg { font-size: var(--tam-apoio); line-height: 21px; color: var(--texto-2); overflow-wrap: anywhere; }
.alerta__meta { font-size: 13px; line-height: 18px; color: var(--texto-3); }
.alerta__quando { font-size: 13px; line-height: 20px; color: var(--texto-3); white-space: nowrap; }
.alerta__acao { margin: 0; flex-shrink: 0; }
.alerta__lido { flex-shrink: 0; font-size: 13px; line-height: 40px; color: var(--texto-3); }
.lista-alertas--compacta .alerta { padding: var(--e3) var(--e5); }
.atalhos { flex-direction: column; gap: var(--e2); }
.atalhos .botao { justify-content: flex-start; }
.passo__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin-top: var(--e1); }
.lista-simples { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--e2); }
.lista-simples li { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2); font-size: var(--tam-corpo); }
.vazio-grande {
  align-items: center;
  text-align: center;
  padding: var(--e8) var(--e5);
}
.vazio-grande__icone {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linha-forte);
  color: var(--texto-3);
}
.vazio-grande__icone svg { stroke: currentColor; }
.painel .vazio-grande h3 { font-weight: var(--peso-titulo); font-size: 17px; line-height: 24px; color: var(--texto-titulo); }
.vazio-grande p { max-width: 520px; font-size: var(--tam-apoio); line-height: 21px; color: var(--texto-2); }

/* ---------- Responsivo da Fase 2 ---------- */
@media (max-width: 1280px) {
  .conta-grade { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 1180px) {
  .conta-grade { grid-template-columns: minmax(0, 1fr); }
  .conta-cab__topo { flex-wrap: wrap; gap: var(--e3) var(--e6); }
  .conta-cab__divisor { display: none; }
  .conta-cab__acoes { flex-wrap: wrap; }
}
@media (max-width: 1023px) {
  .legenda { grid-template-columns: minmax(0, 1fr); }
  .dados-grade { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .indicadores--tres { grid-template-columns: minmax(0, 1fr); }
  /* T01-TEC-009/S02: cada ação numa linha própria, em toda a faixa do celular. Com
     flex-wrap, o 2º botão (ainda vazio numa pintura parcial) cabia na linha do 1º e,
     ao chegar o texto, quebrava para baixo: CLS 0,015 no primeiro desenho. Em coluna
     a posição de cada ação não depende do que chegou do HTML. */
  .conta-cab__acoes { width: 100%; flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .conta-cab__acoes form .botao,
  .conta-cab__acoes .brilho,
  .conta-cab__acoes .botao-principal { flex: 1 1 auto; }
  .alerta { flex-wrap: wrap; }
  .alerta__acao { margin-left: var(--e5); }
  .seletor__saldo .unidade-pequena { display: none; }
}

/* O atributo hidden vence o display dos componentes (campo de preço, busca do seletor) */
[hidden] { display: none !important; }
@media (max-width: 640px) {
  /* Cabeçalhos com filtro ou ação quebram linha em vez de alargar a página */
  .painel__cabecalho {
    height: auto;
    min-height: 52px;
    flex-wrap: wrap;
    padding-top: var(--e3);
    padding-bottom: var(--e3);
  }
  .chave-liga { white-space: normal; height: auto; }
  .painel__titulo-linha { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .conta-cab__id { flex-basis: 100%; }
}

/* Formulário de nova ordem: atalhos de % do saldo livre e estimativa. */
.atalhos-pct { display: flex; gap: var(--e2); margin-top: var(--e2); }
.formulario-ordem [data-estimativa] { color: var(--texto-1); }

/* Início vazio: os dois caminhos com o mesmo peso. */
.comecar-cartoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); }
.comecar-cartao { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e3); padding: var(--e5); border: 1px solid var(--linha-forte); border-radius: var(--raio-pequeno); }
.comecar-cartao h3 { margin: 0; color: var(--texto-titulo); }
.comecar-cartao p { margin: 0; color: var(--texto-2); flex-grow: 1; }
.comecar-cartao__icone { color: var(--ciano); }
@media (max-width: 760px) { .comecar-cartoes { grid-template-columns: 1fr; } }

/* =====================================================================
   Correções da vistoria visual de 30/09/2026 (área A: casca, Início,
   Contas, área da conta, alertas). Ficam no fim para vencer as regras
   anteriores sem reescrevê-las. Cada bloco cita o defeito (V-NN).
   ===================================================================== */

/* V-01/V-02 (título × seletor na mesma barra) saiu na Fase A: o título foi para o
   cabeçalho da página e o tamanho do seletor está em moldura.css. */

/* ---------- V-06 / V-11: painel do seletor opaco e nomes longos legíveis ---------- */
.seletor__painel {
  background: var(--superficie-opaca);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.seletor__rodape {
  flex-wrap: wrap;
  background: var(--superficie-opaca-2);
}
.seletor__rodape .botao-fantasma { white-space: normal; text-align: left; }
.seletor__opcao {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 16px;
  grid-template-areas:
    "icone linha linha marca"
    "icone sub   saldo marca";
  column-gap: var(--e3);
  row-gap: 2px;
  align-items: center;
}
.seletor__opcao > .seletor__icone { grid-area: icone; }
.seletor__opcao > .seletor__textos { display: contents; }
.seletor__opcao .seletor__linha { grid-area: linha; align-items: flex-start; }
.seletor__opcao .seletor__sub { grid-area: sub; min-width: 0; }
.seletor__opcao > .seletor__saldo { grid-area: saldo; margin-left: 0; }
.seletor__opcao > .seletor__marca { grid-area: marca; }
@media (max-width: 480px) {
  /* Celular: o saldo desce para a terceira linha e o texto de baixo ganha a largura toda. */
  .seletor__opcao {
    grid-template-areas:
      "icone linha linha marca"
      "icone sub   sub   marca"
      "icone saldo saldo marca";
  }
  .seletor__opcao > .seletor__saldo { justify-self: start; }
}
.seletor__opcao .seletor__linha .selo { flex-shrink: 0; }
/* F01 r1 (F01-UX-005): na lista do seletor o apelido aparece inteiro (abre por teclado). */
.seletor__opcao .seletor__nome {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ---------- V-04: tabelas da área da conta cabem até 1024px ---------- */
/* Pista de que há mais conteúdo à direita/esquerda (a classe vem do painel.js). */
.grade-tabela,
.abas { transition: box-shadow var(--transicao); }
.grade-tabela.rola-mais-dir,
.abas.rola-mais-dir { box-shadow: inset -2px 0 0 rgba(var(--ciano-rgb), 0.45), inset -36px 0 24px -24px rgba(var(--ciano-rgb), 0.18); }
.grade-tabela.rola-mais-esq,
.abas.rola-mais-esq { box-shadow: inset 2px 0 0 rgba(var(--ciano-rgb), 0.45), inset 36px 0 24px -24px rgba(var(--ciano-rgb), 0.18); }
.grade-tabela.rola-mais-dir.rola-mais-esq,
.abas.rola-mais-dir.rola-mais-esq {
  box-shadow: inset -2px 0 0 rgba(var(--ciano-rgb), 0.45), inset -36px 0 24px -24px rgba(var(--ciano-rgb), 0.18),
              inset 2px 0 0 rgba(var(--ciano-rgb), 0.45), inset 36px 0 24px -24px rgba(var(--ciano-rgb), 0.18);
}
.grade-tabela { scrollbar-color: rgba(var(--cinza-rgb), 0.45) transparent; }
@media (max-width: 1280px) {
  .grade-tabela--carteira { --colunas: minmax(120px, 1fr) 136px 104px 136px 112px 112px 88px; --largura-minima: 0; }
  /* Ordens: "Preenchido" e "Criada em" saem (estão no painel da ordem selecionada). */
  .grade-tabela--ordens { --colunas: minmax(112px, 1fr) 88px 72px 112px 136px 104px 96px; --largura-minima: 0; }
  .grade-tabela--ordens :is(.grade-tabela__cabecalho, .grade-tabela__linha) > :is(:nth-child(6), :nth-child(8)) { display: none; }
  .grade-tabela--historico { --colunas: 96px minmax(112px, 1fr) 80px 120px 150px 120px 136px; --largura-minima: 0; }
  .grade-tabela--movimentacoes { --colunas: 96px 176px 72px 152px minmax(120px, 1fr) 128px; --largura-minima: 0; }
}
@media (max-width: 1180px) {
  .grade-tabela__cabecalho,
  .grade-tabela__linha,
  .grade-tabela__total { gap: var(--e3); }
  /* Carteira: "Disponível" e "Em ordens" saem (o total por moeda continua). */
  .grade-tabela--carteira { --colunas: minmax(112px, 1fr) 136px 120px 120px 88px; }
  .grade-tabela--carteira :is(.grade-tabela__cabecalho, .grade-tabela__linha, .grade-tabela__total) > :is(:nth-child(2), :nth-child(3)) { display: none; }
  /* Ordens: "Tipo" também sai. */
  .grade-tabela--ordens { --colunas: minmax(100px, 1fr) 80px 104px 124px 100px 96px; }
  .grade-tabela--ordens :is(.grade-tabela__cabecalho, .grade-tabela__linha) > :nth-child(3) { display: none; }
  /* Histórico: a taxa sai (continua no CSV exportado). */
  .grade-tabela--historico { --colunas: 88px minmax(100px, 1fr) 76px 116px 140px 112px; }
  .grade-tabela--historico :is(.grade-tabela__cabecalho, .grade-tabela__linha) > :nth-child(7) { display: none; }
  .grade-tabela--movimentacoes { --colunas: 88px 150px 64px 136px minmax(100px, 1fr) 120px; }
}
@media (max-width: 1023px) {
  /* Abaixo disso a tabela rola na horizontal, com a barra visível e a pista na borda. */
  .grade-tabela--carteira { --largura-minima: 640px; }
  .grade-tabela--ordens { --largura-minima: 680px; }
  .grade-tabela--historico { --largura-minima: 680px; }
  .grade-tabela--movimentacoes { --largura-minima: 760px; }
}

/* F01 (VIS-01): tabelas em grade com colunas que medem o conteúdo.
   As quantidades vêm com 8 casas fixas e unidade (ex.: 181.567.857,14285714 ou
   "1.729,22655053 ADA"). Com colunas de largura fixa, a célula vazava sobre a
   vizinha (Carteira, Ordens, Histórico e Últimas operações, em várias larguras).
   Com subgrade, cada linha usa as colunas da tabela e cada coluna numérica mede o
   maior valor (e o rótulo) de todas as linhas: o alinhamento entre linhas continua,
   a sobra se divide entre as colunas (minmax(max-content, 1fr)) e, se não couber,
   a região da tabela rola
   (focável, com barra e pista na borda), sem sobrepor nem cortar.
   Sem subgrade no navegador, fica o layout antigo de colunas fixas. */
@supports (grid-template-columns: subgrid) {
  :is(.grade-tabela--resumo, .grade-tabela--carteira, .grade-tabela--ordens, .grade-tabela--historico, .grade-tabela--movimentacoes) {
    display: grid;
    grid-template-columns: var(--colunas);
    align-content: start;
    column-gap: var(--e4);
  }
  :is(.grade-tabela--resumo, .grade-tabela--carteira, .grade-tabela--ordens, .grade-tabela--historico, .grade-tabela--movimentacoes)
    > :is(.grade-tabela__cabecalho, .grade-tabela__linha, .grade-tabela__total) {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    min-width: 0;
  }
  :is(.grade-tabela--resumo, .grade-tabela--carteira, .grade-tabela--ordens, .grade-tabela--historico, .grade-tabela--movimentacoes)
    > .tabela__vazia { grid-column: 1 / -1; }
  /* Piso das numéricas, para a tabela curta não ficar espremida. */
  .grade-tabela > * > .a-direita { min-width: 72px; }
  .grade-tabela--carteira > * > :nth-child(n+2) { min-width: 96px; }

  .grade-tabela--resumo { --colunas: minmax(max-content, 1fr) minmax(96px, 1fr) repeat(4, minmax(max-content, 1fr)); }
  .grade-tabela--carteira { --colunas: minmax(140px, 1fr) repeat(6, minmax(max-content, 1fr)); }
  .grade-tabela--ordens { --colunas: minmax(120px, 1fr) repeat(8, minmax(max-content, 1fr)); }
  .grade-tabela--historico { --colunas: minmax(max-content, 1fr) minmax(120px, 1fr) repeat(5, minmax(max-content, 1fr)); }
  .grade-tabela--movimentacoes { --colunas: repeat(4, minmax(max-content, 1fr)) minmax(160px, 2fr) minmax(max-content, 1fr); }
  @media (max-width: 1280px) {
    .grade-tabela--carteira { --colunas: minmax(120px, 1fr) repeat(6, minmax(max-content, 1fr)); }
    .grade-tabela--carteira > * > :nth-child(n+2) { min-width: 88px; }
    /* Ordens: "Preenchido" e "Criada em" saem (regra acima): sete colunas. */
    .grade-tabela--ordens { --colunas: minmax(112px, 1fr) repeat(6, minmax(max-content, 1fr)); }
    .grade-tabela--historico { --colunas: minmax(max-content, 1fr) minmax(112px, 1fr) repeat(5, minmax(max-content, 1fr)); }
    .grade-tabela--movimentacoes { --colunas: repeat(4, minmax(max-content, 1fr)) minmax(120px, 2fr) minmax(max-content, 1fr); }
  }
  @media (max-width: 1180px) {
    :is(.grade-tabela--resumo, .grade-tabela--carteira, .grade-tabela--ordens, .grade-tabela--historico, .grade-tabela--movimentacoes) { column-gap: var(--e3); }
    /* Carteira sem "Disponível" e "Em ordens"; Ordens sem "Tipo"; Histórico sem "Taxa". */
    .grade-tabela--carteira { --colunas: minmax(112px, 1fr) repeat(4, minmax(max-content, 1fr)); }
    .grade-tabela--carteira > * > :nth-child(n+2) { min-width: 80px; }
    .grade-tabela--ordens { --colunas: minmax(100px, 1fr) repeat(5, minmax(max-content, 1fr)); }
    .grade-tabela--historico { --colunas: minmax(max-content, 1fr) minmax(100px, 1fr) repeat(4, minmax(max-content, 1fr)); }
    .grade-tabela--movimentacoes { --colunas: repeat(4, minmax(max-content, 1fr)) minmax(100px, 2fr) minmax(max-content, 1fr); }
  }
}

/* ---------- V-05: abas da conta ---------- */
.abas { scrollbar-width: thin; scrollbar-color: rgba(var(--cinza-rgb), 0.45) transparent; }
.abas::-webkit-scrollbar { display: block; height: 4px; }
.abas__item { position: relative; } /* segura o texto só para leitor de tela dentro da rolagem */
.abas::-webkit-scrollbar-thumb { background: rgba(var(--cinza-rgb), 0.45); }
@media (max-width: 1180px) {
  .abas__resto { display: none; }
}

/* ---------- V-09: "Ordem selecionada" em uma coluna só ---------- */
.dados-grade--uma { grid-template-columns: minmax(0, 1fr); }
/* F01 (VIS-01): o par "rótulo · valor" nunca empurra a página. O valor fica numa
   linha enquanto cabe; quando não cabe (ex.: "0,12345678 de 1,00000000 BTC" no
   painel lateral estreito ou a 360 px), quebra nos espaços em vez de vazar. */
.dados-grade--uma dt { flex-shrink: 0; }
.dados-grade--uma dd { min-width: 0; white-space: normal; overflow-wrap: anywhere; }

/* ---------- V-10: cabeçalho da conta com apelido longo ---------- */
.conta-cab__id { flex: 1 1 320px; }
/* F01 r1 (F01-UX-005): o apelido da conta ativa nunca é cortado; quebra linha inteiro. */
.painel .conta-cab__nome h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}
.conta-cab__selos { display: inline-flex; align-items: center; gap: var(--e2); flex-shrink: 0; white-space: nowrap; }
.conta-cab__linha { column-gap: var(--e4); row-gap: 0; }
.conta-cab__inicio { white-space: nowrap; color: var(--texto-2); }
.conta-cab__inicio .num { color: var(--texto-1); }

/* ---------- V-12: rótulos das faixas de indicadores alinhados no topo ---------- */
.indicadores--conta .indicador { justify-content: flex-start; }

/* ---------- V-13: Contas sem vão embaixo da tabela; "Remover" na mesma linha ---------- */
.contas-grade { align-items: start; }
.painel__rodape .detalhe__acoes { width: auto; flex: 1 1 auto; }

/* ---------- V-14: cabeçalho de painel cresce com título de duas linhas ---------- */
.painel__cabecalho:not(.painel__cabecalho--duplo, .painel__cabecalho--filtros) {
  height: auto;
  min-height: 52px;
  padding-top: var(--e2);
  padding-bottom: var(--e2);
}

/* ---------- V-21: % da conta ao lado da barrinha, na mesma linha dos números ---------- */
@media (min-width: 1181px) {
  .celula-pct { flex-direction: row-reverse; align-items: center; justify-content: flex-start; gap: var(--e2); }
  .celula-pct .mini-barra { width: 32px; flex-shrink: 0; }
}

/* ---------- V-19: cartão de robô no Início — nome na largura toda ---------- */
.lista-cartoes__linha { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2); margin-top: 2px; }
.lista-cartoes__linha .num { font-size: var(--tam-apoio); }

/* ---------- V-27: alertas — "Lido" centralizado como o botão; selo "Novo" sem ciano ---------- */
.lista-alertas .alerta__acao,
.lista-alertas .alerta__lido { align-self: center; }
.alerta__lido { line-height: 20px; padding: 0 var(--e3); }
.selo--novo {
  border-color: var(--verde-borda, rgba(var(--verde-rgb), 0.35));
  background: var(--verde-fundo, rgba(var(--verde-rgb), 0.10));
  color: var(--verde);
}

/* ---------- V-18: gráfico com versão estreita (texto dos eixos legível) ---------- */
/* O servidor desenha duas versões; o contêiner escolhe pela própria largura. */
:has(> svg.grafico--estreito) { container-type: inline-size; }
svg.grafico--estreito { display: none; }
.grafico__grades { stroke: var(--vidro-divisoria); stroke-width: 1; shape-rendering: crispEdges; fill: none; }
@container (max-width: 720px) {
  svg.grafico:has(+ svg.grafico--estreito) { display: none; }
  svg.grafico--estreito { display: block; }
}
/* O painel.js põe --grafico-escala (viewBox ÷ largura real): a fonte fica perto de 12px de verdade. */
svg.grafico--estreito .grafico__eixo { font-size: calc(12px * min(var(--grafico-escala, 1), 1.3)); }
svg.grafico--estreito .grafico__ultimo { font-size: calc(13px * min(var(--grafico-escala, 1), 1.3)); }

/* ---------- V-20: Atalhos na coluna da esquerda, em linha ---------- */
.coluna .atalhos { flex-direction: row; flex-wrap: wrap; }
.coluna .atalhos .botao { flex: 1 1 200px; }
svg.grafico--estreito :is(.grafico__linha, .grafico__grades) { vector-effect: non-scaling-stroke; }


/* ---------- F4V-04: o gatilho do seletor não corta apelidos curtos ----------
   Com o espaçamento de 12px entre ícone, nome, selo, estrela, saldo e seta, o
   nome "Conta Principal" ficava 1px curto e ganhava reticências mesmo com a
   barra folgada. Espaçamento de 8px e saldo/selo que não encolhem. */
.seletor__gatilho { gap: var(--e2); }
.seletor__gatilho .seletor__saldo,
.seletor__gatilho .selo,
.seletor__gatilho .seletor__estrela { flex-shrink: 0; }

/* =====================================================================
 * F01 — campos select, número e textarea (componente global).
 * Vieram do começo de estrategias.css sem mudança: valem para qualquer
 * formulário do painel (ex.: o par da nova ordem em Ordens).
 * ===================================================================== */
.campo select,
.campo textarea,
.campo input[type="number"],
.eb-cond select,
.eb-cond input,
.painel__rodape select,
.eb-campo-curto {
  width: 100%;
  height: 40px;
  padding: 0 var(--e3);
  background: var(--campo-fundo);
  border: 1px solid var(--borda-controle);
  border-radius: var(--raio-pequeno);
  color: var(--texto-titulo);
  caret-color: var(--ciano);
  font-family: var(--fonte-texto);
  font-weight: var(--peso-corpo);
  font-size: var(--tam-corpo);
  outline: none;
  transition: border-color var(--transicao), box-shadow var(--transicao), background-color var(--transicao);
}
.campo textarea {
  height: auto;
  min-height: 88px;
  padding: var(--e2) var(--e3);
  line-height: var(--alt-linha);
  resize: vertical;
}
.campo input[type="number"],
.eb-cond input,
.eb-campo-curto {
  font-family: var(--fonte-mono);
  font-variant-numeric: tabular-nums;
}
.campo select,
.eb-cond select,
.painel__rodape select {
  padding-right: var(--e8);
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--texto-3) 50%),
    linear-gradient(135deg, var(--texto-3) 50%, transparent 50%);
  background-position: calc(100% - 17px) 18px, calc(100% - 12px) 18px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.campo select option,
.eb-cond select option,
.painel__rodape select option {
  background: var(--superficie-1);
  color: var(--texto-1);
}
.campo textarea::placeholder,
.campo input[type="number"]::placeholder,
.eb-cond input::placeholder,
.eb-campo-curto::placeholder {
  color: var(--texto-4);
}
.campo select:hover,
.campo textarea:hover,
.campo input[type="number"]:hover,
.eb-cond select:hover,
.eb-cond input:hover,
.painel__rodape select:hover,
.eb-campo-curto:hover {
  border-color: var(--borda-controle-hover);
}
.campo select:focus,
.campo textarea:focus,
.campo input[type="number"]:focus,
.eb-cond select:focus,
.eb-cond input:focus,
.painel__rodape select:focus,
.eb-campo-curto:focus {
  border-color: var(--ciano);
  background-color: var(--campo-fundo-foco);
  box-shadow: var(--anel-campo);
}
.campo--erro select,
.campo--erro textarea,
.campo--erro input[type="number"],
.eb-cond--erro input {
  border-color: var(--vermelho);
  box-shadow: var(--anel-erro);
}


/* =====================================================================
 * F01 — componentes compartilhados (contrato execucao/contratos/F01-componentes.md).
 * Parciais em templates/painel/componentes/. Só tokens; nada de cor solta
 * fora das combinações medidas no contrato.
 * ===================================================================== */

/* ---------- Selo de estado (N02/N04): palavra + ícone, vocabulário único ---------- */
.selo-estado { max-width: 100%; }
.selo-estado__texto { overflow: hidden; text-overflow: ellipsis; }
.selo-estado--ok { border-color: var(--verde-borda); background: var(--verde-fundo); color: var(--verde); }
.selo-estado--erro { border-color: var(--vermelho-borda); background: var(--vermelho-fundo); color: var(--vermelho); }
.selo-estado--atencao,
.selo-estado--desatualizado { border-color: var(--ambar-borda); background: var(--ambar-fundo); color: var(--ambar); }
.selo-estado--inativo,
.selo-estado--sem_dado { border-color: var(--linha-forte); color: var(--texto-3); }
.selo-estado--medindo { border-color: rgba(var(--ciano-rgb), 0.35); background: rgba(var(--ciano-rgb), 0.06); color: var(--ciano-link-hover); }
.selo-estado__girando {
  display: inline-block;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(var(--ciano-rgb), 0.25);
  border-top-color: var(--ciano);
  border-radius: 50%;
  animation: f01-girar 900ms linear infinite;
}
@keyframes f01-girar { to { transform: rotate(360deg); } }

/* ---------- Mensagem de estado de um bloco (vazio, carregando, erro, desatualizado) ---------- */
.estado-bloco {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e4) var(--e5);
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio-pequeno);
  color: var(--texto-2);
}
.estado-bloco__icone { display: inline-flex; color: var(--texto-3); padding-top: 2px; }
.estado-bloco__icone svg { stroke: currentColor; }
.estado-bloco__textos { flex: 1 1 240px; min-width: 0; display: grid; gap: var(--e1); }
.estado-bloco__titulo { color: var(--texto-1); font-weight: var(--peso-forte); }
.estado-bloco__texto,
.estado-bloco__quando { font-size: var(--tam-apoio); line-height: 20px; color: var(--texto-3); overflow-wrap: anywhere; }
.estado-bloco__acao { flex-shrink: 0; }
.estado-bloco--erro { border-style: solid; border-color: var(--vermelho-borda); background: var(--vermelho-fundo); }
.estado-bloco--erro .estado-bloco__icone { color: var(--vermelho); }
.estado-bloco--desatualizado { border-style: solid; border-color: var(--ambar-borda); background: var(--ambar-fundo); }
.estado-bloco--desatualizado .estado-bloco__icone { color: var(--ambar); }
.estado-bloco--carregando .estado-bloco__icone { color: var(--ciano); }

/* ---------- Escolha entre dois caminhos de mesmo peso (N01) ---------- */
.escolha {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e4);
}
.escolha__opcao {
  display: flex;
  align-items: center;
  gap: var(--e4);
  min-height: 88px;
  padding: var(--e4) var(--e5);
  background: var(--vidro-painel);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio-pequeno);
  color: var(--texto-1);
  transition: border-color var(--transicao), background-color var(--transicao);
}
.escolha__opcao:hover { border-color: var(--linha-hover); background: var(--superficie-2); color: var(--texto-1); }
.escolha__opcao:focus-visible { box-shadow: var(--anel-foco); border-color: var(--ciano); }
.escolha__icone { display: inline-flex; color: var(--ciano); }
.escolha__icone svg { stroke: currentColor; }
.escolha__textos { flex: 1; min-width: 0; display: grid; gap: 2px; }
.escolha__titulo { font-weight: var(--peso-titulo); color: var(--texto-titulo); }
.escolha__texto { font-size: var(--tam-apoio); line-height: 20px; color: var(--texto-3); }
.escolha__opcao > svg:last-child { color: var(--texto-3); stroke: currentColor; }
/* F01 r1 (F01-TEC-005): sem `order`; a opção b existe duas vezes no DOM e só uma
   aparece por largura, então a ordem de leitura e do Tab é a ordem visual. */
.escolha__opcao--b-celular { display: none; }
@media (max-width: 640px) {
  .escolha { grid-template-columns: minmax(0, 1fr); }
  .escolha__opcao--b-celular { display: flex; }
  .escolha__opcao--b-largo { display: none; }
}

/* ---------- Lista de progresso com ligações de correção (N03) ---------- */
/* F01 r1: `.progresso` também é a barra de 2px antiga (Início/Estúdio); a lista N03
   leva `.progresso-lista` e desfaz a altura fixa (antes a lista colapsava para 2px). */
.progresso.progresso-lista { height: auto; display: block; border: 1px solid var(--vidro-borda); background: var(--vidro-painel); border-radius: var(--raio-pequeno); }
.progresso__resumo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e2) var(--e4);
  min-height: 44px;
  padding: var(--e2) var(--e5);
  cursor: pointer;
  list-style: none;
}
.progresso__resumo::-webkit-details-marker { display: none; }
.progresso__resumo:focus-visible { outline: none; box-shadow: inset var(--anel-foco); }
.progresso__titulo { font-weight: var(--peso-titulo); color: var(--texto-titulo); }
.progresso__conta { font-size: var(--tam-apoio); color: var(--texto-3); }
.progresso__seta { margin-left: auto; color: var(--texto-3); stroke: currentColor; transition: transform var(--transicao); }
.progresso__caixa[open] .progresso__seta { transform: rotate(180deg); }
.progresso__lista { margin: 0; padding: 0 var(--e5) var(--e3); list-style: none; display: grid; }
.progresso__passo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e2) var(--e3);
  padding: var(--e3) 0;
  border-top: 1px solid var(--vidro-divisoria);
}
.progresso__marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border: 1px solid var(--linha-forte);
  border-radius: 50%;
  font-family: var(--fonte-mono);
  font-size: var(--tam-rotulo-tabela);
  color: var(--texto-2);
}
.progresso__passo--feito .progresso__marca { border-color: var(--verde-borda); background: var(--verde-fundo); color: var(--verde); }
.progresso__marca svg { stroke: currentColor; }
.progresso__textos { flex: 1 1 200px; min-width: 0; display: grid; }
.progresso__nome { color: var(--texto-1); font-weight: var(--peso-forte); }
.progresso__detalhe { font-size: var(--tam-apoio); line-height: 20px; color: var(--texto-3); }
.progresso__estado { font-size: var(--tam-apoio); color: var(--texto-3); }
.progresso__estado--feito { color: var(--verde); }

/* ---------- Cartão de medida com escopo e estados (N04) ---------- */
.medida {
  display: grid;
  gap: var(--e2);
  padding: var(--e4) var(--e5);
  min-width: 0;
  border: 1px solid var(--vidro-borda);
  background: var(--vidro-painel);
  border-radius: var(--raio-pequeno);
}
.medida__topo { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--e2); }
.medida__valor { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--e2); }
.medida__valor .numero-grande { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.medida__escopo,
.medida__nota { font-size: var(--tam-apoio); line-height: 20px; color: var(--texto-3); }
.medida--alto { border-color: var(--ambar-borda); }
.medida--desatualizado .numero-grande { color: var(--texto-2); }

/* ---------- Linha expansível (N05) e painel com volta à linha ---------- */
.expandir__seta { transition: transform var(--transicao); }
.expandir[aria-expanded="true"] .expandir__seta { transform: rotate(180deg); }
.expandir.botao-fantasma--icone { width: 32px; height: 32px; }
.volta-linha { align-self: flex-start; }
:target { scroll-margin-top: calc(var(--barra) + var(--e4)); }
[role="row"]:target,
tr:target { box-shadow: inset 2px 0 0 var(--ciano); background: rgba(var(--ciano-rgb), 0.08); }
[tabindex="-1"]:focus { outline: none; }
[role="row"][tabindex="-1"]:focus-visible,
[data-foco-ao-abrir]:focus-visible { box-shadow: inset var(--anel-foco); }

/* ---------- Vidro: alternativa leve (F01) ----------
   Quem pede menos transparência no sistema recebe superfícies opacas e sem blur
   (nos dois temas); o desenho (cores, bordas, cantos) continua o mesmo. */
@media (prefers-reduced-transparency: reduce) {
  :root,
  :root[data-tema="escuro"],
  :root[data-tema="claro"] {
    --vidro-painel: var(--vidro-painel-solido);
    --vidro-lateral: var(--vidro-lateral-solido);
    --vidro-topo: var(--vidro-topo-solido);
  }
  .painel,
  .lateral,
  .topo,
  .seletor__painel {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* Número que não coube nem com a fonte menor (painel.js): quebra, nunca corta. */
.numero--quebra {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
}

/* =====================================================================
 * F01 — correção r1 (pareceres ux-r1 e tec-r1)
 * ===================================================================== */

/* F01-UX-001 / F01-TEC-001 / F02-UX-003: idade do saldo em todas as larguras.
   Coluna própria, com lugar reservado para o indicador de tempo real (F01-TEC-004):
   quando o tempo_real.js mostra o indicador, nada ao lado se mexe. */
.conta-cab__estado {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--e1);
  flex: 0 0 auto;
  min-width: 160px;
  min-height: 44px;
}
.conta-cab__quando--antiga { color: var(--ambar); gap: var(--e2); }
.conta-cab__quando--antiga .selo { flex-shrink: 0; }
@media (max-width: 640px) {
  /* No celular a idade vai para a linha de baixo do saldo, inteira (quebra se precisar). */
  .conta-cab__estado { min-width: 0; flex: 1 1 100%; min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--e1) var(--e3); }
  .conta-cab__quando { white-space: normal; flex-wrap: wrap; }
}

/* F01-UX-004: conta desativada — motivo e caminho escritos junto dos botões apagados. */
.conta-cab__acoes--motivo { flex-wrap: wrap; justify-content: flex-end; flex: 0 1 380px; }
.conta-cab__motivo {
  flex: 1 1 100%;
  margin: 0;
  font-size: var(--tam-apoio);
  line-height: 20px;
  color: var(--texto-2);
  text-align: right;
}
@media (max-width: 1180px) {
  .conta-cab__acoes--motivo { justify-content: flex-start; }
  .conta-cab__motivo { text-align: left; }
}
/* Aviso neutro: mesma situação, mesma cor do selo "Desativada" (inativo). */
.aviso--inativo {
  border-color: var(--linha-forte);
  background: rgba(var(--realce-rgb), 0.02);
  box-shadow: inset 2px 0 0 var(--texto-4);
  color: var(--texto-1);
}
.aviso--inativo svg { stroke: var(--texto-3); }

/* F01-UX-008: a palavra do modo (Real/Simulação) nunca some do gatilho do seletor. */
.seletor .seletor__gatilho .selo--modo { display: inline-flex; flex-shrink: 0; }

/* F01-UX-003 / F01-TEC-003: a 320 px os cinco períodos quebram em duas linhas
   (todos alcançáveis) em vez de alargar a página. */
@media (max-width: 380px) {
  .segmentos--periodos { flex-wrap: wrap; }
  .grafico-controles,
  .grafico-controles .segmentos--periodos { width: 100%; }
  .grafico-controles .segmentos--periodos .segmento-link { flex: 1 1 auto; justify-content: center; }
}

/* F01-TEC-002: região rolável focada mostra o anel mesmo com a pista de rolagem
   (box-shadow inset) ligada; outline por dentro, fora do alcance do overflow. */
.grade-tabela:focus-visible,
.abas:focus-visible,
.eb-rolagem:focus-visible,
.ini-rolagem:focus-visible,
[data-rolagem]:focus-visible {
  outline: 2px solid var(--ciano);
  outline-offset: -2px;
}

/* F01-UX-010: contador da aba com fundo opaco: a pista de rolagem da barra de
   abas não passa por baixo do número (2,54:1 a 390 px). */
.abas__contador { background: var(--superficie-2); }
.abas__item[aria-current="page"] .abas__contador { background: var(--ativo-solido); }

/* F01-UX-005 (320–360 px): o nome da conta tem prioridade no gatilho; o saldo
   continua no cabeçalho da conta e nos indicadores, e no nome acessível do gatilho. */
@media (max-width: 360px) {
  .seletor__gatilho .seletor__saldo { display: none; }
  .seletor__gatilho .seletor__seta { margin-left: auto; }
}

/* Região rolável genérica: texto só para leitor de tela (absoluto) dentro dela não
   escapa do recorte e não alarga a página. */
[data-rolagem] { position: relative; }

/* F01 r2 (F01-UX-013): larguras do seletor agora em moldura.css (barra da Fase A). */

/* ---------- F4 (cf1005): resultado financeiro explicado ----------
 * Componentes em templates/painel/componentes/financeiro/. Só tokens do :root.
 * Estado nunca só por cor: selos levam palavra e ícone. */
.fin-resultado { display: grid; gap: var(--e3); min-width: 0; }
.fin-resultado__topo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.fin-resultado__titulo { margin: 0; font-size: var(--tam-corpo); font-weight: var(--peso-titulo); color: var(--texto-1); }
.fin-periodo { margin: 0; display: flex; flex-wrap: wrap; gap: var(--e1) var(--e2); font-size: var(--tam-apoio); line-height: 20px; color: var(--texto-2); }
.fin-periodo__metodo { font-weight: var(--peso-forte); color: var(--texto-1); }
.fin-periodo__explica { flex-basis: 100%; color: var(--texto-3); }
.fin-selo svg { stroke: currentColor; }
.fin-selo--completo { border-color: var(--verde-borda); background: var(--verde-fundo); color: var(--verde); }
.fin-selo--estimado { border-color: var(--ambar-borda); background: var(--ambar-fundo); color: var(--ambar); }
.fin-selo--incompleto { border-color: var(--vermelho-borda); background: var(--vermelho-fundo); color: var(--vermelho); }
.fin-metricas { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--e3); }
.fin-metrica { display: grid; align-content: start; gap: var(--e1); padding: var(--e3); border: 1px solid var(--vidro-borda); border-radius: var(--raio-pequeno); min-width: 0; }
.fin-metrica__rotulo { display: grid; gap: 2px; font-weight: var(--peso-forte); color: var(--texto-2); }
.fin-metrica__nota { font-weight: var(--peso-corpo); font-size: var(--tam-apoio); color: var(--texto-3); }
.fin-metrica__dado { margin: 0; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: baseline; gap: var(--e1) var(--e2); }
.fin-metrica__valor { font-size: 20px; color: var(--texto-1); overflow-wrap: anywhere; }
.fin-metrica__valor--desconhecido { font-family: var(--fonte-texto); font-size: var(--tam-corpo); color: var(--texto-3); font-style: italic; }
.fin-positivo { color: var(--positivo); }
.fin-negativo { color: var(--negativo); }
.fin-neutro { color: var(--texto-1); }
.fin-razoes { margin: 0; padding-left: var(--e4); flex-basis: 100%; font-size: var(--tam-apoio); line-height: 20px; color: var(--texto-2); }
.fin-pct, .fin-horarios { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e2); font-size: var(--tam-apoio); line-height: 20px; color: var(--texto-2); }
.fin-pct__sem { display: inline-flex; align-items: center; gap: var(--e1); color: var(--texto-1); }
.fin-pct__sem svg, .fin-horarios svg, .fin-pendente svg { stroke: currentColor; }
.fin-pct__formula, .fin-horarios__nota { color: var(--texto-3); }
.fin-contagens { margin: 0; display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); font-size: var(--tam-apoio); }
.fin-contagens > div { display: flex; gap: var(--e2); }
.fin-contagens dt { color: var(--texto-2); }
.fin-contagens dd { margin: 0; color: var(--texto-1); }
.fin-rolagem { overflow-x: auto; }
.fin-tabela { width: 100%; border-collapse: collapse; font-size: var(--tam-apoio); }
.fin-tabela caption { text-align: left; padding-bottom: var(--e1); font-weight: var(--peso-forte); color: var(--texto-2); }
.fin-tabela th { text-align: left; padding: var(--e1) var(--e2); color: var(--texto-3); border-bottom: 1px solid var(--vidro-divisoria); white-space: nowrap; }
.fin-tabela td { padding: var(--e1) var(--e2); border-bottom: 1px solid var(--vidro-divisoria); color: var(--texto-1); }
.fin-tabela__nota { display: block; color: var(--texto-3); }
.fin-pendente { display: inline-flex; align-items: center; gap: var(--e1); color: var(--ambar); font-family: var(--fonte-texto); }
.fin-memoria { border: 1px solid var(--vidro-borda); border-radius: var(--raio-pequeno); }
.fin-memoria__resumo { display: flex; align-items: center; gap: var(--e2); padding: var(--e2) var(--e3); cursor: pointer; font-weight: var(--peso-forte); color: var(--texto-1); list-style: none; }
.fin-memoria__resumo::-webkit-details-marker { display: none; }
.fin-memoria__resumo:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.fin-memoria__seta { stroke: currentColor; transition: transform 120ms ease; }
.fin-memoria[open] .fin-memoria__seta { transform: rotate(180deg); }
.fin-memoria__corpo { display: grid; gap: var(--e2); padding: 0 var(--e3) var(--e3); font-size: var(--tam-apoio); line-height: 20px; color: var(--texto-2); }
.fin-memoria__titulo { margin: var(--e2) 0 0; font-size: var(--tam-apoio); color: var(--texto-1); }
.fin-memoria__passos { margin: 0; padding-left: var(--e4); display: grid; gap: var(--e1); }
.fin-memoria__passos li { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e2); }
.fin-memoria__fonte { color: var(--texto-3); }
.fin-memoria__formulas { margin: 0; display: grid; gap: var(--e1); }
.fin-memoria__formulas > div { display: grid; grid-template-columns: minmax(160px, 240px) minmax(0, 1fr); gap: var(--e2); }
.fin-memoria__formulas dd { margin: 0; overflow-wrap: anywhere; }
.fin-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--e5); }
/* F4 etapa 2 (cf1005): foco visível nas tabelas roláveis e no link de volta,
 * taxa informativa (fora da soma) e nota de escopo dos filtros. */
.fin-rolagem:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.fin-resultado__titulo:focus { outline: none; }
.fin-resultado__titulo:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.fin-informativo { display: inline-flex; align-items: center; gap: var(--e1); color: var(--texto-2); font-style: italic; }
.fin-informativo svg { stroke: currentColor; }
.fin-memoria__voltar { margin: var(--e2) 0 0; }
.fin-memoria__voltar a { display: inline-flex; align-items: center; gap: var(--e1); color: var(--ciano); }
.fin-memoria__voltar a svg { stroke: currentColor; }
.fin-memoria__voltar a:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.fin-escopo-nota { margin: 0; display: flex; gap: var(--e2); align-items: flex-start; font-size: var(--tam-apoio); line-height: 20px; color: var(--texto-2); }
.fin-escopo-nota svg { flex: none; stroke: currentColor; margin-top: 3px; }
.fin-memoria__resumida { margin: 0; display: flex; gap: var(--e2); align-items: flex-start; color: var(--texto-1); }
.fin-memoria__resumida svg { flex: none; stroke: currentColor; margin-top: 3px; }
.fin-memoria__agregado { color: var(--texto-3); }
/* Razões com fonte longa sem espaço (lista de ids da F3) quebram dentro do bloco,
 * sem rolagem horizontal na página (captura 1280/1920 da etapa 2). */
.fin-resultado { grid-template-columns: minmax(0, 1fr); }
.fin-razoes li, .fin-memoria__fonte, .fin-memoria__descricao, .fin-tabela__nota { overflow-wrap: anywhere; }

/* =====================================================================
 * Fase A do visual (D-069): componentes no estilo da mesa de operação.
 * Fica no fim para valer sobre as passadas anteriores sem reescrevê-las:
 * cantos arredondados (tokens --raio-*), vidro com fio e sombra, bordas de
 * controle com 3:1 e o ciano só para estado (atual, selecionado, ligado).
 * ===================================================================== */

/* Painel: cabeçalho e rodapé acompanham os cantos; as marcas de mira (canto
   quadrado do visual antigo) saem, porque o vidro agora é arredondado. */
.mira { display: none; }
.painel__cabecalho { border-radius: var(--raio-painel) var(--raio-painel) 0 0; }
.painel__rodape { border-radius: 0 0 var(--raio-painel) var(--raio-painel); }
.painel h2,
.titulo-secao { letter-spacing: 0.2px; }

/* Botões secundários e fantasmas: cantos de 12px; o secundário é contornado
   (borda de controle) e só ganha ciano no foco e no passar do mouse. */
.botao,
.botao-fantasma { border-radius: var(--raio-controle); }
.botao {
  background: rgba(var(--realce-rgb), 0.04);
}
.botao:hover {
  border-color: var(--ciano);
  background: rgba(var(--ciano-rgb), 0.06);
}
.botao-fantasma--icone { border-radius: var(--raio-item); }

/* Campos: cantos de 12px, fundo do campo um pouco mais escuro (claro: mais branco). */
.campo input[type="text"],
.campo input[type="password"],
.campo input[type="email"],
.campo input:not([type]),
.campo select,
.campo textarea,
.campo input[type="number"],
.eb-cond select,
.eb-cond input,
.painel__rodape select,
.eb-campo-curto,
.seletor__campo,
.seletor-campo,
.filtro__campo { border-radius: var(--raio-controle); }
.caixa-info { border-radius: var(--raio-item); }
.cartao-radio { border-radius: var(--raio-controle); }

/* Selos e chips: cantos de 8px (pílula só no contador). */
.selo { border-radius: var(--raio-pequeno); }

/* Avisos: vidro com o fio da cor do estado à esquerda, cantos de item. */
.aviso { border-radius: var(--raio-item); }

/* Cartões soltos (sem .painel) com o mesmo vidro. */
.comecar-cartao,
.escolha__opcao,
.medida,
.progresso.progresso-lista,
.fin-metrica,
.fin-memoria,
.estado-bloco { border-radius: var(--raio-controle); }

/* Tabelas: a linha atual e o passar do mouse com cantos de item dentro do vidro. */
.tabela__cabecalho { background: transparent; }

/* Opções de listas suspensas nativas seguem o tema (fundo opaco). */
select option { background: var(--superficie-1); color: var(--texto-1); }