/* Cores e espaçamentos compartilhados por todas as telas. Não depende de fontes externas. */
/* Telas de acesso independentes da navegação financeira. */
.acesso-pagina{max-width:480px;margin:48px auto;padding:16px}.acesso-administracao{max-width:1000px;margin:32px auto;padding:16px}.acesso-pagina .campo{margin-bottom:18px}.acesso-pagina .cartao,.acesso-administracao .cartao{margin-top:20px}.acesso-menu{display:flex;flex-wrap:wrap;gap:8px;padding:16px}.acesso-menu form{margin:0}
/* A opção mensal mantém o tamanho natural da caixa de seleção. */
.opcao-recorrencia{display:flex;align-items:center;gap:8px;margin-top:18px}.campo .opcao-recorrencia input{width:18px;height:18px;padding:0;accent-color:var(--verde)}
.opcao-regra{display:flex;align-items:flex-start;gap:8px;margin:12px 0;font-size:12px}.opcao-regra input[type=checkbox]{width:18px;height:18px;flex:0 0 18px;margin:0;padding:0;accent-color:var(--verde)}
:root{--fundo:#f5f6f3;--papel:#fff;--texto:#203b35;--suave:#697771;--linha:#e5e9e3;--verde:#236b55;--verde-claro:#eaf4ee;--vermelho:#a54439;--amarelo:#99630f;--raio:16px}
*{box-sizing:border-box}body{margin:0;background:var(--fundo);color:var(--texto);font:14px/1.5 "Segoe UI",Arial,sans-serif}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}a{color:var(--verde);text-decoration:none}button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}:focus-visible{outline:3px solid #b08335;outline-offset:3px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.pular{position:fixed;top:-60px;z-index:100;background:white;padding:12px}.pular:focus{top:0}
.lateral{position:fixed;inset:0 auto 0 0;width:235px;background:#153b36;color:#d5e3dc;padding:36px 22px;display:flex;flex-direction:column}.marca{display:flex;align-items:center;gap:12px;color:white;font-size:30px;letter-spacing:-1.3px;font-weight:650;padding:0 10px 25px}.marca small{display:block;font-size:8px;letter-spacing:1.5px;font-weight:500;margin-top:2px}.simbolo{border:1px solid #77938b;border-radius:12px;width:39px;height:39px;text-align:center;font-size:28px;background:#254d42}.nav-titulo{font-size:10px;letter-spacing:1.8px;color:#99b5a9;margin:28px 12px 12px}.lateral nav>a{display:flex;align-items:center;gap:12px;color:#d3e0d9;padding:12px;border-radius:9px;margin:4px 0;font-size:13px}.lateral nav>a span{font-size:20px;width:22px;text-align:center}.lateral nav>a:hover{background:#214b41}.lateral nav>a[aria-current]{background:#31594b;color:#fff;box-shadow:inset 3px 0 #b5cd8c}.lateral-rodape{margin-top:auto;border-top:1px solid #3c5c52;padding-top:22px;display:flex;align-items:center;gap:11px;font-size:12px}.lateral small{display:block;color:#a5bfb2;font-size:10px}.avatar{display:grid;place-items:center;border:1px solid #547668;width:33px;height:33px;border-radius:50%;color:#d8e5bd}
.principal{margin-left:235px;min-height:100vh}.barra{height:84px;border-bottom:1px solid var(--linha);display:flex;align-items:center;justify-content:space-between;padding:0 40px;color:var(--suave);font-size:12px;background:#fafbf8}.seletor-mes{display:flex;align-items:center;gap:4px;background:white;border:1px solid var(--linha);padding:5px;border-radius:10px}.seletor-mes input{width:157px;border:0;background:transparent;font-weight:600;color:var(--texto);padding:5px}.icone{border:0;background:transparent;border-radius:7px;padding:4px 10px;font-size:23px;color:var(--texto)}.icone:hover{background:var(--verde-claro)}main{padding:34px 40px;max-width:1580px;margin:auto}.cabecalho{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px}.sobretitulo{font-size:10px;letter-spacing:1.8px;color:var(--verde);font-weight:700;margin:0 0 7px}h1{font-size:30px;letter-spacing:-.8px;margin:0;font-weight:650}h2{font-size:18px;letter-spacing:-.3px;margin:0}h3{font-size:15px;margin:0}#subtitulo{color:var(--suave);margin:7px 0 0;font-size:13px}.acoes{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.botao{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--linha);border-radius:9px;padding:10px 15px;background:white;color:var(--texto);font-weight:600;font-size:12px;white-space:nowrap}.botao:hover{background:#f0f5ef}.botao.primario{background:var(--verde);border-color:var(--verde);color:white}.botao.primario:hover{background:#174f3e}.botao.perigo{color:var(--vermelho);border-color:#edcfc7}.botao.pequeno{padding:6px 10px;font-size:11px}.link-botao{background:transparent;border:0;color:var(--verde);font-size:12px;padding:5px 3px;text-align:left;font-weight:600}.link-botao:hover{text-decoration:underline}.link-botao.perigo{color:var(--vermelho)}
.resumos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:23px}.resumo{border:1px solid var(--linha);background:white;padding:20px;border-radius:var(--raio);position:relative}.resumo.destaque{background:#eaf0df;border-color:#dce6c9}.resumo .rotulo{font-size:12px;color:var(--suave);display:block;margin-bottom:12px}.resumo strong{font-size:25px;letter-spacing:-.8px;font-weight:650;display:block;white-space:nowrap}.resumo small{display:block;color:var(--suave);font-size:11px;margin-top:10px}.resumo .mini-icone{position:absolute;right:19px;top:18px;color:#668766}.negativo{color:var(--vermelho)!important}.positivo{color:var(--verde)}
.grade{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(260px,1fr);gap:22px;align-items:start}.cartao{background:white;border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;margin-bottom:22px}.cartao-topo{padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--linha)}.cartao-topo p{margin:3px 0 0;color:var(--suave);font-size:11px}.miolo{padding:22px 24px}.tabela-rolagem{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:12px}th{font-size:10px;letter-spacing:.7px;text-transform:uppercase;font-weight:600;color:var(--suave);background:#fbfcfa;padding:13px 20px}td{padding:17px 20px;border-top:1px solid #eff1ed;vertical-align:middle}td strong{font-size:12px;font-weight:600}td small{display:block;color:var(--suave);font-size:10px;margin-top:3px}.valor{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600}.etiqueta{display:inline-block;border-radius:6px;padding:4px 8px;font-size:10px;white-space:nowrap;background:#f1f3ed;color:#65725c}.etiqueta.pago{color:#2d7658;background:#eaf5ee}.etiqueta.pendente{color:#926b20;background:#fbf3df}.etiqueta.atrasado{color:#a04436;background:#fbeee9}.etiqueta.escritorio{color:#5a6090;background:#efeff8}.linha-acoes{display:flex;gap:8px;flex-wrap:wrap;min-width:90px}.lista-simples{list-style:none;padding:0;margin:0}.lista-simples li{padding:16px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid var(--linha)}.lista-simples li:last-child{border-bottom:0}.lista-simples small{display:block;color:var(--suave);font-size:11px;margin-top:4px}
.progresso{height:7px;border-radius:10px;background:#edf0e9;overflow:hidden;margin:10px 0}.progresso>span{display:block;height:100%;background:#6f9570;border-radius:10px}.nota{font-size:11px;color:var(--suave);margin-top:15px;line-height:1.7}.aviso{padding:14px 17px;border-radius:10px;background:#fff4da;color:#785919;margin:0 0 20px;font-size:12px}.sucesso{padding:13px 17px;background:#e3f3e7;color:#226244;border-radius:9px;margin-bottom:18px}.erro{padding:13px 17px;background:#fbece8;color:#963e33;border-radius:9px;margin-bottom:18px}.vazio{text-align:center;padding:48px 25px;color:var(--suave);font-size:13px}.vazio .vazio-simbolo{display:block;font-size:35px;color:#809579;margin-bottom:10px}.vazio strong{display:block;font-size:16px;color:var(--texto);margin-bottom:6px}.vazio .botao{margin-top:18px}.filtros{display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:20px}.abas{display:inline-flex;padding:4px;background:#e9ede5;border-radius:9px;gap:3px}.abas button{border:0;background:transparent;padding:8px 14px;border-radius:7px;color:var(--suave);font-size:12px}.abas button.ativo{background:white;color:var(--texto);box-shadow:0 1px 4px #203b3512}.busca{padding:10px 12px;border:1px solid var(--linha);border-radius:9px;max-width:240px}.grafico-linha{margin-bottom:17px}.grafico-rotulo{display:flex;justify-content:space-between;gap:10px;font-size:12px}.grafico-linha .progresso{height:9px}.legenda{display:flex;gap:14px;color:var(--suave);font-size:11px;margin-top:18px}.ponto{display:inline-block;width:8px;height:8px;border-radius:50%;background:#6f9570;margin-right:5px}.cards-lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.bloco-cartao{padding:22px;border:1px solid var(--linha);background:white;border-radius:var(--raio)}.bloco-cartao h3{margin:8px 0}.bloco-cartao p{color:var(--suave);font-size:12px}.bloco-cartao .acoes{margin-top:17px}.linha-detalhe{display:flex;justify-content:space-between;padding:8px 0;font-size:12px;gap:15px}.bolinha{display:inline-block;width:12px;height:12px;border-radius:4px;background:#668b6d;margin-right:8px}footer{padding:10px 40px 28px;font-size:10px;color:#819085}footer span{padding:0 8px}
/* Formulários e confirmações mantêm os valores preenchidos quando há erro. */
dialog{border:1px solid var(--linha);border-radius:18px;padding:0;max-width:650px;width:calc(100% - 32px);max-height:90vh;color:var(--texto);box-shadow:0 24px 90px #153b3630}dialog::backdrop{background:#152f2d66;backdrop-filter:blur(2px)}.dialogo-topo{padding:22px 25px;border-bottom:1px solid var(--linha);display:flex;justify-content:space-between;align-items:center;gap:20px}#dialogo-conteudo{padding:24px}.form-grade{display:grid;grid-template-columns:1fr 1fr;gap:17px}.campo{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600}.campo.largo{grid-column:1/-1}.campo input,.campo select{width:100%;min-width:0;padding:10px 12px;border:1px solid #ccd7ce;background:#fff;border-radius:8px;color:var(--texto)}.campo small{font-size:10px;font-weight:400;color:var(--suave)}.form-acoes{display:flex;justify-content:flex-end;gap:10px;margin-top:25px;border-top:1px solid var(--linha);padding-top:18px}.confirmacao{font-size:14px;margin:0 0 20px}.lista-detalhes{max-height:45vh;overflow:auto}.muted{color:var(--suave)}.quantia-grande{font-size:30px;letter-spacing:-1px;display:block;margin:8px 0 20px}
@media(min-width:1500px){main{padding-top:42px}.resumo strong{font-size:30px}}
@media(max-width:1150px){.lateral{width:210px;padding:30px 14px}.principal{margin-left:210px}main{padding:28px 24px}.barra{padding:0 24px}.resumos{gap:10px}.resumo{padding:16px}.resumo strong{font-size:21px}.grade{grid-template-columns:1fr}.cards-lista{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1000px){.resumos{grid-template-columns:repeat(2,minmax(0,1fr))}.cabecalho{align-items:flex-start;flex-wrap:wrap}}
@media(max-width:760px){.lateral{position:static;width:100%;padding:16px}.marca{font-size:24px;padding:0 0 10px}.marca small,.lateral-rodape,.nav-titulo{display:none}.lateral nav{display:flex;gap:4px;overflow:auto}.lateral nav>a{white-space:nowrap;padding:8px 10px;font-size:11px}.lateral nav>a span{display:none}.principal{margin-left:0}.barra{height:65px;padding:0 18px}.barra>span{max-width:125px;font-size:10px}main{padding:24px 16px}.cabecalho{align-items:flex-start;flex-direction:column;gap:17px}h1{font-size:27px}.resumos{grid-template-columns:repeat(2,minmax(0,1fr))}.resumo strong{font-size:23px}.resumo .mini-icone{display:none}.cards-lista{grid-template-columns:1fr}.cartao-topo,.miolo{padding:18px}.form-grade{grid-template-columns:1fr}.campo{grid-column:1/-1}th,td{padding:12px 14px}footer{padding:10px 18px 25px}.abas button{padding:8px 10px}.resumo .rotulo{font-size:11px}}
/* Complementos das páginas Thymeleaf e dos formulários sem JavaScript. */
.abas a{display:block;padding:8px 14px;border-radius:7px;color:var(--suave);font-size:12px}.abas a.ativo{background:white;color:var(--texto);box-shadow:0 1px 4px #203b3512}.formulario-pagina{max-width:760px;margin:0 auto 22px}dialog .formulario-pagina{margin:0;border:0;border-radius:0}.campo-invalido{border-color:var(--vermelho)!important}.erro ul{margin:8px 0;padding-left:20px}.seletor-mes input[type=month]{max-width:150px}.linha-acoes a{white-space:normal}.grade>*,.principal{min-width:0}
@media(max-width:760px){.seletor-mes{gap:0}.seletor-mes input[type=month]{width:135px}.barra>span{display:none}.barra{justify-content:flex-end}.abas a{padding:8px 10px}}

/* Botão de nova despesa: vermelho escuro, com texto branco. */
.botao.despesa {
    background: var(--cor-despesa);
    border-color: var(--cor-despesa);
    color: white;
}
.botao.despesa:hover {
    background: #70262d;
    border-color: #70262d;
}

/* Cor financeira das despesas. Altere esta variável para mudar o tom em todas as telas. */
:root { --cor-despesa: #8b3038; }
.texto-despesa,
.resumo.despesa .rotulo,
.resumo.despesa strong,
.resumo.despesa small,
.grafico-despesa .grafico-rotulo {
    color: var(--cor-despesa);
}
.resumo.despesa.destaque { background: #f8ecee; border-color: #e6c9cd; }
.resumo.receita .rotulo, .resumo.receita strong { color: var(--verde); }
.grafico-despesa .progresso > span { background: var(--cor-despesa); }
body[data-tela="analise"] h1,
body[data-tela="parcelamentos"] h1,
form[action^="/despesas/"] .campo > label,
form[action^="/despesas/"] label.campo { color: var(--cor-despesa); }

/* Os botões dos boxes podem passar à linha seguinte quando faltar espaço. */
.topo-com-cadastro { flex-wrap: wrap; }
.topo-com-cadastro > .botao { flex-shrink: 0; }

/* As seções funcionam sem JavaScript e começam abertas. */
.grupo-contas { border-top: 1px solid var(--linha); }
.grupo-contas > summary { padding: 16px 24px; cursor: pointer; color: var(--cor-despesa); background: #fcf6f7; }
.grupo-receitas > summary { color: var(--verde); background: var(--verde-claro); }
.grupo-totais { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 5px; font-size: 11px; }
[data-grupo-visual][hidden] { display: none; }
@media(max-width:760px) { .grupo-contas > summary { padding: 16px 18px; } }

/* O exemplo de CSV continua legível em telas pequenas. */
.exemplo-csv { overflow-x: auto; padding: 16px; background: #f5f6f3; border-radius: 8px; }

/* Agrupa os campos sem acrescentar borda à janela de edição. */
.campos-edicao{border:0;padding:0;margin:0;min-width:0}

/* Créditos líquidos usam a cor de redução de despesas no gráfico. */
.grafico-despesa .progresso .barra-credito{background:var(--verde)}

/* Campo de texto mensal com o mesmo acabamento dos demais formulários. */
.campo textarea{width:100%;min-height:140px;resize:vertical;font:inherit;color:var(--texto);background:white;border:1px solid var(--linha);border-radius:9px;padding:10px 12px}

/* Pizza sem bibliotecas externas, acompanhada de legenda textual acessível. */
.pizza-categorias{width:min(100%,260px);aspect-ratio:1;border-radius:50%;margin:0 auto 24px}
.legenda-pizza{list-style:none;padding:0;margin:0}
.legenda-pizza li{display:grid;grid-template-columns:12px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--linha)}
.cor-categoria{width:12px;height:12px;border-radius:3px}
.legenda-pizza li>span:last-child{text-align:right}
.legenda-pizza small{display:block;color:var(--suave);font-size:11px}