/* Tinta e papel, nao cromo colorido.
   A barra de navegacao ocupava a maior area e a cor mais saturada da tela
   carregando a MENOR quantidade de informacao. Aqui o cromo recua para
   tinta, e o azul passa a significar uma coisa so: da para agir aqui. */
:root {
  --tinta: #0f1a2b;
  --tinta-fraca: #647087;
  --acao: #1550e5;
  --acao-clara: #4b7bf0;
  --acao-escura: #0f3fbb;
  --realce: #eaf0fe;
  --fundo: #edf0f5;
  --superficie: #ffffff;
  --borda: #dfe4ec;
  /* Vermelho e verde mais escuros que os anteriores (#e94747 / #24ad52):
     dinheiro e lido em corpo pequeno sobre branco, e os tons claros nao
     alcancavam contraste 4.5:1. Estes alcancam, e ainda imprimem. */
  --erro: #b3261e;
  --sucesso: #0b7a46;
  --atencao: #9a6200;
  --raio: 8px;
  --raio-miudo: 4px;
  --linha: 32px;
  --sombra: 0 1px 2px rgba(15, 26, 43, .06), 0 1px 3px rgba(15, 26, 43, .04);
}

@font-face {
  font-family: "Inter";
  src: url("../fontes/Inter.260c81a4759b.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* A fonte reservada ao DINHEIRO, e a nada mais.
   A classe `valor` ja marcava dinheiro com exclusividade (era o alvo do
   borrao de "ocultar valores"); aqui ela vira tambem um papel tipografico.
   Condensada de proposito: deixa um saldo de sete digitos ser grande sem
   comer a largura da coluna, e da a coluna de valores a textura de um
   extrato. IBM Plex Sans Condensed, SIL OFL 1.1. */
@font-face {
  font-family: "Cifra";
  src: url("../fontes/PlexCondensed-500.25db464417d3.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Cifra";
  src: url("../fontes/PlexCondensed-600.bac89dc82014.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Inter", "Public Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: var(--tinta);
  background: var(--fundo);
}

/* `flex-wrap: wrap`, e nao `overflow-x: auto`: a barra tem submenus
   (`.submenu`) posicionados `position: absolute` por cima dela, e
   `overflow-x: auto` num container forca o `overflow-y` computado tambem
   para `auto` (regra da propria spec do CSS -- um eixo com overflow
   diferente de `visible` empurra o outro eixo para fora de `visible`
   tambem), o que transforma `.topo` num container de RECORTE: qualquer
   submenu que escape da caixa de 56px fica cortado e inalcancavel por
   mouse, mesmo com `display: block` no hover (achado da revisao final --
   `elementFromPoint` no centro do link nao alcancava o alvo; o Playwright
   `is_visible()` nao pegou o defeito porque e cego a clipping por
   ancestral).
   Com `flex-wrap: wrap` a barra nunca entra em modo de recorte: numa tela
   de 390px o nome da empresa, o menu e o lado direito quebram em linhas
   separadas em vez de estourar para o lado, sem precisar de overflow nenhum
   aqui (mesmo problema das tabelas largas, solucao diferente porque esta
   barra tem filhos que precisam escapar dela). `flex: none` nos filhos
   impede que texto como "Lançamentos" quebre linha sozinho ou se esprema
   antes da barra quebrar. */
.topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  min-height: 56px;
  padding: 8px 16px;
  background: var(--tinta);
  color: #fff;
}
.topo a, .topo span, .topo button { color: #fff; text-decoration: none; }
.topo-empresa { font-weight: 600; flex: none; white-space: nowrap; }
.topo-menu { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; flex: none; }
.topo-menu > li > a, .tem-submenu > span {
  display: block; padding: 8px 12px; border-radius: var(--raio); cursor: pointer; white-space: nowrap;
}
/* Realce do cromo por CLAREZA, nao por outra cor: sobre a barra de tinta,
   um branco a 12% marca o item sem introduzir um segundo azul competindo
   com o azul de acao. */
.topo-menu > li > a:hover, .tem-submenu:hover > span { background: rgba(255, 255, 255, .12); }
.topo-direita { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }

.tem-submenu { position: relative; }
.submenu {
  display: none; position: absolute; top: 100%; left: 0; z-index: 10;
  min-width: 200px; margin: 0; padding: 4px; list-style: none;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: 0 4px 16px rgba(45, 65, 95, .16);
}
.tem-submenu:hover .submenu, .tem-submenu:focus-within .submenu { display: block; }
.submenu a { display: block; padding: 8px; color: var(--tinta); border-radius: var(--raio-miudo); }
.submenu a:hover { background: var(--realce); }
/* O submenu de "Trocar" fica no extremo direito da barra (`.topo-direita`
   tem `margin-left: auto`). `left: 0` (o padrao de `.submenu`, pensado para
   "Cadastros", perto da esquerda) faz este dropdown de 200px de largura
   comecar na borda esquerda do proprio gatilho e continuar para a direita --
   passando da borda da janela e ficando com pontos fora do viewport
   (`elementFromPoint` devolve `null` ali, achado da revisao final: o mouse
   real nao alcanca coordenada nenhuma fora da tela). Ancorar pela direita
   (`right: 0`) mantem o dropdown inteiro dentro da largura visivel. */
.topo-direita .submenu { left: auto; right: 0; }

.ocultar-valores { background: transparent; border: 0; cursor: pointer; font-size: 16px; padding: 4px 8px; }
.ocultar-valores:hover { background: rgba(255, 255, 255, .12); border-radius: var(--raio); }

/* Coluna central: sem um teto de largura, numa tela de 1600px a linha de
   leitura e a grade do dashboard se esticam ate perder ritmo. A tabela de
   lancamentos e larga por natureza, mas nao precisa furar esta coluna: ela ja
   rola dentro do proprio quadro (`.rolagem-horizontal`), que e o que a mantem
   utilizavel sem quebrar o ritmo da pagina. */
main { max-width: 1280px; margin: 0 auto; padding: 16px; }

/* `flex-wrap: wrap` nao e enfeite: sem ele, numa tela de 390px o titulo mais
   o navegador de mes somam mais que os 358px uteis e a PAGINA INTEIRA passa a
   rolar para o lado (medido: 398 contra 390). Com a quebra, o periodo desce
   para a propria linha e continua centrado. */
.cabecalho { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 16px; }
.cabecalho h1 { font-size: 24px; margin: 0; }
.cabecalho-esquerda { display: flex; align-items: center; gap: 12px; }
/* `flex: 1` no centro mantem o periodo no MEIO da linha mesmo quando o titulo
   da esquerda e mais largo que as acoes da direita. */
.cabecalho-centro { flex: 1; display: flex; justify-content: center; }
.cabecalho-direita { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* A tabela e larga por natureza (seis colunas de dado financeiro). Sem este
   contorno, numa tela de 390px a PAGINA INTEIRA rolava para o lado: medido,
   scrollWidth 994 contra clientWidth 390. Agora quem rola e a tabela, dentro
   do proprio quadro, e o resto da tela fica no lugar. O `min-width` e o que
   faz o contorno servir para alguma coisa: sem ele a tabela se espremeria ate
   virar uma coluna de letras soltas em vez de rolar. */
/* O `overflow-x: auto` vive dentro de uma media query, e nao solto, porque um
   eixo com overflow diferente de `visible` empurra o OUTRO eixo para fora de
   `visible` tambem (mesma regra que ja mordeu os submenus da barra). Isso
   transforma este quadro num container de rolagem, e o `position: sticky` do
   cabecalho de dia passa a se ancorar NELE em vez de na pagina -- medido: ao
   rolar 400px o cabecalho ia para -12, ou seja, nao grudava.
   Acima de 900px a tabela cabe na coluna central e nao precisa do quadro;
   abaixo, precisa, e ali o sticky perde o efeito -- troca consciente, porque
   numa tela estreita a lista nao e o gesto principal. */
.rolagem-horizontal > .tabela { min-width: 520px; }
@media (max-width: 900px) {
  .rolagem-horizontal { overflow-x: auto; }
}

/* Sem `overflow: hidden` aqui. Ele existia so para recortar os cantos
   arredondados, mas `overflow` diferente de `visible` faz do elemento um
   contexto de rolagem -- e o `position: sticky` do cabecalho de dia passava a
   se ancorar NA TABELA, que nao rola, em vez de na pagina. Medido: rolando
   400px o cabecalho ia para -12.
   O arredondamento nao se perde: fundo de elemento ja e recortado pelo
   `border-radius` sem precisar de overflow nenhum. */
.tabela { width: 100%; border-collapse: collapse; background: var(--superficie); border-radius: var(--raio); box-shadow: var(--sombra); }
/* Cabecalho de coluna como rotulo, do mesmo vocabulario das sobrancelhas
   dos blocos: e nomenclatura, nao conteudo. */
.tabela th {
  text-align: left; font-size: 10px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tinta-fraca);
  padding: 10px 8px; border-bottom: 1px solid var(--borda);
}
.tabela td { padding: 0 8px; height: var(--linha); border-bottom: 1px solid var(--fundo); }
/* Realce da linha em cinza-papel, nao no azul de acao: passar o mouse por
   uma linha nao e uma acao, e so onde o olho esta. */
.tabela tbody tr:hover td { background: #f6f8fc; }
.direita { text-align: right; font-variant-numeric: tabular-nums; }
.negativo { color: var(--erro); }
.positivo { color: var(--sucesso); }
.vazio { color: var(--tinta-fraca); text-align: center; padding: 24px; }

/* Rotulo so para leitor de tela: a coluna de tipo e um ponto colorido, e
   uma coluna sem nome nenhum deixa quem usa leitor de tela sem referencia. */
/* Sem `position: absolute`, de proposito. A receita classica de "so para
   leitor de tela" usa absolute, e dentro de uma TABELA QUE ROLA isso e uma
   armadilha: sem ancestral posicionado, o bloco contenedor do span vira a
   PAGINA, ele escapa do recorte do quadro de rolagem e vai parar na posicao
   estatica dele -- a 500px, na tabela rolada. Resultado medido: a pagina
   inteira passava a rolar 114px para o lado numa tela de 390px, com todos
   os elementos visiveis dentro dos 390.
   Em fluxo, ocupando 1px e recortado, ele nao escapa de nada e continua
   invisivel e legivel por leitor de tela. */
.oculto-visual {
  display: inline-block; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Cabecalho clicavel: o `<a>` ocupa a celula inteira para o alvo do mouse
   ser a coluna, e nao so as letras. */
.col-ordenavel > a { display: block; color: inherit; text-decoration: none; }
.col-ordenavel > a:hover { color: var(--acao); }
.col-ativa > a { color: var(--tinta); }
.seta-ordem { margin-left: 4px; font-size: 8px; }
.ordem-cronologica { font-size: 12px; color: var(--acao); text-decoration: none; }
.ordem-cronologica:hover { text-decoration: underline; }

.celula-tipo { width: 1%; padding-right: 0; }

/* Select que so parece select quando se chega nele. Numa lista de 50 linhas,
   50 caixas com borda e seta viram uma parede de controles e escondem o
   dado; a borda aparece no hover e no foco, quando a intencao de editar
   existe. */
.categoria-na-linha {
  border-color: transparent; background: transparent; height: 26px;
  padding: 0 4px; max-width: 100%; color: inherit;
  appearance: none; -webkit-appearance: none;
}
.categoria-na-linha:hover, .categoria-na-linha:focus {
  border-color: var(--borda); background: var(--superficie);
}
.ponto-tipo { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.ponto-entrada { background: var(--sucesso); }
.ponto-saida { background: var(--erro); }

/* Marca de parcelado/recorrente: diz que a linha tem irmas. Sem ela, uma
   parcela parece um gasto avulso e a leitura do mes engana. */
.marca-repete { color: var(--tinta-fraca); font-size: 12px; margin-left: 6px; white-space: nowrap; }
.marca-repete .parcela { font-size: 10px; margin-left: 2px; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- extrato -- */
/* O cabecalho do dia GRUDA no topo enquanto se rola: numa lista longa,
   perder de vista em que dia se esta e o que faz a pessoa rolar de volta.
   `position: sticky` num `<tr>` nao funciona em todos os navegadores; quem
   gruda e a celula. */
.linha-dia > th {
  position: sticky; top: 0; z-index: 2;
  background: #f2f5fa; border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda);
  padding: 8px; font-weight: 600; text-align: left;
}
.dia-data { color: var(--tinta); font-size: 12px; letter-spacing: 0; text-transform: none; }
.dia-semana { color: var(--tinta-fraca); font-weight: 400; margin-left: 6px; }
.dia-contagem { color: var(--tinta-fraca); font-weight: 400; margin-left: 12px; font-size: 11px; }
.dia-rotulo {
  font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-fraca); margin-right: 8px;
}

/* Rodape do dia: os dois saldos. Fundo de papel, nao de superficie, para o
   olho ler como "fim de bloco" e nao como mais um lancamento. */
.linha-saldo > td { background: #fafbfd; border-bottom: 2px solid var(--borda); padding: 8px; height: auto; }
.saldo-par { display: inline-flex; align-items: baseline; margin-left: 24px; }
.saldo-realizado { color: var(--acao); }

/* Linha vencida: faixa ambar na linha inteira, nao so na etiqueta. O que
   esta atrasado precisa ser visto ao varrer a lista, sem ler a coluna de
   situacao. Ambar, e nao vermelho, porque vermelho ja e "dinheiro que sai" e
   metade das linhas vencidas sao despesas. */
.linha-vencida > td { background: #fefaf1; }
.tabela tbody tr.linha-vencida:hover td { background: #fdf3e0; }

.resumo { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 8px; color: var(--tinta-fraca); align-items: center; }
.exportar-csv { margin-left: auto; font-size: 12px; color: var(--acao); text-decoration: none; }
.exportar-csv:hover { text-decoration: underline; }
.acao-lote button[type="submit"] { margin-bottom: 8px; }
.tabela th:first-child, .tabela td:first-child { width: 1%; padding-right: 0; }
.navegador-de-mes { display: flex; align-items: center; gap: 12px; }
.navegador-de-mes .seta {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--raio-miudo);
  color: var(--acao); text-decoration: none; font-size: 18px; line-height: 1;
}
.navegador-de-mes .seta:hover { background: var(--realce); }
.navegador-de-mes .mes-atual { font-weight: 600; min-width: 140px; text-align: center; }

/* Faixa de alerta: ambar, nao vermelho. Vermelho ja significa "dinheiro que
   sai" em toda a interface; usa-lo tambem para aviso faria a faixa competir
   com os proprios valores que ela esta apontando. */
.alerta-faixa {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 12px 16px;
  background: #fdf6e7; border: 1px solid #f0dcae; border-radius: var(--raio);
}
.alerta-icone {
  flex: none; width: 20px; height: 20px; display: grid; place-items: center;
  border-radius: 50%; background: var(--atencao); color: #fff;
  font-size: 12px; font-weight: 700;
}
.alerta-faixa .valor { color: var(--atencao); }
.alerta-acao {
  margin-left: auto; padding: 0 14px; height: 28px; line-height: 28px;
  border-radius: var(--raio); background: var(--atencao); color: #fff;
  font-size: 12px; text-decoration: none; white-space: nowrap;
}
.alerta-acao:hover { background: #7d4f00; }

.filtros { margin-bottom: 8px; }
.filtros > summary {
  display: inline-block; cursor: pointer; list-style: none;
  padding: 0 16px; height: var(--linha); line-height: var(--linha);
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); color: var(--acao); font-size: 12px;
}
.filtros > summary::-webkit-details-marker { display: none; }
.filtros > summary:hover { background: var(--realce); }
.filtros[open] > summary { margin-bottom: 8px; }

.painel-filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 8px; background: var(--superficie); padding: 12px 16px; border-radius: var(--raio); box-shadow: var(--sombra); }
.painel-filtros label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 160px; min-width: 0; }
.painel-filtros input, .painel-filtros select { min-width: 0; }

.fichas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; align-items: center; }
.ficha { background: var(--realce); color: var(--acao-escura); padding: 2px 8px; border-radius: var(--raio-miudo); font-size: 12px; }
.ficha-limpar { font-size: 12px; color: var(--acao); }
.marca { font-size: 10px; font-weight: 500; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.marca-pago { background: #e6f4ec; color: var(--sucesso); }
.marca-aberto { background: #fdf3e2; color: var(--atencao); }
.paginacao { display: flex; gap: 16px; align-items: center; margin-top: 16px; }

/* `min(200px, 100%)` e nao `200px`: com o `main` tendo 16px de padding de
   cada lado, uma tela de 390px deixa 358px de conteudo -- menos que 200px
   * 2, entao dois cartoes por linha ainda cabem, mas um minimo fixo maior
   que a largura disponivel estouraria a pagina. */
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; margin-bottom: 16px; }
.cartao { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--superficie); border-radius: var(--raio); border-left: 3px solid var(--borda); text-decoration: none; color: inherit; }
.cartao:hover { background: var(--realce); }
.cartao-valor { font-family: "Cifra", "Inter", sans-serif; font-weight: 600; font-size: 26px; font-variant-numeric: tabular-nums; }
.cartao-quantidade { font-size: 12px; color: var(--tinta-fraca); }
.cartao-erro { border-left-color: var(--erro); }
.cartao-sucesso { border-left-color: var(--sucesso); }
.cartao-atencao { border-left-color: var(--atencao); }
.painel { background: var(--superficie); border-radius: var(--raio); padding: 16px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.rotulo { font-size: 12px; color: var(--tinta-fraca); }
.alerta { color: var(--erro); }

.formulario { background: var(--superficie); border-radius: var(--raio); padding: 16px; margin-top: 16px; max-width: 480px; }
.formulario p { margin: 0 0 8px; display: flex; flex-direction: column; gap: 4px; }
.formulario label { font-size: 12px; color: var(--tinta-fraca); }
input, select, textarea { font: inherit; height: var(--linha); padding: 0 8px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); color: var(--tinta); }
/* A regra acima e pensada para campo de texto/select; aplicada a um
   checkbox ela infla a caixinha para 32px de altura com borda e fundo,
   estourando a linha da tabela. Um checkbox usa o tamanho nativo. */
input[type="checkbox"] { height: auto; width: auto; padding: 0; border: 0; background: none; vertical-align: middle; }
button { height: var(--linha); padding: 0 16px; border: 0; border-radius: var(--raio); background: var(--acao); color: #fff; font: inherit; cursor: pointer; }
button:hover { background: var(--acao-escura); }
/* Acao secundaria: contorno em vez de bloco cheio. O azul solido e da
   navegacao e da acao primaria de uma tela; quando tudo e primario, nada e. */
.botao-secundario {
  background: var(--superficie); color: var(--acao);
  border: 1px solid var(--borda);
}
.botao-secundario:hover { background: var(--realce); }
.errorlist { color: var(--erro); font-size: 12px; margin: 0; padding-left: 16px; }

.entrada-rapida { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; background: var(--superficie); padding: 8px; border-radius: var(--raio); box-shadow: var(--sombra); }
.entrada-rapida input, .entrada-rapida select { flex: 1 1 120px; min-width: 0; }
.entrada-rapida input[name="descricao"] { flex: 2 1 160px; }
.confirmacao { align-self: center; color: var(--sucesso); font-size: 12px; }

/* Contas em linha dupla: o nome de uma conta bancaria e um codigo, e codigo
   sozinho nao diz o que a conta e. */
.conta-marca {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: var(--realce); color: var(--acao-escura);
  font-size: 12px; font-weight: 600; text-transform: uppercase;
}
.lista-contas li { gap: 10px; }
.conta-identidade { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-right: auto; }
.conta-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conta-tipo { font-size: 11px; color: var(--tinta-fraca); }

/* Balanco do mes. As barras se comparam ENTRE SI (a maior enche a linha),
   porque e a relacao entre entrada e saida que se le -- nao a distancia ate
   um teto arbitrario. */
.balanco { display: flex; flex-direction: column; gap: 4px; }
.balanco-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.balanco-rotulo { font-size: 12px; color: var(--tinta-fraca); }
.barra { height: 8px; border-radius: 999px; background: var(--fundo); overflow: hidden; margin-bottom: 10px; }
.barra > span { display: block; height: 100%; border-radius: 999px; }
.barra-entrada { background: var(--sucesso); }
.barra-saida { background: var(--erro); }
.balanco-resultado { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 10px; border-top: 1px solid var(--borda); }
.balanco-resultado .valor { font-size: 18px; }

.grafico { width: 100%; height: auto; display: block; }
/* Grade e rotulos do eixo: o `paint-order` evita que a linha da grade
   atravesse o texto do rotulo. */
.grafico-grade { stroke: var(--borda); stroke-width: 1; }
/* Barras de movimento: pano de fundo da linha de saldo, e por isso mais
   claras que o verde e o vermelho do dinheiro em texto. */
.grafico-barra-entrada { fill: var(--sucesso); opacity: .45; }
.grafico-barra-saida { fill: var(--erro); opacity: .45; }
.grafico-rotulo-y, .grafico-rotulo-x {
  fill: var(--tinta-fraca); font-size: 10px; font-family: "Inter", sans-serif;
  font-variant-numeric: tabular-nums;
}
.grafico-linha { fill: none; stroke: var(--acao); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
/* Os pontos so aparecem no hover: com 30 dias de serie, 30 circulos
   permanentes viram ruido e escondem a forma da curva, que e o que a
   pessoa esta lendo. O alvo do mouse continua sempre la. */
.grafico-ponto { fill: var(--superficie); stroke: var(--acao); stroke-width: 2; opacity: 0; }
.grafico:hover .grafico-ponto, .grafico-ponto:hover { opacity: 1; }
.grafico-zero { stroke: var(--borda); stroke-width: 1; stroke-dasharray: 4 4; }

.painel-dashboard { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: 16px; align-items: start; }
/* Grade DECLARADA, no lugar de `auto-fit`: com `repeat(auto-fit, minmax(220px,
   1fr))` uma tela larga empacotava quatro blocos numa fileira e deixava o
   ultimo orfao numa segunda linha. Aqui o grafico ocupa a largura inteira, os
   dois blocos de vencimento ficam lado a lado, e ranking e cartoes fecham a
   grade -- sem sobra. */
.blocos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "grafico grafico"
    "pagar   receber"
    "ranking balanco"
    "cartoes balanco";
  gap: 16px;
}
.area-grafico { grid-area: grafico; }
.area-pagar { grid-area: pagar; }
.area-receber { grid-area: receber; }
.area-ranking { grid-area: ranking; }
.area-balanco { grid-area: balanco; }
.area-cartoes { grid-area: cartoes; }
.bloco { display: flex; flex-direction: column; gap: 8px; padding: 20px; background: var(--superficie); border-radius: var(--raio); box-shadow: var(--sombra); text-decoration: none; color: inherit; }
/* Sobrancelha: pequena, espacada, caixa alta. O titulo de um bloco e um
   ROTULO -- ele nomeia o que esta abaixo e sai da frente. Quem tem que ser
   grande e o numero. */
.bloco-titulo, .cartao-titulo {
  font-size: 11px; font-weight: 500; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tinta-fraca);
}
.bloco-numero { font-family: "Cifra", "Inter", sans-serif; font-size: 52px; font-weight: 600; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.bloco-valor { font-size: 15px; color: var(--tinta-fraca); }

/* O saldo geral e o evento tipografico da pagina: e a resposta a primeira
   pergunta que alguem faz ao abrir o sistema. Estava num `style` inline de
   32px, do tamanho de um titulo qualquer. */
.saldo-geral { font-size: 46px; line-height: 1.05; letter-spacing: -.015em; }
.bloco-acao { align-self: flex-start; margin-top: 8px; padding: 4px 12px; border-radius: var(--raio); border: 1px solid currentColor; font-size: 12px; }
.bloco-erro .bloco-numero, .bloco-erro .bloco-acao { color: var(--erro); }
.bloco-sucesso .bloco-numero, .bloco-sucesso .bloco-acao { color: var(--sucesso); }

/* Foco visivel: nao havia nenhum estilo de foco no projeto, entao quem
   navega por teclado dependia do anel padrao do navegador -- que some sob
   `background` proprio em varios elementos. Um anel unico, na cor de acao,
   em tudo que recebe foco. */
:focus-visible {
  outline: 2px solid var(--acao);
  outline-offset: 2px;
  border-radius: var(--raio-miudo);
}
.topo :focus-visible { outline-color: #fff; }

/* Movimento com moderacao: numa ferramenta de uso diario, animacao e
   ruido. So a transicao de realce, e nem ela para quem pediu menos
   movimento no sistema operacional. */
a, button, summary, .bloco, .tabela tbody tr { transition: background-color .12s ease, color .12s ease; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

.lista-contas { list-style: none; margin: 0; padding: 0; }
/* A lista de contas e um razao: nome a esquerda, cifra a direita, pauta
   entre as linhas. Sem a ultima pauta -- regra que fecha lista pendura no
   vazio. */
.lista-contas li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--fundo); }
.lista-contas li:last-child { border-bottom: 0; padding-bottom: 0; }
/* O `li` do estado vazio NAO e uma linha de razao: sendo flex com
   `space-between`, o texto, o link e o ponto final viravam tres itens
   espalhados pela largura ("Nenhum cartao.    Cadastrar um cartao    ."). */
.lista-contas li.vazio { display: block; }
.ranking { list-style: none; margin: 0; padding: 0; counter-reset: posicao; }
.ranking li { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--fundo); }
.ranking li:last-child { border-bottom: 0; }
.ranking li::before { counter-increment: posicao; content: counter(posicao); flex: none; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--fundo); color: var(--tinta-fraca); font-size: 10px; font-weight: 600; align-self: center; }
/* O valor encosta na direita e o percentual fecha a linha, com largura fixa
   para que os percentuais alinhem entre si em vez de dancarem conforme o
   numero de digitos. */
.ranking .valor { margin-left: auto; }
.ranking .percentual { flex: none; width: 52px; text-align: right; color: var(--tinta-fraca); font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .painel-dashboard { grid-template-columns: 1fr; }
  /* Numa tela estreita a grade nomeada viraria duas colunas de 1fr
     espremidas; empilhar em uma coluna so e o comportamento certo. */
  .blocos { grid-template-columns: 1fr; grid-template-areas: none; }
  .blocos > * { grid-area: auto; }
}

/* `tabular-nums` em TODA a classe `valor`, nao so nas colunas alinhadas a
   direita: sem largura fixa de algarismo, uma coluna de dinheiro nao alinha
   e o olho nao consegue comparar duas linhas. */
/* O papel tipografico do dinheiro. Sem `color` aqui de proposito: a cor do
   valor vem do contexto (`.negativo`, `.positivo`, ou a tinta herdada). */
.valor {
  font-family: "Cifra", "Inter", sans-serif;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.valores-ocultos .valor { filter: blur(6px); user-select: none; }

/* Impressao: o papel nao tem navegacao nem paginacao, e um recorte impresso
   sem o periodo no topo nao serve para conferir nada -- por isso o cabecalho
   FICA. `break-inside: avoid` impede que uma linha de lancamento seja cortada
   ao meio pela quebra de pagina. */
@media print {
  .topo, .filtros, .entrada-rapida, .paginacao, .acao-lote button[type="submit"],
  .ocultar-valores, .exportar-csv { display: none; }

  body { background: #fff; }
  main { max-width: none; padding: 0; }
  .tabela, .bloco, .painel { box-shadow: none; }
  .rolagem-horizontal { overflow-x: visible; }
  .tabela tr { break-inside: avoid; }
  .tabela th { color: var(--tinta); }

  /* O borrao de "ocultar valores" e um recurso de tela; no papel ele
     produziria um relatorio ilegivel sem que ninguem percebesse. */
  .valores-ocultos .valor { filter: none; }
}

/* ------------------------------------------------------------- analise -- */
/* Controles como LINKS e nao `<select>`: cada estado da analise tem endereco
   proprio, entao um recorte e compartilhavel e o botao voltar funciona. */
.controles-da-analise {
  display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start;
  margin-bottom: 16px; padding: 14px 16px;
  background: var(--superficie); border-radius: var(--raio); box-shadow: var(--sombra);
}
.grupo-de-controle { display: flex; flex-direction: column; gap: 6px; }
.controle-rotulo {
  font-size: 10px; font-weight: 500; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tinta-fraca);
}
.opcoes { display: flex; flex-wrap: wrap; gap: 4px; }
.opcao {
  padding: 4px 12px; border-radius: 999px; font-size: 12px;
  color: var(--tinta-fraca); text-decoration: none; border: 1px solid var(--borda);
  white-space: nowrap;
}
.opcao:hover { background: var(--realce); color: var(--acao-escura); }
.opcao-ativa { background: var(--acao); border-color: var(--acao); color: #fff; }
.opcao-ativa:hover { background: var(--acao-escura); color: #fff; }

.cabecalho-do-relatorio { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.titulo-do-relatorio { font-size: 16px; margin: 0; }
.recorte-do-relatorio { margin: 4px 0 0; font-size: 12px; color: var(--tinta-fraca); }

/* Dois lados lado a lado: entradas e saidas se leem em comparacao. Numa tela
   estreita empilham, e a ordem (entradas primeiro) continua fazendo sentido. */
.dois-lados { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 20px; }
@media (max-width: 860px) { .dois-lados { grid-template-columns: 1fr; } }

.lado-cabecalho { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--borda); }
.lado-total { font-size: 20px; }

.tabela-analise { width: 100%; border-collapse: collapse; }
.tabela-analise th {
  text-align: left; font-size: 10px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tinta-fraca); padding: 8px 6px;
}
.tabela-analise td { padding: 7px 6px; border-bottom: 1px solid var(--fundo); vertical-align: middle; }
.tabela-analise tbody tr:last-child td { border-bottom: 0; }
.celula-cor { width: 1%; padding-right: 0; }
.amostra-de-cor { display: block; width: 10px; height: 10px; border-radius: 3px; }

/* Barra horizontal no lugar da rosca da referencia: posicao ao longo de um
   eixo comum e lida com mais precisao que angulo -- comparar duas fatias de
   7% e 8% numa rosca e adivinhacao. */
.celula-fatia { width: 60%; }
.fatia-nome { display: block; margin-bottom: 4px; }
.fatia-barra { display: block; height: 5px; border-radius: 999px; background: var(--fundo); overflow: hidden; }
.fatia-barra > span { display: block; height: 100%; border-radius: 999px; }
.percentual-da-fatia { color: var(--tinta-fraca); font-variant-numeric: tabular-nums; white-space: nowrap; }

.resultado-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin-top: 20px; padding-top: 14px; border-top: 2px solid var(--borda);
}
.resultado-total .valor { font-size: 24px; }

/* ----------------------------------------------------------------- DRE -- */
.tabela-dre { font-size: 12px; }
.tabela-dre th, .tabela-dre td { padding: 5px 8px; height: auto; white-space: nowrap; }
.tabela-dre .dre-rotulo { text-align: left; text-transform: none; letter-spacing: 0; font-size: 12px; white-space: normal; min-width: 240px; }
.tabela-dre tbody .dre-rotulo { font-weight: 400; color: var(--tinta); }
.tabela-dre .dre-rotulo a { color: inherit; text-decoration: none; }
.tabela-dre .dre-rotulo a:hover { color: var(--acao); text-decoration: underline; }
.dre-total { border-left: 1px solid var(--borda); font-weight: 600; }
.dre-av { color: var(--tinta-fraca); font-variant-numeric: tabular-nums; width: 1%; }

/* A hierarquia da cascata, do mais forte ao mais fraco: subtotal, seção,
   grupo, categoria. Sem essa escada, 40 linhas de numero viram uma parede. */
.dre-subtotal > * { background: var(--realce); font-weight: 600; border-top: 1px solid var(--borda); }
.dre-subtotal .dre-rotulo { font-weight: 700; }
.dre-secao > * { background: #f7f9fc; }
.dre-secao .dre-rotulo { font-weight: 600; }
.dre-grupo .dre-rotulo { padding-left: 24px; }
.dre-categoria .dre-rotulo { padding-left: 44px; color: var(--tinta-fraca); }
.dre-nivel-3 .dre-rotulo { padding-left: 60px; }
.dre-nivel-4 .dre-rotulo { padding-left: 76px; }
.dre-sem_grupo > * { background: #fdf6e7; }
.dre-sem_grupo .dre-rotulo { font-weight: 600; color: var(--atencao); }

/* Categorias escondidas por padrao: a cascata e a leitura principal, e
   abrir e um clique. Elas ficam NO HTML -- quem esconde e o CSS --, entao a
   impressao e o leitor de tela continuam alcancando tudo. */
.tabela-dre .dre-categoria { display: none; }
.tabela-dre.com-categorias .dre-categoria { display: table-row; }
@media print { .tabela-dre .dre-categoria { display: table-row; } }

.opcao-interruptor { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.aviso-do-relatorio { margin: 16px 0 0; font-size: 12px; color: var(--tinta-fraca); }
.aviso-do-relatorio .valor { color: var(--atencao); }

/* ------------------------------------------------------ tabela cruzada -- */
.controles-secundarios { margin: 16px 0 8px; }
.tabela-cruzada { font-size: 12px; }
.tabela-cruzada th, .tabela-cruzada td { padding: 5px 8px; height: auto; white-space: nowrap; }
.tabela-cruzada .cruzada-rotulo { text-align: left; text-transform: none; letter-spacing: 0; font-size: 12px; white-space: normal; min-width: 200px; }
.tabela-cruzada tbody .cruzada-rotulo { font-weight: 400; }
.tabela-cruzada .cruzada-rotulo a { color: inherit; text-decoration: none; }
.tabela-cruzada .cruzada-rotulo a:hover { color: var(--acao); text-decoration: underline; }
.cruzada-total { border-left: 1px solid var(--borda); font-weight: 600; }
.cruzada-av { color: var(--tinta-fraca); font-variant-numeric: tabular-nums; width: 1%; }

/* As linhas de saldo abrem e fecham a leitura -- sao elas que fazem disto um
   fluxo de caixa e nao um agrupamento com colunas. */
.cruzada-saldo > *, .cruzada-resultado > * { background: var(--realce); font-weight: 600; }
.cruzada-resultado > * { border-top: 2px solid var(--borda); }
.cruzada-secao > * { background: #f7f9fc; }
.cruzada-secao .cruzada-rotulo { font-weight: 600; }
.cruzada-grupo .cruzada-rotulo { padding-left: 24px; color: var(--tinta-fraca); }

/* AH atras de interruptor: doze meses com variacao ao lado sao 24 colunas de
   numero, e a comparacao com o mes anterior e a SEGUNDA pergunta. */
.tabela-cruzada .cruzada-ah { display: none; font-size: 10px; font-variant-numeric: tabular-nums; }
.tabela-cruzada.com-ah .cruzada-ah { display: table-cell; }

/* ---------------------------------------------------------------- paleta -- */
.paleta {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(15, 26, 43, .35);
  display: flex; justify-content: center;
  padding: 12vh 16px 16px;
}
.paleta[hidden] { display: none; }
.paleta-painel {
  width: 100%; max-width: 560px; max-height: 70vh;
  display: flex; flex-direction: column;
  background: var(--superficie); border-radius: 12px;
  box-shadow: 0 24px 64px rgba(15, 26, 43, .28);
  overflow: hidden;
}
.paleta-campo {
  border: 0; border-bottom: 1px solid var(--borda); border-radius: 0;
  height: 52px; padding: 0 18px; font-size: 15px;
}
.paleta-campo:focus { outline: none; }
.paleta-resultados { overflow-y: auto; padding: 6px; }
.paleta-secao {
  margin: 8px 12px 4px; font-size: 10px; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-fraca);
}
.paleta-item {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 12px; border-radius: var(--raio);
  color: var(--tinta); text-decoration: none;
}
.paleta-rotulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paleta-detalhe { font-size: 11px; color: var(--tinta-fraca); white-space: nowrap; }
/* Realce da SELECAO, nao do hover: quem manda aqui e o teclado, e duas
   marcas competindo confundem qual acao o Enter vai executar. */
.paleta-item.paleta-ativo { background: var(--realce); }
.paleta-vencido .paleta-detalhe { color: var(--atencao); }
.paleta-vazio, .paleta-rodape { margin: 12px; font-size: 12px; color: var(--tinta-fraca); }
.paleta-rodape { margin: 0; padding: 8px 16px; border-top: 1px solid var(--borda); }
.paleta-rodape kbd {
  display: inline-block; padding: 1px 5px; margin-right: 2px;
  border: 1px solid var(--borda); border-radius: var(--raio-miudo);
  font-family: inherit; font-size: 10px; background: var(--fundo);
}

/* Faixa de escopo de serie: aparece DEPOIS da edicao, oferecendo escalar. */
.faixa-escopo {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 8px 0; padding: 10px 14px;
  background: var(--realce); border-radius: var(--raio); font-size: 12px;
}
.faixa-escopo button { height: 26px; font-size: 12px; }
.faixa-escopo-feita { background: #e6f4ec; color: var(--sucesso); }

/* Menu de acao da linha: `<details>` nativo, sem JavaScript. */
.celula-acoes { width: 1%; padding-left: 0; }
.menu-da-linha { position: relative; display: inline-block; }
.menu-da-linha > summary {
  list-style: none; cursor: pointer; padding: 2px 6px; border-radius: var(--raio-miudo);
  color: var(--tinta-fraca); line-height: 1;
}
.menu-da-linha > summary::-webkit-details-marker { display: none; }
.menu-da-linha > summary:hover { background: var(--fundo); color: var(--tinta); }
.menu-itens {
  position: absolute; right: 0; top: 100%; z-index: 20; min-width: 150px;
  padding: 4px; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: 0 6px 20px rgba(15, 26, 43, .16);
}
.menu-itens button {
  display: block; width: 100%; height: 30px; padding: 0 10px;
  background: transparent; color: var(--tinta); text-align: left; font-size: 12px;
}
.menu-itens button:hover { background: var(--realce); }
.menu-itens .menu-perigo { color: var(--erro); }
.menu-itens .menu-perigo:hover { background: #fbeceb; }

/* Barra de ferramentas dentro do card da lista.
   A barra e o quadro de rolagem sao IRMAOS, e nao aninhados num wrapper: com
   um `<div>` a mais em volta do `.rolagem-horizontal`, a pagina passava a
   rolar 114px para o lado numa tela de 390px (medido) -- o quadro deixava de
   conter a tabela. O cartao aqui e costurado pelo CSS: topo arredondado na
   barra, base arredondada na tabela, mesma sombra. */
.barra-da-lista {
  background: var(--superficie);
  border-radius: var(--raio) var(--raio) 0 0;
  box-shadow: var(--sombra);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 14px; border-bottom: 1px solid var(--borda);
}
.contagem-da-lista { font-size: 15px; font-weight: 600; }
.localizar input { height: 28px; min-width: 200px; }
.totais-da-lista { display: flex; gap: 14px; font-size: 12px; }
.acoes-da-lista { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 12px; }
.acoes-da-lista a, .ligacao {
  color: var(--acao); text-decoration: none; background: none; border: 0;
  height: auto; padding: 0; font: inherit; cursor: pointer;
}
.acoes-da-lista a:hover, .ligacao:hover { text-decoration: underline; background: none; }
/* A tabela completa o cartao: sem raio no topo, que a barra ja fez. */
.tabela { border-radius: 0 0 var(--raio) var(--raio); }

/* -------------------------------------------------- Pagamento parcial --- */

/* Terceira situação, e por isso terceira cor. Reaproveitar o âmbar de "Em
   aberto" com outro texto obrigaria a LER a etiqueta para distinguir as duas,
   e a coluna de situação existe justamente para ser varrida sem leitura. Azul
   porque é a cor de ação do sistema: parcial é um título em andamento, não um
   alerta. */
.marca-parcial { background: var(--realce); color: var(--acao-escura); }

/* O link do menu tem que parecer os botões vizinhos: no menu, "Pagar parcial"
   e "Duplicar" são a mesma coisa para quem clica, e um sublinhado azul no
   meio de dois itens neutros diria que é outra categoria de ação. */
.menu-itens a {
  display: block; width: 100%; padding: 0 10px; line-height: 30px;
  color: var(--tinta); text-align: left; font-size: 12px; text-decoration: none;
}
.menu-itens a:hover { background: var(--realce); }

.cartao-estreito {
  max-width: 460px; gap: 16px; padding: 24px;
  border-left: 1px solid var(--borda); box-shadow: var(--sombra);
}
.cartao-estreito:hover { background: var(--superficie); }

.titulo-em-baixa { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.titulo-em-baixa .miudo { color: var(--tinta-fraca); font-size: 12px; }

/* O saldo é o número que a decisão depende; ele manda na tela. */
.saldo-em-aberto {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 12px 0; border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda);
}
.saldo-em-aberto .rotulo { font-size: 12px; color: var(--tinta-fraca); }
.saldo-em-aberto .valor {
  font-family: "Cifra", "Inter", sans-serif; font-weight: 600; font-size: 24px;
  font-variant-numeric: tabular-nums;
}
.saldo-em-aberto .miudo { font-size: 12px; color: var(--tinta-fraca); }

.formulario-de-baixa { display: flex; flex-direction: column; gap: 12px; }
.formulario-de-baixa label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--tinta-fraca);
}
.formulario-de-baixa input, .formulario-de-baixa select {
  height: 34px; font-size: 14px; color: var(--tinta);
}
.acoes-do-formulario { display: flex; align-items: center; gap: 12px; margin-top: 4px; }

.nota { font-size: 12px; color: var(--tinta-fraca); margin: 0; }

.baixas-anteriores h2 { font-size: 12px; color: var(--tinta-fraca); margin: 0 0 6px; }
.baixas-anteriores ul { list-style: none; margin: 0; padding: 0; }
.baixas-anteriores li {
  display: flex; align-items: baseline; gap: 12px; padding: 4px 0;
  border-top: 1px solid var(--borda); font-size: 13px;
}
.baixas-anteriores .valor { font-variant-numeric: tabular-nums; margin-left: auto; }
.baixas-anteriores .miudo { color: var(--tinta-fraca); font-size: 12px; }

/* ------------------------------------------------- Editar lançamento ---- */

/* A descrição vira link sem virar azul: numa tabela de cinquenta linhas,
   cinquenta links azuis sublinhados apagam a hierarquia da tela inteira. O
   sublinhado aparece no hover, que é quando a pergunta "isso clica?" é
   feita. */
.ligacao-da-linha { color: inherit; text-decoration: none; }
.ligacao-da-linha:hover { color: var(--acao); text-decoration: underline; }

.cartao-formulario {
  max-width: 720px; gap: 16px; padding: 24px;
  border-left: 1px solid var(--borda); box-shadow: var(--sombra);
}
.cartao-formulario:hover { background: var(--superficie); }

.formulario-de-edicao { display: flex; flex-direction: column; gap: 14px; }
.formulario-de-edicao label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--tinta-fraca);
}
.formulario-de-edicao input, .formulario-de-edicao select {
  height: 34px; font-size: 14px; color: var(--tinta);
}
.campos-lado-a-lado { display: flex; gap: 12px; flex-wrap: wrap; }
/* `min-width: 0` não é enfeite: o padrão de um item flex é `min-width: auto`,
   que o proíbe de encolher abaixo do próprio conteúdo mínimo -- e o conteúdo
   mínimo de um `<input>` é a largura padrão dele, perto de 220px. Com três
   campos de data numa faixa de 672px isso bastava para o terceiro quebrar
   linha sozinho, apesar de 3 × 150px caberem folgados. */
.campos-lado-a-lado > label { flex: 1 1 150px; min-width: 0; }
.campos-lado-a-lado > .cresce { flex: 1 1 180px; min-width: 0; }
/* O valor alinhado à direita e tabular: é assim que ele aparece na lista, e
   o campo que se confere de volta tem que ter a mesma forma do número que se
   veio conferir. */
.campos-lado-a-lado > .campo-valor { flex: 0 0 140px; min-width: 0; }
.campos-lado-a-lado > .campo-valor input { text-align: right; font-variant-numeric: tabular-nums; }

.grupo-de-radio { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.grupo-de-radio .rotulo-do-grupo { font-size: 12px; color: var(--tinta-fraca); }
.grupo-de-radio .radio {
  flex-direction: row; align-items: center; gap: 6px;
  font-size: 13px; color: var(--tinta); cursor: pointer;
}

.escopo-na-edicao {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px; background: var(--realce); border-radius: var(--raio);
}
.escopo-na-edicao .nota { color: var(--acao-escura); }

.avisos { margin-bottom: 16px; }
.aviso {
  margin: 0; padding: 10px 14px; font-size: 13px;
  background: #e6f4ec; color: var(--sucesso);
  border-radius: var(--raio); border-left: 3px solid var(--sucesso);
}

/* ------------------------------------------------------------ Anexos --- */

/* O clipe herda a cor fraca do texto ao lado: ele é um sinal, não uma
   chamada. Vira azul no hover, que é quando a pergunta "isso abre?" é
   feita. */
.marca-anexo {
  display: inline-flex; align-items: center; gap: 1px; margin-left: 6px;
  color: var(--tinta-fraca); text-decoration: none; vertical-align: -2px;
}
.marca-anexo:hover { color: var(--acao); }
.marca-anexo .quantos { font-size: 10px; font-variant-numeric: tabular-nums; }

/* Os arquivos são o que se clica aqui, mas dez linhas azuis sublinhadas
   pesam mais que o formulário inteiro acima delas. Sublinhado no hover, e
   `:visited` normalizado -- o roxo padrão do navegador é a única cor da tela
   que não sai da paleta. */
.anexos a { color: var(--acao); text-decoration: none; }
.anexos a:visited { color: var(--acao); }
.anexos a:hover { text-decoration: underline; }

.anexos { border-top: 1px solid var(--borda); padding-top: 12px; }
.anexos h2 { font-size: 12px; color: var(--tinta-fraca); margin: 0 0 6px; }
.anexos ul { list-style: none; margin: 0; padding: 0; }
.anexos li {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 4px 0; font-size: 13px;
}
.anexos .miudo { font-size: 11px; color: var(--tinta-fraca); }
.anexos .pendente { color: var(--tinta-fraca); }

/* ------------------------------------------------------ Tela de entrada -- */

/* A única tela do sistema sem barra superior, sem empresa e sem menu -- e por
   isso a única centrada. Aqui não há nada para navegar: há uma coisa para
   fazer, e ela fica no meio. */
.tela-de-entrada {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px; background: var(--fundo);
}
.caixa-de-entrada {
  width: 100%; max-width: 340px; padding: 32px;
  background: var(--superficie); border-radius: var(--raio);
  box-shadow: 0 10px 30px rgba(15, 26, 43, .10);
}
.caixa-de-entrada h1 { margin: 0 0 20px; font-size: 22px; }
.caixa-de-entrada .erro { margin: 0 0 16px; }

.formulario-de-entrada { display: flex; flex-direction: column; gap: 14px; }
.formulario-de-entrada label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--tinta-fraca);
}
.formulario-de-entrada input { height: 36px; font-size: 14px; color: var(--tinta); }
.formulario-de-entrada button { margin-top: 4px; height: 36px; }

/* Conta e saída na barra superior. Segue o mesmo desenho do "Trocar" ao lado
   -- são vizinhos, e dois estilos de submenu lado a lado leriam como dois
   tipos diferentes de controle. */
.conta-do-usuario .submenu form { margin: 0; }
.conta-do-usuario .submenu button {
  display: block; width: 100%; padding: 6px 12px;
  background: transparent; color: inherit; text-align: left; font-size: 13px;
}

/* ------------------------------------------------------- Ação em lote --- */

/* Escondida por padrão; aparece quando alguma caixa da lista está marcada.
   `:has()` faz isso sem uma linha de JavaScript -- a condição é o estado
   real do formulário, não uma cópia dele mantida à mão. */
.barra-de-lote { display: none; }
.acao-lote:has(input[name="selecionados"]:checked) .barra-de-lote {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}

/* Envio de anexo. Na mesma linha do resto do bloco: o campo de arquivo é
   largo por natureza e empurrar o botão para baixo dele criaria uma terceira
   coluna de leitura numa caixa que já tem duas. */
.enviar-anexo {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borda);
}
.enviar-anexo label {
  display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px;
  min-width: 0; font-size: 12px; color: var(--tinta-fraca);
}
.enviar-anexo input[type="file"] { font-size: 12px; color: var(--tinta); }
/* "Remover" fica NEUTRO até o hover. Num lançamento com dez anexos, dez
   palavras vermelhas empilhadas viram uma coluna de alarme sobre uma lista
   que não tem nada de errado -- e o vermelho, gasto assim, para de significar
   perigo onde ele de fato existe. O aviso de verdade está no confirm(). */
.anexos li .menu-perigo {
  padding: 0; font-size: 11px; color: var(--tinta-fraca); background: transparent;
}
.anexos li .menu-perigo:hover { color: var(--erro); text-decoration: underline; }

/* Quantas vezes: só aparece quando a repetição sai de "Não repete". Mesmo
   mecanismo da barra de lote -- `:has()` lê o estado real do `<select>`, sem
   JavaScript e sem uma segunda cópia desse estado para dessincronizar. */
.entrada-rapida .quantas-vezes { display: none; }
.entrada-rapida:has(.repeticao option[value="nao"]:not(:checked)) .quantas-vezes {
  display: block; flex: 0 0 70px;
}
.entrada-rapida .repeticao { flex: 0 0 auto; }

/* Direção da transferência: as duas contas na mesma linha, com a seta entre
   elas. Empilhadas, com rótulos parecidos, "de" e "para" trocam de lugar na
   leitura -- e é a única informação da tela que não pode ser lida errada. */
.direcao-da-transferencia {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
}
.direcao-da-transferencia > .cresce { flex: 1 1 140px; min-width: 0; }
.seta-da-transferencia {
  padding-bottom: 8px; font-size: 18px; color: var(--tinta-fraca);
}

/* ------------------------------------------- Análise: abrir a fatia ----- */

.linha-da-gaveta > td { padding-top: 0; border-top: 0; }
.gaveta-da-fatia > summary,
.gaveta-de-lancamentos > summary {
  list-style: none; cursor: pointer; padding: 2px 0;
  font-size: 11px; color: var(--tinta-fraca);
}
.gaveta-da-fatia > summary::-webkit-details-marker,
.gaveta-de-lancamentos > summary::-webkit-details-marker { display: none; }
.gaveta-da-fatia > summary::before,
.gaveta-de-lancamentos > summary::before { content: "▸ "; }
.gaveta-da-fatia[open] > summary::before,
.gaveta-de-lancamentos[open] > summary::before { content: "▾ "; }
.gaveta-da-fatia > summary:hover,
.gaveta-de-lancamentos > summary:hover { color: var(--acao); }

.tabela-subcategorias { width: 100%; border-collapse: collapse; margin: 4px 0 8px; }
.tabela-subcategorias td {
  padding: 3px 8px; font-size: 12px; border-bottom: 1px solid var(--borda);
}
.gaveta-de-lancamentos { padding-left: 12px; }

.lancamentos-da-fatia { list-style: none; margin: 4px 0; padding: 0 0 0 12px; }
.lancamentos-da-fatia li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 3px 0; font-size: 12px; border-bottom: 1px solid var(--borda);
}
.lancamentos-da-fatia .data { flex: 0 0 74px; color: var(--tinta-fraca); }
.lancamentos-da-fatia .descricao {
  flex: 1 1 auto; min-width: 0; color: inherit; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lancamentos-da-fatia .descricao:hover { color: var(--acao); text-decoration: underline; }
.lancamentos-da-fatia .conta { flex: 0 0 auto; }
.lancamentos-da-fatia .valor { flex: 0 0 auto; font-variant-numeric: tabular-nums; }