:root{
  --bg:#0f1218; --bg2:#171b24; --bg3:#1f2531;
  --fg:#e8ecf3; --fg2:#98a2b5; --line:#2a3140;
  --acc:#6aa9ff; --pos:#3ecf8e; --neg:#ff6b6b; --warn:#ffb347;
  --r:14px;
  --safe-b:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:light){
  :root{
    --bg:#f6f7fa; --bg2:#fff; --bg3:#eef1f6;
    --fg:#141922; --fg2:#5f6b7f; --line:#dde2ea;
    --acc:#2563eb; --pos:#0f9d68; --neg:#d64545; --warn:#b26a00;
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  padding-bottom:calc(72px + var(--safe-b));
  -webkit-text-size-adjust:100%;
}
h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.09em;color:var(--fg2);margin:26px 0 10px}
h2.danger-h{color:var(--neg)}

/* header */
.top{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:8px;
  padding:12px 10px; background:var(--bg2);
  border-bottom:1px solid var(--line);
}
.per{flex:1;text-align:center;line-height:1.2}
.per strong{display:block;font-size:1.02rem}
.per span{display:block;font-size:.76rem;color:var(--fg2)}
.per-nav{
  width:40px;height:40px;flex:none;font-size:1.5rem;line-height:1;
  background:var(--bg3);color:var(--fg);border:0;border-radius:50%;cursor:pointer;
}
.per-nav:active{background:var(--line)}

main{padding:14px 12px 20px;max-width:720px;margin:0 auto}
.view[hidden]{display:none}

/* scope tabs */
.scope-tabs{display:flex;gap:6px;background:var(--bg3);padding:4px;border-radius:var(--r);margin-bottom:14px}
.scope-tabs button{
  flex:1;padding:9px 4px;border:0;border-radius:10px;cursor:pointer;
  background:transparent;color:var(--fg2);font:inherit;font-size:.88rem;
}
.scope-tabs button.on{background:var(--bg2);color:var(--fg);font-weight:600;box-shadow:0 1px 3px #0003}

/* summary cards */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.card .k{display:block;font-size:.72rem;color:var(--fg2);text-transform:uppercase;letter-spacing:.05em}
.card b{display:block;font-size:1.35rem;margin-top:3px;font-variant-numeric:tabular-nums}
.card.neg b{color:var(--neg)}
.card.pos b{color:var(--pos)}

.split{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.split .p{
  flex:1 1 30%;background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--r);padding:10px 12px;
}
.split .p span{display:block;font-size:.72rem;color:var(--fg2)}
.split .p b{font-variant-numeric:tabular-nums}

/* bars */
.bars{display:flex;flex-direction:column;gap:9px}
.bar{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.bar .t{display:flex;justify-content:space-between;gap:10px;font-size:.9rem}
.bar .t b{font-variant-numeric:tabular-nums;flex:none}
.bar .track{height:6px;background:var(--bg3);border-radius:99px;margin-top:7px;overflow:hidden}
.bar .fill{height:100%;background:var(--acc);border-radius:99px}
.bar.over .fill{background:var(--neg)}
.bar .sub{font-size:.72rem;color:var(--fg2);margin-top:5px}
.bar .sub.over{color:var(--neg)}

.vs{display:flex;flex-direction:column;gap:7px}
.vs div{display:flex;justify-content:space-between;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:.9rem}
.up{color:var(--neg)} .down{color:var(--pos)}

/* forms */
label{display:block;margin:14px 0}
label>span{display:block;font-size:.78rem;color:var(--fg2);margin-bottom:6px}
input,select,textarea{
  width:100%;padding:11px 12px;font:inherit;color:var(--fg);
  background:var(--bg2);border:1px solid var(--line);border-radius:10px;
}
input:focus,select:focus{outline:2px solid var(--acc);outline-offset:-1px}
input[type=file]{padding:9px;background:var(--bg3)}
.monto input{font-size:2rem;font-weight:700;text-align:center;padding:14px;font-variant-numeric:tabular-nums}
.row{display:flex;gap:10px}
.row>label{flex:1;min-width:0}
label.chk{display:flex;align-items:center;gap:8px;margin:14px 0}
label.chk input{width:auto;flex:none}
label.chk span{margin:0;font-size:.88rem;color:var(--fg)}

.seg{display:flex;gap:6px;background:var(--bg3);padding:4px;border-radius:12px;margin:14px 0}
.seg button{
  flex:1;padding:10px;border:0;border-radius:9px;cursor:pointer;
  background:transparent;color:var(--fg2);font:inherit;
}
.seg button.on{background:var(--bg2);color:var(--fg);font-weight:600;box-shadow:0 1px 3px #0003}
#f-tipo button[data-v=gasto].on{color:var(--neg)}
#f-tipo button[data-v=ingreso].on{color:var(--pos)}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.chips button{
  padding:7px 12px;border-radius:99px;border:1px solid var(--line);
  background:var(--bg2);color:var(--fg2);font:inherit;font-size:.84rem;cursor:pointer;
}
.chips button.on{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}

.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
button{font:inherit}
.actions button{
  flex:1;min-width:130px;padding:13px;border-radius:11px;cursor:pointer;
  background:var(--bg3);color:var(--fg);border:1px solid var(--line);
}
.actions button.primary{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
button.danger{background:transparent;color:var(--neg);border:1px solid var(--neg);padding:11px 16px;border-radius:11px;cursor:pointer}
.hint{font-size:.78rem;color:var(--fg2);margin:8px 0}

form.inline{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
form.inline input{flex:2 1 150px;width:auto}
form.inline select{flex:1 1 120px;width:auto}
form.inline button{flex:none;padding:11px 16px;border-radius:10px;border:0;background:var(--acc);color:#fff;cursor:pointer}

/* filters */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.filters input[type=search]{flex:2 1 100%}
.filters select{flex:1 1 130px;width:auto}
.filters label.chk{margin:0;flex:1 1 100%}

/* list */
.day{font-size:.72rem;color:var(--fg2);text-transform:uppercase;letter-spacing:.06em;margin:16px 0 7px}
.mv{
  display:flex;align-items:center;gap:11px;padding:11px 12px;
  background:var(--bg2);border:1px solid var(--line);border-radius:11px;margin-bottom:7px;
}
.mv .ic{
  width:34px;height:34px;flex:none;border-radius:9px;background:var(--bg3);
  display:grid;place-items:center;font-size:.9rem;
}
.mv .m{flex:1;min-width:0}
.mv .m b{display:block;font-size:.94rem;font-weight:600}
.mv .m span{display:block;font-size:.75rem;color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv .amt{font-variant-numeric:tabular-nums;font-weight:700;flex:none}
.mv .amt.g{color:var(--neg)} .mv .amt.i{color:var(--pos)}
.mv .x{flex:none;background:none;border:0;color:var(--fg2);font-size:1.1rem;cursor:pointer;padding:4px 6px}
.tag{display:inline-block;font-size:.66rem;padding:1px 6px;border-radius:99px;background:var(--bg3);color:var(--fg2);margin-left:5px}

.mini-list{display:flex;flex-direction:column;gap:7px}
.mini-list .it{
  display:flex;align-items:center;gap:9px;background:var(--bg2);
  border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:.9rem;
}
.mini-list .it .g{flex:1;min-width:0}
.mini-list .it input{width:110px;flex:none;padding:7px 9px;text-align:right}
.mini-list .it button{background:none;border:0;color:var(--fg2);cursor:pointer;font-size:1.05rem}

.empty{text-align:center;color:var(--fg2);padding:36px 12px;font-size:.9rem}

/* dólares: siempre visibles como algo aparte, nunca sumados a los pesos */
.usd{
  font-size:.8em;color:var(--fg2);font-weight:600;
  border-left:1px solid var(--line);margin-left:6px;padding-left:6px;
  white-space:nowrap;
}
.card b .usd{display:block;border:0;margin:2px 0 0;padding:0;font-size:.62em}
.per-nav:disabled{opacity:.3;cursor:default}
#cc-reparto .it b{font-variant-numeric:tabular-nums;min-width:88px;text-align:right}
#cc-reparto .it input,#set-reparto .it input{width:70px}

/* login */
.modal{
  position:fixed;inset:0;z-index:100;background:var(--bg);
  display:grid;place-items:center;padding:24px;
}
.modal[hidden]{display:none}
.modal form{width:100%;max-width:340px}
.modal h1{font-size:1.5rem;margin:0 0 6px;text-align:center}
.modal button{
  width:100%;padding:13px;margin-top:16px;border:0;border-radius:11px;
  background:var(--acc);color:#fff;font:inherit;font-weight:600;cursor:pointer;
}
.modal button:disabled{opacity:.55}
.hint.err{color:var(--neg)}

/* indicador de guardado */
.sync{
  flex:none;width:26px;text-align:center;font-size:.95rem;
  color:var(--pos);line-height:1;
}
.sync.pend{color:var(--warn)}

/* tabs */
.tabs{
  position:fixed;bottom:0;left:0;right:0;z-index:30;display:flex;
  background:var(--bg2);border-top:1px solid var(--line);
  padding-bottom:var(--safe-b);
}
.tabs button{
  flex:1;padding:9px 2px;border:0;background:none;color:var(--fg2);
  font-size:.68rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;
}
.tabs button span{font-size:1.15rem;line-height:1}
.tabs button.on{color:var(--acc);font-weight:600}