/* ====================================================
MÓDULO BANCO - VISUAL PRÓPRIO (01/11/2026, revisto em 02/11/2026)

De propósito diferente do resto do app: a tela é um documento bancário. A cédula
verde com linhas de segurança é a única peça chamativa; o extrato é uma lista limpa
agrupada por dia, e a faixa de cima lembra que o dinheiro é real.

Uma fonte só (Manrope) com números de largura igual, para os valores alinharem na
coluna. A Georgia saiu: os números dela têm alturas diferentes e desalinhavam a linha.
Saída fica na cor do texto e só entrada ganha cor, para o extrato não virar uma
coluna inteira de vermelho.

Tudo fica dentro de .banco-cora. Cores só nestas variáveis. Os !important em botões e
campos existem porque evolutiva-app.css e o modo limpo pintam todo botão do app.
==================================================== */

.banco-cora {
  --banco-garrafa: #103c3a;
  --banco-garrafa-funda: #0a2a29;
  --banco-papel: #edf3e8;
  --banco-papel-linha: #d4e0cf;
  --banco-folha: #fbfdf9;
  --banco-tinta: #12302e;
  --banco-tinta-suave: #4a6562;
  --banco-ouro: #d3ad52;
  --banco-entrada: #17694f;
  --banco-saida: #a4372c;

  color: var(--banco-tinta);
  background: var(--banco-papel);
  border: 1px solid var(--banco-papel-linha);
  border-radius: 6px;
  overflow: hidden;
  font-size: 1rem;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum", "lnum";
  line-height: 1.4;
}

.banco-cora .banco-faixa {
  margin: 0;
  padding: 8px 24px;
  background: var(--banco-ouro);
  color: #2b2106;
  font-size: .875rem;
  font-weight: 700;
}

.banco-cora .banco-faixa-teste {
  background: #c9d3e2;
  color: #1c2a40;
}

.banco-cora .banco-cedula {
  position: relative;
  isolation: isolate;
  padding: 22px 24px;
  background: var(--banco-garrafa);
  color: var(--banco-papel);
  border-bottom: 2px dashed var(--banco-ouro);
}

.banco-cora .banco-seguranca {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #4fa593;
  stroke-width: .7;
  opacity: .34;
}

.banco-cora .banco-cedula-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.banco-cora .banco-cedula h2 {
  margin: 0;
  color: var(--banco-papel);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0;
}

.banco-cora .banco-contas {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid rgba(237, 243, 232, .45);
  border-radius: 6px;
}

.banco-cora .banco-contas button {
  width: auto !important;
  min-height: 34px !important;
  padding: 5px 16px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--banco-papel) !important;
  font-size: .875rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.banco-cora .banco-contas button.ativa {
  background: var(--banco-papel) !important;
  color: var(--banco-garrafa) !important;
}

.banco-cora .banco-saldo-rotulo {
  margin: 18px 0 0;
  color: #bcd2c6;
  font-size: .875rem;
  font-weight: 600;
}

.banco-cora .banco-saldo {
  margin: 2px 0 18px;
  color: #fff;
  font-size: clamp(2.25rem, 6vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.banco-cora .banco-cedula-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 32px;
}

.banco-cora .banco-mes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 36px;
  margin: 0;
}

.banco-cora .banco-mes dt {
  color: #bcd2c6;
  font-size: .8125rem;
  font-weight: 600;
}

.banco-cora .banco-mes dd {
  margin: 2px 0 0;
  font-size: 1.0625rem;
  font-weight: 700;
}

.banco-cora .banco-mes input {
  width: auto !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 3px 8px !important;
  border: 1px solid rgba(237, 243, 232, .45) !important;
  border-radius: 4px !important;
  background: var(--banco-garrafa-funda) !important;
  color: var(--banco-papel) !important;
  color-scheme: dark !important;
  font-size: .9375rem !important;
  font-weight: 600 !important;
}

.banco-cora .banco-cedula button.banco-botao-leve.banco-botao-leve {
  border-color: rgba(237, 243, 232, .45) !important;
  color: var(--banco-papel) !important;
}

.banco-cora .banco-abas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--banco-papel);
  border-bottom: 1px solid var(--banco-papel-linha);
}

.banco-cora .banco-abas button {
  --evo-brand: currentColor;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  min-height: 52px !important;
  padding: 8px 6px !important;
  border: 0 !important;
  border-top: 3px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--banco-tinta-suave) !important;
  font-size: .8125rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

.banco-cora .banco-abas button.ativa {
  border-top-color: var(--banco-garrafa) !important;
  background: var(--banco-folha) !important;
  color: var(--banco-garrafa) !important;
}

.banco-cora .banco-abas button:not(.ativa):hover {
  background: #e3ecdd !important;
  color: var(--banco-garrafa) !important;
}

.banco-cora .banco-abas svg {
  flex: none;
}

.banco-cora .banco-aba-contagem {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--banco-ouro);
  color: #2b2106;
  font-size: .75rem;
  font-weight: 800;
  text-align: center;
}

.banco-cora .banco-folha {
  padding: 20px 24px 26px;
  background: var(--banco-folha);
}

.banco-cora .banco-ferramentas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.banco-cora .banco-filtros {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: 6px;
  background: var(--banco-papel);
}

.banco-cora .banco-filtros button {
  width: auto !important;
  min-height: 32px !important;
  padding: 4px 14px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--banco-tinta-suave) !important;
  font-size: .875rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.banco-cora .banco-filtros button.ativa {
  background: var(--banco-garrafa) !important;
  color: var(--banco-papel) !important;
}

.banco-cora .banco-busca.banco-busca {
  flex: 1 1 220px;
  width: auto !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 6px 12px !important;
  border: 1px solid var(--banco-papel-linha) !important;
  border-radius: 4px !important;
  background: #fff !important;
  box-shadow: none !important;
  color: var(--banco-tinta) !important;
  font-size: .9375rem !important;
}

.banco-cora .banco-contagem {
  margin: 12px 0 0;
  color: var(--banco-tinta-suave);
  font-size: .8125rem;
  font-weight: 600;
}

.banco-cora .banco-dia + .banco-dia {
  margin-top: 6px;
}

.banco-cora .banco-dia h3 {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 14px 0 0;
  padding: 0 0 6px;
  border-bottom: 2px solid var(--banco-garrafa);
  color: var(--banco-garrafa);
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: 0;
}

.banco-cora .banco-dia h3 span {
  color: var(--banco-tinta-suave);
  font-weight: 600;
}

.banco-cora .banco-razao {
  margin: 0;
  padding: 0;
  list-style: none;
}

.banco-cora .banco-razao li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 136px;
  gap: 16px;
  align-items: center;
  padding: 10px 6px;
  border-bottom: 1px solid var(--banco-papel-linha);
}

.banco-cora .banco-razao li:last-child {
  border-bottom: 0;
}

.banco-cora .banco-razao li:hover,
.banco-cora .banco-tabela tbody tr:hover td {
  background: var(--banco-papel) !important;
}

.banco-cora .banco-razao-texto {
  min-width: 0;
  font-size: .9375rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.banco-cora small {
  display: block;
  margin-top: 1px;
  color: var(--banco-tinta-suave);
  font-size: .8125rem;
  font-weight: 500;
}

.banco-cora .banco-razao-valor,
.banco-cora .banco-num {
  font-weight: 700;
  white-space: nowrap;
}

.banco-cora .banco-razao-valor {
  font-size: .9375rem;
  text-align: right;
}

.banco-cora .banco-razao-acao.banco-razao-acao {
  white-space: nowrap !important;
  grid-column: 3;
  justify-self: end;
}

.banco-cora .banco-razao-acao.banco-situacao {
  font-size: .8125rem;
  white-space: nowrap;
}

.banco-cora .banco-lancar {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--banco-papel-linha);
  border-radius: 6px;
  background: var(--banco-papel);
}

.banco-cora .banco-lancar .banco-acoes {
  grid-column: 1 / -1;
  align-items: center;
  gap: 10px;
}

.banco-cora .banco-entrada { color: var(--banco-entrada); }
.banco-cora .banco-saida { color: var(--banco-tinta); }

.banco-cora .banco-tabela {
  width: 100%;
  margin-top: 14px;
  border-collapse: collapse;
  background: transparent;
  box-shadow: none;
}

.banco-cora .banco-tabela th {
  padding: 8px !important;
  border-bottom: 2px solid var(--banco-garrafa) !important;
  background: transparent !important;
  color: var(--banco-garrafa) !important;
  font-size: .8125rem !important;
  font-weight: 800 !important;
  text-align: left !important;
}

.banco-cora .banco-tabela td {
  padding: 10px 8px !important;
  border-bottom: 1px solid var(--banco-papel-linha) !important;
  background: transparent !important;
  color: var(--banco-tinta) !important;
  font-size: .9375rem !important;
  vertical-align: middle !important;
}

.banco-cora .banco-cheque {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--banco-papel-linha);
  border-radius: 6px;
  background: var(--banco-papel);
}

.banco-cora .banco-grupo {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  color: var(--banco-garrafa);
  font-size: .9375rem;
  font-weight: 800;
  letter-spacing: 0;
}

.banco-cora .banco-campo {
  display: block;
  margin: 0;
  color: var(--banco-garrafa);
  font-size: .8125rem;
  font-weight: 700;
}

.banco-cora .banco-campo-largo,
.banco-cora .banco-cheque .banco-nota {
  grid-column: 1 / -1;
}

.banco-cora .banco-campo input,
.banco-cora .banco-campo select {
  width: 100% !important;
  min-height: 42px !important;
  margin: 4px 0 0 !important;
  padding: 8px 10px !important;
  border: 1px solid #b7c9b4 !important;
  border-radius: 4px !important;
  background: #fff !important;
  box-shadow: none !important;
  color: var(--banco-tinta) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
}

.banco-cora button.banco-botao.banco-botao,
.banco-cora button.banco-botao-leve.banco-botao-leve {
  width: auto !important;
  min-height: 42px !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-size: .9375rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.banco-cora button.banco-botao.banco-botao {
  justify-self: start !important;
  padding: 10px 22px !important;
  border: 0 !important;
  background: var(--banco-garrafa) !important;
  color: var(--banco-papel) !important;
}

.banco-cora button.banco-botao-leve.banco-botao-leve {
  min-height: 36px !important;
  padding: 6px 12px !important;
  border: 1px solid var(--banco-garrafa) !important;
  background: transparent !important;
  color: var(--banco-garrafa) !important;
  font-size: .875rem !important;
}

.banco-cora .banco-mais {
  margin-top: 14px;
}

.banco-cora .banco-envio-lote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 6px;
  background: var(--banco-papel);
}

.banco-cora .banco-total-lote {
  font-size: .9375rem;
  font-weight: 700;
}

.banco-cora .banco-marcar {
  width: 20px !important;
  height: 20px !important;
  min-height: 0 !important;
  margin: 0 !important;
  accent-color: var(--banco-garrafa);
}

.banco-cora .banco-subtitulo {
  margin: 26px 0 0;
  color: var(--banco-garrafa);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0;
}

.banco-cora .banco-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.banco-cora .banco-situacao {
  font-size: .875rem;
  font-weight: 700;
}

.banco-cora .banco-situacao::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
}

.banco-cora .banco-espera { color: #8a6412; }
.banco-cora .banco-certo { color: var(--banco-entrada); }
.banco-cora .banco-erro { color: var(--banco-saida); }
.banco-cora .banco-neutro { color: var(--banco-tinta-suave); }

.banco-cora .banco-nota {
  margin: 8px 0 0;
  color: var(--banco-tinta-suave);
  font-size: .875rem;
}

.banco-cora .banco-alerta {
  margin: 0 0 12px;
  padding: 11px 14px;
  border-left: 4px solid var(--banco-ouro);
  background: #fbf3dc;
  color: #4b3a0a;
  font-size: .9rem;
}

.banco-cora .banco-vazio {
  margin: 14px 0 0;
  color: var(--banco-tinta-suave);
}

.banco-cora button:focus-visible,
.banco-cora input:focus-visible,
.banco-cora select:focus-visible,
.banco-cora a:focus-visible {
  outline: 2px solid var(--banco-ouro);
  outline-offset: 2px;
}

.banco-cora button {
  transform: none !important;
  text-shadow: none !important;
}

.banco-cora .banco-contas button:not(.ativa):hover,
.banco-cora .banco-filtros button:not(.ativa):hover,
.banco-cora .banco-botao-leve:hover {
  text-decoration: underline;
}

/* Aba Nota Fiscal: mesmo visual, com cinco abas e os cartões que já existiam. */
.banco-cora.nota-fiscal .banco-abas { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.banco-cora.nota-fiscal .banco-cedula { padding-block: 18px; }

.banco-cora .nf-buscar { align-self: end; justify-self: start; min-height: 44px; }

.banco-cora .nf-tomador {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  background: var(--banco-papel);
  border-left: 3px solid var(--banco-garrafa);
  font-size: .9375rem;
}

.banco-cora .nf-tomador span { color: var(--banco-tinta-suave); }
.banco-cora .nf-tomador .nf-tomador-aviso { color: var(--banco-saida); font-weight: 700; }

.banco-cora .nf-detalhes summary {
  cursor: pointer;
  color: var(--banco-tinta-suave);
  font-weight: 600;
}

.banco-cora .nf-detalhes-campos { margin-top: 12px; padding: 0; border: 0; background: none; }

.banco-cora .nf-puxar { margin-bottom: 16px; }
.banco-cora .nf-puxar > button { grid-column: 1 / -1; justify-self: start; }

.banco-cora .nf-acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

@media (max-width: 640px) {
  .banco-cora.nota-fiscal .banco-abas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .banco-cora.nota-fiscal .banco-abas button:nth-child(4) { grid-column: span 1; }
  .banco-cora .banco-faixa { padding-inline: 16px; }
  .banco-cora .banco-cedula { padding: 20px 16px; }
  .banco-cora .banco-abas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .banco-cora .banco-abas button:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  .banco-cora .banco-abas button {
    flex-direction: column !important;
    gap: 4px !important;
    min-height: 62px !important;
    padding: 6px 4px !important;
    font-size: .75rem !important;
    white-space: normal !important;
  }
  .banco-cora .banco-folha { padding: 16px 12px 20px; overflow-x: auto; }
  .banco-cora .banco-cheque { grid-template-columns: 1fr; }
  .banco-cora .banco-razao li { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .banco-cora .banco-razao-acao { grid-column: 1 / -1; justify-self: start; }
  .banco-cora .banco-lancar { grid-template-columns: 1fr; }
  .banco-cora .banco-filtros { display: flex; width: 100%; }
  .banco-cora .banco-filtros button { flex: 1 !important; }
  .banco-cora .banco-envio-lote { align-items: stretch; flex-direction: column; }
}