:root{--papel:#f6f7f4;--folha:#fff;--tinta:#1c2a3a;--suave:#6b7785;--linha:#d9ddd6;--azul:#1f4e79;--verde:#2e7d4f;--vermelho:#b8372f;--fds:#eef0ec}
*{box-sizing:border-box}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:'Archivo',system-ui,sans-serif;font-variant-numeric:tabular-nums}
[hidden]{display:none!important}
h1,h2,h3{margin:0}
.btn{background:var(--azul);color:#fff;border:0;border-radius:6px;padding:.6rem 1rem;font:600 .9rem inherit;font-family:inherit;cursor:pointer}
.btn:hover{background:#173c5d}
.btn_texto{background:none;border:0;color:var(--azul);font:500 .9rem inherit;font-family:inherit;cursor:pointer;padding:.5rem}
.btn_texto.perigo{color:var(--vermelho)}
.btn_icone{background:var(--folha);border:1px solid var(--linha);border-radius:6px;width:36px;height:36px;font-size:1.3rem;cursor:pointer}
:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.login{min-height:100vh;display:grid;place-items:center;padding:1rem}
.login_caixa{background:var(--folha);border:1px solid var(--linha);border-radius:10px;padding:2rem;max-width:380px;text-align:center;display:grid;gap:1rem;justify-items:center}
.login_caixa h1{font-weight:800;font-size:1.8rem}
.login_caixa p{color:var(--suave);margin:0}
.login_caixa small{color:var(--suave)}
#tela_app{max-width:1000px;margin:0 auto;padding:0 1rem 3rem}
.topo{display:flex;justify-content:space-between;align-items:center;padding:1rem 0}
.topo h1{font-size:1.25rem;font-weight:800}
.topo_acoes{display:flex;align-items:center;gap:.6rem}
#foto_usuario{border-radius:50%}
.resumo{background:var(--folha);border:1px solid var(--linha);border-radius:10px;padding:1rem;display:grid;gap:1rem}
.mes_nav{display:flex;align-items:center;justify-content:space-between}
.mes_nav h2{font-size:1.3rem;text-transform:capitalize}
.totais{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:0}
.totais div{border-left:3px solid var(--azul);padding-left:.7rem}
.totais .verde{border-color:var(--verde)}.totais .vermelho{border-color:var(--vermelho)}
.totais dt{font-size:.8rem;color:var(--suave)}
.totais dd{margin:0;font-size:1.3rem;font-weight:800}
.totais .verde dd{color:var(--verde)}.totais .vermelho dd{color:var(--vermelho)}
.abas{display:flex;gap:.25rem;margin:1rem 0 .5rem}
.aba{background:none;border:0;border-bottom:3px solid transparent;padding:.5rem 1rem;font:600 .95rem inherit;font-family:inherit;color:var(--suave);cursor:pointer}
.aba.ativa{color:var(--tinta);border-color:var(--azul)}
.rolagem{overflow-x:auto}
table.folha{width:100%;border-collapse:collapse;background:var(--folha);border:1px solid var(--linha);min-width:760px}
.folha th{background:var(--azul);color:#fff;text-align:left;font-size:.8rem;font-weight:600;padding:.5rem .6rem}
.folha td{border-top:1px solid var(--linha);padding:.45rem .6rem;font-size:.9rem;vertical-align:middle}
.folha tr.fds td{background:var(--fds)}
.folha tr.vazio td{color:var(--suave)}
.folha tr.vazio{cursor:pointer}
.folha tr.vazio:hover td,.folha tr.cheio:hover td{background:#e8eef4}
.folha tr.cheio{cursor:pointer}
.col_dia{width:70px;font-weight:600}
.col_valor{text-align:right;font-weight:600;white-space:nowrap}
.sub{display:block;color:var(--suave);font-size:.78rem}
.selo{display:inline-block;padding:.15rem .5rem;border-radius:4px;font-size:.78rem;font-weight:600;border:1.5px solid}
.selo.pago{color:var(--verde);border-color:var(--verde)}
.selo.pendente{color:var(--vermelho);border-color:var(--vermelho)}
.mais{color:var(--azul);font-size:.85rem}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--linha);border:1px solid var(--linha)}
.cal .cab{background:var(--azul);color:#fff;font-size:.78rem;font-weight:600;padding:.4rem;text-align:center}
.cal .cel{background:var(--folha);min-height:84px;padding:.3rem;cursor:pointer;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.cal .cel.fora{background:var(--fds);cursor:default}
.cal .cel:hover:not(.fora){background:#e8eef4}
.cal .num{font-size:.8rem;font-weight:600;color:var(--suave)}
.chip{font-size:.72rem;border-radius:4px;padding:2px 4px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip.pago{background:var(--verde)}.chip.pendente{background:var(--vermelho)}
dialog{border:1px solid var(--linha);border-radius:10px;padding:1.2rem;width:min(520px,94vw);color:var(--tinta)}
dialog::backdrop{background:rgba(20,30,40,.45)}
dialog form{display:grid;gap:.75rem}
dialog label{display:grid;gap:.25rem;font-size:.82rem;font-weight:600;color:var(--suave)}
dialog input,dialog select{font:400 1rem inherit;font-family:inherit;padding:.5rem;border:1px solid var(--linha);border-radius:6px;color:var(--tinta);background:#fff;width:100%}
.linha{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.6rem}
.modal_acoes{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:.5rem;margin-top:.3rem}
.erro{color:var(--vermelho);margin:0;font-size:.9rem}
@media(max-width:560px){.totais dd{font-size:1.05rem}.cal .cel{min-height:62px}.chip{font-size:.65rem}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}