/* Fonte do sistema: nada é buscado na internet, o app roda offline. */
:root{
  color-scheme: light;
  --ground:#eef0f4; --surface:#fff; --surface-2:#f7f8fa; --surface-3:#e9ecf2;
  --ink:#101420; --ink-2:#4d5566; --ink-3:#626a7a;
  --line:#d9dde5; --line-forte:#bcc3ce; --grid:#e6e9ef;
  --acento:#2a78d6; --acento-fundo:#e3edfb; --acento-escuro:#184f95;
  --pos:#0e7a56; --neg:#c62f2e; --alerta:#8a6000; --alerta-marca:#eda100;
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;
    --ground:#0f1218; --surface:#171b23; --surface-2:#1d222c; --surface-3:#232935;
    --ink:#eceff5; --ink-2:#a3abbb; --ink-3:#8e97a6;
    --line:#272d38; --line-forte:#39414f; --grid:#242a34;
    --acento:#3987e5; --acento-fundo:#16253a; --acento-escuro:#86b6ef;
    --pos:#35c48f; --neg:#f07a79; --alerta:#e0a53a; --alerta-marca:#c98500;
  }
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  font-size:14px; line-height:1.5;
}
.num,.mono{font-family:Consolas,"Cascadia Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------- topo */
/* o menu cresce a cada etapa; em janela estreita ele quebra de linha em vez de
   empurrar a página para o lado */
/* topo + faixa de indicadores grudam no alto ao rolar (pedido 2026-09-10) */
.cabecalho-fixo{position:sticky; top:0; z-index:30}
.topo{display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px;
  padding:10px 20px;
  background:var(--surface-2); border-bottom:1px solid var(--line)}
.marca{display:flex; align-items:center; gap:8px; font-weight:600; font-size:14.5px}
.marca .ponto{width:10px; height:10px; border-radius:3px; background:var(--acento)}
nav{display:flex; gap:2px; flex-wrap:wrap}
nav a{display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:5px 8px; border-radius:7px; color:var(--ink-2);
  text-decoration:none; font-size:13px; white-space:nowrap}
nav a i{font-style:normal; font-size:9.5px; color:var(--ink-3); letter-spacing:.01em}
nav a.on i{color:var(--acento)}
nav a:hover{background:var(--surface-3); color:var(--ink)}
nav a.on{background:var(--surface-3); color:var(--ink); font-weight:600}
nav a.breve{color:var(--ink-3); cursor:default}
nav a.breve:hover{background:none; color:var(--ink-3)}

/* faixa de indicadores financeiros (SELIC/CDI/Ibovespa/Dólar) — único ponto
   do sistema que depende de internet, ver app/indicadores.py */
.indicadores{display:flex; align-items:center; flex-wrap:wrap; gap:8px 22px;
  padding:7px 20px; background:var(--surface); border-bottom:1px solid var(--line)}
.indicadores span{display:flex; align-items:baseline; gap:6px}
.indicadores i{font-style:normal; text-transform:uppercase; letter-spacing:.06em;
  font-size:10px; font-weight:600; color:var(--ink-3)}
.indicadores b{font-size:12.5px; color:var(--ink); font-weight:600}
.indicadores time{margin-left:auto; font-size:11px; color:var(--ink-3); font-style:normal}

main{max-width:1440px; margin:0 auto; padding:22px 20px 60px}
h1{font-size:22px; font-weight:600; letter-spacing:-.015em; margin:0 0 4px}
.sub{color:var(--ink-3); font-size:13.5px; margin:0 0 20px}

/* ----------------------------------------------------------------- painel */
.painel{background:var(--surface); border:1px solid var(--line);
  border-radius:10px; overflow:hidden; margin-bottom:16px}
.cols-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.cols-2 .painel{margin-bottom:0}
@media (max-width:760px){ .cols-2{grid-template-columns:1fr} }
.painel-h{display:flex; align-items:baseline; gap:10px; padding:12px 16px;
  border-bottom:1px solid var(--line)}
.painel-h b{font-size:14px}
.painel-h .dir{margin-left:auto; font-size:12.5px; color:var(--ink-3)}
.painel-c{padding:4px 16px 14px}

.grupo{display:flex; align-items:baseline; font-size:11px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
  padding:14px 0 6px}
.grupo .st{margin-left:auto; font-family:Consolas,monospace; letter-spacing:0;
  color:var(--ink-2); font-size:12.5px}

.linha{display:flex; align-items:center; gap:12px; padding:9px 0;
  border-top:1px solid var(--grid)}
.linha .nm{font-size:14px}
.linha .meta{font-size:12px; color:var(--ink-3); margin-top:1px}
.linha .val{margin-left:auto; text-align:right;
  font-family:Consolas,monospace; font-variant-numeric:tabular-nums;
  font-size:14.5px; font-weight:600; white-space:nowrap}
.pos{color:var(--pos)} .neg{color:var(--neg)}
.acoes{display:flex; gap:6px; flex:none}

.medidor{height:5px; border-radius:3px; background:var(--surface-3);
  overflow:hidden; margin-top:6px; max-width:280px}
.medidor i{display:block; height:100%; border-radius:3px; background:var(--acento)}
.medidor i.al{background:var(--alerta-marca)}

.selo{font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:20px;
  background:var(--surface-3); color:var(--ink-2); white-space:nowrap}
.selo.al{background:color-mix(in srgb,var(--alerta-marca) 20%,transparent); color:var(--alerta)}
.selo.ok{background:color-mix(in srgb,var(--pos) 18%,transparent); color:var(--pos)}
.selo.ac{background:var(--acento-fundo); color:var(--acento-escuro)}
table.lista tr.on td{background:var(--acento-fundo)}

/* ------------------------------------------------------------------ botões */
.btn{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line-forte);
  background:var(--surface); color:var(--ink); border-radius:7px;
  padding:6px 12px; font-size:13px; font-weight:500; cursor:pointer;
  text-decoration:none; font-family:inherit}
.btn:hover{background:var(--surface-2)}
.btn.primario{background:var(--acento); border-color:var(--acento); color:#fff}
.btn.primario:hover{background:var(--acento-escuro); border-color:var(--acento-escuro)}
.btn.mini{padding:4px 9px; font-size:12px}
.btn.perigo:hover{border-color:var(--neg); color:var(--neg)}
/* X vermelho — cancelar só esta parcela de um agendamento, sem mexer nas
   outras (pedido dele: "clico no X, vai excluir somente aquela") */
.btn-x{display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; margin-left:6px; border:1px solid var(--neg);
  border-radius:6px; background:none; color:var(--neg); font-size:15px;
  line-height:1; font-weight:600; cursor:pointer; padding:0}
.btn-x:hover{background:var(--neg); color:#fff}
.btn-x:focus-visible{outline:2px solid var(--neg); outline-offset:2px}
.btn:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--acento); outline-offset:2px}
/* <summary class="btn"> — disclosure sem depender de confirm() do JS,
   que alguns navegadores param de mostrar depois de repetido */
summary.btn{list-style:none}
summary.btn::-webkit-details-marker{display:none}
summary.btn::marker{content:""}

/* ---------------------------------------------------------------- formulário */
form.bloco{background:var(--surface-2); border:1px solid var(--line);
  border-radius:9px; padding:14px 16px; margin:14px 0}
.campos{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
label{display:block; font-size:11.5px; font-weight:600; color:var(--ink-3);
  letter-spacing:.04em; text-transform:uppercase; margin-bottom:4px}
input,select{width:100%; padding:7px 9px; border:1px solid var(--line-forte);
  border-radius:6px; background:var(--surface); color:var(--ink);
  font-size:13.5px; font-family:inherit}
input.dinheiro{font-family:Consolas,monospace; font-variant-numeric:tabular-nums;
  text-align:right}
.dica{font-size:12px; color:var(--ink-3); margin-top:10px}
.rodape-form{display:flex; gap:8px; margin-top:14px; align-items:center}

.vazio{padding:34px 16px; text-align:center; color:var(--ink-3); font-size:13.5px}

table.lista{width:100%; border-collapse:collapse; font-size:13.5px}
/* border-collapse quebra position:sticky nas células (th/td somem ou
   sobrepõem texto ao rolar) — tabelas com cabeçalho/coluna fixos usam
   border-spacing:0 em vez de collapse pra manter a borda visual igual. */
table.lista.fixa{border-collapse:separate; border-spacing:0}
table.lista.fixa th,table.lista.fixa td{border-bottom:1px solid var(--grid)}
table.lista th{text-align:left; font-size:10.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); padding:9px 10px;
  border-bottom:1px solid var(--line)}
table.lista td{padding:8px 10px; border-bottom:1px solid var(--grid)}
table.lista td:first-child,table.lista th:first-child{padding-left:0}
table.lista td:last-child,table.lista th:last-child{padding-right:0; text-align:right}
table.lista tr:last-child td{border-bottom:none}

.aviso{background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--acento); border-radius:8px; padding:13px 16px;
  margin-bottom:16px; font-size:13.5px; color:var(--ink-2)}
.aviso b{color:var(--ink)}

/* ------------------------------------------------- trocador de idioma */
.idiomas{display:flex; gap:6px; align-items:center; margin-left:auto}
.idiomas form{display:flex; margin:0}
.flag{width:26px; height:26px; padding:0; border:none; background:none;
  border-radius:50%; cursor:pointer; opacity:.42; transition:opacity .12s;
  display:grid; place-items:center}
.flag svg{width:24px; height:24px; display:block; border-radius:50%}
.flag:hover{opacity:.8}
.flag.ativa{opacity:1; box-shadow:0 0 0 2px var(--acento)}
.flag:focus-visible{outline:2px solid var(--acento); outline-offset:2px}

/* ------------------------------------------------- ⓘ discreto + popover */
.info{width:14px; height:14px; padding:0; margin-left:5px; vertical-align:middle;
  border:1px solid var(--line-forte); background:none; color:var(--ink-3);
  border-radius:50%; font-size:9.5px; font-weight:700; font-family:inherit;
  line-height:1; cursor:pointer; display:inline-grid; place-items:center;
  font-style:italic; opacity:.65; transition:opacity .12s, color .12s}
.info:hover{opacity:1; color:var(--acento); border-color:var(--acento)}
.info:focus-visible{outline:2px solid var(--acento); outline-offset:2px; opacity:1}

.info-caixa{max-width:34rem; margin:auto; padding:16px 18px;
  border:1px solid var(--line-forte); border-radius:10px;
  background:var(--surface); color:var(--ink-2);
  font-size:13.5px; line-height:1.55; box-shadow:0 10px 40px -12px rgba(0,0,0,.35);
  /* o popover fica no topo da pilha mas herda do pai no DOM: um ⓘ dentro de
     <th> herdaria maiúsculas e espaçamento de rótulo */
  text-transform:none; letter-spacing:normal; font-weight:400;
  text-align:left; font-family:"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif}
.info-caixa::backdrop{background:rgba(16,20,32,.28)}
@media (prefers-color-scheme: dark){
  .info-caixa::backdrop{background:rgba(0,0,0,.5)}
}

/* indentação da árvore de categorias */
.cat-n1{font-weight:600}
.cat-n2{padding-left:22px!important}
.cat-n3{padding-left:44px!important; color:var(--ink-2)}

.selo.ng{background:color-mix(in srgb,var(--neg) 15%,transparent); color:var(--neg)}

/* ------------------------------------------------------------------ extrato */
.trilha{font-size:12.5px; color:var(--ink-3); margin:0 0 6px}
.trilha a{color:var(--ink-2); text-decoration:none}
.trilha a:hover{color:var(--acento); text-decoration:underline}

.filtros{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.segm{display:inline-flex; flex-wrap:wrap; border:1px solid var(--line-forte);
  border-radius:8px; overflow:hidden}
.segm a{min-width:38px; text-align:center}
.segm.dir{margin-left:auto; flex:none}
.segm a{padding:6px 12px; font-size:12.5px; color:var(--ink-2); text-decoration:none;
  border-left:1px solid var(--line-forte); white-space:nowrap}
.segm a:first-child{border-left:none}
.segm a:hover{background:var(--surface-2)}
.segm a.on{background:var(--acento); color:#fff; font-weight:600}
/* a busca fica na linha de baixo, com a mesma largura dos seletores acima */
.busca{display:flex; gap:6px; align-items:center; margin:10px 0 0;
  max-width:520px}
.busca input[name=busca]{flex:1; min-width:0}

/* quatro blocos centrados na página, com o mesmo espaço entre eles */
.resumo{display:flex; justify-content:center; gap:56px; flex-wrap:wrap;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--grid); text-align:center}
.resumo .rot{display:block; font-size:10.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:3px; white-space:nowrap}
.resumo b{font-size:16px; font-variant-numeric:tabular-nums}
@media (max-width:700px){ .resumo{gap:26px} }

table.extrato td{vertical-align:top}
table.extrato td.nowrap{white-space:nowrap}
/* alinhamento por classe, não por posição: as duas tabelas têm colunas
   diferentes e a posição do valor muda entre elas */
table.extrato td.num,table.extrato th.num{text-align:right}
table.extrato .cat{font-size:11.5px; color:var(--ink-3); margin-top:1px}
table.extrato tbody tr:hover{background:var(--surface-2)}
.link-conta{color:inherit; text-decoration:none}
.link-conta:hover{color:var(--acento); text-decoration:underline}

/* filtros do extrato: seletores em linha */
.f-inline{display:flex; align-items:center; gap:7px; margin:0}
.f-inline select{width:auto; min-width:120px}
.rot-inline{margin:0; white-space:nowrap; font-size:10.5px}
.ajuda-busca{display:inline-flex; align-items:center}

/* formulário de lançamento */
.campo-largo{grid-column:1/-1}
.check{display:flex; align-items:center; gap:8px; margin-top:14px;
  font-size:13.5px; font-weight:400; color:var(--ink-2);
  text-transform:none; letter-spacing:normal}
.check input{width:auto}
.cabecalho{display:flex; align-items:flex-start; gap:16px}
.cabecalho h1{margin:0}
.cabecalho .sub{margin:4px 0 0}
.cabecalho .btn{margin-left:auto; flex:none; margin-top:2px}

/* linha com dois campos: categoria mais larga, favorecido ao lado, gap menor */
.campos.duplo{grid-template-columns:2fr 1fr; gap:10px; margin-top:10px}
@media (max-width:640px){ .campos.duplo{grid-template-columns:1fr} }

/* ---------------------------------------------- autocompletar ancorado */
.ac-lista{position:absolute; z-index:50; margin:0; padding:4px; list-style:none;
  background:var(--surface); border:1px solid var(--line-forte); border-radius:8px;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.3); max-height:260px; overflow-y:auto}
.ac-lista li{padding:6px 9px; border-radius:5px; font-size:13px; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ac-lista li:hover,.ac-lista li.on{background:var(--acento); color:#fff}
/* o editar fica discreto: só ganha contorno quando o ponteiro passa na linha */
td.acao-editar{width:1%; white-space:nowrap}
td.acao-editar .btn{opacity:0; transition:opacity .12s}
table.lista tr:hover td.acao-editar .btn,
td.acao-editar .btn:focus-visible{opacity:1}

/* com dois botões no cabeçalho, só o primeiro empurra para a direita */
.cabecalho .btn ~ .btn{margin-left:8px}

/* ------------------------------------------------ conferência da importação */
/* uma centena de linhas de uma vez: a tabela rola dentro do painel, para o
   cabeçalho da página e o botão de confirmar continuarem à vista */
.rolagem{max-height:70vh; overflow-y:auto; margin:0 -16px; padding:0 16px}
table.conferencia{font-size:13px}
table.conferencia thead th{position:sticky; top:0; z-index:2;
  background:var(--surface); box-shadow:0 1px 0 var(--line)}
table.conferencia td{padding:5px 8px; vertical-align:middle}
table.conferencia td.sel,table.conferencia th.sel{width:26px; padding-left:0}
table.conferencia td.sel input{width:auto; margin:0}
table.conferencia td.campo{padding:3px 6px; min-width:150px}
table.conferencia td.campo input{padding:4px 7px; font-size:12.5px}
/* a linha desmarcada continua legível, mas para de disputar a atenção */
table.conferencia tr.apagada{opacity:.5}
table.conferencia tr.apagada:hover{opacity:.85}
.oculto{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
.painel-h .dir a{color:var(--acento); text-decoration:none}
.painel-h .dir a:hover{text-decoration:underline}
.resumo .cat{font-size:11px; color:var(--ink-3); margin-top:2px}
.resumo + .resumo{margin-top:14px}
.al{color:var(--alerta)}

/* --------------------------------------------------- processando (form lento) */
/* leitura de fatura por OCR pode levar dezenas de segundos — sem isso a tela
   fica parada e parece travada. Barra indeterminada: não sabemos o progresso
   real, só que está rodando. */
.processando{position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center; z-index:999}
.processando-caixa{background:var(--surface); color:var(--ink); padding:28px 36px;
  border-radius:10px; text-align:center; box-shadow:0 8px 32px rgba(0,0,0,.3); max-width:320px}
.processando-barra{width:220px; height:6px; background:var(--surface-3);
  border-radius:3px; overflow:hidden; margin:0 auto 14px}
.processando-barra div{width:35%; height:100%; background:var(--acento);
  border-radius:3px; animation:processando-mover 1.1s ease-in-out infinite}
.processando-caixa p{margin:0; font-size:13px; color:var(--ink-2)}
@keyframes processando-mover{
  0%{transform:translateX(-100%)} 100%{transform:translateX(385%)}
}
@media (prefers-reduced-motion: reduce){
  .processando-barra div{animation:none; width:100%}
}

/* ------------------------------------------------------------------- login */
.tela-login{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px}
.cartao-login{width:100%; max-width:360px}
.cartao-login .marca{justify-content:center; margin-bottom:18px; font-size:16px}
.separador-ou{display:flex; align-items:center; gap:10px; margin:14px 0;
  font-size:11px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em}
.separador-ou::before,.separador-ou::after{content:""; flex:1; height:1px; background:var(--line)}