/*
 * Painel da Gestão — visual "versão profissional" (D-023).
 * Fonte: docs/design/especificacao-visual-pro.md (com as Revisões 2 e 3) e os
 * protótipos em docs/design/prototipo/. Um arquivo só, com tokens no :root.
 * 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 ---------- */
:root {
  color-scheme: dark;

  /* 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;

  /* Cores base */
  --fundo: #050b14;
  --fundo-fim: #08101b;
  --superficie-1: #0a1520;
  --superficie-2: #0f1d2b;
  --campo: #07111c;
  --linha: #1a2a38;
  --linha-forte: #26394a;
  --linha-hover: #3a5063;

  /* Texto (Revisão 3: tons mais claros para leitura; contraste medido
     sobre #050b14 e sobre o vidro dos painéis, cabeçalhos e linha selecionada) */
  --texto-titulo: #ffffff;
  --texto-1: #eef4fa;   /* ~17.8:1 no fundo */
  --texto-2: #c9d6e1;   /* ~13.3:1 no fundo, ~9.7:1 na linha selecionada */
  --texto-3: #a8bacb;   /* ~9.9:1 no fundo, ≥7.2:1 em qualquer superfície */
  --texto-4: #8ea3b4;   /* só placeholder e itens desativados: ≥6.8:1 no vidro */

  /* 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) */
  --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) */

  /* Acentos */
  --ciano: #00ffea;
  --ciano-link-hover: #8bfff5;
  --laranja: #ff4d1d;
  --laranja-2: #ff8c00;
  --verde: #7dd9a0;
  --verde-fundo: rgba(125, 217, 160, 0.10);
  --verde-borda: rgba(125, 217, 160, 0.35);
  --vermelho: #ff6b6b;
  --vermelho-fundo: rgba(255, 107, 107, 0.10);
  --vermelho-borda: rgba(255, 107, 107, 0.40);
  --ambar: #f5b945;
  --ambar-fundo: rgba(245, 185, 69, 0.08);
  --ambar-borda: rgba(245, 185, 69, 0.35);
  /* Fase 2: simulação (roxo), transferências (azul) e barras da carteira */
  --roxo: #c7a8f5;
  --roxo-fundo: rgba(199, 168, 245, 0.10);
  --roxo-borda: rgba(199, 168, 245, 0.38);
  --azul: #7fbdf2;
  --azul-fundo: rgba(127, 189, 242, 0.10);
  --azul-borda: rgba(127, 189, 242, 0.38);
  --positivo: #7dd9a0;
  --negativo: #ff8a8a;

  /* Vidro (Revisão 2, item 4) */
  --vidro-painel: rgba(10, 21, 32, 0.72);
  --vidro-borda: rgba(120, 144, 160, 0.18);
  --vidro-divisoria: rgba(120, 144, 160, 0.14);
  --vidro-cabecalho: rgba(15, 29, 43, 0.55);
  --vidro-lateral: rgba(7, 17, 28, 0.78);
  --vidro-topo: rgba(5, 11, 20, 0.55);
  --vidro-rodape: rgba(5, 11, 20, 0.35);
  --vidro-fio: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --campo-fundo: rgba(7, 17, 28, 0.85);
  --campo-fundo-foco: rgba(7, 17, 28, 0.95);
  --hover-leve: rgba(255, 255, 255, 0.04);

  /* Foco */
  --anel-foco: 0 0 0 2px rgba(0, 255, 234, 0.35);
  --anel-campo: 0 0 0 3px rgba(0, 255, 234, 0.18);
  --anel-erro: 0 0 0 3px rgba(255, 107, 107, 0.18);

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

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

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fundo);
  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;
}

.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);
}

/* ---------- Raiz com o fundo do Hero Gamer (Revisão 2, item 1) ---------- */
.raiz {
  display: flex;
  min-height: 100vh;
  background-color: var(--fundo);
  background-image:
    radial-gradient(circle at 20% 50%, rgba(0, 255, 234, 0.05) 0%, transparent 50%),
    linear-gradient(rgba(0, 255, 234, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 234, 0.025) 1px, transparent 1px),
    linear-gradient(180deg, var(--fundo) 0%, var(--fundo-fim) 100%);
  background-size: auto, 48px 48px, 48px 48px, auto;
  background-attachment: fixed;
}

/* ---------- Lateral ---------- */
.lateral {
  position: sticky;
  top: 0;
  width: var(--lateral);
  height: 100vh;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--vidro-lateral);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-right: 1px solid var(--vidro-borda);
  z-index: 2;
}

.marca {
  height: var(--barra);
  flex-shrink: 0;
  padding: 0 var(--e4);
  display: flex;
  align-items: center;
  gap: var(--e3);
  border-bottom: 1px solid var(--vidro-borda);
  color: inherit;
}
.marca:hover {
  color: inherit;
}
.marca__icone {
  filter: drop-shadow(0 0 6px rgba(0, 255, 234, 0.35));
}
.marca__textos {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.marca__nome {
  font-family: var(--fonte-marca);
  font-weight: 800;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--texto-titulo);
}
.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);
}

.menu {
  padding: var(--e4) var(--e2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-grow: 1;
  overflow-y: auto;
}

.rotulo,
.menu__grupo {
  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);
}
.menu__grupo {
  padding: 0 var(--e3) var(--e2);
}
.menu__grupo--seguinte {
  padding-top: var(--e4);
}

.menu__item {
  display: flex;
  align-items: center;
  gap: var(--e3);
  height: 40px;
  padding: 0 var(--e3);
  font-weight: var(--peso-corpo);
  font-size: var(--tam-corpo);
  line-height: 20px;
  color: var(--texto-2);
  transition: background-color var(--transicao), color var(--transicao);
}
.menu__item svg {
  stroke: var(--texto-3);
  transition: stroke var(--transicao);
}
.menu__item:hover svg {
  stroke: var(--texto-2);
}
.menu__item:hover {
  background: var(--hover-leve);
  color: var(--texto-1);
}
.menu__item:focus-visible {
  box-shadow: inset var(--anel-foco);
}
.menu__item[aria-current="page"] {
  background: linear-gradient(90deg, rgba(0, 255, 234, 0.12), rgba(0, 255, 234, 0.02));
  box-shadow: inset 2px 0 0 var(--ciano);
  color: var(--texto-titulo);
  font-weight: 600;
}
.menu__item[aria-current="page"] svg {
  stroke: var(--ciano);
}
.menu__item[aria-current="page"]:focus-visible {
  box-shadow: inset 2px 0 0 var(--ciano), inset var(--anel-foco);
}
.menu__item[aria-disabled="true"] {
  color: var(--texto-3);
  cursor: default;
}
.menu__item[aria-disabled="true"] svg,
.menu__item[aria-disabled="true"]:hover svg {
  stroke: var(--texto-4);
}
.menu__item[aria-disabled="true"]:hover {
  background: transparent;
  color: var(--texto-3);
}
.menu__contador {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  font-family: var(--fonte-mono);
  font-weight: var(--peso-corpo);
  font-size: var(--tam-rotulo-tabela);
  line-height: 16px;
  color: var(--texto-1);
  font-variant-numeric: tabular-nums;
}
.menu__rotulo {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu__item .selo {
  margin-left: auto;
  flex-shrink: 0;
  height: 22px;
  padding: 0 6px;
  font-size: var(--tam-rotulo-tabela);
}

.usuario {
  margin: var(--e3);
  height: 56px;
  flex-shrink: 0;
  padding: var(--e3) var(--e1);
  border-top: 1px solid var(--vidro-divisoria);
  display: flex;
  align-items: center;
  gap: var(--e3);
}
.usuario__avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 255, 234, 0.06);
  border: 1px solid rgba(0, 255, 234, 0.35);
  font-weight: var(--peso-titulo);
  font-size: var(--tam-apoio);
  color: var(--texto-1);
  text-transform: uppercase;
}
.usuario__textos {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}
.usuario__nome {
  font-weight: var(--peso-forte);
  font-size: var(--tam-corpo);
  line-height: 20px;
  color: var(--texto-titulo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.usuario__papel {
  font-size: 13px;
  line-height: 18px;
  color: var(--texto-3);
}
.usuario form {
  margin: 0;
  display: flex;
}

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

.topo {
  position: sticky;
  top: 0;
  z-index: 1;
  height: var(--barra);
  flex-shrink: 0;
  padding: 0 var(--e8);
  display: flex;
  align-items: center;
  gap: var(--e3);
  background: var(--vidro-topo);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--vidro-borda);
}
.topo__titulos {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  flex-shrink: 1; /* o título encolhe com reticências; o seletor de conta não é espremido */
  min-width: 0;
  overflow: hidden;
}
.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);
}
.topo 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);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conteudo {
  flex-grow: 1;
  padding: var(--e6) 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: 2px;
  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;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Botão principal em vidro laranja (Revisão 2, item 2) ---------- */
.brilho {
  display: inline-flex;
  filter: drop-shadow(0 0 10px rgba(255, 77, 29, 0.20));
  transition: filter 160ms ease;
}
.brilho:hover {
  filter: drop-shadow(0 0 14px rgba(255, 77, 29, 0.38));
}
.brilho:has(.botao-principal:focus-visible) {
  filter: drop-shadow(0 0 0.5px var(--ciano)) drop-shadow(0 0 6px rgba(0, 255, 234, 0.45));
}
.brilho:has(.botao-principal:disabled),
.brilho:has(.botao-principal[aria-disabled="true"]) {
  filter: none;
}

.botao-principal {
  --vidro-laranja: linear-gradient(135deg, rgba(255, 77, 29, 0.20), rgba(255, 140, 0, 0.20));
  --cor-borda-chanfro: var(--laranja);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  height: 40px;
  padding: 0 var(--e5);
  margin: 0;
  background:
    linear-gradient(135deg, transparent 5px, var(--cor-borda-chanfro) 5px 6.8px, transparent 6.8px) top left / 12px 12px no-repeat,
    linear-gradient(-45deg, transparent 5px, var(--cor-borda-chanfro) 5px 6.8px, transparent 6.8px) bottom right / 12px 12px no-repeat,
    var(--vidro-laranja);
  background-origin: border-box;
  border: 1px solid var(--laranja);
  border-radius: 0;
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255, 77, 29, 0.8);
  font-family: var(--fonte-texto);
  font-weight: var(--peso-titulo);
  font-size: var(--tam-corpo);
  line-height: 20px;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.botao-principal svg {
  stroke: #ffffff;
}
.botao-principal:hover {
  --vidro-laranja: linear-gradient(135deg, rgba(255, 77, 29, 0.32), rgba(255, 140, 0, 0.32));
  color: #ffffff;
}
.botao-principal:focus-visible {
  --cor-borda-chanfro: var(--ciano);
  border-color: var(--ciano);
  box-shadow: none;
  color: #ffffff;
}
.botao-principal:disabled,
.botao-principal[aria-disabled="true"] {
  --vidro-laranja: rgba(255, 77, 29, 0.06);
  --cor-borda-chanfro: rgba(255, 77, 29, 0.35);
  border-color: rgba(255, 77, 29, 0.35);
  color: rgba(255, 255, 255, 0.45);
  text-shadow: none;
  cursor: not-allowed;
}
.botao-principal:disabled svg,
.botao-principal[aria-disabled="true"] svg {
  stroke: rgba(255, 255, 255, 0.45);
}

/* ---------- 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: 2px;
  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(255, 255, 255, 0.02);
  border: 1px solid var(--linha-forte);
  color: var(--texto-1);
}
.botao:hover {
  border-color: var(--ciano);
  background: rgba(0, 255, 234, 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 (Revisão 2, item 4) ---------- */
.painel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--vidro-painel);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid var(--vidro-borda);
  box-shadow: var(--vidro-fio);
  border-radius: 0;
}
.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(0, 255, 234, 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(120, 144, 160, 0.25) transparent;
}
.tabela::-webkit-scrollbar {
  width: 6px;
}
.tabela::-webkit-scrollbar-thumb {
  background: rgba(120, 144, 160, 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(255, 255, 255, 0.035);
  color: var(--texto-1);
}
.tabela__linha:focus-visible {
  outline: 1px solid rgba(0, 255, 234, 0.6);
  outline-offset: -1px;
  box-shadow: none;
}
.tabela__linha[aria-current="true"] {
  background: linear-gradient(90deg, rgba(0, 255, 234, 0.12), rgba(0, 255, 234, 0.04) 60%);
  box-shadow: inset 2px 0 0 var(--ciano);
}
.tabela__linha[aria-current="true"]:hover {
  background: linear-gradient(90deg, rgba(0, 255, 234, 0.16), rgba(0, 255, 234, 0.04) 60%);
}
.tabela__linha[aria-current="true"]:focus-visible {
  box-shadow: inset 2px 0 0 var(--ciano);
}
.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[aria-current="true"] .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(0, 255, 234, 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(120, 144, 160, 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(--linha-forte);
  cursor: pointer;
  transition: background-color var(--transicao), border-color var(--transicao), box-shadow var(--transicao);
}
.cartao-radio:hover {
  border-color: var(--linha-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(0, 255, 234, 0.10), rgba(0, 255, 234, 0.03));
  border-color: rgba(0, 255, 234, 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(--linha-forte);
  border-radius: 2px;
  color: #ffffff;
  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(--linha-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: 2px;
  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) {
  .raiz {
    flex-direction: column;
  }
  .lateral .marca {
    border-bottom: 0;
  }
  .lateral {
    position: static;
    width: 100%;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--vidro-borda);
  }
  .menu {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: var(--e2) var(--e3);
  }
  .menu__grupo {
    display: none;
  }
  .usuario {
    margin: 0 var(--e3);
    border-top: 0;
  }
  .lateral {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .topo {
    padding: 0 var(--e4);
  }
  .conteudo {
    padding: var(--e4);
  }
  .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);
  }
  .selo-ar {
    display: none;
  }
  /* 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;
}

/* ---------- Estado do sistema ---------- */
.servicos {
  display: grid;
  /* Cinco cartões (banco, Redis, worker, agendador, Hermes): 3 + 2 em telas médias. */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--e4);
}
.servico {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding: var(--e4);
  border: 1px solid var(--vidro-divisoria);
  box-shadow: inset 2px 0 0 var(--texto-3);
}
.servico h3 {
  font-weight: var(--peso-forte);
  font-size: var(--tam-corpo);
  line-height: 22px;
  color: var(--texto-titulo);
}
.servico .cartao__situacao {
  align-self: flex-start;
}
.servico .cartao__detalhe {
  font-size: var(--tam-apoio);
  line-height: 21px;
  color: var(--texto-2);
}
.servico.cartao--ok {
  box-shadow: inset 2px 0 0 var(--verde);
}
.servico.cartao--ok .cartao__situacao {
  color: var(--verde);
  background: var(--verde-fundo);
  border-color: var(--verde-borda);
}
.servico.cartao--falha {
  box-shadow: inset 2px 0 0 var(--vermelho);
}
.servico.cartao--falha .cartao__situacao {
  color: var(--vermelho);
  background: var(--vermelho-fundo);
  border-color: var(--vermelho-borda);
}
/* Cartão que é link (Hermes): abre a configuração do motor. */
a.servico--link {
  color: inherit;
  text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease;
}
a.servico--link:hover {
  background: var(--hover-leve);
  border-color: var(--linha-hover);
}
a.servico--link:focus-visible {
  outline: none;
  box-shadow: var(--anel-foco);
}
.servico__acao {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  font-size: var(--tam-apoio);
  font-weight: var(--peso-forte);
  color: var(--ciano);
}
a.servico--link:hover .servico__acao {
  color: var(--ciano-link-hover);
}

/* ---------- Motor de IA (configuração do Hermes) ---------- */
.motor-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--e4);
  align-items: start;
}
.motor-coluna {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  min-width: 0;
}
.motor-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
}
.motor-acoes form {
  margin: 0;
}
.motor-passos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  counter-reset: passo;
}
.motor-passos li {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--vidro-divisoria);
}
.motor-passos li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.motor-passos h3 {
  font-size: var(--tam-corpo);
  font-weight: var(--peso-forte);
  line-height: 22px;
  color: var(--texto-titulo);
}
.motor-passos p {
  font-size: var(--tam-apoio);
  line-height: 21px;
  color: var(--texto-2);
}
.motor-comando {
  margin: 0;
  padding: var(--e2) var(--e3);
  background: var(--campo-fundo);
  border: 1px solid var(--linha-forte);
  border-radius: 2px;
  font-family: var(--fonte-mono);
  font-size: var(--tam-apoio);
  line-height: 21px;
  color: var(--texto-1);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: all;
}
.motor-resposta {
  margin: 0;
  padding: var(--e3);
  background: var(--campo-fundo);
  border: 1px solid var(--vidro-divisoria);
  font-size: var(--tam-corpo);
  line-height: 22px;
  color: var(--texto-1);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.motor-modelos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}
.motor-modelos li {
  font-family: var(--fonte-mono);
  font-size: 13px;
  line-height: 18px;
  padding: 2px var(--e2);
  border: 1px solid var(--linha-forte);
  border-radius: 2px;
  color: var(--texto-2);
}
.motor-perfil + .motor-perfil {
  margin-top: var(--e4);
  padding-top: var(--e4);
  border-top: 1px solid var(--vidro-divisoria);
}
.motor-perfil h3 {
  font-size: var(--tam-corpo);
  font-weight: var(--peso-forte);
  line-height: 22px;
  color: var(--texto-titulo);
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin-bottom: var(--e2);
}
@media (max-width: 1180px) {
  .motor-grade {
    grid-template-columns: minmax(0, 1fr);
  }
}

.verificado-em {
  font-family: var(--fonte-mono);
  font-size: 13px; /* mono ao lado de Barlow 14 */
  color: var(--texto-3);
}
@media (max-width: 1180px) {
  .servicos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .servicos {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =====================================================================
 * 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: 2px;
  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(0, 255, 234, 0.35);
  background: rgba(0, 255, 234, 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 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);
}

/* ---------- Barra superior: divisor e seletor de conta ---------- */
.topo__divisor {
  width: 1px;
  height: 32px;
  flex-shrink: 0;
  margin: 0 var(--e1);
  background: var(--vidro-borda);
}
.topo__espaco { flex-grow: 1; }

.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(--linha-forte);
  border-radius: 2px;
  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(--linha-hover); }
.seletor__gatilho:focus-visible { border-color: var(--ciano); box-shadow: var(--anel-foco); }
.seletor[open] .seletor__gatilho {
  background: rgba(10, 24, 36, 0.95);
  border-color: var(--ciano);
  box-shadow: 0 0 0 3px rgba(0, 255, 234, 0.12);
}
.seletor__icone {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 255, 234, 0.06);
  border: 1px solid rgba(0, 255, 234, 0.35);
  border-radius: 2px;
  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: rgba(9, 19, 30, 0.97);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  box-shadow: var(--vidro-fio), 0 20px 48px rgba(0, 0, 0, 0.6), 0 0 24px rgba(0, 255, 234, 0.06);
}
.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: rgba(5, 11, 20, 0.7);
  border: 1px solid var(--linha-forte);
  border-radius: 2px;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.seletor__campo:focus-within { border-color: var(--ciano); box-shadow: 0 0 0 3px rgba(0, 255, 234, 0.10); }
.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(120, 144, 160, 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(255, 255, 255, 0.035); }
.seletor__opcao:focus-visible { box-shadow: inset var(--anel-foco); }
.seletor__opcao[aria-selected="true"] {
  background: linear-gradient(90deg, rgba(0, 255, 234, 0.12), rgba(0, 255, 234, 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; }
@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: #09131e;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 20px 48px rgba(0, 0, 0, 0.6), 0 0 24px rgba(0, 255, 234, 0.06);
}
.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(0, 255, 234, 0.12), rgba(0, 255, 234, 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(0, 255, 234, 0.35);
  background: rgba(0, 255, 234, 0.06);
  border-radius: 2px;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: #8bfff5;
  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(0, 255, 234, 0.12);
  border: 1px solid rgba(0, 255, 234, 0.55);
  border-radius: 2px;
  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(0, 255, 234, 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(0, 255, 234, 0) 0%, rgba(0, 255, 234, 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(255, 255, 255, 0.05);
  border-radius: 2px;
  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(0, 255, 234, 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(120, 144, 160, 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(255, 255, 255, 0.035); }
.grade-tabela__linha--link { cursor: pointer; }
.grade-tabela__linha--link:hover { color: var(--texto-1); }
.grade-tabela__linha--link:focus-visible { outline: 1px solid rgba(0, 255, 234, 0.6); outline-offset: -1px; box-shadow: none; }
.grade-tabela__linha--selecionada {
  background: linear-gradient(90deg, rgba(0, 255, 234, 0.12), rgba(0, 255, 234, 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(--linha-forte);
  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(0, 255, 234, 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(0, 255, 234, 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(--linha-forte);
  border-radius: 2px;
  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(0, 255, 234, 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(--linha-forte);
  border-radius: 2px;
  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(--linha-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: #0a1520; 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(0, 255, 234, 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(0, 255, 234, 0.45);
  border-radius: 2px;
  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(255, 255, 255, 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(0, 255, 234, 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-cab__quando { display: none; }
  .conta-grade { grid-template-columns: minmax(0, 1fr) 320px; }
  .seletor__gatilho { width: 300px; }
}
@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; }
  .seletor__gatilho { width: 260px; }
  .seletor__gatilho .selo { display: none; }
}
@media (max-width: 1023px) {
  .topo { height: auto; min-height: var(--barra); flex-wrap: wrap; padding-top: var(--e2); padding-bottom: var(--e2); }
  .topo__divisor { display: none; }
  .seletor { order: 5; flex-basis: 100%; }
  .seletor__gatilho { width: 100%; }
  .seletor__painel { width: 100%; }
  .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); }
  .conta-cab__acoes { width: 100%; }
  .conta-cab__acoes > *,
  .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: 2px; }
.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: o título da barra superior tem prioridade ---------- */
.topo__titulos {
  flex: 0 1 auto;
  min-width: 96px;
}
.topo h1 { min-width: 0; }
/* O seletor encolhe primeiro (peso de encolhimento alto); o título só depois. */
.seletor {
  flex: 0 1000 auto;
  width: auto;
  max-width: 440px;
  min-width: 160px;
}
.seletor__gatilho { width: 100%; max-width: none; }
.seletor__gatilho .seletor__nome { flex: 0 1 auto; }
.seletor__gatilho .seletor__saldo { margin-left: auto; }
.seletor__gatilho .seletor__nome + .selo + .seletor__saldo { margin-left: auto; }
.selo-ar { flex-shrink: 0; }
/* N-03: a barra tem a mesma forma em todas as telas de uma mesma largura
   (não depende de quantas ações a tela tem). Apelidos curtos ficam inteiros;
   o h1 encolhe com reticências.
   - A partir de 1440px: seletor completo (nome, selo e saldo) e "Sistema no ar"
     com texto, em todas as telas.
   - De 1181 a 1439px: seletor com ícone, nome e seta (sem selo e saldo; o ícone
     roxo indica simulação) e "Sistema no ar" só com o ponto (o texto continua
     para leitor de tela), em todas as telas. */
@media (min-width: 1181px) {
  /* Sem espaço sobrando, o seletor encolhe primeiro (de 400px até 260px):
     abaixo de 380px some o selo "Simulação"/"Real" do gatilho (o ícone já
     indica o tipo), abaixo de 300px some o saldo e, num apelido longo, o nome
     ganha reticências; só então o h1 encolhe, até 160px. Apelidos curtos
     ficam sempre inteiros. */
  /* Encolhimento quase nulo: só cede depois que o seletor chega ao mínimo
     (com peso 1 ele cedia frações de pixel e o h1 ganhava reticências à toa). */
  .topo__titulos { flex: 0 0.001 auto; min-width: 160px; }
  .seletor {
    flex: 0 1000 400px;
    width: auto;
    min-width: 260px;
    container-type: inline-size;
  }
  .seletor__gatilho .seletor__nome { flex: 0 1 auto; max-width: 200px; }
}
@container (max-width: 379px) {
  .seletor__gatilho .selo { display: none; }
}
@container (max-width: 299px) {
  .seletor__gatilho .seletor__saldo { display: none; }
  .seletor__gatilho .seletor__seta { margin-left: auto; }
}
@media (min-width: 1181px) and (max-width: 1439px) {
  .seletor { flex: 0 1000 auto; max-width: 280px; min-width: 180px; container-type: normal; }
  .seletor__gatilho .selo,
  .seletor__gatilho .seletor__saldo { display: none; }
  .seletor__gatilho .seletor__seta { margin-left: auto; }
  .selo-ar {
    width: 24px;
    padding: 0;
    gap: 0;
    justify-content: center;
    font-size: 0;
  }
}
@media (max-width: 1280px) {
  .topo:has(.selo-ar ~ * ~ *) .trilha { display: none; }
}
/* Até 1180px: o seletor desce para uma segunda linha da barra, a trilha some
   e o selo "Sistema no ar" fica só com o ponto. */
@media (max-width: 1180px) {
  .topo {
    height: auto;
    min-height: var(--barra);
    flex-wrap: wrap;
    row-gap: var(--e2);
    padding-top: var(--e2);
    padding-bottom: var(--e2);
  }
  .topo__titulos { flex: 1 1 0; min-width: 0; }
  .topo .trilha { display: none; }
  .topo__divisor,
  .topo__espaco { display: none; }
  .seletor {
    order: 5;
    flex: 1 1 100%;
    max-width: none;
    min-width: 0;
  }
  .seletor__gatilho { width: min(100%, 440px); }
  .seletor__painel { width: min(440px, 100%); }
  .selo-ar {
    width: 24px;
    padding: 0;
    gap: 0;
    justify-content: center;
    font-size: 0;
  }
}
@media (max-width: 1180px) and (min-width: 641px) {
  .seletor__gatilho .selo { display: inline-flex; }
}
@media (max-width: 640px) {
  .seletor__gatilho { width: 100%; }
  .seletor__painel { width: 100%; }
}

/* ---------- V-06 / V-11: painel do seletor opaco e nomes longos legíveis ---------- */
.seletor__painel {
  background: #09131e;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.seletor__rodape {
  flex-wrap: wrap;
  background: #07101a;
}
.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; }
.seletor__opcao .seletor__nome {
  white-space: normal;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* ---------- V-17: no celular e no tablet a lateral vira barra com botão de menu ---------- */
.lateral__alternar { display: none; }
@media (max-width: 1023px) {
  .lateral { position: relative; }
  .lateral .marca { flex: 1 1 auto; }
  .lateral__alternar {
    display: inline-flex;
    width: 40px;
    height: 40px;
    margin-right: var(--e3);
    flex-shrink: 0;
    border: 1px solid var(--linha-forte);
  }
  .lateral__alternar[aria-expanded="true"] { border-color: var(--ciano); color: var(--ciano); }
  .js .lateral:not(.lateral--aberta) .menu,
  .js .lateral:not(.lateral--aberta) .usuario { display: none; }
  .lateral .menu { flex-basis: 100%; }
}

/* ---------- 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(0, 255, 234, 0.45), inset -36px 0 24px -24px rgba(0, 255, 234, 0.18); }
.grade-tabela.rola-mais-esq,
.abas.rola-mais-esq { box-shadow: inset 2px 0 0 rgba(0, 255, 234, 0.45), inset 36px 0 24px -24px rgba(0, 255, 234, 0.18); }
.grade-tabela.rola-mais-dir.rola-mais-esq,
.abas.rola-mais-dir.rola-mais-esq {
  box-shadow: inset -2px 0 0 rgba(0, 255, 234, 0.45), inset -36px 0 24px -24px rgba(0, 255, 234, 0.18),
              inset 2px 0 0 rgba(0, 255, 234, 0.45), inset 36px 0 24px -24px rgba(0, 255, 234, 0.18);
}
.grade-tabela { scrollbar-color: rgba(120, 144, 160, 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; }
}

/* ---------- V-05: abas da conta ---------- */
.abas { scrollbar-width: thin; scrollbar-color: rgba(120, 144, 160, 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(120, 144, 160, 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); }
.dados-grade--uma dd { white-space: nowrap; }

/* ---------- V-10: cabeçalho da conta com apelido longo ---------- */
.conta-cab__id { flex: 1 1 320px; }
.painel .conta-cab__nome h2 {
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.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(125, 217, 160, 0.35));
  background: var(--verde-fundo, rgba(125, 217, 160, 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; }

/* ---------- V-01/V-02 (ajuste): até 1280px o gatilho do seletor não leva o selo
   (o ícone roxo já indica simulação); no celular, com duas ações, o título
   ganha a linha inteira e as ações descem. ---------- */
@media (max-width: 1280px) and (min-width: 1181px) {
  .seletor__gatilho .selo { display: none; }
}
@media (max-width: 640px) {
  .topo:has(.selo-ar ~ * ~ *) .topo__titulos { flex: 1 1 100%; }
}

/* ---------- 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; }