/* ═══════════════════════════════════════════════════════════════════════════
   KARAMELOO — MEU BANCO (#screenBanco) · v2
   ═══════════════════════════════════════════════════════════════════════════
   Dono único do estilo desta tela. Carrega por último no index.html.

   Por que existe, levantado no código antes de mexer:
     • tela ESCURA dentro de um site claro — `styles.css:5411` pinta o card de
       saldo com `linear-gradient(145deg,rgba(18,22,35,.92),rgba(12,16,28,.88))`
       e sombra dourada. É a mesma queixa que motivou a v2 do perfil;
     • `border-radius:20px` e `box-shadow:0 18px 50px rgba(0,0,0,.45)` — a LEI
       01 do cofre proíbe "radius gigante em tudo" e "sombras coloridas";
     • largura travada em 920px, deixando ~500px de vão em cada lado a 1920.

   Esta é a tela onde o editor confere DINHEIRO. Contraste aqui não é detalhe
   de acessibilidade: valor em Real é o texto mais importante da página, e ele
   era branco sobre gradiente escuro.

   Cérebro: LEIS/01 - Design Anti-IA · 23 - SaaS Anti Generico/Checklist -
   Dashboard SaaS Operacional · 30 - Marketplace/Guia - Dashboard Operacional.
   ═══════════════════════════════════════════════════════════════════════════ */

#screenBanco{
  --b-papel:#ffffff;
  --b-papel2:#faf7f1;
  --b-tinta:#111827;
  --b-mut:#4b5563;
  --b-soft:#5c6573;
  --b-linha:rgba(17,24,39,.12);
  --b-ouro:#fcbc1d;
  --b-ouro-ink:#7a5d10;
  --b-ok:#1f7a45;
  --b-alerta:#8a5a00;
  --b-erro:#a3341f;
  --b-r:4px;
  --b-dur:220ms;
  --b-ease:cubic-bezier(.16,1,.3,1);
}

/* NÃO colocar display aqui: `.screen{display:none}` / `.screen.show` é o
   roteamento do app. Um display na regra base empilha as telas — o bug que já
   deixou duas visíveis ao mesmo tempo. */

/* O reset global pinta p/span/label de #111 com !important. Escopado à tela,
   a cor volta a descer do pai. */
#screenBanco p, #screenBanco span, #screenBanco small, #screenBanco strong,
#screenBanco b, #screenBanco div, #screenBanco li, #screenBanco label{
  color:inherit !important;
}

/* ── casca ────────────────────────────────────────────────────────────────── */
/* Medido: a barra do topo do site ocupa 1680px com 120px de recuo de cada lado
   numa janela de 1920. Com a tela em 920 (ou mesmo em 1180) sobrava uma faixa
   vazia enorme dos dois lados, e a página parecia estreita perto do próprio
   cabeçalho. Agora segue o mesmo ritmo do site. */
#screenBanco .banco-shell{
  max-width:1680px !important;      /* era 920 */
  margin:0 auto !important;
  padding:24px 120px 48px !important;
  color:var(--b-tinta) !important;
}
@media (max-width:1500px){
  #screenBanco .banco-shell{ padding-inline:48px !important }
}
@media (max-width:1100px){
  #screenBanco .banco-shell{ padding-inline:24px !important }
}

#screenBanco .banco-header{
  border-bottom:1px solid var(--b-linha);
  padding-bottom:16px !important;
  margin-bottom:18px;
}
#screenBanco .banco-header__title{
  color:var(--b-tinta) !important;
  font-weight:800; letter-spacing:-.02em;
}
#screenBanco .banco-header__sub{ color:var(--b-mut) !important }
#screenBanco .banco-header__icon{
  background:var(--b-papel2) !important;
  border:1px solid var(--b-linha) !important;
  color:var(--b-ouro-ink) !important;
  border-radius:var(--b-r) !important;
  box-shadow:none !important;
}
#screenBanco .banco-back{
  background:var(--b-papel) !important;
  border:1px solid var(--b-linha) !important;
  color:var(--b-tinta) !important;
  border-radius:var(--b-r) !important;
  font-weight:700;
}
#screenBanco .banco-back:hover{ border-color:rgba(17,24,39,.28) !important }

/* ── faixa de aviso ──────────────────────────────────────────────────────── */
#screenBanco .banco-banner{
  background:var(--b-papel2) !important;
  border:1px solid var(--b-linha) !important;
  border-left:3px solid var(--b-ouro) !important;
  border-radius:var(--b-r) !important;
  color:var(--b-mut) !important;
  box-shadow:none !important;
}
#screenBanco .banco-banner strong{ color:var(--b-tinta) !important }
#screenBanco .banco-banner__icon{ color:var(--b-ouro-ink) !important; background:transparent !important }
#screenBanco .banco-banner__action{
  background:var(--b-ouro) !important; color:#1c1405 !important;
  border:1px solid var(--b-ouro-ink) !important; border-radius:var(--b-r) !important;
  font-weight:800; white-space:nowrap;
}
#screenBanco .banco-banner__action:hover{ background:#b98f1f !important }

/* ── grade ───────────────────────────────────────────────────────────────── */
#screenBanco .banco-grid{
  grid-template-columns:minmax(0,1.55fr) minmax(320px,.75fr) !important;
  gap:18px !important;
  align-items:start !important;
}
/* A coluna da direita tem dois cards curtos; o histórico à esquerda é longo.
   Sem isto sobrava um vão branco de centenas de pixels à direita da lista.
   Grudada, ela acompanha a rolagem e o simulador fica sempre à mão — que é
   quando o editor de fato usa. */
#screenBanco .banco-col-side{
  position:sticky !important;
  top:176px;                       /* altura do topo fixo do site */
  max-height:calc(100vh - 196px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
@media (max-width:980px){
  #screenBanco .banco-grid{ grid-template-columns:1fr !important }
  #screenBanco .banco-col-side{
    position:static !important; max-height:none; overflow:visible;
  }
}

/* ── cartão de saldo ─────────────────────────────────────────────────────── */
/* Era o bloco escuro com gradiente e sombra dourada. Agora é papel, e o número
   pega o peso pela tipografia, não pelo efeito. */
#screenBanco .banco-balance-card{
  background:var(--b-papel) !important;
  border:1px solid var(--b-linha) !important;
  border-radius:var(--b-r) !important;
  box-shadow:0 10px 30px rgba(17,24,39,.07) !important;
}
#screenBanco .banco-balance-card__bg{ display:none !important }
#screenBanco .banco-balance-card__content{ padding:22px 22px 20px !important }
#screenBanco .banco-balance-card__label{
  color:var(--b-soft) !important;
  font-size:.74rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
}
#screenBanco .banco-balance-card__badge{
  background:var(--b-papel2) !important;
  border:1px solid var(--b-linha) !important;
  color:var(--b-mut) !important;
  border-radius:100px !important; font-weight:700; font-size:.74rem;
}
/* Número principal: tabular-nums para os dígitos não dançarem quando o valor
   muda, que é o que mais denuncia painel financeiro mal feito. */
#screenBanco .banco-balance-card__value{
  color:var(--b-tinta) !important;
  font-size:clamp(2rem, 4vw, 2.7rem); font-weight:800;
  letter-spacing:-.03em; line-height:1.1;
  font-variant-numeric:tabular-nums; margin-top:6px;
}
#screenBanco .banco-kpi-ctx{
  color:var(--b-soft) !important; font-size:.82rem; margin-top:4px;
}

/* ── os dois KPIs de apoio ───────────────────────────────────────────────── */
/* São botões: clicar filtra o histórico. "Métrica boa tem ação". */
#screenBanco .banco-kpis{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  margin-top:20px; padding-top:18px; border-top:1px solid var(--b-linha);
}
#screenBanco .banco-kpi{
  display:flex; flex-direction:column; gap:3px; align-items:flex-start;
  text-align:left; cursor:pointer; padding:12px 14px;
  background:var(--b-papel2) !important;
  border:1px solid var(--b-linha) !important;
  border-radius:var(--b-r);
  transition:border-color var(--b-dur) var(--b-ease), background var(--b-dur) var(--b-ease);
}
#screenBanco .banco-kpi:hover{
  border-color:rgba(17,24,39,.26) !important; background:#f5f1e8 !important;
}
#screenBanco .banco-kpi:focus-visible{ outline:2px solid var(--b-ouro-ink); outline-offset:2px }
#screenBanco .banco-kpi__label{
  color:var(--b-soft) !important;
  font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
}
#screenBanco .banco-kpi__value{
  color:var(--b-tinta) !important;
  font-size:1.28rem; font-weight:800; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
#screenBanco .banco-kpi__ctx{ color:var(--b-mut) !important; font-size:.78rem }

/* ── ações ───────────────────────────────────────────────────────────────── */
#screenBanco .banco-balance-actions{ margin-top:18px; gap:10px !important }
#screenBanco .banco-action-primary{
  background:var(--b-ouro) !important; color:#1c1405 !important;
  border:1px solid var(--b-ouro-ink) !important; border-radius:var(--b-r) !important;
  font-weight:800 !important; box-shadow:none !important;
}
#screenBanco .banco-action-primary:hover{ background:#b98f1f !important }
#screenBanco .banco-action-secondary{
  background:var(--b-papel) !important; color:var(--b-tinta) !important;
  border:1px solid var(--b-linha) !important; border-radius:var(--b-r) !important;
  font-weight:700 !important;
}
#screenBanco .banco-action-secondary:hover{ border-color:rgba(17,24,39,.28) !important }

/* ── PAINEL DE DESEMPENHO ────────────────────────────────────────────────── */
#screenBanco .banco-perf{
  background:var(--b-papel) !important;
  border:1px solid var(--b-linha) !important;
  border-radius:var(--b-r) !important;
  padding:20px 22px 22px;
}
#screenBanco .banco-perf__head{
  display:flex; flex-wrap:wrap; gap:12px;
  align-items:flex-end; justify-content:space-between;
  padding-bottom:16px; border-bottom:1px solid var(--b-linha);
}
#screenBanco .banco-perf__title{
  color:var(--b-tinta) !important;
  font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
}
#screenBanco .banco-perf__sub{ color:var(--b-soft) !important; font-size:.8rem; margin-top:3px }

/* seletor de período: comanda KPIs, gráfico e ranking de uma vez */
#screenBanco .banco-perf__periodos{ display:flex; gap:0; border:1px solid var(--b-linha); border-radius:var(--b-r); overflow:hidden }
#screenBanco .banco-perf__periodos button{
  background:var(--b-papel) !important; color:var(--b-mut) !important;
  border:0 !important; border-right:1px solid var(--b-linha) !important;
  padding:7px 13px; font-size:.78rem; font-weight:700; cursor:pointer;
  transition:background var(--b-dur) var(--b-ease), color var(--b-dur) var(--b-ease);
}
#screenBanco .banco-perf__periodos button:last-child{ border-right:0 !important }
#screenBanco .banco-perf__periodos button:hover{ background:var(--b-papel2) !important }
#screenBanco .banco-perf__periodos button.is-active{
  background:var(--b-tinta) !important; color:#fff !important;
}
#screenBanco .banco-perf__periodos button:focus-visible{ outline:2px solid var(--b-ouro-ink); outline-offset:-2px }

/* Os estilos dos controles de simulação (.banco-demo*) saíram junto com os
   botões. O gerador de dados continua em app.js — é o que impede o painel de
   abrir zerado em localhost. */

/* ── KPIs com comparação ─────────────────────────────────────────────────── */
#screenBanco .banco-perf__kpis{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px; margin:16px 0 18px;
}
#screenBanco .banco-mkpi{
  display:flex; flex-direction:column; gap:4px; align-items:flex-start; text-align:left;
  padding:13px 14px;
  background:var(--b-papel2) !important;
  border:1px solid var(--b-linha) !important;
  border-radius:var(--b-r);
}
#screenBanco .banco-mkpi--acao{ cursor:pointer; transition:border-color var(--b-dur) var(--b-ease) }
#screenBanco .banco-mkpi--acao:hover{ border-color:rgba(17,24,39,.28) !important }
#screenBanco .banco-mkpi--acao:focus-visible{ outline:2px solid var(--b-ouro-ink); outline-offset:2px }
#screenBanco .banco-mkpi__label{
  color:var(--b-soft) !important;
  font-size:.68rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
}
#screenBanco .banco-mkpi__linha{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap }
#screenBanco .banco-mkpi__linha strong{
  color:var(--b-tinta) !important;
  font-size:1.22rem; font-weight:800; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
#screenBanco .banco-mkpi__ctx{ color:var(--b-mut) !important; font-size:.75rem }

/* verde/vermelho aqui têm significado: subiu ou caiu contra o período anterior */
#screenBanco .banco-delta{ font-size:.74rem; font-weight:800; white-space:nowrap }
#screenBanco .banco-delta--sobe{ color:#15703d !important }
#screenBanco .banco-delta--desce{ color:#9a3412 !important }
#screenBanco .banco-delta--igual{ color:var(--b-soft) !important }

/* ── caixas: gráfico e ranking ───────────────────────────────────────────── */
#screenBanco .banco-perf__grid{
  display:grid; grid-template-columns:1.35fr 1fr; gap:14px;
}
#screenBanco .banco-perf__box{
  border:1px solid var(--b-linha); border-radius:var(--b-r);
  background:var(--b-papel) !important; padding:14px 16px 16px;
}
#screenBanco .banco-perf__boxHd{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  color:var(--b-tinta) !important;
  font-size:.72rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  padding-bottom:12px; border-bottom:1px solid var(--b-linha); margin-bottom:14px;
}
#screenBanco .banco-perf__boxHd small{
  color:var(--b-soft) !important; font-size:.68rem; font-weight:600;
  letter-spacing:0; text-transform:none;
}
#screenBanco .banco-perf__vazio{
  color:var(--b-soft) !important; font-size:.82rem; padding:26px 0; text-align:center;
}

/* ── barras por mês ──────────────────────────────────────────────────────── */
/* Grade de divs, sem biblioteca. A escala vai escrita no cabeçalho da caixa. */
/* a área existe para a linha de média poder ser posicionada por cima */
#screenBanco .banco-chart-area{ position:relative }
#screenBanco .banco-chart{
  display:flex; align-items:flex-end; justify-content:flex-start;
  gap:6px; height:190px;
}
#screenBanco .banco-bar{
  flex:1 1 0; min-width:0; max-width:74px;   /* com 2 barras não vira laje */
  display:flex; flex-direction:column; align-items:center; gap:6px; height:100%;
}
/* rótulo compacto (558, 1,1k). O valor cheio fica no title da barra — cortar
   um número no meio faz parecer que a plataforma errou a conta. */
#screenBanco .banco-bar__valor{
  color:var(--b-soft) !important; font-size:.62rem; font-weight:700;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
#screenBanco .banco-bar.is-acima .banco-bar__valor,
#screenBanco .banco-bar.is-corrente .banco-bar__valor{ color:var(--b-tinta) !important }
/* trilho chapado: a LEI 01 do cofre pede fundo sólido, sem gradiente */
#screenBanco .banco-bar__haste{
  flex:1; width:100%; display:flex; align-items:flex-end;
  background:rgba(17,24,39,.05);
  border-radius:2px;
}
#screenBanco .banco-bar__haste i{
  display:block; width:100%; border-radius:2px 2px 0 0;
  background:#d8c48a;                      /* abaixo da média: tom apagado */
  transition:height 320ms var(--b-ease);
}
/* acima da média ganha o dourado cheio; o intervalo corrente, o verde.
   Cor aqui significa alguma coisa — não é enfeite. */
#screenBanco .banco-bar.is-acima .banco-bar__haste i{ background:var(--b-ouro) }
#screenBanco .banco-bar.is-corrente .banco-bar__haste i{ background:var(--b-ok) }
#screenBanco .banco-bar.is-corrente .banco-bar__mes{ color:var(--b-tinta) !important; font-weight:800 }
/* intervalo sem nada: risco na base, para "zero" não parecer "não existe" */
#screenBanco .banco-bar.is-zero .banco-bar__haste{
  box-shadow:inset 0 -2px 0 0 rgba(17,24,39,.18);
}
#screenBanco .banco-bar.is-zero .banco-bar__valor{ color:rgba(17,24,39,.3) !important }
#screenBanco .banco-bar__mes{
  color:var(--b-mut) !important; font-size:.68rem; font-weight:700;
  text-transform:uppercase; white-space:nowrap;
}

/* linha de média */
#screenBanco .banco-chart-media{
  position:absolute; left:0; right:0; height:0; pointer-events:none;
  margin-bottom:26px;                       /* não conta a faixa dos rótulos */
}
#screenBanco .banco-chart-media span{
  display:block; border-top:1px dashed rgba(17,24,39,.35);
}
#screenBanco .banco-chart-media b{
  position:absolute; right:0; top:-15px;
  background:var(--b-papel); padding:0 4px;
  color:var(--b-soft) !important; font-size:.64rem; font-weight:700;
  font-variant-numeric:tabular-nums;
}
#screenBanco .banco-chart-rodape{
  margin-top:10px; padding-top:9px; border-top:1px solid var(--b-linha);
  color:var(--b-soft) !important; font-size:.72rem;
}

/* ── ranking de clientes ─────────────────────────────────────────────────── */
#screenBanco .banco-cli{ padding:9px 0; border-bottom:1px solid var(--b-linha) }
#screenBanco .banco-cli:last-child{ border-bottom:0 }
#screenBanco .banco-cli__topo{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
}
#screenBanco .banco-cli__nome{
  color:var(--b-tinta) !important; font-weight:700; font-size:.86rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#screenBanco .banco-cli__topo strong{
  color:var(--b-tinta) !important; font-weight:800; font-size:.86rem;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
#screenBanco .banco-cli__barra{
  height:5px; border-radius:100px; background:rgba(17,24,39,.07); margin:6px 0 4px;
}
#screenBanco .banco-cli__barra i{
  display:block; height:100%; border-radius:100px; background:var(--b-ouro);
}
#screenBanco .banco-cli__ctx{ color:var(--b-soft) !important; font-size:.72rem }

@media (max-width:1180px){
  #screenBanco .banco-perf__kpis{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  #screenBanco .banco-perf__grid{ grid-template-columns:1fr }
}

/* ── média de caixa ──────────────────────────────────────────────────────── */
/* Entrou no lugar do simulador de recebimento. A diferença que importa: aqui
   nenhum número é projetado — tudo sai dos pedidos que já foram pagos. */
#screenBanco .banco-media-card__head{ padding:14px 16px !important }

#screenBanco .banco-media-principal{
  padding:16px !important;
  border-bottom:1px solid var(--b-linha) !important;
}
#screenBanco .banco-media-principal > span{
  display:block !important;
  color:var(--b-soft) !important;
  font-size:.74rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
}
#screenBanco .banco-media-principal > strong{
  display:block !important;
  margin-top:6px !important;
  color:var(--b-tinta) !important;
  font-size:clamp(1.6rem, 3vw, 2.1rem); font-weight:800;
  letter-spacing:-.03em; line-height:1.1;
  font-variant-numeric:tabular-nums;
}
#screenBanco .banco-media-principal > small{
  display:block !important;
  margin-top:5px !important;
  color:var(--b-mut) !important;
  font-size:.8rem; font-weight:600;
}

#screenBanco .banco-media-linhas > div{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  padding:11px 16px !important;
  border-bottom:1px solid var(--b-linha) !important;
}
#screenBanco .banco-media-linhas > div:last-child{ border-bottom:0 !important }
#screenBanco .banco-media-linhas span{
  color:var(--b-mut) !important; font-size:.84rem; font-weight:600;
}
#screenBanco .banco-media-linhas strong{
  color:var(--b-tinta) !important; font-size:.9rem; font-weight:800;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* ── cartões de seção ────────────────────────────────────────────────────── */
#screenBanco .banco-status-card,
#screenBanco .banco-section-card,
#screenBanco .banco-media-card,
#screenBanco .banco-split-card{
  background:var(--b-papel) !important;
  border:1px solid var(--b-linha) !important;
  border-radius:var(--b-r) !important;
  box-shadow:none !important;
  color:var(--b-tinta) !important;
}
#screenBanco .banco-status-card__head,
#screenBanco .banco-section-card__head,
#screenBanco .banco-media-card__head,
#screenBanco .banco-split-card__head{
  background:transparent !important;
  border-bottom:1px solid var(--b-linha) !important;
  color:var(--b-tinta) !important;
  font-size:.76rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
}
#screenBanco .banco-section-card__head svg,
#screenBanco .banco-status-card__head svg,
#screenBanco .banco-split-card__head svg{ color:var(--b-ouro-ink) !important }

/* ── estados da conta ────────────────────────────────────────────────────── */
#screenBanco .banco-account-state{
  background:var(--b-papel2) !important;
  border:1px solid var(--b-linha) !important;
  border-radius:var(--b-r) !important;
  color:var(--b-tinta) !important;
}
/* O redesign.css tem `#screenBanco .banco-account-state div div{color:#aab2c0
   !important}` — cinza claro do tema escuro, que sobre o papel dá contraste
   2.0. Aquele seletor tem um tipo a mais que o meu, então empatar em
   especificidade e vencer por ordem de carga exige repetir o `div div`. */
#screenBanco .banco-account-state div,
#screenBanco .banco-account-state div div,
#screenBanco .banco-account-note,
#screenBanco .banco-account-note li{ color:var(--b-mut) !important }
#screenBanco .banco-account-state strong{ color:var(--b-tinta) !important }
#screenBanco .banco-account-state__icon{
  background:var(--b-papel) !important; border:1px solid var(--b-linha) !important;
  color:var(--b-mut) !important; font-weight:800;
}
#screenBanco .banco-account-state--active{ border-left:3px solid var(--b-ok) !important }
#screenBanco .banco-account-state--active .banco-account-state__icon{ color:var(--b-ok) !important }
#screenBanco .banco-account-state--not-configured,
#screenBanco .banco-account-state--analysis{ border-left:3px solid var(--b-ouro) !important }
#screenBanco .banco-account-note{ color:var(--b-mut) !important }
#screenBanco .banco-account-note div{ color:var(--b-tinta) !important; font-weight:700 }
#screenBanco .banco-connect-btn{
  background:var(--b-ouro) !important; color:#1c1405 !important;
  border:1px solid var(--b-ouro-ink) !important; border-radius:var(--b-r) !important;
  font-weight:800 !important;
}
#screenBanco .hint{ color:var(--b-soft) !important }
#screenBanco .banco-spinner,
#screenBanco .spinner-small{
  border-color:rgba(17,24,39,.15) !important;
  border-top-color:var(--b-ouro) !important;
}
#screenBanco .banco-status-card__loading{ color:var(--b-mut) !important }
#screenBanco .banco-account-erro{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:26px 20px; text-align:center;
}
#screenBanco .banco-account-erro div{ color:var(--b-erro) !important; font-weight:700 }
#screenBanco .banco-account-erro small{ color:var(--b-soft) !important }
#screenBanco .banco-account-erro button{
  margin-top:8px;
  background:var(--b-papel) !important; color:var(--b-tinta) !important;
  border:1px solid var(--b-linha) !important; border-radius:var(--b-r) !important;
  font-weight:800;
}

/* ── filtros do histórico ────────────────────────────────────────────────── */
/* Era flex com wrap e sem largura definida: cada select esticava para os 754px
   da barra inteira e a busca ia para outra linha. Grade explícita — busca larga,
   filtros do tamanho do conteúdo, exportar encostado na direita. */
#screenBanco .banco-history-tools{
  display:grid !important;
  grid-template-columns:minmax(200px,1fr) 170px 170px auto auto;
  gap:8px !important;
  align-items:center;
  padding:12px 18px !important;
  background:var(--b-papel2) !important;
  border-bottom:1px solid var(--b-linha) !important;
}
/* a busca é o 3º filho no HTML; vai para a primeira coluna */
#screenBanco .banco-history-tools > input{ grid-column:1; grid-row:1 }
#screenBanco .banco-history-tools > select:nth-of-type(1){ grid-column:2; grid-row:1 }
#screenBanco .banco-history-tools > select:nth-of-type(2){ grid-column:3; grid-row:1 }
#screenBanco .banco-history-tools > button:nth-of-type(1){ grid-column:4; grid-row:1 }
#screenBanco .banco-history-tools > button:nth-of-type(2){ grid-column:5; grid-row:1 }

#screenBanco .banco-history-tools select,
#screenBanco .banco-history-tools input,
#screenBanco .banco-history-tools button{
  width:100%; min-width:0; padding:8px 10px; font-size:.84rem;
  background:var(--b-papel) !important;
  border:1px solid var(--b-linha) !important;
  color:var(--b-tinta) !important;
  border-radius:var(--b-r) !important;
  font-weight:600;
}
#screenBanco .banco-history-tools input::placeholder{ color:var(--b-soft) !important }
#screenBanco .banco-history-tools button{ font-weight:800; color:var(--b-mut) !important }
#screenBanco .banco-history-tools button:hover{ border-color:rgba(17,24,39,.28) !important }
#screenBanco .banco-history-tools select:focus-visible,
#screenBanco .banco-history-tools input:focus-visible,
#screenBanco .banco-history-tools button:focus-visible{
  outline:2px solid var(--b-ouro-ink); outline-offset:1px;
}

/* ── cabeçalho e linhas ──────────────────────────────────────────────────── */
#screenBanco .banco-history-head{
  display:grid; grid-template-columns:1fr auto 120px;
  gap:12px; align-items:center;
  padding:10px 18px;
  border-bottom:1px solid var(--b-linha);
  background:var(--b-papel2) !important;
}
#screenBanco .banco-history-head span,
#screenBanco .banco-history-sort{
  color:var(--b-soft) !important;
  font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  background:transparent !important; border:0 !important; padding:0 !important;
}
#screenBanco .banco-history-sort{ cursor:pointer; text-align:left }
#screenBanco .banco-history-head > span{ text-align:center }
#screenBanco .banco-history-sort:last-child{ text-align:right }
#screenBanco .banco-history-sort:hover{ color:var(--b-tinta) !important }
#screenBanco .banco-history-sort.is-active{ color:var(--b-ouro-ink) !important }

#screenBanco .banco-history-row{
  display:grid !important; grid-template-columns:1fr auto 120px;
  gap:12px; align-items:center;
  padding:13px 18px !important;
  border-bottom:1px solid var(--b-linha) !important;
  background:transparent !important;
  transition:background var(--b-dur) var(--b-ease);
}
#screenBanco .banco-history-row:last-child{ border-bottom:0 !important }
#screenBanco .banco-history-row:hover{ background:var(--b-papel2) !important }
#screenBanco .banco-history-row__main strong{
  color:var(--b-tinta) !important; font-weight:700; font-size:.92rem;
}
#screenBanco .banco-history-row__main span{
  color:var(--b-soft) !important; font-size:.78rem;
}
#screenBanco .banco-history-row__side{
  display:contents;   /* status e valor caem direto nas colunas da grade */
}
#screenBanco .banco-history-row__side strong{
  color:var(--b-tinta) !important; font-weight:800; text-align:right;
  font-variant-numeric:tabular-nums;
}

/* status com cor de significado, não decorativa */
#screenBanco .banco-status-pill{
  justify-self:center;
  padding:3px 10px; border-radius:100px;
  font-size:.7rem; font-weight:800; letter-spacing:.03em;
  border:1px solid transparent;
}
#screenBanco .banco-status-pill--paid{
  background:#e8f3ec !important; color:#155f36 !important; border-color:#bcdcc8 !important;
}
#screenBanco .banco-status-pill--pending{
  background:#fdf3dd !important; color:#7a5310 !important; border-color:#e8d4a0 !important;
}
#screenBanco .banco-status-pill--draft{
  background:#f1f2f4 !important; color:#4b5563 !important; border-color:#dcdfe4 !important;
}
#screenBanco .banco-status-pill--blocked{
  background:#fbeae6 !important; color:#8f2d17 !important; border-color:#eec6bb !important;
}

/* ── estados da lista ────────────────────────────────────────────────────── */
#screenBanco .banco-historico__empty{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:44px 24px; text-align:center;
  color:var(--b-mut) !important;
}
#screenBanco .banco-historico__empty span{
  color:var(--b-tinta) !important; font-weight:800; font-size:1rem;
}
#screenBanco .banco-historico__empty small{
  color:var(--b-soft) !important; max-width:46ch; line-height:1.55;
}
#screenBanco .banco-historico__empty button{
  margin-top:10px;
  background:var(--b-papel) !important; color:var(--b-tinta) !important;
  border:1px solid var(--b-linha) !important; border-radius:var(--b-r) !important;
  padding:8px 16px; font-weight:800; cursor:pointer;
}
#screenBanco .banco-historico__empty button:hover{ border-color:rgba(17,24,39,.3) !important }
#screenBanco .banco-historico__empty--erro span{ color:var(--b-erro) !important }

#screenBanco .banco-history-skeleton{
  display:flex; gap:12px; align-items:center;
  padding:15px 18px; border-bottom:1px solid var(--b-linha);
}
#screenBanco .banco-history-skeleton span{
  display:block; height:11px; border-radius:2px;
  background:linear-gradient(90deg,#eceff3 25%,#f6f8fa 50%,#eceff3 75%);
  background-size:200% 100%;
  animation:bPulso 1.25s ease-in-out infinite;
}
#screenBanco .banco-history-skeleton span:first-child{ flex:1 }
#screenBanco .banco-history-skeleton span:last-child{ width:86px }
@keyframes bPulso{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

#screenBanco .banco-pagination{ gap:8px !important; padding:12px 18px !important }
#screenBanco .banco-pagination button{
  background:var(--b-papel) !important; color:var(--b-tinta) !important;
  border:1px solid var(--b-linha) !important; border-radius:var(--b-r) !important;
  font-weight:700;
}
#screenBanco .banco-pagination button:disabled{ color:var(--b-soft) !important; opacity:.55 }
#screenBanco .banco-pagination span{ color:var(--b-mut) !important; font-weight:700 }

/* ── simulador ───────────────────────────────────────────────────────────── */
/* ── botão Simular ───────────────────────────────────────────────────────── */
/* enquanto há valor digitado sem simular, o botão chama a atenção em dourado */

/* resultado velho: some o número em vez de mostrá-lo como se fosse o do campo */
@keyframes bPisca{
  0%   { background:#f3e6bd !important }
  100% { background:var(--b-papel2) !important }
}

/* ── split em barra ──────────────────────────────────────────────────────── */
#screenBanco .banco-split-card__body{ padding:16px 16px 4px !important; display:block !important }
#screenBanco .banco-split-bar{
  display:flex; height:10px; border-radius:100px; overflow:hidden;
  border:1px solid var(--b-linha);
}
#screenBanco .banco-split-bar__you{ background:var(--b-ok) }
#screenBanco .banco-split-bar__fee{ background:var(--b-ouro) }
#screenBanco .banco-split-legend{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px;
}
#screenBanco .banco-split-legend__item{ display:flex; flex-direction:column; gap:1px }
#screenBanco .banco-split-legend__item strong{
  font-size:1.15rem; font-weight:800; letter-spacing:-.02em;
}
#screenBanco .banco-split-legend__item--you strong{ color:var(--b-ok) !important }
#screenBanco .banco-split-legend__item--fee strong{ color:var(--b-ouro-ink) !important }
#screenBanco .banco-split-legend__item span{ color:var(--b-tinta) !important; font-weight:700; font-size:.84rem }
#screenBanco .banco-split-legend__item small{ color:var(--b-soft) !important; font-size:.74rem }
#screenBanco .banco-split-card__example{
  background:var(--b-papel2) !important;
  border-top:1px solid var(--b-linha) !important;
  color:var(--b-mut) !important;
}
#screenBanco .banco-split-card__example strong{ color:var(--b-tinta) !important }
#screenBanco .banco-split-card__example svg{ color:var(--b-ouro-ink) !important }

/* ── mobile ──────────────────────────────────────────────────────────────── */
@media (max-width:640px){
  #screenBanco .banco-shell{ padding:16px 14px 40px !important }
  #screenBanco .banco-kpis{ grid-template-columns:1fr }
  /* o botão ao lado do texto espremia a frase em dez linhas */
  #screenBanco .banco-banner{
    flex-direction:column !important; align-items:flex-start !important; gap:10px !important;
  }
  #screenBanco .banco-banner__action{ width:100%; text-align:center }
  #screenBanco .banco-balance-card__badge{ align-self:flex-start }
  #screenBanco .banco-perf{ padding:16px 14px 18px }
  #screenBanco .banco-perf__kpis{ grid-template-columns:1fr }
  #screenBanco .banco-perf__periodos{ width:100% }
  #screenBanco .banco-perf__periodos button{ flex:1; padding:8px 6px }
  #screenBanco .banco-chart{ height:150px; gap:5px }
  /* em 390px oito valores em cima das barras viram sopa de dígitos */
  #screenBanco .banco-bar__valor{ display:none }
  #screenBanco .banco-split-legend{ grid-template-columns:1fr }
  /* a grade de 3 colunas não cabe: cada linha vira bloco */
  #screenBanco .banco-history-head{ display:none }
  #screenBanco .banco-history-row{
    grid-template-columns:1fr auto; gap:6px 10px; align-items:start;
  }
  #screenBanco .banco-history-row__main{ grid-column:1 / -1 }
  #screenBanco .banco-status-pill{ justify-self:start }
  #screenBanco .banco-history-row__side strong{ text-align:right }
  /* busca ocupa a linha toda; filtros e exportar dividem a de baixo */
  #screenBanco .banco-history-tools{
    grid-template-columns:1fr 1fr auto auto;
  }
  #screenBanco .banco-history-tools > input{ grid-column:1 / -1 }
  #screenBanco .banco-history-tools > select:nth-of-type(1){ grid-column:1; grid-row:2 }
  #screenBanco .banco-history-tools > select:nth-of-type(2){ grid-column:2; grid-row:2 }
  #screenBanco .banco-history-tools > button:nth-of-type(1){ grid-column:3; grid-row:2 }
  #screenBanco .banco-history-tools > button:nth-of-type(2){ grid-column:4; grid-row:2 }
}

@media (prefers-reduced-motion:reduce){
  #screenBanco .banco-kpi,
  #screenBanco .banco-history-row,
  #screenBanco .banco-mkpi--acao,
  #screenBanco .banco-perf__periodos button,
  #screenBanco .banco-history-skeleton span,
}

/* Atividade reaproveita o desenho da media de caixa: sao dois cartoes com a
   mesma funcao (um numero grande + linhas de apoio), e desenhar diferente so
   faria a coluna parecer bagunçada. */
#screenBanco .banco-atividade-card{
  background:var(--b-papel) !important;
  border:1px solid var(--b-linha) !important;
  border-radius:var(--b-r) !important;
  box-shadow:none !important;
  color:var(--b-tinta) !important;
  margin-top:14px !important;
}
/* ── Fila do banco: "o que vem por ai" ── */
#screenBanco .banco-fila-card{
  background:var(--b-papel) !important;
  border:1px solid var(--b-linha) !important;
  border-radius:var(--b-r) !important;
  box-shadow:none !important;
  color:var(--b-tinta) !important;
  margin-top:14px !important;
}
#screenBanco .banco-fila-nota{
  padding:11px 16px !important;
  border-top:1px solid var(--b-linha) !important;
  color:var(--b-mut) !important;
  font-size:.82rem !important; line-height:1.45 !important;
}