:root{--bg:#eef2f1;--ink:#1b2a2f;--mut:#5d6f75;--line:#d3dcda;--pri:#14475a;--ok:#0f6b4f;--bad:#b3261e;--warn:#9a6700;--card:#fff}
*{box-sizing:border-box}body{margin:0;font:15px/1.45 "Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--ink)}
h1,h2,h3{margin:0 0 .6rem}[hidden]{display:none!important}
#login{min-height:100vh;display:grid;place-items:center}.box{background:var(--card);padding:1.4rem;border-radius:8px;width:min(94vw,460px);max-height:92vh;overflow:auto}
#login .box{display:grid;gap:.8rem}
label{display:grid;gap:.2rem;font-size:.85rem;color:var(--mut)}
input,select,textarea{padding:.5rem;border:1px solid var(--line);border-radius:6px;font:inherit;color:var(--ink);width:100%}
button{background:var(--pri);color:#fff;border:0;padding:.55rem .9rem;border-radius:6px;font:inherit;cursor:pointer}
button.sec{background:#e3eae8;color:var(--ink)}button.red{background:var(--bad)}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
#main{display:grid;grid-template-columns:200px 1fr;min-height:100vh}
nav{background:var(--pri);padding:1rem .6rem;display:flex;flex-direction:column;gap:.2rem;color:#fff}
nav b{padding:.4rem .8rem 1rem;font-size:1.1rem}nav a{padding:.55rem .8rem;border-radius:6px;cursor:pointer;color:#dbe8ec}nav a.on,nav a:hover{background:#ffffff22;color:#fff}
.pill{background:var(--bad);color:#fff;border-radius:99px;padding:0 .45rem;font-size:.75rem}
main{padding:1.2rem;overflow-x:auto}.bar{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:.8rem}.bar h2{margin:0;flex:1}.bar input,.bar select{width:auto}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.7rem;margin-bottom:1rem}
.card{background:var(--card);border-radius:8px;padding:.8rem;border-left:4px solid var(--pri)}.card small{color:var(--mut)}.card b{display:block;font-size:1.35rem}
.card.m{border-color:var(--bad)}.card.s{border-color:var(--ok)}
table{width:100%;border-collapse:collapse;background:var(--card);border-radius:8px;overflow:hidden}
th,td{padding:.5rem .6rem;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}th{background:#f4f7f6;font-size:.8rem;color:var(--mut)}
.tag{padding:.1rem .55rem;border-radius:99px;font-size:.8rem;color:#fff;background:var(--mut)}.tag.mora,.tag.vencida{background:var(--bad)}.tag.solvente,.tag.pagada,.tag.pagado{background:var(--ok)}.tag.activo,.tag.pendiente{background:var(--pri)}
.neg{color:var(--bad)}.al{background:var(--card);padding:.5rem .8rem;border-left:4px solid var(--warn);margin-bottom:.4rem;border-radius:4px}.al.alta{border-color:var(--bad)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.prev{background:#e6f0ee;padding:.6rem;border-radius:6px;margin:.6rem 0}
#modal{position:fixed;inset:0;background:#0007;display:grid;place-items:center;z-index:9}.box form{display:grid;gap:.6rem}
.scroll{max-height:240px;overflow:auto;margin:.6rem 0}
@media(max-width:700px){#main{grid-template-columns:1fr}nav{flex-direction:row;flex-wrap:wrap}nav b{display:none}.grid2{grid-template-columns:1fr}}
@media print{nav,.bar button,.bar select,.bar input,#modal button{display:none!important}#main{display:block}body{background:#fff}}
.sm{padding:.2rem .5rem;font-size:.8rem}tr.can{text-decoration:line-through;opacity:.6}.chk{display:flex;gap:.4rem;align-items:center;color:var(--ink)}.chk input{width:auto}
.al.ok{border-color:var(--ok)}#llogo{max-height:80px;justify-self:center}.solo-print{display:none}@media print{.solo-print{display:block}}
.av{width:36px;height:36px;border-radius:50%;object-fit:cover;background:#ffffff33;display:inline-grid;place-items:center;vertical-align:middle;flex:none}
.me{display:flex;align-items:center;gap:.5rem;padding:.3rem .8rem .8rem;cursor:pointer;color:#fff}.box .av{background:#d3dcda}#fprev.av{width:64px;height:64px}