:root{
  --bg:#F5F7F8; --bg-subtle:#EBF0F2; --surface:#FFFFFF; --surface-2:#FCFDFD;
  --border:#DCE4E8; --border-strong:#C1CED5;
  --ink:#16232C; --ink-muted:#526B77; --ink-faint:#8CA0A9;
  --accent:#1B6FA8; --accent-ink:#0E4D78; --accent-soft:#E4F0F7; --accent-strong:#124A70;
  --accent2:#2F8F82; --accent2-soft:#E1F1EE;
  --brand:#EA6264; --brand-soft:#FCE7E7;
  --good:#2E8B57; --good-soft:#E4F5EA; --good-ink:#1E6B41;
  --warn:#B9770E; --warn-soft:#FBF0DD; --warn-ink:#8E5C09;
  --bad:#C0392B; --bad-soft:#FBE7E4; --bad-ink:#9A2D21;
  --info:#3676B3; --info-soft:#E7F0F8;
  --neutral:#5C6B73; --neutral-soft:#EAEEF0;
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Consolas,monospace;
  --radius:10px;
  --shadow:0 1px 2px rgba(20,40,50,.06), 0 6px 20px -8px rgba(20,40,50,.10);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0E1A22; --bg-subtle:#122029; --surface:#152430; --surface-2:#182833;
    --border:#25404E; --border-strong:#33566B;
    --ink:#E7EEF1; --ink-muted:#93ADB8; --ink-faint:#5F7A85;
    --accent:#6FB2DE; --accent-ink:#9BCBE9; --accent-soft:#173044; --accent-strong:#8FC4E6;
    --accent2:#63BFAC; --accent2-soft:#153631;
    --brand:#EA6264; --brand-soft:#3A1E1D;
    --good:#5FBE8B; --good-soft:#11311F; --good-ink:#8DDBAE;
    --warn:#E0A840; --warn-soft:#372A0E; --warn-ink:#F0C177;
    --bad:#E58A7D; --bad-soft:#3A1B16; --bad-ink:#F2A99D;
    --info:#7FB4E0; --info-soft:#112A3B;
    --neutral:#93A6AE; --neutral-soft:#1B2A31;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -10px rgba(0,0,0,.5);
  }
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-sans); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0 0 .4em; font-weight:700; letter-spacing:-.01em; color:var(--ink);}
h1{font-size:1.55rem;}
h2{font-size:1.2rem;}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
.num{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* ---------------- layout ---------------- */
.app-shell{display:grid; grid-template-columns:250px 1fr; min-height:100vh;}
.sidebar{
  background:var(--surface-2); border-right:1px solid var(--border);
  padding:1.2rem .9rem 2rem; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar .brand{display:flex; gap:.6rem; align-items:center; padding:0 .5rem; margin-bottom:1.4rem;}
.sidebar .brand .mark{width:28px; height:28px; border-radius:8px; flex:none; background:linear-gradient(155deg,var(--brand),var(--accent));}
.sidebar .brand .txt{font-weight:750; font-size:.92rem; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.nav-group{margin-bottom:.35rem;}
.nav-group > .nav-link, .nav-group > .nav-head{
  display:flex; gap:.55rem; align-items:center; padding:.5rem .6rem; border-radius:8px;
  font-size:.85rem; font-weight:650; color:var(--ink-muted);
}
.nav-group > .nav-link{color:var(--ink);}
.nav-group > .nav-link:hover, .nav-sub a:hover{background:var(--bg-subtle); text-decoration:none;}
.nav-group.active > .nav-link, .nav-sub a.active{background:var(--accent-soft); color:var(--accent-ink); box-shadow:inset 2px 0 0 var(--brand);}
.nav-n{font-family:var(--font-mono); font-size:.68rem; color:var(--ink-faint); width:14px; flex:none;}
.nav-sub{list-style:none; margin:.15rem 0 .5rem 1.9rem; padding:0; display:flex; flex-direction:column; gap:.1rem;}
.nav-sub a{display:block; padding:.4rem .55rem; border-radius:7px; font-size:.82rem; color:var(--ink-muted); font-weight:500;}
.sidebar-foot{margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--border); font-size:.78rem; color:var(--ink-faint);}
.sidebar-foot form{margin-top:.5rem;}
.sidebar-foot button.linklike{background:none; border:none; padding:0; color:var(--accent); font-size:.8rem; cursor:pointer; font-weight:600;}

main.content{padding:1.8rem 2.2rem 2.2rem; min-width:0; display:flex; flex-direction:column;}
.content-body{flex:1 0 auto;}
.page-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.2rem; flex-wrap:wrap;}
.page-head p{color:var(--ink-muted); margin:.2rem 0 0; font-size:.9rem;}
.page-head p.page-note{
  display:inline-flex; align-items:center; gap:.4rem; margin:.55rem 0 0;
  background:var(--info-soft); color:var(--info); border-radius:100px;
  padding:.3rem .75rem; font-size:.78rem; font-weight:600;
}

.notice-banner{
  display:flex; align-items:flex-start; gap:.6rem; margin-bottom:1.2rem;
  background:var(--info-soft); border:1px solid var(--info); border-radius:9px;
  padding:.8rem .95rem;
}
.notice-banner-icon{flex:none; color:var(--info); font-size:1rem; line-height:1.4;}
.notice-banner p{margin:0; color:var(--ink); font-size:.85rem; line-height:1.45;}

.topbar{display:none; position:sticky; top:0; z-index:40; background:var(--surface); border-bottom:1px solid var(--border); padding:.7rem 1rem; align-items:center; justify-content:space-between;}
.burger{background:var(--bg-subtle); border:1px solid var(--border); border-radius:8px; width:36px; height:32px; cursor:pointer;}

@media (max-width:960px){
  .app-shell{grid-template-columns:1fr;}
  .topbar{display:flex;}
  .sidebar{position:fixed; inset:0 25% 0 0; z-index:50; transform:translateX(-100%); transition:transform .2s ease; box-shadow:var(--shadow);}
  .sidebar.open{transform:translateX(0);}
  main.content{padding:1.2rem 1rem 1.5rem;}
}

/* ---------------- panels / cards ---------------- */
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem 1.2rem; box-shadow:var(--shadow);}
.kpi-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.75rem; margin-bottom:1.1rem;}
.kpi{background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:.75rem .9rem;}
.kpi .lbl{font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); font-weight:700;}
.kpi .val{font-family:var(--font-mono); font-size:1.25rem; font-weight:700; margin-top:.2rem;}
.kpi.good .val{color:var(--good);} .kpi.warn .val{color:var(--warn);} .kpi.bad .val{color:var(--bad);}

/* ---------------- filter bar ---------------- */
.filterbar{display:flex; flex-wrap:wrap; gap:.6rem; align-items:end; margin-bottom:1rem; padding-bottom:1rem; border-bottom:1px dashed var(--border);}
.ffield{display:flex; flex-direction:column; gap:.28rem;}
.ffield label{font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); font-weight:700;}
.ffield input, .ffield select{
  background:var(--surface); border:1px solid var(--border-strong); border-radius:7px; padding:.42rem .55rem;
  font-size:.82rem; color:var(--ink); min-width:130px; font-family:inherit;
}
.ffield input[type="text"]{min-width:170px;}
.fbar-spacer{flex:1;}

/* ---------------- buttons ---------------- */
.btn{
  font-size:.82rem; font-weight:650; border-radius:7px; padding:.5rem .9rem; border:1px solid var(--border-strong);
  background:var(--surface); color:var(--ink); cursor:pointer; white-space:nowrap; font-family:inherit;
}
.btn:hover{background:var(--bg-subtle);}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff;}
.btn-primary:hover{background:var(--accent-ink); border-color:var(--accent-ink);}
.btn-danger{background:var(--bad-soft); border-color:var(--bad); color:var(--bad-ink);}
.btn-export{background:var(--good-soft); border-color:var(--good); color:var(--good-ink); display:inline-flex; gap:.4rem; align-items:center;}
.btn-export::before{content:"\2b07"; font-size:.85em;}
.btn-icon{padding:.3rem .5rem; font-size:.85rem; line-height:1;}
.btn[disabled]{opacity:.55; cursor:not-allowed;}

/* ---------------- table ---------------- */
.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:9px; background:var(--surface);}
table.dtable{width:100%; border-collapse:collapse; font-size:.84rem; min-width:560px;}
table.dtable th{
  text-align:left; font-size:.67rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint);
  background:var(--bg-subtle); padding:.6rem .7rem; border-bottom:1px solid var(--border); white-space:nowrap; font-weight:700;
}
table.dtable th[data-sort]{cursor:pointer; user-select:none;}
table.dtable th[data-sort]:hover{color:var(--ink);}
table.dtable th .sort-arrow{margin-left:.2rem; color:var(--ink-faint);}
table.dtable td{padding:.55rem .7rem; border-bottom:1px solid var(--border); color:var(--ink); vertical-align:middle;}
table.dtable tbody tr:last-child td{border-bottom:none;}
table.dtable tbody tr:hover{background:var(--bg-subtle);}
.count-chip{
  display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px;
  padding:0 .4rem; margin-right:.45rem; border-radius:100px;
  background:var(--bg-subtle); border:1px solid var(--border); color:var(--ink-muted);
  font-family:var(--font-mono); font-size:.72rem; font-weight:700;
}
td.actions{text-align:right; white-space:nowrap;}
td.actions button{background:none; border:none; color:var(--ink-faint); cursor:pointer; padding:.2rem .35rem; font-size:.9rem;}
td.actions button:hover{color:var(--accent);}
td.actions button.danger:hover{color:var(--bad);}
.empty-state{padding:2.4rem 1rem; text-align:center; color:var(--ink-faint); font-size:.88rem;}
.grid-loading{padding:1.2rem; text-align:center; color:var(--ink-faint); font-size:.85rem;}

.tfoot-note{display:flex; justify-content:space-between; align-items:center; padding:.7rem .1rem 0; font-size:.78rem; color:var(--ink-faint); flex-wrap:wrap; gap:.5rem;}
.pager{display:flex; gap:.3rem; align-items:center;}
.pager button{width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:6px; border:1px solid var(--border); font-size:.75rem; color:var(--ink-muted); background:var(--surface); cursor:pointer;}
.pager button.active{background:var(--accent); border-color:var(--accent); color:#fff;}
.pager button[disabled]{opacity:.4; cursor:not-allowed;}

/* ---------------- calendario de vencimientos (cuentas por pagar) ---------------- */
.due-calendar{display:grid; grid-template-columns:repeat(7,1fr); gap:.4rem;}
.due-weekday{font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); font-weight:700; text-align:center; padding-bottom:.2rem;}
.due-cell{border:1px solid var(--border); border-radius:8px; min-height:64px; padding:.4rem .5rem; background:var(--surface-2); display:flex; flex-direction:column; gap:.3rem;}
.due-cell.empty{border-color:transparent; background:transparent;}
.due-cell.today{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset;}
.due-cell .day-num{font-family:var(--font-mono); font-size:.76rem; color:var(--ink-muted);}
.due-cell .amt{font-family:var(--font-mono); font-size:.74rem; font-weight:700; padding:.2rem .4rem; border-radius:6px; display:flex; flex-direction:column; gap:0;}
.due-cell .amt small{font-family:var(--font-sans); font-weight:600; font-size:.64rem; opacity:.85;}
.due-cell .amt.bad{background:var(--bad-soft); color:var(--bad-ink);}
.due-cell .amt.warn{background:var(--warn-soft); color:var(--warn-ink);}
.due-cell .amt.neutral{background:var(--accent-soft); color:var(--accent-ink);}
@media (max-width:700px){
  .due-calendar{grid-template-columns:repeat(7,minmax(34px,1fr)); gap:.25rem;}
  .due-cell{min-height:48px; padding:.25rem .3rem;}
  .due-cell .amt{font-size:.62rem;}
  .due-cell .amt small{display:none;}
}

/* ---------------- ciclo de 3 fechas (ingresos por obras sociales) ---------------- */
.tl3{display:flex; align-items:center; min-width:220px;}
.tl3 .pt{display:flex; flex-direction:column; align-items:center; gap:.2rem; flex:none; width:64px;}
.tl3 .pt .dot{width:8px; height:8px; border-radius:50%; background:var(--accent);}
.tl3 .pt.pend .dot{background:var(--border-strong);}
.tl3 .pt .d{font-family:var(--font-mono); font-size:.7rem; color:var(--ink);}
.tl3 .pt.pend .d{color:var(--ink-faint);}
.tl3 .pt .l{font-size:.6rem; text-transform:uppercase; color:var(--ink-faint); letter-spacing:.03em;}
.tl3 .ln{height:1px; background:var(--border-strong); flex:1; margin-top:-14px;}

/* ---------------- badges ---------------- */
.badge{display:inline-flex; align-items:center; gap:.32rem; font-size:.72rem; font-weight:650; padding:.2rem .55rem; border-radius:100px; white-space:nowrap;}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor;}
.badge-good{background:var(--good-soft); color:var(--good-ink);}
.badge-warn{background:var(--warn-soft); color:var(--warn-ink);}
.badge-bad{background:var(--bad-soft); color:var(--bad-ink);}
.badge-info{background:var(--info-soft); color:var(--info);}
.badge-neutral{background:var(--neutral-soft); color:var(--neutral);}
.badge-accent2{background:var(--accent2-soft); color:var(--accent2);}

/* ---------------- modal (dialog) ---------------- */
dialog.modal{
  border:none; border-radius:12px; padding:0; width:min(560px,92vw); box-shadow:var(--shadow);
  background:var(--surface); color:var(--ink);
}
dialog.modal::backdrop{background:rgba(15,25,32,.45);}
.modal-body{padding:1.3rem 1.4rem;}
.modal-body h3{margin-bottom:1rem; font-size:1.05rem;}
.form-row{margin-bottom:.9rem; display:flex; flex-direction:column; gap:.3rem;}
.form-row label{font-size:.76rem; font-weight:650; color:var(--ink-muted);}
.form-row input, .form-row select, .form-row textarea{
  border:1px solid var(--border-strong); border-radius:7px; padding:.5rem .6rem; font-size:.88rem; font-family:inherit;
  background:var(--surface); color:var(--ink);
}
.form-row input:disabled{background:var(--bg-subtle); color:var(--ink-muted); cursor:not-allowed;}
.form-row .errorlist{list-style:none; margin:.2rem 0 0; padding:0; color:var(--bad); font-size:.76rem;}
.form-row-divider{border-top:1px dashed var(--border); padding-top:.9rem;}
.form-row-inline{display:flex; flex-direction:row; align-items:center; gap:.6rem;}
.form-actions{display:flex; justify-content:flex-end; gap:.6rem; margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--border);}
.form-error-banner{background:var(--bad-soft); color:var(--bad-ink); padding:.6rem .8rem; border-radius:7px; font-size:.82rem; margin-bottom:1rem;}

/* ---------------- login ---------------- */
.login-shell{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); padding:1.5rem;}
.login-card{width:100%; max-width:380px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:2.2rem 2rem; box-shadow:var(--shadow);}
.login-card .mark{width:44px; height:44px; border-radius:12px; background:linear-gradient(155deg,var(--brand),var(--accent)); margin-bottom:1rem;}
.login-card h1{font-size:1.25rem;}
.login-card p.sub{color:var(--ink-muted); font-size:.86rem; margin-bottom:1.4rem;}
.login-card .btn-primary{width:100%; padding:.6rem; margin-top:.4rem;}

/* ---------------- footer ---------------- */
.app-footer{
  display:flex; align-items:center; gap:.7rem; margin-top:2.5rem; padding-top:1.1rem;
  border-top:2px solid var(--brand); color:var(--ink-faint); font-size:.78rem;
}
.app-footer img{height:26px; width:auto; flex:none;}
.app-footer .sep{width:4px; height:4px; border-radius:50%; background:var(--brand); flex:none;}

/* ---------------- utility ---------------- */
.text-muted{color:var(--ink-muted);}
.mt-1{margin-top:1rem;}
.toggle-pill{display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:650; padding:.15rem .5rem; border-radius:100px;}