/* Orcamento de bolso -- estilo unico do app (painel, configuracoes e login).
   Cabecalho fixo com abas; cada aba e' uma ferramenta do dia a dia.
   Tinta escura como texto, ouro como acento, cores de status so' para status. */

:root {
  color-scheme: light;
  --bg:#f6f5f2; --panel:#ffffff; --panel-2:#f1efea; --ink:#1d1b22; --ink-2:#45414c; --muted:#6b6672;
  --line:#e3e0e7; --line-2:#cfcbd4; --track:#ebe8e2;
  --gold:#94721f; --gold-soft:#f3ead3;
  --ok:#1f7a4d; --ok-bg:#e2f3ea; --warn:#9a6a00; --warn-bg:#fbf0d4; --bad:#b3261e; --bad-bg:#fbe3e1;
  /* Graficos (paleta validada: azul = renda/entrada, ouro = gasto/saida). */
  --s-renda:#2a78d6; --s-gasto:#b8892a;
  --display:"Bodoni Moda",Georgia,serif; --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sombra:0 1px 2px rgba(29,27,34,.04), 0 4px 16px rgba(29,27,34,.05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:#141317; --panel:#1d1c22; --panel-2:#25242b; --ink:#ecebef; --ink-2:#cdc9d3; --muted:#a19ca8;
    --line:#302e36; --line-2:#45424c; --track:#2b2a31;
    --gold:#d8b45c; --gold-soft:#3a3120;
    --ok:#5fcf95; --ok-bg:#183327; --warn:#f0c04f; --warn-bg:#3a2f12; --bad:#f2867e; --bad-bg:#3d1c1a;
    --s-renda:#3987e5; --s-gasto:#b08a2e;
    --sombra:none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#141317; --panel:#1d1c22; --panel-2:#25242b; --ink:#ecebef; --ink-2:#cdc9d3; --muted:#a19ca8;
  --line:#302e36; --line-2:#45424c; --track:#2b2a31;
  --gold:#d8b45c; --gold-soft:#3a3120;
  --ok:#5fcf95; --ok-bg:#183327; --warn:#f0c04f; --warn-bg:#3a2f12; --bad:#f2867e; --bad-bg:#3d1c1a;
  --s-renda:#3987e5; --s-gasto:#b08a2e;
  --sombra:none;
}
/* Nomes antigos, usados pela tela de Configuracoes. */
:root, :root[data-theme] {
  --plane:var(--bg); --surface:var(--panel); --surface-2:var(--panel-2); --grid:var(--line); --axis:var(--line-2);
  --border:var(--line); --series-1:var(--gold); --focus:var(--gold); --critical:var(--bad); --good:var(--ok);
  --good-ink:var(--ok); --warning:var(--warn);
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:130px; }
body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.5 var(--body); }
::selection { background:var(--gold-soft); color:var(--ink); }
a { color:var(--gold); text-underline-offset:3px; }
:focus-visible { outline:2px solid var(--gold); outline-offset:2px; border-radius:4px; }
[hidden] { display:none !important; }
.wrap { max-width:1180px; margin:0 auto; padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right)); }
.num, td, .valor { font-variant-numeric:tabular-nums; }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- Cabecalho ---------- */
.topo { position:sticky; top:0; z-index:10; background:var(--panel); border-bottom:1px solid var(--line); }
.hd { display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; padding-top:12px; }
.marca { display:flex; flex-direction:column; line-height:1.1; margin-right:auto; }
.marca h1, .marca .logo { font:700 25px var(--display); font-variation-settings:"opsz" 11; margin:0; letter-spacing:.005em; color:var(--ink); text-decoration:none; }
.marca h1 span, .marca .logo span { color:var(--gold); }
.marca small { color:var(--muted); font-size:12px; margin-top:3px; }
.hd-acoes { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mes-ctrl { display:flex; align-items:center; border:1px solid var(--line); border-radius:8px; background:var(--bg); }
.mes-ctrl button { all:unset; cursor:pointer; padding:7px 10px; color:var(--muted); font-size:14px; line-height:1; }
.mes-ctrl button:hover:not(:disabled) { color:var(--ink); }
.mes-ctrl button:disabled { opacity:.3; cursor:default; }
.mes-ctrl select { font:600 13px var(--body); color:var(--ink); background:transparent; border:0; padding:7px 2px; cursor:pointer; }
.abas { display:flex; gap:2px; overflow-x:auto; width:100%; margin-top:2px; scrollbar-width:none; }
.abas::-webkit-scrollbar { display:none; }
.abas a, .abas button { font:600 14px var(--body); background:none; border:0; color:var(--ink-2); padding:10px 14px; border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap; text-decoration:none; }
.abas a:hover, .abas button:hover { color:var(--ink); }
.abas [aria-selected="true"], .abas [aria-current="page"] { color:var(--ink); font-weight:700; border-color:var(--gold); }
.abas .dir { margin-left:auto; }
.sair { margin:0; }
.sair button { all:unset; cursor:pointer; color:var(--muted); font-size:13px; padding:7px 4px; }
.sair button:hover { color:var(--ink); }

main { padding-block:22px 80px; }
h2 { font:600 24px/1.2 var(--display); font-variation-settings:"opsz" 11; margin:0 0 4px; text-wrap:balance; }
h3 { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:0 0 10px; font-weight:700; }
p.lead { color:var(--muted); margin:0 0 18px; max-width:72ch; }
.sub { color:var(--muted); font-size:13px; margin:0 0 14px; }
.nota-rodape { font-size:12px; color:var(--muted); margin:10px 0 0; }

/* ---------- Blocos ---------- */
.box, .card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px; box-shadow:var(--sombra); }
.card { margin-bottom:16px; }
.card h2 { font-size:21px; }
.box-cab { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.box-cab h3 { margin:0; }
.grid { display:grid; gap:16px; }
.g2 { grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); }
.g3 { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.pilha { display:flex; flex-direction:column; gap:16px; }

.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:16px; }
.kpi { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; box-shadow:var(--sombra); }
.kpi > span { font-size:12px; color:var(--muted); font-weight:600; }
.kpi b { display:block; font:700 25px/1.2 var(--body); font-variant-numeric:tabular-nums; margin:4px 0 2px; letter-spacing:-.015em; }
.kpi b small { font:500 14px var(--body); color:var(--muted); }
.kpi .pe { font-size:12px; color:var(--muted); }
.kpi.destaque { border-color:var(--gold); background:linear-gradient(180deg,var(--gold-soft),var(--panel) 70%); }
.neg { color:var(--bad); }
.pos { color:var(--ok); }

.pill { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:99px; font-size:12px; font-weight:600; white-space:nowrap; }
.pill.ok { background:var(--ok-bg); color:var(--ok); }
.pill.warn { background:var(--warn-bg); color:var(--warn); }
.pill.bad { background:var(--bad-bg); color:var(--bad); }
.pill.neutro { background:var(--panel-2); color:var(--muted); }
.flag { border-left:3px solid var(--warn); background:var(--warn-bg); padding:10px 14px; border-radius:8px; font-size:13px; margin-bottom:16px; color:var(--ink); }
.flag.info { border-color:var(--gold); background:var(--gold-soft); }
.delta { font-size:12px; color:var(--ink-2); white-space:nowrap; }
.delta.sobe::before { content:"▲ "; color:var(--bad); font-size:10px; }
.delta.desce::before { content:"▼ "; color:var(--ok); font-size:10px; }

/* ---------- Formularios e botoes ---------- */
input, select, textarea { font:500 14px var(--body); color:var(--ink); background:var(--bg); border:1px solid var(--line-2); border-radius:8px; padding:7px 10px; min-width:0; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--gold); outline-offset:0; border-color:transparent; }
label.f { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); font-weight:600; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; font:600 13px var(--body); background:var(--ink); color:var(--panel); border:0; border-radius:8px; padding:9px 15px; cursor:pointer; text-decoration:none; white-space:nowrap; }
.btn:hover { opacity:.9; }
.btn:disabled { opacity:.45; cursor:default; }
.btn.ouro { background:var(--gold); color:#fff; }
.btn.ghost { background:none; color:var(--ink); border:1px solid var(--line-2); }
.btn.ghost:hover { background:var(--panel-2); opacity:1; }
.btn.mini { padding:5px 10px; font-size:12px; }
.toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-bottom:12px; }
.toolbar .cont { font-size:12px; color:var(--muted); margin-left:auto; align-self:center; }
.seg { display:inline-flex; padding:3px; border-radius:9px; background:var(--panel-2); gap:2px; }
.seg button { all:unset; cursor:pointer; font:600 13px var(--body); padding:6px 14px; border-radius:7px; color:var(--muted); }
.seg button[aria-pressed="true"] { background:var(--panel); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.08); }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.chip { font:600 12px var(--body); padding:5px 12px; border-radius:99px; border:1px solid var(--line); background:var(--panel); color:var(--ink-2); cursor:pointer; }
.chip:hover { border-color:var(--line-2); }
.chip[aria-pressed="true"] { background:var(--ink); color:var(--panel); border-color:var(--ink); }
.chip small { font-weight:500; opacity:.75; }

/* ---------- Tabelas ---------- */
.tbl-wrap { overflow:auto; border:1px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:var(--sombra); }
table { border-collapse:collapse; width:100%; }
th, td { padding:9px 12px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom:0; }
thead th { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; background:var(--panel); position:sticky; top:0; z-index:1; }
thead th[data-ordem] { cursor:pointer; user-select:none; }
thead th[data-ordem]:hover { color:var(--ink); }
th.l, td.l { text-align:left; }
tbody tr:hover { background:var(--bg); }
td.desc { white-space:normal; min-width:220px; max-width:380px; }
td.desc b { display:block; font-weight:600; }
td.desc small { color:var(--muted); }
td select { font-size:12px; padding:4px 6px; max-width:210px; }
td input { width:110px; text-align:right; padding:5px 8px; }
tr.atual th, tr.atual td { background:var(--gold-soft); font-weight:600; }
tr.forte th, tr.forte td { font-weight:700; }
tr.total th, tr.total td { font-weight:700; border-top:2px solid var(--line-2); font-size:15px; }
.dre th { text-align:left; font-weight:500; color:var(--ink-2); }
.tfoot td { font-weight:700; background:var(--panel-2); }

/* ---------- Medidores e barras ---------- */
.med { position:relative; height:8px; border-radius:4px; background:var(--track); }
.med > i { position:absolute; inset:0 auto 0 0; border-radius:4px; min-width:3px; background:var(--s-gasto); }
.med > i.ok { background:var(--ok); } .med > i.warn { background:var(--warn); } .med > i.bad { background:var(--bad); } .med > i.neutro { background:var(--gold); }
.med > s { position:absolute; top:-3px; bottom:-3px; width:2px; margin-left:-1px; background:var(--ink); border-radius:1px; }
.rx { display:flex; flex-direction:column; gap:14px; }
.rx-l .cab { display:flex; justify-content:space-between; gap:10px; font-size:13px; margin-bottom:5px; }
.rx-l .pe { display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--muted); margin-top:5px; }
.nota-grande { font:700 48px/1 var(--body); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.nota-grande small { font:500 16px var(--body); color:var(--muted); }
.empilhada { display:flex; gap:2px; height:28px; margin:8px 0 12px; }
.empilhada i { border-radius:4px; min-width:3px; }
.legenda { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12px; color:var(--ink-2); }
.legenda span { display:inline-flex; align-items:center; gap:6px; }
.legenda i { width:10px; height:10px; border-radius:3px; display:inline-block; }
.barras { display:flex; flex-direction:column; gap:2px; }
.barra { all:unset; box-sizing:border-box; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(60px,1.4fr) auto; align-items:center; gap:12px; padding:6px 8px; border-radius:8px; cursor:pointer; font-size:13px; }
.barra:hover { background:var(--bg); }
.barra .nome { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2); }
.barra .trilho { height:8px; border-radius:4px; background:var(--track); position:relative; }
.barra .trilho i { position:absolute; inset:0 auto 0 0; border-radius:4px; background:var(--s-gasto); min-width:2px; }
.barra .v { text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }

/* Grafico de evolucao (SVG) */
.evo svg { display:block; width:100%; height:auto; overflow:visible; }
.evo .grade line { stroke:var(--line); }
.evo text { fill:var(--muted); font:11px var(--body); }
.evo text.atual { fill:var(--ink); font-weight:700; }
.evo .col { cursor:pointer; outline:none; }
.evo .col .faixa { fill:transparent; }
.evo .col:hover .faixa, .evo .col.atual .faixa { fill:var(--panel-2); }
.evo .col:focus-visible .faixa { stroke:var(--gold); stroke-width:2; }
.evo .parcial { opacity:.4; }
.tt { position:fixed; z-index:50; pointer-events:none; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:8px 11px; font-size:12px; box-shadow:0 8px 28px rgba(0,0,0,.16); min-width:160px; opacity:0; transition:opacity .1s; }
.tt.on { opacity:1; }
.tt .t { color:var(--muted); margin-bottom:4px; }
.tt .l { display:flex; justify-content:space-between; gap:14px; align-items:center; }
.tt .l span { display:inline-flex; align-items:center; gap:6px; color:var(--ink-2); }
.tt .l span::before { content:""; width:10px; height:2px; border-radius:1px; background:var(--k,var(--muted)); }
.tt .l b { font-variant-numeric:tabular-nums; }

/* ---------- Explorador de gastos ---------- */
.cats { display:flex; flex-direction:column; }
.cat { border-top:1px solid var(--line); }
.cat:first-child { border-top:0; }
.cat-btn { all:unset; box-sizing:border-box; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 14px; width:100%; padding:12px 8px; cursor:pointer; border-radius:8px; }
.cat-btn:hover { background:var(--bg); }
.cat-btn:focus-visible { outline:2px solid var(--gold); }
.cat-nome { display:flex; align-items:center; gap:8px; font-weight:600; min-width:0; }
.cat-nome .seta { color:var(--muted); font-size:10px; width:10px; transition:transform .15s; }
.cat.aberta .seta { transform:rotate(90deg); }
.cat-nome em { font-style:normal; font-weight:500; font-size:12px; color:var(--muted); }
.cat-v { text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }
.cat .med { grid-column:1 / -1; }
.cat-pe { grid-column:1 / -1; display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; font-size:12px; color:var(--muted); }
.detalhe { display:grid; grid-template-columns:1fr; gap:18px; padding:4px 8px 18px 26px; }
.detalhe .barra { grid-template-columns:minmax(0,1.4fr) minmax(60px,1fr) auto; }
.detalhe .barra[aria-pressed="true"] { background:var(--gold-soft); }
.lancs { display:flex; flex-direction:column; }
.lanc { display:grid; grid-template-columns:46px minmax(0,1fr) auto; gap:2px 10px; align-items:center; padding:8px 0; border-top:1px solid var(--line); font-size:13px; }
.lanc:first-child { border-top:0; }
.lanc .d { color:var(--muted); font-variant-numeric:tabular-nums; }
.lanc .t { min-width:0; }
.lanc .t div { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lanc .t small { color:var(--muted); }
.lanc .v { text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
.lanc select { grid-column:2 / -1; justify-self:start; font-size:12px; padding:4px 6px; max-width:100%; }
.mais { all:unset; cursor:pointer; color:var(--gold); font-size:13px; font-weight:600; padding-top:8px; }
.vazio { color:var(--muted); font-size:13px; padding:10px 0; }

.gastos-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:16px; align-items:start; }
@media (max-width:900px) { .gastos-grid { grid-template-columns:1fr; } }

/* Dicas */
.dicas { display:flex; flex-direction:column; gap:10px; }
.dica { all:unset; box-sizing:border-box; display:block; padding:12px 14px; border-radius:10px; background:var(--bg); border:1px solid var(--line); cursor:pointer; }
.dica:hover { border-color:var(--line-2); }
.dica:focus-visible { outline:2px solid var(--gold); }
.dica b { display:block; font-size:14px; margin-bottom:2px; }
.dica span { font-size:13px; color:var(--ink-2); }
.dica em { display:block; font-style:normal; font-size:12px; font-weight:700; color:var(--ok); margin-top:6px; }
.ia-texto { white-space:pre-line; font-size:14px; line-height:1.6; background:var(--gold-soft); border-radius:10px; padding:14px 16px; margin-top:12px; }
.ia-texto small { display:block; color:var(--muted); font-size:11px; margin-top:10px; }

/* Pendentes */
.pend { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 14px; padding:10px 0; border-top:1px solid var(--line); font-size:13px; }
.pend:first-of-type { border-top:0; }
.pend .t { flex:1; min-width:200px; }
.pend .t small { color:var(--muted); }
.pend .acoes { display:flex; gap:6px; }

/* Importar */
.zona { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; padding:34px 16px; border:2px dashed var(--line-2); border-radius:12px; background:var(--bg); cursor:pointer; transition:.15s; }
.zona:hover, .zona.sobre { border-color:var(--gold); background:var(--gold-soft); }
.zona b { font-size:15px; }
.zona span { font-size:13px; color:var(--muted); }
#imp-arq:focus-visible + .arqs { outline:2px solid var(--gold); }
.arqs { display:flex; flex-direction:column; gap:6px; margin-top:12px; }
.arqs:empty { display:none; }
.arq { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-size:13px; }
.arq .ext { font-size:10px; font-weight:700; letter-spacing:.05em; padding:2px 6px; border-radius:4px; background:var(--gold-soft); color:var(--gold); }
.arq .n { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.arq small { color:var(--muted); }
.arq .x { all:unset; cursor:pointer; color:var(--muted); font-size:18px; line-height:1; padding:0 4px; }
.arq .x:hover { color:var(--bad); }
.dicas-banco { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:8px; font-size:13px; color:var(--ink-2); }
.dicas-banco b { color:var(--ink); }
td .pill.bad { white-space:normal; }

/* Dialogo e aviso */
dialog { border:0; border-radius:14px; padding:0; width:min(460px,calc(100vw - 32px)); background:var(--panel); color:var(--ink); box-shadow:0 24px 64px rgba(0,0,0,.25); }
dialog::backdrop { background:rgba(20,19,23,.45); }
dialog form { padding:20px; display:grid; gap:14px; }
dialog h2 { font-size:22px; }
dialog .linha { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
dialog input, dialog select { width:100%; font-size:15px; padding:9px 10px; }
dialog .rodape { display:flex; justify-content:flex-end; gap:8px; }
.aviso-flut { position:fixed; left:50%; bottom:20px; transform:translateX(-50%) translateY(20px); z-index:60; background:var(--ink); color:var(--panel); border-radius:10px; padding:10px 14px; font-size:13px; display:flex; gap:12px; align-items:center; opacity:0; transition:.2s; pointer-events:none; max-width:calc(100vw - 32px); }
.aviso-flut.on { opacity:1; transform:translateX(-50%); pointer-events:auto; }
.aviso-flut button { all:unset; cursor:pointer; color:var(--gold-soft); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.carregando main { opacity:.55; transition:opacity .15s; }

/* ---------- Configuracoes (pagina do servidor) ---------- */
.msg { padding:12px 14px; border-radius:10px; margin-bottom:14px; font-size:14px; border:1px solid var(--line); background:var(--panel); }
.msg.erro { border-color:var(--bad); color:var(--bad); }

/* ---------- Login ---------- */
.login { min-height:100vh; display:grid; place-items:center; padding:24px 16px; }
.login .box { width:100%; max-width:380px; padding:28px; }
.login h1 { font:700 28px var(--display); font-variation-settings:"opsz" 11; margin:0 0 4px; }
.login h1 span { color:var(--gold); }
.login p { color:var(--muted); font-size:13px; margin:0 0 18px; }
.login label { display:block; font-size:12px; font-weight:600; color:var(--muted); margin:12px 0 4px; }
.login input { width:100%; font-size:15px; padding:10px 12px; }
.login .btn { width:100%; margin-top:20px; padding:11px; font-size:15px; }
.login .erro { color:var(--bad); font-size:13px; margin:12px 0 0; }

@media (max-width:720px) {
  .detalhe { padding-left:8px; }
  .g2 { grid-template-columns:1fr; }
  .marca h1, .marca .logo { font-size:21px; }
  h2 { font-size:21px; }
  .kpi b { font-size:22px; }
  .hd-acoes .btn-novo-txt { display:none; }
  html { scroll-padding-top:170px; }
  .cat-nome em { display:none; }
  .marca small { display:none; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }

/* Rodape com termos e privacidade */
.rodape-app { font-size:12px; color:var(--muted); padding-bottom:28px; margin-top:-48px; }
.rodape-app a { color:var(--muted); }