:root{
  --bg:#f5f5f6; --card:#ffffff; --card2:#f0f4f6; --line:#e3e8ec;
  --text:#1c1b1b; --muted:rgba(28,27,27,.6); --accent:#0597a7; --accent2:#047c89; --onaccent:#fff;
  --slate:#365a70; --side:#ffffff; --sideText:#365a70;
  --warn:#c98a12; --danger:#d14b4b; --info:#365a70; --pos:#0f8a5f;
  --r:14px; --r2:10px; --shadow:0 1px 2px rgba(24,28,57,.06),0 4px 16px rgba(24,28,57,.04);
}
:root[data-theme="cs"]{
  --bg:#0f1612; --card:#18211c; --card2:#1f2a24; --line:#2a3830;
  --text:#e6eee8; --muted:#9aaba0; --accent:#4cb784; --accent2:#7ad3a6; --onaccent:#0f1612;
  --slate:#9aaba0; --side:#18211c; --sideText:#9aaba0; --pos:#7ad3a6; --info:#6aa8e0; --shadow:none;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;display:flex;min-height:100vh;background:var(--bg);color:var(--text);
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:14px}
h1,h2,h3,.brand b,.kpi .val{font-family:Montserrat,"DM Sans",sans-serif}
a{color:var(--accent);cursor:pointer;text-decoration:none}
.sidebar{width:250px;background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 12px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;gap:10px;align-items:center;margin-bottom:14px}
.brand small{display:block;color:var(--muted);font-size:12px}
.logo{width:38px;height:38px;border-radius:11px;background:var(--accent);color:var(--onaccent);display:grid;place-items:center;font-weight:800;font-family:Montserrat}
.empresa{margin-bottom:12px}
nav .sec{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:14px 10px 4px;font-weight:600}
nav a{display:block;padding:8px 12px;border-radius:var(--r2);color:var(--sideText);margin-bottom:1px;font-weight:500}
nav a:hover{background:var(--card2)}
nav a.active{background:rgba(5,151,167,.12);color:var(--accent2);font-weight:600}
:root[data-theme="cs"] nav a.active{background:rgba(76,183,132,.14)}
.side-foot{margin-top:16px;display:grid;gap:8px}
main{flex:1;min-width:0;padding:22px 28px}
.top{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.top h1{font-size:22px;margin:0;font-weight:700;color:var(--slate)}
:root[data-theme="cs"] .top h1{color:var(--text)}
.top-right{margin-left:auto;display:flex;gap:8px;align-items:center}
.burger{display:none}
.pill{background:var(--card);border:1px solid var(--line);padding:6px 12px;border-radius:999px;color:var(--muted);font-size:12px}
.grid{display:grid;gap:14px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}
.card h3{margin:0 0 12px;font-size:15px}
.kpi .label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.kpi .val{font-size:22px;font-weight:700;margin-top:6px}
.kpi .sub{color:var(--muted);font-size:12px;margin-top:4px}
.pos{color:var(--pos)} .neg{color:var(--danger)} .muted{color:var(--muted)}
table{width:100%;border-collapse:collapse}
th{text-align:left;color:var(--muted);font-weight:600;font-size:12px;padding:8px;border-bottom:1px solid var(--line)}
td{padding:8px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:hover td{background:var(--card2)}
tr.tot td{font-weight:700;border-top:2px solid var(--line)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl-wrap{overflow-x:auto}
button,.btn{font:inherit;background:var(--accent);color:var(--onaccent);border:0;border-radius:var(--r2);padding:9px 14px;font-weight:600;cursor:pointer}
button:hover{filter:brightness(1.06)}
button.ghost,.ghost{background:transparent;color:var(--text);border:1px solid var(--line);border-radius:var(--r2);padding:9px 14px;text-align:center;cursor:pointer;font-weight:500}
button.sm,.ghost.sm{padding:5px 10px;font-size:12px}
button.danger{background:var(--danger);color:#fff}
input,select,textarea{font:inherit;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:var(--r2);padding:9px 11px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(5,151,167,.3);border-color:var(--accent)}
td select,td input{padding:5px 8px}
label.f{display:grid;gap:6px;color:var(--muted);font-size:12px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;align-items:end}
.tag{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;background:var(--card2);color:var(--muted);white-space:nowrap}
.tag.ok{background:rgba(15,138,95,.12);color:var(--pos)}
.tag.warn{background:rgba(201,138,18,.14);color:var(--warn)}
.tag.bad{background:rgba(209,75,75,.12);color:var(--danger)}
.tag.info{background:rgba(54,90,112,.12);color:var(--info)}
.bar{height:8px;background:var(--card2);border-radius:99px;overflow:hidden;margin-top:8px}
.bar>i{display:block;height:100%;background:var(--accent);border-radius:99px}
.bar.hot>i{background:var(--warn)} .bar.over>i{background:var(--danger)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.match{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:var(--r2);margin-bottom:8px;background:var(--card2)}
.match .score{font-weight:700;color:var(--accent2)}
.empty{color:var(--muted);text-align:center;padding:30px}
.tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tabs button{background:var(--card2);color:var(--muted)}
.tabs button.on{background:rgba(5,151,167,.14);color:var(--accent2)}
.modal{position:fixed;inset:0;background:rgba(16,14,12,.5);display:grid;place-items:center;z-index:50;padding:16px}
.modal-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;width:min(600px,100%);max-height:90vh;overflow:auto}
.toast{position:fixed;bottom:20px;right:20px;background:var(--slate);color:#fff;padding:12px 16px;border-radius:var(--r2);font-weight:600;z-index:60}
.bag{border-left:4px solid var(--accent)}
.chart{display:flex;align-items:flex-end;gap:6px;height:140px;padding-top:10px}
.chart .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;font-size:10px;color:var(--muted)}
.chart .col i{width:100%;border-radius:6px 6px 0 0;background:var(--accent)}
.chart .col i.o{background:var(--danger);opacity:.75}
.cols2{display:flex;gap:2px;width:100%;align-items:flex-end;height:110px}
.indent td:first-child{padding-left:22px}
@media (max-width:860px){
  .sidebar{position:fixed;left:-270px;z-index:40;transition:left .2s}
  .sidebar.open{left:0}
  .burger{display:block;background:var(--card2);color:var(--text)}
  main{padding:16px}
  .split{grid-template-columns:1fr}
}
@media print{.sidebar,.top-right,button{display:none!important} main{padding:0} .card{box-shadow:none}}

/* ---------- Login ---------- */
body.sin-sesion > aside, body.sin-sesion > main { display: none; }
.login { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 16px; background: var(--bg, #f4f6f8); z-index: 50; }
body.sin-sesion .login { display: flex; }
.login-card { width: 100%; max-width: 380px; background: var(--card, #fff); border-radius: 16px; padding: 28px; box-shadow: 0 8px 30px rgba(0,0,0,.08); }
.login-card .brand { margin-bottom: 18px; }
.login-card label.f { display: block; margin-bottom: 12px; }
.login-card input { width: 100%; }
.login-card button { width: 100%; margin-top: 6px; }
.login-card .link { display: block; text-align: center; margin-top: 12px; font-size: 13px; cursor: pointer; color: var(--accent, #2a7f8f); background: none; border: 0; }
.login-card .error { color: var(--danger, #c0392b); font-size: 13px; margin: 8px 0 0; }
.usuario { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 8px; }
.usuario small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .8; }

/* ---------- Barra de avance de conciliación / pago ---------- */
.barra { height: 6px; border-radius: 3px; background: var(--line); margin-top: 5px; min-width: 70px; overflow: hidden; }
.barra i { display: block; height: 100%; border-radius: 3px; }
.barra.ok i { background: var(--pos); }
.barra.parcial i { background: var(--warn); }
.barra.nada i { background: var(--danger); opacity: .55; }
.barra-txt { font-size: 10px; font-weight: 600; margin-top: 2px; text-align: right; }
.barra-txt.ok { color: var(--pos); } .barra-txt.parcial { color: var(--warn); } .barra-txt.nada { color: var(--danger); }