/* Liberta BPO App
   Fonte: Atkinson Hyperlegible, servida daqui mesmo (nada sai para a internet).
   Feita para leitura difícil — tela de celular, número que não pode ser
   confundido (1/l/I, 0/O). Cor: o par verde/tijolo do painel, validado para
   daltonismo; a cor nunca carrega sentido sozinha. */

@font-face { font-family: "Atkinson"; src: url("fontes/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("fontes/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --tinta: #1f2a26;
  --suave: #56635d;
  --fundo: #e9eeeb;
  --papel: #ffffff;
  --linha: #cfd8d3;
  --verde: #1f6f4a;
  --verde-escuro: #154f35;
  --verde-claro: #e2f0e8;
  --tijolo: #a3361f;
  --tijolo-claro: #f8e4de;
  --ambar: #8a5a00;
  --ambar-claro: #fbf0d9;
  --foco: #1f6f4a;
  --sombra: 0 1px 2px rgba(31, 42, 38, .08), 0 4px 16px rgba(31, 42, 38, .06);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #e6ece9; --suave: #9fb0a8; --fundo: #121816; --papel: #1a221f; --linha: #2d3833;
    --verde: #6fcf9b; --verde-escuro: #8fe0b4; --verde-claro: #183427;
    --tijolo: #ef8a72; --tijolo-claro: #3a1d16; --ambar: #e8b65a; --ambar-claro: #33280f;
    --foco: #8fe0b4; --sombra: none; color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--tinta);
  font: 400 1rem/1.55 "Atkinson", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
a { color: var(--verde); text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { line-height: 1.2; margin: 0; }
p { margin: 0; }

/* ───────── Formulários ───────── */

label { display: block; font-weight: 700; font-size: .9375rem; }
.campo { display: grid; gap: .35rem; }
.campo small { font-weight: 400; color: var(--suave); }
input, select {
  font: inherit; width: 100%; padding: .7rem .8rem; color: var(--tinta);
  background: var(--papel); border: 1.5px solid var(--linha); border-radius: 8px;
}
input:hover, select:hover { border-color: var(--suave); }
input:focus-visible, select:focus-visible { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-claro); }

.botao {
  font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; text-align: center;
  display: inline-block; padding: .75rem 1.2rem; border-radius: 8px; border: 1.5px solid transparent;
  background: var(--verde); color: #fff;
}
@media (prefers-color-scheme: dark) { .botao { color: #0e1a14; } }
.botao:hover { background: var(--verde-escuro); }
.botao.secundario { background: transparent; color: var(--tinta); border-color: var(--linha); }
.botao.secundario:hover { border-color: var(--suave); }
.botao.largo { width: 100%; }
.botao[disabled] { opacity: .55; cursor: progress; }

.recado { padding: .75rem .9rem; border-radius: 8px; border-left: 4px solid; font-size: .9375rem; }
.recado.erro { background: var(--tijolo-claro); border-color: var(--tijolo); }
.recado.ok   { background: var(--verde-claro); border-color: var(--verde); }

/* ───────── Entrar ───────── */

.entrada { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); }
.entrada-marca {
  background: var(--verde); color: #fff; padding: 2rem 1.25rem 1.5rem;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
}
@media (prefers-color-scheme: dark) { .entrada-marca { background: #0f2a1d; } }
.marca { font-weight: 700; font-size: 1.125rem; letter-spacing: .01em; }
.marca span { opacity: .7; font-weight: 400; }
.entrada-frase { font-size: clamp(1.6rem, 4.5vw, 2.6rem); font-weight: 700; line-height: 1.12; max-width: 14ch; }
.entrada-frase + p { margin-top: .9rem; max-width: 34ch; opacity: .85; }
.entrada-extrato { display: none; }

.entrada-form { padding: 2rem 1.25rem 3rem; display: flex; justify-content: center; }
.entrada-form > div { width: 100%; max-width: 380px; display: grid; gap: 1.25rem; align-content: start; }
.entrada-form h1 { font-size: 1.6rem; }
.entrada-form form { display: grid; gap: 1rem; }
.entrada-form .rodape { font-size: .9375rem; color: var(--suave); display: grid; gap: .4rem; }

@media (min-width: 860px) {
  .entrada { grid-template-columns: 5fr 6fr; }
  .entrada-marca { padding: 3rem; }
  .entrada-form { align-items: center; padding: 3rem; }
  /* A única peça decorativa: um extrato que se confere sozinho. */
  .entrada-extrato {
    display: grid; gap: .1rem; font-size: .9375rem; max-width: 22rem;
    border-top: 1px solid rgba(255,255,255,.25); padding-top: 1rem;
  }
  .entrada-extrato div { display: flex; justify-content: space-between; gap: 1rem; opacity: .85; }
  .entrada-extrato .total { opacity: 1; font-weight: 700; border-top: 1px solid rgba(255,255,255,.25); margin-top: .4rem; padding-top: .5rem; }
}

/* ───────── Painel ───────── */

.topo {
  background: var(--papel); border-bottom: 1px solid var(--linha);
  display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; position: sticky; top: 0; z-index: 5;
}
.topo .marca { color: var(--verde); font-size: 1rem; white-space: nowrap; }
.topo .espaco { flex: 1; }

/* Qual empresa está aberta é a informação mais importante da tela:
   quem atende várias não pode classificar na empresa errada. */
.empresa-atual { position: relative; min-width: 0; }
.empresa-botao {
  font: inherit; color: var(--tinta); background: transparent; cursor: pointer;
  display: flex; align-items: center; gap: .55rem; max-width: 100%;
  border: 1.5px solid var(--linha); border-radius: 10px; padding: .35rem .7rem .35rem .45rem;
}
.empresa-botao:hover { border-color: var(--suave); }
.empresa-inicial {
  flex: none; width: 2rem; height: 2rem; border-radius: 7px; display: grid; place-items: center;
  background: var(--verde); color: #fff; font-weight: 700;
}
@media (prefers-color-scheme: dark) { .empresa-inicial, .passo.feito .n { color: #0e1a14; } }
.empresa-nome { font-weight: 700; font-size: 1.0625rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seta { flex: none; width: .55rem; height: .55rem; border-right: 2px solid var(--suave); border-bottom: 2px solid var(--suave); transform: rotate(45deg) translateY(-2px); }

.menu {
  position: absolute; top: calc(100% + .4rem); left: 0; min-width: min(20rem, calc(100vw - 2rem));
  background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; box-shadow: var(--sombra);
  padding: .35rem; display: grid; gap: .1rem;
}
.menu[hidden] { display: none; }
.menu.direita { left: auto; right: 0; }
.menu button, .menu a {
  font: inherit; color: var(--tinta); background: none; border: 0; text-align: left; cursor: pointer;
  padding: .55rem .65rem; border-radius: 7px; display: flex; align-items: center; gap: .6rem; text-decoration: none;
}
.menu button:hover, .menu a:hover { background: var(--fundo); }
.menu .atual { background: var(--verde-claro); }
.menu .papel { margin-left: auto; font-size: .8125rem; color: var(--suave); }
.menu hr { border: 0; border-top: 1px solid var(--linha); margin: .3rem 0; }
.menu .perigo { color: var(--tijolo); }

.pessoa { position: relative; }
.pessoa-botao { font: inherit; color: var(--suave); background: none; border: 0; cursor: pointer; padding: .4rem .3rem; white-space: nowrap; }
.pessoa-botao:hover { color: var(--tinta); }

.corpo { display: grid; grid-template-columns: minmax(0, 1fr); }
/* No celular a navegação vira uma faixa rolável logo abaixo do topo. */
.lateral { border-bottom: 1px solid var(--linha); background: var(--papel); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lateral ul { list-style: none; margin: 0; padding: .4rem .75rem; display: flex; gap: .25rem; width: max-content; }
.lateral li { white-space: nowrap; }
.lateral li a, .lateral li span { display: block; padding: .45rem .7rem; border-radius: 7px; text-decoration: none; color: var(--tinta); }
.lateral li.aqui a { background: var(--verde-claro); font-weight: 700; }
.lateral li[aria-disabled] { color: var(--suave); opacity: .6; }
.lateral li[aria-disabled] span { color: var(--suave); }
.lateral-nota { display: none; }
.conteudo { padding: 1.5rem 1rem 4rem; max-width: 60rem; width: 100%; }
.conteudo h1 { font-size: clamp(1.5rem, 4vw, 2rem); }
.situacao { margin-top: .35rem; color: var(--suave); }
.situacao b { color: var(--ambar); }

.passos { margin: 1.75rem 0 0; padding: 0; list-style: none; display: grid; gap: .75rem; }
.passo {
  background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; padding: 1rem 1.1rem;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .9rem;
}
.passo .n { grid-row: span 2; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--linha); color: var(--suave); font-weight: 700; font-size: .875rem; }
.passo.feito .n { background: var(--verde); border-color: var(--verde); color: #fff; }
.passo h2 { font-size: 1.0625rem; }
.passo p { color: var(--suave); font-size: .9375rem; }

@media (min-width: 900px) {
  .corpo { grid-template-columns: 14rem minmax(0, 1fr); min-height: calc(100vh - 3.6rem); }
  .lateral { display: block; border-right: 1px solid var(--linha); border-bottom: 0; background: transparent; padding: 1.25rem .75rem; overflow: visible; }
  .lateral ul { display: grid; gap: .15rem; padding: 0; width: auto; }
  .lateral li { white-space: normal; }
  .lateral li a:hover { background: var(--papel); }
  .lateral li.aqui a { background: var(--papel); }
  .lateral-nota { display: block; margin: 1rem .7rem 0; font-size: .8125rem; color: var(--suave); max-width: 22ch; }
  .conteudo { padding: 2.25rem 2.5rem 4rem; }
}

/* ───────── Diálogo ───────── */

dialog {
  border: 0; border-radius: 12px; padding: 0; width: min(28rem, calc(100vw - 2rem));
  background: var(--papel); color: var(--tinta); box-shadow: var(--sombra);
}
dialog::backdrop { background: rgba(18, 24, 22, .45); }
dialog form { padding: 1.5rem; display: grid; gap: 1rem; }
dialog h2 { font-size: 1.25rem; }
dialog .acoes { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }

.vazio { margin-top: 2rem; background: var(--papel); border: 1px dashed var(--linha); border-radius: 10px; padding: 1.5rem; display: grid; gap: .8rem; justify-items: start; }

@media (prefers-reduced-motion: no-preference) {
  .menu:not([hidden]) { animation: abre .12s ease-out; }
  @keyframes abre { from { opacity: 0; transform: translateY(-4px); } }
}

/* ───────── Peças comuns dos módulos ───────── */

input[type="checkbox"], input[type="radio"] { width: auto; padding: 0; accent-color: var(--verde); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { box-shadow: none; outline: 3px solid var(--foco); outline-offset: 2px; }
.carregando { color: var(--suave); }
.modulo-cabeca { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1.5rem; }
.modulo-cabeca > div { max-width: 44rem; }
.passo h2 a { color: inherit; text-decoration-color: var(--linha); }
.passo h2 a:hover { text-decoration-color: var(--verde); }

.link { font: inherit; font-size: .9375rem; background: none; border: 0; padding: .3rem .4rem; color: var(--verde); cursor: pointer; text-decoration: underline; text-underline-offset: .18em; text-decoration-color: transparent; }
.link:hover { text-decoration-color: currentColor; }
.link.perigo { color: var(--tijolo); }
.linha-acoes { display: flex; flex-wrap: wrap; gap: .1rem; }

.campo + .campo, .duas + .campo, .campo + .duas, .duas + .duas, .campo + fieldset, fieldset + details { margin-top: 0; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; align-items: start; }
.marcar { display: inline-flex; align-items: center; gap: .45rem; font-weight: 400; cursor: pointer; }
fieldset.escolha { border: 0; padding: 0; margin: 0; display: flex; gap: 1.25rem; flex-wrap: wrap; }
fieldset.escolha legend { font-weight: 700; font-size: .9375rem; padding: 0; margin-bottom: .35rem; width: 100%; }
details.avancado summary { cursor: pointer; color: var(--suave); font-size: .9375rem; }
details.avancado[open] { display: grid; gap: .3rem; }
details.avancado small { color: var(--suave); margin: 0 0 .4rem 1.6rem; font-size: .8125rem; }
.local { color: var(--suave); font-size: .9375rem; margin-top: -.5rem; }
dialog { max-height: calc(100vh - 2rem); overflow-y: auto; }

.aviso {
  position: fixed; left: 50%; bottom: 1.25rem; transform: translate(-50%, 1rem); z-index: 20;
  background: var(--tinta); color: var(--papel); padding: .7rem 1rem; border-radius: 9px; max-width: calc(100vw - 2rem);
  font-size: .9375rem; opacity: 0; pointer-events: none;
}
.aviso.visivel { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: no-preference) { .aviso { transition: opacity .18s, transform .18s; } }

/* ───────── Contas bancárias ───────── */

.contas { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.conta {
  background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; padding: 1rem 1.1rem;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem;
}
.conta h3 { font-size: 1.0625rem; }
.conta-detalhe, .conta-uso { color: var(--suave); font-size: .9375rem; }
.conta-saldo { display: flex; flex-direction: column; }
.conta-saldo .rotulo { font-size: .8125rem; color: var(--suave); }
.conta-saldo b { font-size: 1.125rem; }
.conta-saldo b.negativo { color: var(--tijolo); }
.conta.arquivada { opacity: .75; }
.conta .linha-acoes { margin-left: -.4rem; }
details.arquivadas { margin-top: 1.5rem; }
details.arquivadas summary { cursor: pointer; color: var(--suave); margin-bottom: .75rem; }
@media (min-width: 700px) {
  .conta { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .conta-saldo { align-items: flex-end; text-align: right; }
  .conta-uso { grid-column: 1; }
  .conta .linha-acoes { grid-column: 2; justify-content: flex-end; margin: 0 -.4rem 0 0; }
}

/* ───────── Plano de contas ───────── */

.filtros { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin-bottom: 1.25rem; }
.filtros input[type="search"] { max-width: 24rem; }
.plano { display: grid; gap: 1rem; }
details.grupo { background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; }
details.grupo > summary {
  cursor: pointer; padding: .9rem 1.1rem; display: flex; flex-wrap: wrap; gap: .2rem .75rem; align-items: baseline;
  list-style-position: outside;
}
.grupo-nome { font-weight: 700; font-size: 1.125rem; }
.grupo-tipo { color: var(--suave); font-size: .875rem; }
.subgrupo { border-top: 1px solid var(--linha); padding: .6rem 1.1rem .8rem; }
.subgrupo-cabeca { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.subgrupo h3 { font-size: .875rem; color: var(--suave); font-weight: 700; letter-spacing: .02em; }
.categorias { list-style: none; margin: .3rem 0 0; padding: 0; }
.categoria {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .15rem .75rem; align-items: center;
  padding: .55rem 0; border-top: 1px dashed var(--linha);
}
.categoria:first-child { border-top: 0; }
.categoria .codigo { color: var(--suave); font-size: .8125rem; }
.categoria .cat-nome { overflow-wrap: anywhere; }
.categoria .cat-marcas { display: flex; flex-wrap: wrap; gap: .35rem; }
.categoria .linha-acoes { margin-left: -.4rem; }
.categoria.inativa .cat-nome { color: var(--suave); text-decoration: line-through; text-decoration-color: var(--linha); }
.natureza { font-size: .8125rem; font-weight: 700; }
.natureza.nat-entrada { color: var(--verde); }
.natureza.nat-saida { color: var(--tijolo); }
.etiqueta { font-size: .75rem; padding: .05rem .5rem; border-radius: 99px; border: 1px solid var(--linha); color: var(--suave); }
.etiqueta.oculta { background: var(--fundo); }
@media (min-width: 760px) {
  .categoria { grid-template-columns: 7.5rem minmax(0, 1fr) auto auto; }
  .categoria .codigo { font-size: .875rem; }
  .categoria .linha-acoes { margin: 0; flex-wrap: nowrap; }
}

.modelos { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin-top: 1.5rem; }
.modelo { background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; padding: 1.1rem; display: grid; gap: .5rem; justify-items: start; }
.modelo h2 { font-size: 1.125rem; }
.modelo p { color: var(--suave); }
.pilha { display: grid; gap: 1rem; }

/* ───────── Importar extrato ───────── */

.dica { color: var(--suave); font-size: .875rem; }
.escondido { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.zona {
  display: grid; justify-items: center; gap: .25rem; text-align: center; cursor: pointer;
  padding: 2rem 1rem; border: 2px dashed var(--linha); border-radius: 12px; background: var(--papel); font-weight: 400;
}
.zona b { font-size: 1.0625rem; color: var(--verde); }
.zona span { color: var(--suave); font-size: .9375rem; }
.zona:hover, .zona.sobre { border-color: var(--verde); background: var(--verde-claro); }
.zona:focus-within { outline: 3px solid var(--foco); outline-offset: 2px; }
.zona.desligada { cursor: not-allowed; opacity: .7; }
.zona.desligada:hover { border-color: var(--linha); background: var(--papel); }

.analise { display: grid; gap: 1rem; margin-top: 1.25rem; }
.extrato { background: var(--papel); border: 1px solid var(--linha); border-radius: 12px; padding: 1.1rem 1.2rem; display: grid; gap: .9rem; }
.extrato h2 { font-size: 1.125rem; }
.extrato .campo { max-width: 26rem; }
.numeros { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .6rem; }
.numeros div { border: 1px solid var(--linha); border-radius: 8px; padding: .5rem .7rem; }
.numeros div.atencao { border-color: var(--ambar); background: var(--ambar-claro); }
.numeros dt { font-size: .8125rem; color: var(--suave); }
.numeros dd { margin: 0; font-weight: 700; font-size: 1.0625rem; }
.pos { color: var(--verde); }
.neg { color: var(--tijolo); }
.conferencia { border-radius: 8px; padding: .75rem .9rem; border-left: 4px solid; display: grid; gap: .35rem; }
.conferencia.ok { background: var(--verde-claro); border-color: var(--verde); }
.conferencia.divergente { background: var(--tijolo-claro); border-color: var(--tijolo); }
.conferencia.neutra { background: var(--fundo); border-color: var(--linha); }
.conferencia p { font-size: .9375rem; }
details.previa summary { cursor: pointer; color: var(--verde); font-size: .9375rem; }
details.previa table { width: 100%; border-collapse: collapse; margin-top: .5rem; font-size: .9375rem; }
details.previa td { padding: .4rem .3rem; border-top: 1px solid var(--linha); vertical-align: top; }
details.previa td:first-child { white-space: nowrap; color: var(--suave); }
details.previa td:last-child { text-align: right; white-space: nowrap; }
details.previa td:nth-child(2) { overflow-wrap: anywhere; }
details.previa .etiqueta { margin-left: .4rem; }
.acoes-importar { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }

.historico { margin-top: 2.5rem; }
.historico h2 { font-size: 1.125rem; margin-bottom: .75rem; }
.importacoes { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.importacoes li {
  background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; padding: .85rem 1rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem;
}
.importacoes .arquivo { margin-left: .5rem; color: var(--suave); font-size: .875rem; overflow-wrap: anywhere; }
.historico-lado { display: flex; align-items: center; gap: .5rem; }
.etiqueta.conf-ok { color: var(--verde); border-color: var(--verde); }
.etiqueta.conf-divergente { color: var(--tijolo); border-color: var(--tijolo); }

/* ───────── Lançamentos (mesa de trabalho) ───────── */

.conteudo.largo { max-width: 92rem; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.lanc-topo { display: grid; gap: .5rem; margin-bottom: .75rem; }
.cartoes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 0;
  background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; overflow: hidden;
}
.cartao-num { padding: .5rem .85rem; border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); display: grid; gap: .15rem; margin: 0 -1px -1px 0; }
.cartao-num span { font-size: .75rem; color: var(--suave); line-height: 1.25; }
.cartao-num b { font-size: 1rem; white-space: nowrap; }
.cartao-num.pos b { color: var(--verde); }
.cartao-num.neg b { color: var(--tijolo); }
.cartao-num.falta b { color: var(--ambar); }
.progresso { background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; padding: .5rem 1rem; display: grid; gap: .35rem; }
.progresso-linha { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; }
.progresso-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.barra { height: .5rem; background: var(--fundo); border-radius: 99px; overflow: hidden; }
.barra span { display: block; height: 100%; background: var(--verde); border-radius: 99px; }
.botao.pequeno { padding: .35rem .75rem; font-size: .875rem; }
.botao.conferir { border-color: var(--ambar); background: var(--ambar-claro); color: var(--tinta); }
.botao[aria-pressed="true"] { background: var(--verde-claro); border-color: var(--verde); }

.lanc-filtros { margin-bottom: .6rem; }
.lanc-filtros input[type="search"] { flex: 1 1 18rem; max-width: none; }
.lanc-filtros select { width: auto; flex: 0 1 14rem; min-width: 0; }
.alternar { display: inline-flex; border: 1.5px solid var(--linha); border-radius: 8px; overflow: hidden; }
.alternar button { font: inherit; font-size: .9375rem; border: 0; background: var(--papel); color: var(--tinta); padding: .55rem .9rem; cursor: pointer; }
.alternar button[aria-pressed="true"] { background: var(--verde); color: #fff; font-weight: 700; }
@media (prefers-color-scheme: dark) { .alternar button[aria-pressed="true"] { color: #0e1a14; } }
.mais-filtros { margin: 0 0 .9rem; padding: .75rem 1rem; background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; }
.filtro-extra { display: grid; gap: .25rem; font-size: .8125rem; color: var(--suave); }
.filtro-extra select { min-width: 11rem; }

.tabela-lanc { background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; }
.lancs { list-style: none; margin: 0; padding: 0; }
.caixa-sel { width: 1rem; height: 1rem; margin: 0; }
/* Celular: cartão compacto. Computador (≥1000px): uma linha por lançamento. */
.lanc {
  display: grid; gap: .3rem .5rem; align-items: center; font-size: .8125rem; line-height: 1.3;
  grid-template-columns: 1rem auto minmax(0, 1fr) auto;
  grid-template-areas: "cb desc desc valor" ". data conta conta" ". cat cat cat" ". div transf comp";
  padding: .5rem .75rem; border-top: 1px solid var(--linha); border-left: 3px solid transparent;
}
.lanc > .caixa-sel, .lanc > span:first-child { grid-area: cb; }
.c-data { grid-area: data; } .c-desc { grid-area: desc; } .c-conta { grid-area: conta; } .c-cat { grid-area: cat; }
.c-div { grid-area: div; } .c-transf { grid-area: transf; } .c-comp { grid-area: comp; justify-self: end; } .c-valor { grid-area: valor; }
.c-x { display: none; }
.lancs .lanc:first-child { border-top: 0; }
.lanc.classificado { border-left-color: var(--verde); }
.lanc.suspeito { background: var(--ambar-claro); }
.lanc.marcado { background: var(--verde-claro); }
.lanc.criado .desc { font-style: italic; }
.lanc-cabeca { display: none; }
.c-data { color: var(--suave); font-size: .75rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.c-conta { color: var(--suave); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.c-desc { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; min-width: 0; }
.c-desc .desc { overflow-wrap: anywhere; }
.selo { font-size: .6875rem; color: var(--suave); border: 1px solid var(--linha); border-radius: 4px; padding: 0 .3rem; white-space: nowrap; font-style: normal; }
.conferir { color: var(--ambar); font-size: .6875rem; font-weight: 700; display: inline-flex; gap: .35rem; align-items: baseline; white-space: nowrap; }
.conferir .link { font-size: .6875rem; padding: 0; }
.c-valor { font-weight: 700; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.c-cat { min-width: 0; display: flex; flex-wrap: wrap; gap: .2rem .4rem; align-items: center; }
.chip {
  font: inherit; font-size: .75rem; line-height: 1.3; text-align: left; max-width: 100%; min-width: 0; cursor: pointer;
  padding: .15rem .5rem; border-radius: 6px; border: 1.5px solid; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chip.chip-ok { border-color: var(--verde); background: var(--verde-claro); color: var(--tinta); }
.chip.chip-vazio { border-style: dashed; border-color: var(--ambar); background: transparent; color: var(--ambar); }
span.chip { cursor: default; }
.chip:focus-visible { outline: 3px solid var(--foco); outline-offset: 1px; }
/* Dividir e Transferência: colunas próprias */
.acao-linha {
  font: inherit; font-size: .6875rem; line-height: 1.3; font-weight: 600; cursor: pointer; white-space: nowrap; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle;
  padding: .15rem .45rem; border-radius: 6px; border: 1px solid var(--linha); background: var(--papel); color: var(--suave);
}
.acao-linha:hover { border-color: var(--verde); color: var(--verde); }
.acao-linha:focus-visible { outline: 3px solid var(--foco); outline-offset: 1px; }
.acao-linha.ativo { border-color: var(--verde); background: var(--verde-claro); color: var(--verde-escuro); }
.acao-linha.fatura.pendente { border-color: var(--ambar); background: var(--ambar-claro); color: var(--ambar); }
span.acao-linha { cursor: default; }
.partes-linha { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .1rem .6rem; font-size: .6875rem; color: var(--suave); padding-left: .4rem; border-left: 2px solid var(--linha); }
.partes-linha b { font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
.partes-linha .sobra { font-style: italic; }
input.comp { width: 4.6rem; padding: .12rem .3rem; font-size: .75rem; border-radius: 6px; text-align: center; font-variant-numeric: tabular-nums; }
input.comp.diferente { border-color: var(--ambar); background: var(--ambar-claro); }
input.comp:disabled { border-color: transparent; background: transparent; color: var(--suave); }
.lista-vazia { padding: 1.5rem; text-align: center; color: var(--suave); }
.lancs .mais { padding: .6rem; text-align: center; border-top: 1px solid var(--linha); display: block; }

@media (min-width: 1000px) {
  .lanc {
    grid-template-columns: 1rem 4.9rem minmax(10rem, 1.7fr) minmax(4.5rem, .55fr) minmax(9rem, 1.15fr) 5.4rem 7.8rem 4.6rem 7rem 1rem;
    grid-template-areas: none; gap: 0 .6rem; padding: .28rem .75rem; min-height: 2.15rem;
  }
  .lanc > *, .lanc > .caixa-sel, .lanc > span:first-child, .c-data, .c-desc, .c-conta, .c-cat, .c-div, .c-transf, .c-comp, .c-valor { grid-area: auto; }
  .lanc-cabeca { display: grid; font-size: .6875rem; font-weight: 700; color: var(--suave); background: var(--fundo); padding: .4rem .75rem; min-height: 0; }
  .lanc-cabeca .c-comp, .lanc-cabeca .c-valor { justify-self: end; }
  .c-desc { flex-wrap: nowrap; }
  .c-desc .desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; min-width: 0; }
  .c-desc .selo, .c-desc .conferir { flex: none; }
  .c-cat { flex-wrap: wrap; }
  .lanc.com-partes { align-items: start; }
  .lanc.com-partes > :not(.c-cat) { padding-top: .15rem; }
  .c-x { display: block; }
  button.c-x { font: inherit; font-size: 1rem; line-height: 1; background: none; border: 0; color: var(--tijolo); cursor: pointer; padding: 0; }
}

.lote {
  position: sticky; bottom: 0; z-index: 4; margin: 1rem -1rem -4rem; padding: .75rem 1rem;
  background: var(--papel); border-top: 2px solid var(--verde); box-shadow: 0 -4px 16px rgba(31, 42, 38, .08);
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; justify-content: space-between;
}
.lote-info { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; }
.lote-acoes { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
@media (min-width: 900px) { .lote { margin: 1rem -2.5rem -4rem; padding: .85rem 2.5rem; } }

/* Escolher categoria: junto da linha no computador, folha embaixo no celular */
.pop {
  position: fixed; z-index: 30; width: min(25rem, calc(100vw - 16px)); display: flex; flex-direction: column; gap: .4rem;
  background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; box-shadow: 0 8px 28px rgba(31, 42, 38, .18); padding: .5rem;
}
.pop input[type="search"] { padding: .5rem .6rem; font-size: .9375rem; }
.pop-lista { overflow-y: auto; min-height: 0; flex: 1; }
.pop-grupo { font-weight: 700; font-size: .75rem; color: var(--suave); padding: .5rem .45rem .15rem; }
.pop-opcao {
  font: inherit; font-size: .875rem; width: 100%; text-align: left; cursor: pointer; display: flex; gap: .5rem; align-items: baseline;
  background: none; border: 0; border-radius: 6px; padding: .4rem .45rem; color: var(--tinta);
}
.pop-opcao:hover, .pop-opcao:focus-visible { background: var(--verde-claro); outline: none; }
.pop-opcao .codigo { color: var(--suave); font-size: .75rem; min-width: 5.8rem; flex: none; }
.pop-opcao .nome { flex: 1; }
.pop-aviso { font-size: .8125rem; color: var(--tijolo); padding: .25rem .4rem; }
.pop-vazio { padding: .75rem .45rem; }
.pop-limpar { align-self: flex-start; font-size: .875rem; }
.pop-titulo { font-weight: 700; font-size: .875rem; padding: .3rem .45rem .1rem; }
.pop-rodape { font-size: .75rem; padding: .25rem .45rem .1rem; border-top: 1px solid var(--linha); }
@media (max-width: 699px) {
  .pop { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: 100%; max-height: 75vh !important; border-radius: 14px 14px 0 0; padding: .75rem; }
  .lanc-filtros input[type="search"] { flex-basis: 100%; }
  .lanc-filtros select { flex: 1 1 40%; }
}

/* Dividir */
dialog.dividir { width: min(46rem, calc(100vw - 2rem)); }
.div-lanc { overflow-wrap: anywhere; }
.partes { display: grid; gap: .5rem; }
.parte { display: grid; grid-template-columns: minmax(0, 1fr) 7rem minmax(0, 1.3fr) 1.5rem; gap: .5rem; align-items: center; }
.parte.cabeca { font-size: .75rem; font-weight: 700; color: var(--suave); }
.parte input { padding: .5rem .6rem; }
.parte .chip { width: 100%; padding: .55rem .6rem; }
.parte .link.perigo { font-size: 1.2rem; padding: 0; }
.div-soma { font-size: .9375rem; }
.div-soma.estourou { color: var(--tijolo); font-weight: 700; }
.botao.perigo-texto { color: var(--tijolo); }
@media (max-width: 599px) {
  .parte { grid-template-columns: minmax(0, 1fr) 6rem 1.5rem; }
  .parte .chip { grid-column: 1 / span 2; grid-row: 2; }
  .parte.cabeca { display: none; }
}

/* ───────── Faturas de cartão ───────── */
.migalha { font-size: .8125rem; margin: 0 0 .4rem; color: var(--suave); }
.fat-titulo { margin-bottom: .2rem; }
.fat-linha {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: .2rem .75rem; align-items: center;
  padding: .45rem .75rem; border-top: 1px solid var(--linha); font-size: .8125rem; color: var(--tinta); text-decoration: none;
}
a.fat-linha:hover { background: var(--verde-claro); }
.lancs li:first-child > .fat-linha { border-top: 0; }
.fat-linha .desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fat-linha .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fat-linha .c-conta, .fat-linha .n { display: none; }
.fat-cabeca { display: none; }
.situacao-fat { font-size: .75rem; font-weight: 700; white-space: nowrap; }
.situacao-fat.ok { color: var(--verde); }
.situacao-fat.falta { color: var(--ambar); }
@media (min-width: 800px) {
  .fat-linha { grid-template-columns: 5.5rem minmax(0, 1fr) 9rem 8rem 8rem 9rem; }
  .fat-linha .c-conta, .fat-linha .n { display: block; }
  .fat-cabeca.fat-linha { display: grid; font-size: .6875rem; font-weight: 700; color: var(--suave); background: var(--fundo); border-top: 0; }
}
.fat-novo-caixa { background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; padding: .6rem .75rem; margin-bottom: .5rem; }
.fat-novo-titulo { font-size: .8125rem; margin: 0 0 .4rem; }
.fat-novo { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; align-items: center; }
.fat-novo input { padding: .35rem .5rem; font-size: .8125rem; }
.fat-novo .chip { padding: .35rem .5rem; }
.fat-novo #n-desc { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .fat-novo { grid-template-columns: 9rem minmax(10rem, 1fr) 7rem minmax(10rem, 1fr) 5.5rem auto; }
  .fat-novo #n-desc { grid-column: auto; }
}
.fat-colar { margin: 0 0 .6rem; font-size: .8125rem; }
.fat-item {
  display: grid; grid-template-columns: 1rem 8.6rem minmax(0, 1fr) auto; gap: .3rem .5rem; align-items: center;
  padding: .3rem .75rem; border-top: 1px solid var(--linha); border-left: 3px solid transparent; font-size: .8125rem;
}
.lancs .fat-item:first-child { border-top: 0; }
.fat-item.classificado { border-left-color: var(--verde); }
.fat-item.marcado { background: var(--verde-claro); }
.fat-item input { padding: .15rem .35rem; font-size: .8125rem; border-radius: 6px; }
.fat-item input:disabled { border-color: transparent; background: transparent; color: var(--tinta); }
.fat-item { grid-template-columns: 1rem auto minmax(0, 1fr) auto; grid-template-areas: "cb data desc desc" ". cat cat cat" ". comp valor x"; }
.fat-item > :first-child { grid-area: cb; } .fat-item .f-data { grid-area: data; } .fat-item .f-desc { grid-area: desc; min-width: 0; }
.fat-item .c-cat { grid-area: cat; } .fat-item .comp { grid-area: comp; } .fat-item .f-valor { grid-area: valor; justify-self: end; } .fat-item > :last-child { grid-area: x; }
.fat-item .f-valor { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; width: 7rem; }
.fat-item .f-valor.pos { color: var(--verde); }
.fat-item .c-x { display: block; font: inherit; font-size: 1rem; line-height: 1; background: none; border: 0; color: var(--tijolo); cursor: pointer; padding: 0; }
.fat-cabeca.fat-item { display: none; }
.fat-cabeca .n { text-align: right; }
@media (min-width: 900px) {
  .fat-item { grid-template-columns: 1rem 8.6rem minmax(10rem, 1.4fr) minmax(10rem, 1fr) 4.6rem 7rem 1rem; }
  .fat-item { grid-template-areas: none; }
  .fat-item > *, .fat-item > :first-child, .fat-item > :last-child, .fat-item .f-data, .fat-item .f-desc, .fat-item .c-cat, .fat-item .comp, .fat-item .f-valor { grid-area: auto; }
  .fat-cabeca.fat-item { display: grid; font-size: .6875rem; font-weight: 700; color: var(--suave); background: var(--fundo); padding: .4rem .75rem; }
}
dialog.colar { width: min(44rem, calc(100vw - 2rem)); }
dialog.colar textarea { width: 100%; font: inherit; font-size: .8125rem; font-family: ui-monospace, monospace; padding: .5rem; border: 1.5px solid var(--linha); border-radius: 8px; background: var(--papel); color: var(--tinta); }
.colar-previa { font-size: .8125rem; margin: .5rem 0; display: grid; gap: .3rem; }
.colar-lista { margin: 0; padding-left: 1.1rem; color: var(--suave); }
.colar-ruins { color: var(--ambar); overflow-wrap: anywhere; }

/* ───────── DRE e DFC ───────── */
.fluxo-topo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .2rem; }
.fluxo-topo h1 { margin: 0; }
.abas-fluxo { display: inline-flex; border: 1.5px solid var(--linha); border-radius: 8px; overflow: hidden; margin-right: auto; }
.aba-fluxo { padding: .4rem .85rem; font-size: .875rem; color: var(--tinta); text-decoration: none; background: var(--papel); }
.aba-fluxo[aria-current="page"] { background: var(--verde); color: #fff; font-weight: 700; }
@media (prefers-color-scheme: dark) { .aba-fluxo[aria-current="page"] { color: #0e1a14; } }
.fluxo-filtros { margin: .5rem 0 .75rem; align-items: center; }
.fluxo-filtros .periodo { display: inline-flex; align-items: center; gap: .35rem; font-size: .875rem; color: var(--suave); }
.fluxo-filtros select { width: auto; }
.fluxo-filtros .atalhos { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.aviso-fluxo { background: var(--ambar-claro); border-left: 3px solid var(--ambar); padding: .45rem .75rem; border-radius: 6px; font-size: .8125rem; margin: .5rem 0 0; }
.aviso-fluxo.erro { background: var(--tijolo-claro); border-left-color: var(--tijolo); }
.tabela-fluxo-caixa { margin-top: .75rem; background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; overflow-x: auto; max-width: 100%; }
.tabela-fluxo { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.tabela-fluxo th, .tabela-fluxo td { padding: .28rem .55rem; border-bottom: 1px solid var(--linha); white-space: nowrap; text-align: right; }
.tabela-fluxo thead th { position: sticky; top: 0; background: var(--fundo); font-size: .6875rem; color: var(--suave); font-weight: 700; z-index: 2; }
.tabela-fluxo .rot { text-align: left; position: sticky; left: 0; background: var(--papel); z-index: 1; min-width: 13rem; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; font-weight: 400; }
.tabela-fluxo thead .rot { background: var(--fundo); z-index: 3; }
.tabela-fluxo td.neg { color: var(--tijolo); }
.tabela-fluxo td.zero { color: var(--suave); }
.tabela-fluxo td.tot { font-weight: 700; border-left: 1px solid var(--linha); }
.tabela-fluxo th.tot { border-left: 1px solid var(--linha); }
.tabela-fluxo .av { color: var(--suave); font-size: .75rem; }
.tabela-fluxo tr.cat .rot { padding-left: 1.4rem; }
.tabela-fluxo tr.cat.n2 .rot { padding-left: 2.1rem; }
.tabela-fluxo tr.grupo .rot { padding-left: 1.4rem; font-weight: 600; color: var(--suave); }
.tabela-fluxo tr.grupo td { color: var(--suave); }
.tabela-fluxo tr.secao th, .tabela-fluxo tr.secao td { font-weight: 700; background: var(--fundo); }
.tabela-fluxo tr.secao .rot { background: var(--fundo); }
.tabela-fluxo tr.total th, .tabela-fluxo tr.total td { font-weight: 700; border-top: 1.5px solid var(--tinta); }
.tabela-fluxo tr.total.forte th, .tabela-fluxo tr.total.forte td, .tabela-fluxo tr.saldo.forte th, .tabela-fluxo tr.saldo.forte td { background: var(--verde-claro); }
.tabela-fluxo tr.total.forte .rot, .tabela-fluxo tr.saldo.forte .rot { background: var(--verde-claro); }
.tabela-fluxo tr.saldo th, .tabela-fluxo tr.saldo td { font-weight: 700; }
.tabela-fluxo tr.alerta th, .tabela-fluxo tr.alerta td { background: var(--ambar-claro); color: var(--ambar); font-weight: 600; }
.tabela-fluxo tr.alerta .rot { background: var(--ambar-claro); }
.tabela-fluxo tr.fora th, .tabela-fluxo tr.fora td { color: var(--suave); font-style: italic; }
.tabela-fluxo tr.separador th { text-align: left; font-size: .6875rem; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; padding-top: .7rem; background: var(--papel); position: static; }
.secao-botao { font: inherit; font-weight: 700; background: none; border: 0; padding: 0; cursor: pointer; color: var(--tinta); display: inline-flex; gap: .35rem; align-items: baseline; }
.secao-botao small { font-weight: 400; color: var(--suave); }
button.cel { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; border-bottom: 1px dotted transparent; }
button.cel:hover, button.cel:focus-visible { border-bottom-color: currentColor; outline: none; }
dialog.detalhe-fluxo { width: min(42rem, calc(100vw - 2rem)); }
.det-lista { list-style: none; margin: 0; padding: 0; max-height: 55vh; overflow-y: auto; border: 1px solid var(--linha); border-radius: 8px; }
.det-lista li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: .5rem; padding: .35rem .6rem; border-top: 1px solid var(--linha); font-size: .8125rem; align-items: baseline; }
.det-lista li:first-child { border-top: 0; }
.det-lista .d { color: var(--suave); font-variant-numeric: tabular-nums; }
.det-lista .desc { overflow-wrap: anywhere; display: grid; }
.det-lista small { color: var(--suave); font-size: .6875rem; }
.det-lista .v { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.det-lista .v.neg { color: var(--tijolo); } .det-lista .v.pos { color: var(--verde); }
.det-total { display: flex; justify-content: space-between; font-size: .875rem; margin: .5rem 0 0; }
@media (max-width: 699px) { .cartao-num b { white-space: normal; overflow-wrap: anywhere; } }
/* DRE/DFC: níveis de agrupamento e janela de detalhe */
.nivel-fluxo { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-top: .75rem; }
.nivel-fluxo .alternar button { font-size: .8125rem; padding: .35rem .7rem; }
.tabela-fluxo tr.p1 .rot { padding-left: 1.3rem; }
.tabela-fluxo tr.p2 .rot { padding-left: 2.3rem; }
.tabela-fluxo tr.p3 .rot { padding-left: 3.3rem; }
.tabela-fluxo tr.grupo .rot, .tabela-fluxo tr.grupo td { font-weight: 700; color: var(--tinta); }
.tabela-fluxo tr.subgrupo .rot, .tabela-fluxo tr.subgrupo td { font-weight: 600; color: var(--suave); }
.det-lista li { display: block; padding: 0; }
.det-item { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto 1rem; gap: .5rem; padding: .4rem .6rem; align-items: baseline; color: var(--tinta); text-decoration: none; }
.det-item:hover, .det-item:focus-visible { background: var(--verde-claro); outline: none; }
.det-item .ir { color: var(--suave); font-weight: 700; }
.veio-de { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; background: var(--verde-claro); border: 1px solid var(--verde); border-radius: 10px; padding: .5rem .85rem; margin-bottom: .75rem; font-size: .875rem; }
.veio-de > span { flex: 1 1 18rem; }
.lanc.destaque { box-shadow: inset 0 0 0 2px var(--verde); }
.seta-grupo { width: .7rem; height: .7rem; flex: none; color: var(--suave); align-self: center; }
.seta-grupo.aberta { transform: rotate(90deg); }
@media (prefers-reduced-motion: no-preference) { .seta-grupo { transition: transform .12s; } }