/*
 * PAY AX Pagamentos — base visual compartilhada pelo Backoffice e pela Área do Cliente.
 * Cada aplicativo acrescenta só a própria marca (cor do menu e símbolo) no CSS seguinte.
 *
 * Cores dos gráficos: paleta categórica validada (separação para daltonismo, contraste e banda de
 * luminosidade conferidos). Cores de estado (good/warning/serious/critical) são reservadas e nunca
 * viram "série 4"; sempre acompanham rótulo, nunca informam só pela cor.
 */
:root {
  /* Marca PAY AX: marinho profundo, azul de ação e o ciano do anel. */
  --tinta: #050c18;
  --marca: #0a1526;
  --marca-2: #13243d;
  --menu-ativo: #17304f;
  --ciano: #6fd3fb;
  --azul-marca: #3ea8f5;
  --ciano-fundo: #e8f5fe;
  --marinho-900: #0a1526;
  --marinho-800: #0f1f36;
  --marinho-700: #15304f;

  --fundo: #f4f7fb;
  --superficie: #ffffff;
  --superficie-2: #f1f5fa;
  --texto: #0a1422;
  --texto-2: #495768;
  --texto-3: #7a8798;
  --borda: #e3e9f1;
  --borda-forte: #ccd6e2;
  /* Azul das ações: escuro o bastante para texto branco em cima passar no contraste. */
  --azul: #0f5fbf;
  --azul-escuro: #0b4a96;
  --azul-suave: #eaf3fe;
  --verde: #0ca30c;
  --verde-texto: #006300;
  --verde-suave: #e9f7e9;
  --ambar: #fab219;
  --ambar-texto: #8a5c00;
  --ambar-suave: #fef6e4;
  --laranja: #ec835a;
  --vermelho: #d03b3b;
  --vermelho-suave: #fdeded;
  /* Séries dos gráficos (paleta categórica, em ordem fixa — nunca ciclada). */
  --serie-1: #2a78d6;
  --serie-2: #eb6834;
  --serie-3: #1baf7a;
  --grade: #e1e0d9;
  --eixo: #c3c2b7;
  /* Régua de banco, não de ERP: canto mais redondo, sombra mais macia, mais respiro.
     Vale nas duas áreas — o Backoffice é a mesma casa, vista por dentro. */
  --raio-g: 22px;
  --raio: 16px;
  --raio-ctl: 12px;
  --sombra: 0 1px 2px rgba(5, 12, 24, 0.04), 0 8px 24px rgba(5, 12, 24, 0.05);
  --sombra-alta: 0 24px 60px rgba(5, 12, 24, 0.22);
  --menu-largura: 248px;
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--fonte); font-size: 14px; line-height: 1.45; color: var(--texto); background: var(--fundo); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--azul-escuro); text-decoration: none; }
a:hover { text-decoration: underline; }
svg { display: block; flex-shrink: 0; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Estrutura */
.app { min-height: 100vh; }
.menu {
  position: fixed; inset: 0 auto 0 0; width: var(--menu-largura); background: var(--marca); color: #c9d4e2;
  display: flex; flex-direction: column; padding: 20px 14px 14px; z-index: 40; overflow-y: auto;
}
.marca { display: flex; align-items: center; gap: 11px; color: #fff; padding: 0 6px 16px; text-decoration: none !important; }
.marca-simbolo { width: 30px; height: 30px; flex-shrink: 0; }
.marca-texto { line-height: 1; }
.marca-texto svg { display: block; }
/* A linha do produto acompanha a largura do letreiro, não a da caixa. */
.marca-texto small { display: block; font-size: 8.5px; font-weight: 600; letter-spacing: 0.3em; color: #8fa3bd; margin-top: 6px; }
.contexto { display: flex; align-items: center; gap: 10px; border-top: 1px solid #22344e; border-bottom: 1px solid #22344e; padding: 11px 6px; margin-bottom: 14px; }
.contexto .logo { width: 32px; height: 32px; border-radius: 8px; border: 1px solid #35496a; display: grid; place-items: center; font-size: 11px; font-weight: 600; color: #cfdcec; flex-shrink: 0; }
.contexto strong { display: block; color: #fff; font-size: 12.5px; font-weight: 600; }
.contexto small { color: #8fa3bd; font-size: 11px; }
.grupo-menu { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #6f8099; margin: 14px 10px 7px; font-weight: 600; }
.link-menu {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; color: #c0cde0; font-size: 13.5px;
  text-decoration: none !important; border-left: 3px solid transparent; margin-bottom: 2px; transition: background 0.18s, color 0.18s;
}
.link-menu svg { width: 18px; height: 18px; opacity: 0.85; }
.link-menu:hover { background: var(--marinho-800); color: #fff; }
/* O item ativo é bloco de cor cheia, não um fundo mais claro: lê-se de longe. */
.link-menu.ativo { background: var(--azul); color: #fff; border-left-color: var(--azul-marca); font-weight: 600; }
.link-menu .contador { margin-left: auto; font-size: 11px; background: var(--vermelho); color: #fff; border-radius: 99px; padding: 1px 7px; font-weight: 600; }
.menu-rodape { margin-top: auto; padding-top: 14px; display: grid; gap: 10px; }
.selo-ambiente { border: 1px solid #35496a; border-radius: 10px; padding: 9px 11px; font-size: 11.5px; color: #d3dfed; }
.selo-ambiente::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ambar); margin-right: 7px; }
.selo-ambiente small { display: block; color: #8fa3bd; margin-top: 2px; }
.perfil { display: flex; align-items: center; gap: 10px; border-top: 1px solid #22344e; padding: 11px 4px 0; background: none; border-left: 0; border-right: 0; border-bottom: 0; color: inherit; text-align: left; cursor: pointer; width: 100%; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: #d7e4f3; color: var(--marca); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.perfil strong { display: block; color: #fff; font-size: 12.5px; }
.perfil small { color: #8fa3bd; font-size: 11px; }
.fundo-menu { position: fixed; inset: 0; background: rgba(11, 20, 32, 0.45); z-index: 35; }

.principal { margin-left: var(--menu-largura); min-height: 100vh; display: flex; flex-direction: column; min-width: 0; }
.topo { height: 62px; background: var(--superficie); border-bottom: 1px solid var(--borda); display: flex; align-items: center; gap: 14px; padding: 0 26px; position: sticky; top: 0; z-index: 30; }
.caminho { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-3); min-width: 0; }
.caminho strong { color: var(--texto); font-size: 15px; font-weight: 600; }
.caminho .sep { color: var(--borda-forte); }
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.abrir-menu { display: none; }
main { padding: 26px 28px 70px; flex: 1; min-width: 0; }
.cabecalho-tela { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.cabecalho-tela h1 { font-size: 20px; font-weight: 650; }
.cabecalho-tela p { color: var(--texto-2); font-size: 13px; margin-top: 3px; }
.cabecalho-tela .acoes { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- Botões e controles */
.botao {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: var(--raio-ctl); border: 1px solid transparent;
  background: var(--azul); color: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none !important; white-space: nowrap;
}
.botao:hover { background: var(--azul-escuro); }
.botao[disabled] { opacity: 0.55; cursor: not-allowed; }
.botao svg { width: 17px; height: 17px; }
.botao.sec { background: var(--superficie); color: var(--texto); border-color: var(--borda-forte); }
.botao.sec:hover { background: var(--superficie-2); }
.botao.perigo { background: var(--vermelho); }
.botao.perigo:hover { background: #b23232; }
.botao.sutil { background: transparent; color: var(--azul-escuro); border-color: transparent; padding: 6px 9px; }
.botao.sutil:hover { background: var(--azul-suave); }
.botao.pequeno { padding: 6px 11px; font-size: 12.5px; }
.botao-icone { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--raio-ctl); border: 1px solid var(--borda); background: var(--superficie); color: var(--texto-2); cursor: pointer; }
.botao-icone:hover { background: var(--superficie-2); color: var(--texto); }

.campo-form { display: grid; gap: 5px; }
.campo-form > span { font-size: 12px; color: var(--texto-2); font-weight: 600; }
.campo-form > small { font-size: 11.5px; color: var(--texto-3); }
/* Formulário de uma coluna, dentro de modal. */
.form-grade { display: grid; gap: 13px; margin-top: 4px; }
.form-grade textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--borda-forte); border-radius: var(--raio-ctl); font: inherit; resize: vertical; }
input, select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--borda-forte); border-radius: var(--raio-ctl); background: var(--superficie); font-size: 13.5px;
}
input:disabled, select:disabled { background: var(--superficie-2); color: var(--texto-3); }
textarea { min-height: 76px; resize: vertical; }
.linha-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.filtros { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; }
.filtros .campo-form { min-width: 140px; }
.filtros .campo-form.cresce { flex: 1; min-width: 200px; }

/* ---------------------------------------------------------------- Cartões e KPIs */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.cartao > header { padding: 14px 16px 0; display: flex; align-items: center; gap: 10px; }
.cartao > header h2 { font-size: 14.5px; font-weight: 650; }
.cartao > header .acoes { margin-left: auto; display: flex; gap: 6px; }
.cartao > .corpo { padding: 14px 16px; }
.grade { display: grid; gap: 14px; align-items: start; }
.grade.kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grade.duas { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grade.tres { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Stat tile: o número é o protagonista; rótulo acima, contexto abaixo. */
.kpi { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; box-shadow: var(--sombra); display: grid; gap: 3px; align-content: start; }
.kpi .rotulo { font-size: 12px; color: var(--texto-2); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.kpi .valor { font-size: 25px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; }
.kpi .valor.menor { font-size: 20px; }
.kpi .apoio { font-size: 12px; color: var(--texto-3); }
.kpi.destaque { background: linear-gradient(180deg, var(--azul-suave), var(--superficie) 70%); border-color: #c9ddf7; }
.kpi .valor.positivo { color: var(--verde-texto); }
.kpi .valor.negativo { color: var(--vermelho); }

/* ---------------------------------------------------------------- Selos de estado */
.selo { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.selo::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.selo.ok { background: var(--verde-suave); color: var(--verde-texto); border-color: #bfe6bf; }
.selo.info { background: var(--azul-suave); color: var(--azul-escuro); border-color: #c9ddf7; }
.selo.aviso { background: var(--ambar-suave); color: var(--ambar-texto); border-color: #f5dca5; }
.selo.erro { background: var(--vermelho-suave); color: #a52f2f; border-color: #f3c9c9; }
.selo.neutra { background: var(--superficie-2); color: var(--texto-2); border-color: var(--borda); }

/* ---------------------------------------------------------------- Tabelas */
.tabela-caixa { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); }
table.lista { width: 100%; border-collapse: collapse; font-size: 13px; }
table.lista th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-3); font-weight: 600; padding: 10px 14px; background: var(--superficie-2); border-bottom: 1px solid var(--borda); white-space: nowrap; }
table.lista td { padding: 11px 14px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
table.lista tbody tr:last-child td { border-bottom: 0; }
table.lista tbody tr.clicavel { cursor: pointer; }
table.lista tbody tr.clicavel:hover { background: var(--superficie-2); }
table.lista td.dir, table.lista th.dir { text-align: right; font-variant-numeric: tabular-nums; }
table.lista td.forte { font-weight: 600; }
table.lista .sub { display: block; color: var(--texto-3); font-size: 11.5px; }
.vazio { padding: 34px 16px; text-align: center; color: var(--texto-3); font-size: 13.5px; }
.paginacao { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--borda); font-size: 12.5px; color: var(--texto-2); }
.paginacao .botao { margin-left: 0; }
.paginacao .fim { margin-left: auto; }

/* ---------------------------------------------------------------- Gráficos */
.gráfico, .gfx { width: 100%; }
.gfx-legenda { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--texto-2); margin-bottom: 8px; }
.gfx-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.gfx-legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.gfx-dica { position: fixed; z-index: 90; background: var(--texto); color: #fff; border-radius: 8px; padding: 7px 10px; font-size: 12px; pointer-events: none; box-shadow: var(--sombra-alta); max-width: 240px; }
.gfx-dica b { display: block; font-size: 12.5px; margin-bottom: 2px; }
.gfx-dica .num { font-variant-numeric: tabular-nums; }
.barra-composta { display: flex; height: 26px; border-radius: 6px; overflow: hidden; background: var(--superficie-2); gap: 2px; }
.barra-composta > span { display: block; height: 100%; }

/* ---------------------------------------------------------------- Modal e avisos */
.modal-fundo { position: fixed; inset: 0; background: rgba(11, 20, 32, 0.48); display: grid; place-items: center; z-index: 80; padding: 16px; }
.modal { background: var(--superficie); border-radius: 14px; box-shadow: var(--sombra-alta); width: min(620px, 100%); max-height: 90vh; overflow: auto; }
.modal.largo { width: min(880px, 100%); }
.modal > header { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--borda); position: sticky; top: 0; background: var(--superficie); z-index: 1; }
.modal > header h2 { font-size: 16px; font-weight: 650; }
.modal > header .botao-icone { margin-left: auto; }
.modal > .corpo { padding: 18px; display: grid; gap: 14px; }
.modal > footer { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid var(--borda); position: sticky; bottom: 0; background: var(--superficie); }
.aviso:not(.selo) { border-radius: var(--raio-ctl); padding: 11px 13px; font-size: 13px; display: flex; gap: 9px; align-items: flex-start; }
.aviso:not(.selo) svg { width: 18px; height: 18px; margin-top: 1px; }
.aviso.info { background: var(--azul-suave); color: var(--azul-escuro); }
.aviso.ok { background: var(--verde-suave); color: var(--verde-texto); }
.aviso.aviso-amarelo { background: var(--ambar-suave); color: var(--ambar-texto); }
.aviso.erro { background: var(--vermelho-suave); color: #a52f2f; }
.toasts { position: fixed; right: 18px; bottom: 18px; display: grid; gap: 8px; z-index: 95; }
.toast { background: var(--texto); color: #fff; padding: 11px 15px; border-radius: 10px; font-size: 13px; box-shadow: var(--sombra-alta); max-width: 360px; }
.toast.erro { background: var(--vermelho); }
.toast.ok { background: var(--verde-texto); }
.carregando { padding: 40px; text-align: center; color: var(--texto-3); }
.falha { background: var(--vermelho-suave); color: #a52f2f; padding: 14px; border-radius: var(--raio); }

/* ---------------------------------------------------------------- Entrada (login) */
/* Tela de entrada: o fundo do logotipo — marinho, faixas diagonais e o anel luminoso. */
.tela-entrada {
  position: relative; min-height: 100vh; display: grid; place-items: center; padding: 20px; overflow: hidden;
  background: radial-gradient(1100px 620px at 50% 42%, #112a47 0%, var(--marca) 55%, var(--tinta) 100%);
}
.tela-entrada::before {
  content: ''; position: absolute; inset: -20%;
  background:
    repeating-linear-gradient(118deg, rgba(62, 168, 245, 0.055) 0 46px, transparent 46px 190px),
    repeating-linear-gradient(118deg, rgba(111, 211, 251, 0.03) 0 14px, transparent 14px 120px);
  pointer-events: none;
}
/* O anel. Fica atrás da caixa, como no logotipo. */
.tela-entrada::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: min(78vh, 620px); aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  border: 1.5px solid rgba(111, 211, 251, 0.55);
  box-shadow: 0 0 60px rgba(62, 168, 245, 0.28), inset 0 0 90px rgba(62, 168, 245, 0.1);
  pointer-events: none;
}
.tela-entrada-caixa { position: relative; z-index: 1; }
.marca-entrada { display: grid; justify-items: center; gap: 9px; padding-bottom: 2px; }
/* Link do aviso de privacidade (LGPD, art. 9º): na entrada e no rodapé do menu. */
.link-privacidade { font-size: 12.5px; color: var(--texto-3); text-align: center; text-decoration: underline; }
.link-privacidade.menu { display: block; color: #8fa3bd; text-align: left; padding: 0 6px; }
.marca-entrada small { font-size: 8.5px; font-weight: 600; letter-spacing: 0.3em; color: var(--texto-3); }
.tela-entrada-caixa { background: var(--superficie); border-radius: var(--raio-g); box-shadow: var(--sombra-alta); width: min(410px, 100%); padding: 32px; display: grid; gap: 15px; }
.tela-entrada-caixa h1 { font-size: 17px; }
.tela-entrada-caixa p.apoio { color: var(--texto-2); font-size: 13px; }

/* ---------------------------------------------------------------- Cartão de destaque
   A peça de assinatura das duas áreas: na Área do Cliente é o saldo do cliente; no Backoffice,
   a posição da plataforma no período. Mesmo desenho, mesmo marinho, mesmo anel. */
.cartao-conta {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio-g);
  padding: 26px 28px 24px;
  color: #fff;
  background:
    radial-gradient(760px 380px at 86% -30%, rgba(62, 168, 245, 0.32), transparent 62%),
    linear-gradient(142deg, var(--marinho-700) 0%, var(--marinho-900) 48%, var(--tinta) 100%);
  box-shadow: 0 2px 4px rgba(5, 12, 24, 0.12), 0 22px 46px rgba(5, 12, 24, 0.26);
}
/* Faixas diagonais do logotipo: textura, não enfeite. */
.cartao-conta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 26px);
  pointer-events: none;
}
/* O anel luminoso, saindo pela direita como no logotipo. O centro fica exatamente sobre a
   borda direita do cartão, então entra sempre meia circunferência — em cartão largo e baixo
   (Backoffice) ou alto e estreito (Área do Cliente), a curva se lê igual. */
.cartao-conta::before {
  content: '';
  position: absolute; top: 50%; right: 0; height: 132%; aspect-ratio: 1;
  transform: translate(50%, -50%); border-radius: 50%;
  border: 1.5px solid rgba(111, 211, 251, 0.26);
  box-shadow: 0 0 46px rgba(62, 168, 245, 0.14);
  pointer-events: none;
}
.cartao-conta > * { position: relative; z-index: 1; }
.cartao-conta .topo-cartao { display: flex; align-items: flex-start; gap: 14px; }
.cartao-conta .rotulo {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62);
}
.cartao-conta .saldo-valor {
  font-size: clamp(32px, 6vw, 44px); font-weight: 650; letter-spacing: -0.03em; line-height: 1.05; margin-top: 4px;
  font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 10px;
}
.cartao-conta .saldo-valor.oculto { letter-spacing: 0.06em; }
.cartao-conta .olho {
  background: rgba(255, 255, 255, 0.12); border: 0; color: rgba(255, 255, 255, 0.85); width: 34px; height: 34px;
  border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; margin-left: auto;
}
.cartao-conta .olho:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
.cartao-conta .apoio-cartao { margin-top: 7px; font-size: 12.5px; color: rgba(255, 255, 255, 0.6); }
.cartao-conta .canto-cartao { margin-left: auto; text-align: right; font-size: 12.5px; color: rgba(255, 255, 255, 0.62); }
.cartao-conta .canto-cartao strong { display: block; color: #fff; font-size: 14px; font-weight: 600; margin-top: 2px; }
.cartao-conta .acoes-cartao { margin-top: 18px; display: flex; gap: 8px; flex-wrap: wrap; }
/* Botões sobre o marinho: o azul da marca sumiria no fundo. */
.cartao-conta .acoes-cartao .botao { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: transparent; }
.cartao-conta .acoes-cartao .botao:hover { background: rgba(255, 255, 255, 0.24); }
.cartao-conta .marca-cartao { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.cartao-conta .marca-cartao svg { display: block; }

.cartao-conta .faixa {
  display: flex; gap: 28px; flex-wrap: wrap; margin-top: 20px; padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.cartao-conta .faixa .item span { display: block; font-size: 11.5px; color: rgba(255, 255, 255, 0.58); margin-bottom: 2px; }
.cartao-conta .faixa .item strong { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cartao-conta .numero-conta {
  margin-top: 18px; display: flex; gap: 22px; flex-wrap: wrap; font-size: 12px; color: rgba(255, 255, 255, 0.55);
}
.cartao-conta .numero-conta strong {
  display: block; color: #fff; font-size: 15px; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; font-weight: 600;
}
.cartao-conta .numero-conta strong.chave { letter-spacing: 0.01em; font-size: 14px; word-break: break-all; }

/* ---------------------------------------------------------------- Ações rápidas */
.acoes-rapidas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.acao-rapida {
  flex: 1 1 128px; min-width: 112px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 15px 14px; display: grid; gap: 9px; justify-items: start; cursor: pointer; text-align: left; color: var(--texto);
  font-size: 13.5px; font-weight: 600; text-decoration: none !important; box-shadow: var(--sombra);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.acao-rapida:hover { transform: translateY(-2px); border-color: var(--azul-marca); box-shadow: 0 10px 26px rgba(5, 12, 24, 0.09); }
.acao-rapida[aria-disabled='true'] { opacity: 0.5; pointer-events: none; }
.acao-rapida .bolha {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: var(--ciano-fundo); color: var(--azul);
}
.acao-rapida .bolha svg { width: 19px; height: 19px; }
.acao-rapida small { display: block; font-weight: 400; color: var(--texto-3); font-size: 11.5px; }

/* ---------------------------------------------------------------- Linha do tempo de movimentos
   Os modificadores aqui são "credito"/"debito" de propósito: nomes genéricos como "entrada"
   colidem com classes de página (a tela de login já usava .entrada com min-height: 100vh). */
.linha-tempo { display: grid; }
.dia-tempo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 18px 2px 8px; font-size: 12px; color: var(--texto-3); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.dia-tempo .saldo-dia { font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; font-weight: 500; }
.mov {
  display: flex; align-items: center; gap: 14px; padding: 13px 16px; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio); margin-bottom: 8px; width: 100%; text-align: left;
  cursor: default; color: inherit; font: inherit; transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.mov.abrivel { cursor: pointer; }
.mov.abrivel:hover { border-color: var(--borda-forte); box-shadow: var(--sombra); }
.mov .icone-mov { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; }
.mov .icone-mov svg { width: 19px; height: 19px; }
.mov .icone-mov.credito { background: var(--ciano-fundo); color: #0a6b45; }
.mov .icone-mov.debito { background: #fdeef0; color: #a83232; }
.mov .icone-mov.taxa { background: #fff4e5; color: #8a5c00; }
.mov .icone-mov.neutro { background: var(--superficie-2); color: var(--texto-2); }
.mov .corpo { flex: 1; min-width: 0; }
.mov .corpo strong { display: block; font-size: 14px; font-weight: 600; }
.mov .corpo small { display: block; color: var(--texto-3); font-size: 12.5px; margin-top: 1px; }
.mov .valor { font-size: 15.5px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mov .valor.credito { color: #0a6b45; }
.mov .valor.debito { color: var(--texto); }
.mov .seta { color: var(--texto-3); transition: transform 0.18s ease; }
.mov[aria-expanded='true'] .seta { transform: rotate(90deg); }

/* O detalhe do split: de onde veio o dinheiro e o que foi descontado. */
.detalhe-mov {
  background: var(--superficie-2); border: 1px solid var(--borda); border-top: 0;
  border-radius: 0 0 var(--raio) var(--raio); margin: -9px 0 10px; padding: 14px 16px 15px;
}
.detalhe-mov .trilha { display: grid; gap: 8px; }
.detalhe-mov .passo { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.detalhe-mov .passo .marca-passo { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; }
.detalhe-mov .passo .texto { color: var(--texto-2); }
.detalhe-mov .passo .num { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.detalhe-mov .passo.total { border-top: 1px dashed var(--borda-forte); padding-top: 9px; margin-top: 2px; }
.detalhe-mov .passo.total .texto { color: var(--texto); font-weight: 600; }
.detalhe-mov .rodape { margin-top: 11px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- Faixa "a liberar" */
.a-liberar {
  display: flex; align-items: center; gap: 12px; background: var(--ciano-fundo); border: 1px solid #c3e2f8;
  border-radius: var(--raio); padding: 13px 16px; font-size: 13.5px; color: #0b4a96; margin-top: 14px;
}
.a-liberar svg { width: 19px; height: 19px; flex-shrink: 0; }
.a-liberar strong { font-variant-numeric: tabular-nums; }
.a-liberar .quando { margin-left: auto; font-size: 12.5px; color: #3f6c9c; white-space: nowrap; }

/* ---------------------------------------------------------------- Abas e pares */
.abas { gap: 2px; border-bottom: 1px solid var(--borda); margin-bottom: 18px; overflow-x: auto; display: flex; }
.abas button {
  background: none; border: 0; border-bottom: 2px solid transparent; padding: 11px 14px; font-size: 13.5px;
  color: var(--texto-2); cursor: pointer; white-space: nowrap; font-weight: 500;
}
.abas button:hover { color: var(--texto); }
.abas button.ativa { color: var(--azul); border-bottom-color: var(--azul-marca); font-weight: 650; }

.pares { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 20px; }
.par { display: grid; gap: 2px; }
.par .rot { font-size: 11px; color: var(--texto-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.par .val { font-size: 14.5px; }
.par .val.grande { font-size: 20px; font-weight: 650; }
.codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: var(--superficie-2);
  border: 1px solid var(--borda); border-radius: var(--raio-ctl); padding: 9px 11px; word-break: break-all;
}

/* ---------------------------------------------------------------- Responsivo */
@media (max-width: 920px) {
  .menu { transform: translateX(-100%); transition: transform 0.2s; }
  .menu.aberto { transform: none; }
  .principal { margin-left: 0; }
  .abrir-menu { display: grid; }
  main { padding: 16px 14px 50px; }
  .topo { padding: 0 14px; }
}
@media print {
  .menu, .topo, .cabecalho-tela .acoes, .filtros, .botao { display: none !important; }
  .principal { margin-left: 0; }
  body { background: #fff; }
  .cartao, .tabela-caixa, .kpi { box-shadow: none; border-color: #bbb; break-inside: avoid; }
}

/* Aviso do preenchimento automático (CEP e CNPJ), logo abaixo do campo. */
.auto-busca { font-size: 11.5px; color: var(--texto-3); min-height: 15px; display: block; }
.auto-busca.ok { color: var(--verde-texto); }
.auto-busca.erro { color: var(--vermelho); }

/* As peças compartilhadas no celular. A barra de navegação em si é da Área do Cliente. */
@media (max-width: 920px) {
  main { padding: 16px 14px 60px; }
  .cartao-conta { padding: 22px 20px 20px; border-radius: var(--raio); }
  .acoes-rapidas { gap: 8px; }
  .acao-rapida { flex-basis: calc(50% - 4px); min-width: 0; }
  /* Dois indicadores por linha em vez de um: no celular, rolagem é o que mais custa. */
  .grade.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 12px 13px; }
  .kpi .valor { font-size: 21px; }
  .kpi .rotulo { font-size: 11.5px; }
  /* O nome de quem pagou é o que importa: sobra mais largura para ele. */
  .mov { gap: 11px; padding: 12px 13px; }
  .mov .icone-mov { width: 36px; height: 36px; border-radius: 11px; }
  .mov .corpo strong { font-size: 13.5px; }
  .mov .valor { font-size: 14.5px; }
  .mov .seta { display: none; }
  .dia-tempo { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .acao-rapida, .mov, .mov .seta { transition: none; }
  .acao-rapida:hover { transform: none; }
}