/* ============================================================ tokens
   Paleta: azul-caneta sobre papel levemente azulado - a cor com que se
   preenche boleto e livro-caixa no Brasil. Semantica (recebido / vence /
   atrasado) e separada do acento, como manda um painel operado, nao lido. */
/* Declarar o esquema impede o Chrome Android de "escurecer automaticamente"
   a página por cima da nossa paleta escura. */
:root {
  color-scheme: light dark;
  --papel:#f2f5f9; --superficie:#fff; --superficie-2:#eaeff6;
  --tinta:#16203a; --tinta-fraca:#5a6683;
  --borda:#d7dfea; --borda-forte:#b9c5d6;
  --caneta:#2c4a8f; --caneta-fraca:#e5ebf7;
  --verde:#0f7b5a; --verde-fraco:#e2f2ec;
  --ambar:#a86400; --ambar-fraco:#faeedb;
  --vermelho:#b3261e; --vermelho-fraco:#fbe7e5;
  --contraste:#fff;
  --sombra:0 1px 2px rgba(22,32,58,.06), 0 8px 24px rgba(22,32,58,.07);
  --sombra-tel:0 2px 6px rgba(22,32,58,.10), 0 24px 60px rgba(22,32,58,.18);
  --r:10px; --r-g:14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel:#0e1320; --superficie:#161d2e; --superficie-2:#1e2739;
    --tinta:#e7ecf5; --tinta-fraca:#98a3bd;
    --borda:#2a3448; --borda-forte:#3b4760;
    --caneta:#86a6ec; --caneta-fraca:#1c2740;
    --verde:#4fc79b; --verde-fraco:#122c25;
    --ambar:#e2a648; --ambar-fraco:#2e2417;
    --vermelho:#f2867c; --vermelho-fraco:#33191a;
    --contraste:#0e1320;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --sombra-tel:0 2px 6px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.55);
  }
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --papel:#0e1320; --superficie:#161d2e; --superficie-2:#1e2739;
  --tinta:#e7ecf5; --tinta-fraca:#98a3bd;
  --borda:#2a3448; --borda-forte:#3b4760;
  --caneta:#86a6ec; --caneta-fraca:#1c2740;
  --verde:#4fc79b; --verde-fraco:#122c25;
  --ambar:#e2a648; --ambar-fraco:#2e2417;
  --vermelho:#f2867c; --vermelho-fraco:#33191a;
  --contraste:#0e1320;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --sombra-tel:0 2px 6px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font: 400 15px/1.55 Archivo, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; }
.num  { font-variant-numeric: tabular-nums; }
.neg { color: var(--vermelho); }
.pos { color: var(--verde); }
/* em bloco de fundo escuro, o vermelho/verde escuros somem: usa as versões claras */
.saldo-real .neg, .saldo-topo > div.fim .neg, .fim .neg { color: #f2867c; }
.saldo-real .pos, .saldo-topo > div.fim .pos, .fim .pos { color: #4fc79b; }
:focus-visible { outline: 2px solid var(--caneta); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ============================================================ moldura */
.cabeca { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.cabeca h1 { margin: 0; font-size: clamp(26px, 4.5vw, 36px); font-weight: 700; letter-spacing: -.022em; text-wrap: balance; }
.cabeca p { margin: 0; max-width: 64ch; color: var(--tinta-fraca); }
.cabeca code { font-family: "IBM Plex Mono", monospace; font-size: 12.5px; }
.selo {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  padding: 5px 11px; border-radius: 999px; background: var(--ambar-fraco); color: var(--ambar);
  border: 1px solid color-mix(in srgb, var(--ambar) 28%, transparent);
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.grupo-ctl { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.grupo-ctl > .et {
  width: 52px; flex: none; font-size: 10.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-fraca);
}

.meio-sel { display: inline-flex; padding: 3px; gap: 3px; border-radius: 999px; border: 1px solid var(--borda-forte); background: var(--superficie-2); }
.meio-sel button {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px;
  border-radius: 999px; border: 0; background: none; color: var(--tinta-fraca);
  font: 600 13.5px Archivo, sans-serif; cursor: pointer;
}
.meio-sel button svg { width: 15px; height: 15px; }
.meio-sel button[aria-selected="true"] { background: var(--caneta); color: var(--contraste); }
.meio-sel .larg { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; opacity: .7; }

@media (min-width: 940px) { .palco.celular { grid-template-columns: 375px 1fr; } }

/* ============================================================ telefone */
.telefone {
  display: flex; flex-direction: column;
  width: 100%; min-height: 100dvh;
  background: var(--papel);
}
.corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.tela { padding: 16px 16px 22px; display: flex; flex-direction: column; gap: 15px; }
.barra { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--borda); background: var(--superficie-2); }
.barra button {
  padding: 9px 2px 10px; border: 0; background: none; cursor: pointer;
  font: 600 10px Archivo, sans-serif; color: var(--tinta-fraca);
  display: flex; flex-direction: column; align-items: center; gap: 3px; border-top: 2px solid transparent;
}
.barra button svg { width: 18px; height: 18px; }
.barra button[aria-selected="true"] { color: var(--caneta); border-top-color: var(--caneta); }

/* folha do "Mais": o menu do app, subindo de baixo */
.folha-fundo { position: fixed; inset: 0; background: rgba(9,14,26,.45); z-index: 40; animation: apaga .15s ease; }
.folha {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  background: var(--superficie); border-top: 1px solid var(--borda);
  border-radius: 18px 18px 0 0; box-shadow: var(--sombra-tel);
  padding: 8px 14px calc(14px + env(safe-area-inset-bottom));
  animation: sobe .18s ease;
}
.folha .alca { width: 38px; height: 4px; border-radius: 2px; background: var(--borda-forte); margin: 4px auto 12px; }
.folha-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.folha-grade button {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 4px; border: 0; border-radius: 12px; background: var(--superficie-2); cursor: pointer;
  font: 600 10.5px Archivo, sans-serif; color: var(--tinta); text-align: center; line-height: 1.15;
}
.folha-grade button svg { width: 21px; height: 21px; color: var(--caneta); }
.folha-grade button[aria-selected="true"] { background: var(--caneta); color: var(--contraste); }
.folha-grade button[aria-selected="true"] svg { color: var(--contraste); }
/* lista de lançamentos no celular: nome e valor em cima, explicação no meio,
   links embaixo — o valor não briga por espaço com o nome */
.lancs { display: flex; flex-direction: column; }
.lanc { display: flex; flex-direction: column; gap: 3px; padding: 12px 0; border-bottom: 1px solid var(--borda); }
.lanc .cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lanc .cab .nome { font-size: 15px; min-width: 0; }
.lanc .cab .val { font-size: 16px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lanc .dica { font-size: 12.5px; }
.lanc .acoes-lanc { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 3px; }
.lanc .acoes-lanc .link { font-size: 13px; padding: 4px 0; }
.lanc.total { border-bottom: 0; padding-top: 14px; }

/* folha de escolha (o que o <select> abriria) */
.folha-sel { max-height: 78dvh; display: flex; flex-direction: column; }
.folha-titulo { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-fraca); padding: 0 4px 8px; }
.folha-lista { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.folha-grupo { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-fraca); padding: 12px 4px 5px; }
.folha-op {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 12px; border: 0; border-radius: 10px; background: none; cursor: pointer;
  font: 500 15px Archivo, sans-serif; color: var(--tinta); text-align: left;
}
.folha-op + .folha-op { border-top: 1px solid var(--borda); border-radius: 0; }
.folha-op svg { width: 18px; height: 18px; flex: none; color: var(--caneta); }
.folha-op[aria-selected="true"] { background: var(--caneta-fraca); color: var(--caneta); font-weight: 700; border-radius: 10px; }
.folha-sair {
  margin-top: 10px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; border: 1px solid var(--borda); border-radius: 12px; background: none; cursor: pointer;
  font: 600 13px Archivo, sans-serif; color: var(--tinta-fraca);
}
.folha-sair svg { width: 16px; height: 16px; }
@keyframes sobe { from { transform: translateY(18px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes apaga { from { opacity: 0; } to { opacity: 1; } }

/* celular: informação mais junta, cara de app e não de relatório */
@media (max-width: 939px) {
  .tela { padding: 12px 12px 18px; gap: 11px; }
  .topo h2 { font-size: 17px; }
  .bloco { padding: 11px 12px; gap: 8px; border-radius: 12px; }
  .bloco.folgado { padding: 12px 13px; gap: 10px; }
  .rotulo { font-size: 10px; }
  .linha { padding: 7px 0; }
  .linha .nome { font-size: 13px; }
  .linha .val { font-size: 14px; }
  .dica { font-size: 11.5px; line-height: 1.35; }
  .saldos { gap: 8px; }
  .saldo-valor { font-size: 19px; }
  .saldo-nota { font-size: 10.5px; }
  .meses button { padding: 6px 9px; font-size: 11px; }
  .saldo-topo > div { padding: 9px 11px; }
  .saldo-topo .v { font-size: 18px; }
  .btn.pequeno { padding: 7px 11px; font-size: 12px; }
}

/* ============================================================ janela */
.janela {
  width: 100%; min-height: 100dvh;
  background: var(--papel);
}
.app { flex: 1; display: grid; grid-template-columns: 226px 1fr; min-height: 0; }
.lateral { border-right: 1px solid var(--borda); background: var(--superficie-2); display: flex; flex-direction: column; padding: 16px 12px; min-height: 0; }
.marca { display: flex; flex-direction: column; gap: 1px; padding: 0 10px 16px; }
.marca b { font-size: 15px; font-weight: 700; letter-spacing: -.015em; }
.marca span { font-size: 11px; color: var(--tinta-fraca); }
.lateral nav { display: flex; flex-direction: column; gap: 2px; }
.lateral nav button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  border-radius: 8px; border: 0; background: none; color: var(--tinta-fraca);
  font: 500 13.5px Archivo, sans-serif; cursor: pointer; text-align: left;
}
.lateral nav button svg { width: 17px; height: 17px; flex: none; }
.lateral nav button:hover { background: var(--superficie); color: var(--tinta); }
.lateral nav button[aria-selected="true"] { background: var(--caneta); color: var(--contraste); font-weight: 600; }
.lateral nav button .badge {
  margin-left: auto; padding: 1px 6px; border-radius: 999px; background: var(--vermelho);
  color: #fff; font-family: "IBM Plex Mono", monospace; font-size: 10px; font-weight: 600;
}
.lateral nav button[aria-selected="true"] .badge { background: var(--contraste); color: var(--caneta); }
.lateral .fio { height: 1px; background: var(--borda); margin: 10px 8px; }
.lateral .app-link + nav.rodape-nav { margin-top: 0; }
.lateral nav.rodape-nav { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--borda); margin-bottom: 8px; }
.quem-sou { padding: 10px; border-radius: 8px; background: var(--superficie); border: 1px solid var(--borda); display: flex; align-items: center; gap: 9px; }
.quem-sou .av { width: 30px; height: 30px; border-radius: 8px; flex: none; background: var(--caneta); color: var(--contraste); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.quem-sou b { display: block; font-size: 12.5px; font-weight: 600; }
.quem-sou span { font-size: 10.5px; color: var(--tinta-fraca); }

.principal { overflow-y: auto; min-width: 0; padding: 22px 26px 30px; }
.principal > .cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.principal > .cab h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.principal > .cab .sub { font-size: 13px; color: var(--tinta-fraca); }
.principal > .cab .acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.principal > .cab .acoes .chave { font-size: 13px; margin-right: 4px; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.secao { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.secao:last-child { margin-bottom: 0; }
.duas { display: grid; gap: 20px; }
@media (min-width: 1100px) { .duas { grid-template-columns: 1.45fr 1fr; } .duas.meio { grid-template-columns: 1fr 1fr; } }
.duas.meio { grid-template-columns: 1fr; }

/* ============================================================ pecas */
.topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.topo h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.015em; }
.topo .sub { font-size: 12px; color: var(--tinta-fraca); }
.rotulo { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-fraca); }

.meses { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
.meses button {
  flex: none; width: 39px; padding: 6px 0; border-radius: 8px; border: 1px solid var(--borda);
  background: var(--superficie); color: var(--tinta-fraca);
  font: 600 11.5px/1 Archivo, sans-serif; cursor: pointer;
}
.meses button[aria-selected="true"] { background: var(--caneta); border-color: var(--caneta); color: var(--contraste); }
.meses button.vazio { color: var(--borda-forte); }
.meses.solto { flex-wrap: wrap; overflow: visible; }
.meses.solto button { width: 46px; padding: 7px 0; font-size: 12px; }

.saldos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.saldo-real { padding: 13px 14px; border-radius: var(--r-g); background: var(--tinta); color: var(--papel); display: flex; flex-direction: column; gap: 2px; }
:root[data-theme="dark"] .saldo-real { background: var(--superficie-2); color: var(--tinta); border: 1px solid var(--borda-forte); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .saldo-real { background: var(--superficie-2); color: var(--tinta); border: 1px solid var(--borda-forte); }
}
.saldo-real .rotulo { color: color-mix(in srgb, currentColor 62%, transparent); }
.saldo-prev { padding: 13px 14px; border-radius: var(--r-g); border: 1px dashed var(--borda-forte); display: flex; flex-direction: column; gap: 2px; }
.saldo-valor { font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.saldo-nota { font-size: 11px; opacity: .72; }

.faixa { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--borda); border-radius: var(--r-g); background: var(--superficie); overflow: hidden; }
.faixa > div { padding: 13px 16px; border-left: 1px solid var(--borda); display: flex; flex-direction: column; gap: 3px; }
.faixa > div:first-child { border-left: 0; }
.faixa .v { font-size: 22px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.faixa .n { font-size: 11px; color: var(--tinta-fraca); }
.faixa > div.destaque { box-shadow: inset 0 3px 0 var(--caneta); }
.faixa > div.previsao { border-left: 1px dashed var(--borda-forte); background: var(--superficie-2); }
@media (max-width: 1099px) { .faixa { grid-template-columns: repeat(2, 1fr); } .faixa > div:nth-child(odd) { border-left: 0; } }

.linhas { display: flex; flex-direction: column; max-height: 62vh; overflow-y: auto; }
.linha { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--borda); }
.linha:last-child { border-bottom: 0; }
.linha .nome { font-size: 13.5px; }
.linha .val { font-size: 13.5px; font-weight: 600; text-align: right; white-space: nowrap; }

.bloco { border: 1px solid var(--borda); border-radius: var(--r-g); background: var(--superficie); padding: 13px 14px; display: flex; flex-direction: column; gap: 11px; }
.bloco.plano { border: 0; background: transparent; padding: 0; }
.bloco.folgado { padding: 16px 18px; gap: 13px; }
.bloco.aviso { border-color: var(--ambar); background: var(--ambar-fraco); }
.bloco.aviso .rotulo { color: var(--ambar); }

.cat { display: flex; flex-direction: column; gap: 8px; }
.cat-item { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; }
.cat-nome { font-size: 12px; font-weight: 500; }
.cat-val { font-size: 12px; font-weight: 600; }
.cat-trilha { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--superficie-2); overflow: hidden; }
.cat-barra { height: 100%; border-radius: 3px; background: var(--caneta); }
.cat-item.sistema .cat-nome::after {
  content: "sistema"; margin-left: 7px; padding: 1px 5px; border-radius: 4px;
  background: var(--caneta-fraca); color: var(--caneta);
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.cat-item.estoura .cat-barra { background: var(--vermelho); }
.cat-item.estoura .cat-val { color: var(--vermelho); }

.pill { display: inline-block; padding: 2px 7px; border-radius: 5px; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.pill.aberto { background: var(--caneta-fraca); color: var(--caneta); }
.pill.hoje { background: var(--ambar-fraco); color: var(--ambar); }
.pill.atrasado { background: var(--vermelho-fraco); color: var(--vermelho); }
.pill.recebido { background: var(--verde-fraco); color: var(--verde); }
.pill.neutro { background: var(--superficie-2); color: var(--tinta-fraca); }

.titulo-cartao { display: grid; grid-template-columns: 4px 1fr auto; gap: 0 11px; border: 1px solid var(--borda); border-radius: var(--r); background: var(--superficie); overflow: hidden; }
.titulo-cartao .faixa-est { background: var(--borda-forte); }
.titulo-cartao.st-hoje .faixa-est { background: var(--ambar); }
.titulo-cartao.st-atrasado .faixa-est { background: var(--vermelho); }
.titulo-cartao.st-recebido .faixa-est { background: var(--verde); }
.titulo-cartao .meio { padding: 10px 0; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.titulo-cartao .dir { padding: 10px 12px 10px 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.titulo-nome { font-size: 13.5px; font-weight: 600; }
.titulo-meta { font-size: 11px; color: var(--tinta-fraca); display: flex; flex-wrap: wrap; gap: 4px 9px; }
.titulo-val { font-size: 14.5px; font-weight: 700; }
.titulo-val small { font-size: 10.5px; font-weight: 500; color: var(--tinta-fraca); display: block; text-align: right; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 15px; border-radius: var(--r); border: 1px solid var(--caneta);
  background: var(--caneta); color: var(--contraste);
  font: 600 13.5px Archivo, sans-serif; cursor: pointer; transition: filter .15s;
}
.btn:hover { filter: brightness(1.08); }
.btn.fantasma { background: transparent; color: var(--caneta); }
.btn.neutro { background: transparent; border-color: var(--borda-forte); color: var(--tinta); }
.btn.pequeno { padding: 5px 10px; font-size: 11.5px; border-radius: 7px; }
.btn.largo { width: 100%; }
.btn[disabled] { opacity: .45; cursor: default; filter: none; }

.campo { display: flex; flex-direction: column; gap: 5px; }
.campo > label { font-size: 11.5px; font-weight: 600; color: var(--tinta-fraca); }
.campo input, .campo select {
  width: 100%; padding: 9px 11px; border-radius: var(--r); border: 1px solid var(--borda-forte);
  background: var(--superficie); color: var(--tinta); font: 400 14.5px Archivo, sans-serif;
}
.campo input.mono { font-family: "IBM Plex Mono", monospace; font-size: 13.5px; }
.campo input[readonly] { background: var(--superficie-2); color: var(--tinta-fraca); }
.dica { font-size: 11.5px; color: var(--tinta-fraca); }
.dica b { color: var(--tinta); font-weight: 600; }
.dica b.neg { color: var(--vermelho); }
.dica b.pos { color: var(--verde); }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tripla { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 700px) { .tripla { grid-template-columns: repeat(3, 1fr); } }
/* data não precisa da largura toda: no desktop fica do tamanho de uma data */
@media (min-width: 700px) { .campo > input[type=date] { max-width: 200px; } }
.chave { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: var(--r); background: var(--superficie-2); cursor: pointer; }
.chave input { accent-color: var(--caneta); width: 16px; height: 16px; }
.chave span { font-size: 13px; font-weight: 600; }

/* seletor de tipo de lancamento */
.tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.tipos button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--borda);
  background: var(--superficie); cursor: pointer; text-align: left;
}
.tipos button b { font: 600 13px Archivo, sans-serif; color: var(--tinta); }
.tipos button span { font-size: 10.5px; color: var(--tinta-fraca); }
.tipos button[aria-selected="true"] { border-color: var(--caneta); background: var(--caneta-fraca); box-shadow: inset 0 0 0 1px var(--caneta); }
.tipos button[aria-selected="true"] b { color: var(--caneta); }
@media (min-width: 700px) { .tipos.quatro { grid-template-columns: repeat(4, 1fr); } }

/* o seletor de origem do dinheiro - a peca que o pedido novo exige */
.origem-lista { display: flex; flex-direction: column; gap: 7px; }
.origem-lista.lado { display: grid; grid-template-columns: repeat(3, 1fr); }
.grupos-extrato { display: flex; flex-direction: column; gap: 14px; }
.grupos-extrato .campo { gap: 6px; }
.origem {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px;
  padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--borda);
  background: var(--superficie); cursor: pointer; text-align: left;
}
/* nome à esquerda (com o tipo embaixo), valor à direita, grande */
.origem b { font: 600 13.5px Archivo, sans-serif; grid-column: 1; grid-row: 1; }
.origem .tp { font-size: 10.5px; color: var(--tinta-fraca); grid-column: 1; grid-row: 2; }
.origem .sd { font: 700 22px "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; grid-column: 2; grid-row: 1 / span 2; text-align: right; }
.origem b .dica { font-weight: 500; }
.origem[aria-selected="true"] { border-color: var(--caneta); background: var(--caneta-fraca); box-shadow: inset 0 0 0 1px var(--caneta); }
.origem[aria-selected="true"] b, .origem[aria-selected="true"] .sd { color: var(--caneta); }

.previa { border: 1px solid var(--caneta); border-radius: var(--r-g); overflow: hidden; }
.previa-topo { padding: 8px 12px; background: var(--caneta-fraca); display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.previa-topo .rotulo { color: var(--caneta); }
.previa-topo .soma { font-size: 12px; font-weight: 700; color: var(--caneta); }
table.grade { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.grade th { text-align: left; padding: 6px 12px; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-fraca); border-bottom: 1px solid var(--borda); background: var(--superficie); }
table.grade td { padding: 6px 12px; border-bottom: 1px solid var(--borda); }
table.grade tr:last-child td { border-bottom: 0; }
table.grade td.dir, table.grade th.dir { text-align: right; }
table.grade tr.sobra td { background: var(--ambar-fraco); }
table.grade tr.sobra td:first-child::after { content: "sobra"; margin-left: 6px; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ambar); }

/* lista nunca cresce sem limite: rola dentro do quadro, cabeçalho fixo */
.rolagem { overflow: auto; max-height: 62vh; border: 1px solid var(--borda); border-radius: var(--r-g); background: var(--superficie); }
.rolagem table.lista thead th, .rolagem table.matriz thead th { position: sticky; top: 0; z-index: 1; }
.rolagem table.lista tfoot td { position: sticky; bottom: 0; background: var(--superficie-2); }
table.lista { width: 100%; border-collapse: collapse; font-size: 13px; }
table.lista thead th { text-align: left; padding: 9px 14px; background: var(--superficie-2); font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-fraca); border-bottom: 1px solid var(--borda); white-space: nowrap; }
table.lista tbody td { padding: 10px 14px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
table.lista tbody tr:last-child td { border-bottom: 0; }
table.lista tbody tr:hover td { background: var(--superficie-2); }
table.lista .dir { text-align: right; }
table.lista .est-atrasado td:first-child { box-shadow: inset 3px 0 0 var(--vermelho); }
table.lista .est-hoje td:first-child { box-shadow: inset 3px 0 0 var(--ambar); }
table.lista .est-recebido td:first-child { box-shadow: inset 3px 0 0 var(--verde); }
table.lista .est-aberto td:first-child { box-shadow: inset 3px 0 0 var(--borda-forte); }
table.lista tfoot td { padding: 9px 14px; border-top: 1px solid var(--borda-forte); background: var(--superficie-2); font-weight: 700; font-size: 12.5px; }
.quem-col { display: flex; flex-direction: column; gap: 1px; }
.quem-col b { font-weight: 600; font-size: 13px; }
.quem-col span { font-size: 10.5px; color: var(--tinta-fraca); }

/* abas de secao: sublinhado, nao pilula - pilula parece filtro */
.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--borda); }
.abas button {
  padding: 9px 15px 10px; border: 0; background: none; cursor: pointer;
  color: var(--tinta-fraca); font: 600 13.5px Archivo, sans-serif;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 7px;
}
.abas button:hover { color: var(--tinta); }
.abas button .qt {
  padding: 1px 6px; border-radius: 999px; background: var(--superficie-2);
  font: 600 10.5px "IBM Plex Mono", monospace; color: var(--tinta-fraca);
}
.abas button[aria-selected="true"] { color: var(--caneta); border-bottom-color: var(--caneta); }
.abas button[aria-selected="true"] .qt { background: var(--caneta-fraca); color: var(--caneta); }

.filtros { display: flex; flex-wrap: wrap; gap: 7px; }
.filtros button { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--borda); background: var(--superficie); color: var(--tinta-fraca); font: 600 12px Archivo, sans-serif; cursor: pointer; }
.filtros button[aria-selected="true"] { border-color: var(--caneta); color: var(--caneta); background: var(--caneta-fraca); }

.arquivo { border: 1px dashed var(--borda-forte); border-radius: var(--r-g); padding: 11px 12px; display: flex; flex-direction: column; gap: 4px; background: var(--superficie-2); }
.arquivo .nome { font-size: 12px; font-weight: 600; word-break: break-all; }
.arquivo .meta { font-size: 11px; color: var(--tinta-fraca); }
.confere { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: var(--r); background: var(--verde-fraco); color: var(--verde); font-size: 12px; font-weight: 600; }
.confere svg { width: 15px; height: 15px; flex: none; }
.placar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.placar div { padding: 9px 4px; border-radius: var(--r); border: 1px solid var(--borda); background: var(--superficie); text-align: center; }
.placar .q { font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.placar .l { font-size: 9.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-fraca); }
.placar div.alerta { border-color: var(--ambar); background: var(--ambar-fraco); }
.placar div.alerta .q, .placar div.alerta .l { color: var(--ambar); }

.evento { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 9px 0; border-bottom: 1px solid var(--borda); }
.evento:last-child { border-bottom: 0; }
.evento .quem { font-size: 13px; font-weight: 600; }
.evento .que { font-size: 11px; color: var(--tinta-fraca); grid-column: 1; }
.evento .quanto { font-size: 13px; font-weight: 700; text-align: right; }
.evento .acao { grid-column: 2; }

.cru { margin: 0; padding: 12px 14px; overflow-x: auto; background: var(--tinta); border-radius: var(--r-g); font-family: "IBM Plex Mono", monospace; font-size: 11.5px; line-height: 1.75; color: var(--papel); white-space: pre; }
:root[data-theme="dark"] .cru { background: #080c15; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cru { background: #080c15; } }
.cru .regua { color: color-mix(in srgb, var(--papel) 34%, transparent); }
.cru .cab { color: color-mix(in srgb, var(--papel) 62%, transparent); }
.cru mark { background: color-mix(in srgb, var(--caneta) 55%, transparent); color: #fff; border-radius: 2px; }
.cru mark.b { background: color-mix(in srgb, var(--verde) 45%, transparent); }
.campos-legenda { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; }
.campos-legenda span { font-family: "IBM Plex Mono", monospace; }

table.matriz { border-collapse: collapse; font-size: 12px; min-width: 100%; }
table.matriz th, table.matriz td { padding: 6px 8px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
table.matriz thead th { position: sticky; top: 0; z-index: 1; background: var(--superficie-2); font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-fraca); text-align: right; }
table.matriz thead th:first-child { text-align: left; left: 0; z-index: 2; }
table.matriz tbody th { position: sticky; left: 0; background: var(--superficie); text-align: left; font-size: 11.5px; font-weight: 600; border-right: 1px solid var(--borda); }
table.matriz td { text-align: right; color: var(--tinta-fraca); }
table.matriz td.tem { color: var(--tinta); font-weight: 500; }
table.matriz td.ajustado { color: var(--ambar); font-weight: 600; }
table.matriz td.ajustado::after { content: "•"; margin-left: 3px; color: var(--ambar); }
table.matriz td.editavel { cursor: text; }
table.matriz td.editavel:hover, table.matriz td.editavel:focus { background: var(--caneta-fraca); outline: none; cursor: pointer; }
table.matriz tr.grupo th { background: var(--superficie-2); color: var(--tinta-fraca); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
table.matriz tr.subtotal th, table.matriz tr.subtotal td { font-weight: 700; color: var(--tinta); border-top: 1px solid var(--borda-forte); }
.link-item { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.link-item:hover { color: var(--caneta); text-decoration: underline; }
table.matriz td.editavel:hover { box-shadow: inset 0 0 0 1px var(--borda-forte); }
table.matriz td.total, table.matriz th.total { background: var(--superficie-2); font-weight: 700; color: var(--tinta); }
table.matriz tfoot th, table.matriz tfoot td { border-top: 1px solid var(--borda-forte); background: var(--superficie-2); font-weight: 700; color: var(--tinta); }
.legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--tinta-fraca); }
.legenda span { display: inline-flex; align-items: center; gap: 5px; }
.legenda span.info { width: auto; height: auto; border: 0; border-radius: 0; background: none; font: inherit; color: inherit; margin: 0; cursor: help; border-bottom: 1px dotted var(--borda-forte); }
.legenda span.info:hover { color: var(--tinta); border-bottom-color: var(--tinta); }
.legenda i { width: 8px; height: 8px; border-radius: 2px; font-style: normal; }

/* extrato */
.saldo-topo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 700px) { .saldo-topo { grid-template-columns: repeat(4, 1fr); } }
.saldo-topo > div { padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--borda); background: var(--superficie); display: flex; flex-direction: column; gap: 1px; }
.saldo-topo .v { font: 700 22px/1.2 Archivo, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
@media (min-width: 940px) { .saldo-topo .v { font-size: 24px; } }
.saldo-topo > div { padding: 12px 14px; }
.saldo-topo > div.fim { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
:root[data-theme="dark"] .saldo-topo > div.fim { background: var(--superficie-2); color: var(--tinta); border-color: var(--borda-forte); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .saldo-topo > div.fim { background: var(--superficie-2); color: var(--tinta); border-color: var(--borda-forte); } }
.saldo-topo > div.fim .rotulo { color: color-mix(in srgb, currentColor 62%, transparent); }

.mov { display: grid; grid-template-columns: 42px 1fr auto; gap: 1px 10px; padding: 9px 0; border-bottom: 1px solid var(--borda); align-items: baseline; }
.mov:last-child { border-bottom: 0; }
/* linha que já está dentro do saldo inicial: só a coluna do saldo fica apagada; o texto continua normal */
.mov.fora .sd, tr.fora td.sd { color: var(--tinta-fraca); }
.mov.fora .sd { font-size: 9.5px; }
.apagar { border: 1px solid var(--borda); background: var(--superficie); color: var(--tinta-fraca); border-radius: 6px;
  width: 22px; height: 22px; line-height: 1; font: 600 14px Archivo, sans-serif; cursor: pointer; vertical-align: middle; }
.apagar:hover { color: var(--vermelho); border-color: var(--vermelho); }
.veu { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.45); display: grid; place-items: center; padding: 18px; }
.dialogo { width: min(440px, 100%); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-g); box-shadow: var(--sombra-tel); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.dialogo .rotulo { font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--tinta); font-weight: 700; }
.dlg-texto { font-size: 15px; line-height: 1.5; color: var(--tinta); }
.dlg-botoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.dlg-botoes .btn { min-width: 110px; }
.btn.cinza { background: var(--superficie-2); border-color: var(--borda); color: var(--tinta-fraca); margin-right: auto; }
.btn.perigo { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
table.importar td { vertical-align: top; }
table.importar td.memo { font: 500 11.5px "IBM Plex Mono", monospace; max-width: 260px; white-space: normal; }
table.importar tr.morta td { opacity: .7; }
table.importar tr.ignorada td.memo { text-decoration: line-through; }
table.importar .celula { width: 100%; min-width: 120px; padding: 5px 7px; font-size: 12.5px; border: 1px solid var(--borda); border-radius: 6px; background: var(--superficie); color: var(--tinta); }
table.importar select.celula { min-width: 110px; }
.chave.mini { font-size: 11.5px; gap: 4px; }
.cab-previa { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
input[type=file] { font-size: 13px; }
.link { border: 0; background: none; padding: 0; color: var(--tinta-fraca); font: 600 11.5px Archivo, sans-serif; cursor: pointer; text-decoration: underline; }
.link:hover { color: var(--vermelho); }
.mini-acoes { display: block; margin-top: 4px; font-size: 11.5px; color: var(--tinta-fraca); text-align: right; }
.mov .dt { font: 600 11px "IBM Plex Mono", monospace; color: var(--tinta-fraca); grid-row: 1 / span 2; }
.mov .ds { font-size: 13px; font-weight: 600; }
.mov .og { font-size: 10.5px; grid-column: 2; }
.mov .vl { font: 700 13.5px "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; text-align: right; }
.mov .sd { font: 500 10.5px "IBM Plex Mono", monospace; color: var(--tinta-fraca); text-align: right; grid-column: 3; }

/* cartao cadastrado */
.plastico {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
  padding: 13px 14px; border-radius: var(--r-g); border: 1px solid var(--borda);
  background: var(--superficie);
}
.plastico .nm { font: 700 14px Archivo, sans-serif; letter-spacing: -.01em; }
.plastico .fn { font: 600 12px "IBM Plex Mono", monospace; color: var(--tinta-fraca); }
.plastico .dd { font-size: 11px; color: var(--tinta-fraca); grid-column: 1; }
.plastico .lm { text-align: right; font-size: 11px; color: var(--tinta-fraca); }
.plastico .lm b { display: block; font: 700 15px Archivo, sans-serif; font-variant-numeric: tabular-nums; color: var(--tinta); }
.plastico .trilha { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--superficie-2); overflow: hidden; margin-top: 3px; }
.plastico .trilha i { display: block; height: 100%; background: var(--caneta); }
.plastico .vinc { grid-column: 1 / -1; font-size: 11px; color: var(--tinta-fraca); }
.plastico .vinc b { color: var(--caneta); font-weight: 600; }
.plastico.sem-banco .vinc b { color: var(--ambar); }

/* ============================================================ notas */
@media (min-width: 900px) { .notas.tri { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.rodape { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--borda); font-size: 12.5px; color: var(--tinta-fraca); max-width: 74ch; }

/* ------------------------------------------------- ajustes do app real */
html, body { margin: 0; background: var(--papel); }
#raiz { min-height: 100dvh; }

.telefone .corpo { flex: 1; overflow: visible; }
.telefone .barra { position: sticky; bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
.janela .app { min-height: 100dvh; }
.janela .lateral { position: sticky; top: 0; height: 100dvh; }

/* entrada — dimensionada para dedo, não para maquete.
   O mock foi desenhado dentro de um aparelho pequeno na tela do desktop;
   em celular de verdade aquelas medidas ficam apertadas demais. */
.entrada {
  min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 32px 20px max(32px, env(safe-area-inset-bottom));
}
.entrada form {
  width: 100%; max-width: 380px; margin: 0 auto; padding: 32px 26px 30px;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 16px; box-shadow: var(--sombra);
}
.entrada h1 { margin: 0 0 6px; font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--caneta); }
.entrada .dica { margin: 0 0 26px; font-size: 14px; }
.entrada .alternar { margin: 22px 0 0; text-align: center; }
.entrada .alternar .link { font-size: 14px; font-weight: 600; }
.entrada label {
  display: block; margin: 20px 0 7px;
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
  text-transform: none; color: var(--tinta-fraca);
}
.entrada input {
  width: 100%; min-height: 52px; padding: 14px 15px;
  font: 400 16px/1.3 inherit;          /* 16px evita o zoom do iOS ao focar */
  color: var(--tinta); background: var(--superficie);
  border: 1.5px solid var(--borda-forte); border-radius: 11px;
}
.entrada input:focus {
  outline: none; border-color: var(--caneta);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--caneta) 18%, transparent);
}
.entrada .btn {
  width: 100%; min-height: 54px; margin-top: 28px;
  justify-content: center; font-size: 16.5px; font-weight: 600; border-radius: 11px;
}
.entrada .aviso-erro {
  margin-top: 18px; padding: 13px 14px; font-size: 14px; line-height: 1.45;
  color: var(--vermelho); background: var(--vermelho-fraco);
  border: 1px solid color-mix(in srgb, var(--vermelho) 28%, transparent);
  border-radius: 11px;
}

/* telas que ainda nao existem */
.em-breve { padding: 40px 22px; text-align: center; }
.em-breve svg { color: var(--tinta-fraca); opacity: .5; }
.em-breve h3 { margin: 14px 0 6px; font-size: 16px; }
.em-breve p { max-width: 380px; margin: 0 auto; color: var(--tinta-fraca); font-size: 13.5px; }

/* o botão de gravar do celular acompanha a rolagem: o formulário é longo e
   ele ficava lá embaixo, fora da vista */
.gravar-fixo { position: sticky; bottom: 10px; z-index: 5; box-shadow: var(--sombra-tel); }

/* O aviso de rodapé é uma FAIXA, não um balão: texto comprido num balão
   arredondado virava elipse e ficava ilegível. Ocupa a largura da tela (menos
   uma margem), alinhado à esquerda, logo acima da barra de navegação. */
.recado {
  position: fixed; left: 12px; right: 12px; bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 60;
  padding: 13px 16px; font: 500 14px/1.4 Archivo, sans-serif; color: #fff; text-align: left;
  background: var(--tinta); border-radius: 12px; box-shadow: var(--sombra-tel);
  animation: recado-sobe .18s ease;
}
@keyframes recado-sobe { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 940px) {
  .recado { left: 50%; right: auto; bottom: 24px; max-width: 460px; transform: translateX(-50%); }
  @keyframes recado-sobe { from { transform: translate(-50%, 10px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
}

/* ==================================================================
   Escala de celular.

   O CSS veio do mock, onde o "celular" era um aparelho de 375px
   desenhado dentro da página do desktop — tipografia de 10 a 13px
   funcionava ali. Em aparelho de verdade fica pequeno demais para ler
   e para acertar com o dedo.

   Aqui a escala sobe e os alvos de toque passam de 44px. Os 16px nos
   campos não são estética: abaixo disso o iOS dá zoom sozinho ao focar.
   ================================================================== */
@media (max-width: 939px) {
  body { font-size: 16px; }

  .tela { padding: 18px 16px 28px; gap: 17px; }
  .topo h2 { font-size: 24px; }
  .topo .sub, .sub { font-size: 14px; }

  .rotulo { font-size: 12px; letter-spacing: .05em; }
  .dica { font-size: 14px; line-height: 1.5; }
  .pill { font-size: 12px; padding: 4px 10px; }
  .mono { font-size: .95em; }

  /* botões e campos: alvo de toque de 48px para cima */
  .btn { min-height: 44px; padding: 10px 18px; font-size: 15px; border-radius: 10px; }
  .btn.pequeno { min-height: 36px; padding: 7px 14px; font-size: 13.5px; }
  .campo { gap: 3px; }
  .campo label { font-size: 14px; margin-bottom: 0; }
  /* 16px na fonte impede o zoom automático do iPhone ao focar; a altura
     fica em 42px, que ainda é alvo de toque confortável */
  .campo input, .campo select, input, select, textarea {
    min-height: 42px; padding: 8px 12px; font-size: 16px; border-radius: 9px;
  }
  .chave { font-size: 15px; padding: 6px 0; }
  .chave input[type=checkbox] { width: 22px; height: 22px; }

  /* barra de navegação de baixo */
  .barra button { padding: 11px 2px 13px; font-size: 11.5px; gap: 5px; }
  .barra button svg { width: 23px; height: 23px; }

  /* listas e linhas */
  .linha { padding: 14px 0; gap: 12px; }
  .linha .nome, .nome { font-size: 15.5px; }
  .linha .val, .val, .valor { font-size: 16.5px; }
  .linha small, small { font-size: 13px; }

  /* cartões de indicador do painel */
  .bloco { padding: 16px; border-radius: 14px; }
  .bloco .v, .placar .q { font-size: 24px; }
  .bloco .l, .placar .l { font-size: 12.5px; }
  .saldo-nota { font-size: 13.5px; }

  /* Seletor de mês: grade de 6 por linha, não fila rolante.
     Com 44px de alvo de toque, 12 meses não cabem numa linha de 375px —
     a fila rolante escondia de AGO em diante e ninguém rola para achar.
     Duas linhas de 6 mostram o ano inteiro e cabem em 343px.
     A largura fixa de 39px da regra de desktop tem de sair junto: com
     padding lateral de 16px e box-sizing border-box, sobravam 7px para
     escrever JAN, e o texto vazava por cima do botão vizinho. */
  .meses { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
           overflow: visible; padding-bottom: 0; }
  .meses button { width: auto; min-height: 44px; font-size: 14.5px; padding: 10px 2px; }

  .tipos button, .abas button {
    min-height: 44px; font-size: 14.5px; padding: 10px 16px;
  }
  /* os filtros são chips, não botões de formulário: no celular estavam do
     tamanho de um botão e empurravam tudo (a tela de confirmar ficava com
     "De quem é" ocupando três linhas ao lado da categoria) */
  .filtros button { min-height: 36px; font-size: 13px; padding: 7px 12px; }
  /* dois campos lado a lado em 375px espremem rótulo e select: um por linha.
     Só quando são campos — linha de botões (Voltar/Confirmar) continua lado
     a lado, que é onde o polegar espera. */
  .dupla:has(> .campo), .tripla:has(> .campo) { grid-template-columns: 1fr; }
  .tipos button b { font-size: 15px; }
  .tipos button span { font-size: 12.5px; }

  /* eventos e tabelas roláveis */
  .evento { padding: 13px 0; }
  .evento .quem { font-size: 15px; }
  .evento .quanto { font-size: 16px; }
  .evento .que { font-size: 12.5px; }
  .lista th, .lista td, .grade th, .grade td, .matriz th, .matriz td { font-size: 14px; padding: 11px 10px; }

  .legenda { font-size: 13px; }
  .em-breve h3 { font-size: 19px; }
  .em-breve p { font-size: 15px; line-height: 1.55; }
}

/* ------------------------------------------------------------ fluxo */
.fluxo { display: flex; flex-direction: column; gap: 14px; }
.chips .chip-fio { width: 1px; align-self: stretch; background: var(--borda); margin: 2px 4px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--tinta-fraca); font: 600 12.5px Archivo, sans-serif; cursor: pointer; }
.chip[aria-selected="true"] { background: var(--caneta); border-color: var(--caneta); color: #fff; }
details.fx { padding: 0; }
details.fx summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; align-items: flex-start; }
details.fx summary::-webkit-details-marker { display: none; }
details.fx summary .val { text-align: right; white-space: nowrap; }
details.fx summary .fx-conta { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
details.fx summary .fx-conta .dica b { font-weight: 700; }
details.fx .linhas { padding: 0 14px 10px; }
details.fx.falta { border-color: var(--vermelho); background: var(--vermelho-fraco); }
details.fx.falta summary .nome b { color: var(--vermelho); }
details.fx.aperto { border-color: var(--ambar); background: var(--ambar-fraco); }
details.fx.aperto summary .nome b { color: var(--ambar); }

/* ------------------------------------------------------------ ⓘ e balão */
.info { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 5px; vertical-align: 1px;
  border-radius: 50%; border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--tinta-fraca);
  font: 700 10px/1 Georgia, serif; font-style: italic; cursor: help; padding: 0; text-transform: none; letter-spacing: 0; }
.info:hover { border-color: var(--caneta); color: var(--caneta); }
.fim .info, .destaque .info, .previsao .info { background: transparent; color: inherit; border-color: currentColor; opacity: .75; }
#balao { position: fixed; z-index: 60; padding: 10px 12px; border-radius: 10px; background: var(--superficie); color: var(--tinta);
  border: 1px solid var(--borda-forte); box-shadow: var(--sombra); font-size: 13px; line-height: 1.45; text-transform: none; letter-spacing: 0; font-weight: 400; }
#balao .gl { display: flex; justify-content: space-between; gap: 14px; margin-top: 3px; }
#balao .gl b.neg { color: var(--vermelho); } #balao .gl b.pos { color: var(--verde); }
.gmes { cursor: help; } .gmes:hover { fill: var(--caneta); fill-opacity: .06; }
@media (max-width: 939px) { .info { width: 18px; height: 18px; font-size: 12px; margin-left: 6px; } #balao { font-size: 14px; } }

.dlg-entrada { width: 100%; min-height: 44px; padding: 10px 12px; font: 400 16px/1.3 inherit; color: var(--tinta);
  background: var(--superficie); border: 1.5px solid var(--borda-forte); border-radius: 10px; text-transform: uppercase; }

.origem.cartao { border-style: dashed; }
.origem.cartao[aria-selected="true"] { border-style: solid; }

/* ------------------------------------------------------------ pessoal × empresa */
.saldo-topo.tres { grid-template-columns: repeat(3, 1fr); }
.lado-dono.empresa { border-color: var(--caneta); }
.filtros .fio-v { width: 1px; background: var(--borda); align-self: stretch; margin: 0 3px; }
.filtros.dono button[aria-selected="true"] { background: var(--caneta); border-color: var(--caneta); color: #fff; }

/* ------------------------------------------------------------ ajuda */
.ajuda { display: flex; flex-direction: column; gap: 10px; max-width: 78ch; }
.ajuda-sec { border: 1px solid var(--borda); border-radius: var(--r-g); background: var(--superficie); }
.ajuda-sec summary { cursor: pointer; padding: 12px 14px; font: 700 15px Archivo, sans-serif; color: var(--tinta); list-style: none; display: flex; justify-content: space-between; }
.ajuda-sec summary::-webkit-details-marker { display: none; }
.ajuda-sec summary::after { content: "+"; color: var(--tinta-fraca); font-weight: 600; }
.ajuda-sec[open] summary::after { content: "−"; }
.ajuda-corpo { padding: 0 14px 14px; font-size: 14px; line-height: 1.55; color: var(--tinta); }
.ajuda-corpo p, .ajuda-corpo ul, .ajuda-corpo ol { margin: 8px 0; }
.ajuda-corpo li { margin: 5px 0; }
.ajuda-corpo ul, .ajuda-corpo ol { padding-left: 20px; }
.ajuda-entrada { justify-content: flex-start; }
.ajuda-caixa { width: 100%; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.ajuda-caixa .topo h1 { margin: 0; font-size: 26px; color: var(--caneta); }
.ajuda-caixa .topo { align-items: center; }
.ajuda-caixa .topo .btn { width: auto; min-height: 0; padding: 7px 14px; }
@media (max-width: 939px) { .ajuda-corpo { font-size: 15px; } .ajuda-sec summary { font-size: 16px; } }

/* ------------------------------------------------------------ baixar o app */
.baixar-app { gap: 8px; }
.baixar-app.destaque { max-width: 380px; margin: 14px auto 0; border-color: var(--caneta); }
.baixar-app a.btn { text-decoration: none; text-align: center; display: inline-block; }
.entrada .baixar-app a.btn { width: 100%; }
.lateral .app-link { display: flex; align-items: center; gap: 8px; padding: 7px 10px; margin-top: auto; margin-bottom: -6px; border-radius: 8px; font: 600 12px Archivo, sans-serif; color: var(--tinta-fraca); text-decoration: none; }
.lateral .app-link svg { width: 15px; height: 15px; }
.lateral .app-link:hover { background: var(--superficie); color: var(--tinta); }
.bloco.aviso.erro { border-color: var(--vermelho); background: var(--vermelho-fraco); }
.bloco.aviso.erro .rotulo { color: var(--vermelho); }