:root{--lime:#c8f54a;--lime-d:#9fcc1f;--gray:#4a4a4a;--gray-2:#5b5b5b;--light:#f3f3f0;--line:#e1e1dc;--red:#d64545;--amber:#e0a100;--green:#2e9b4f}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--light);color:#222}
a{color:inherit}
.hidden{display:none!important}
/* Login */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(135deg,#4a4a4a,#2f2f2f)}
.login{background:#fff;border-radius:16px;padding:32px 28px;width:100%;max-width:360px;box-shadow:0 10px 40px #0005;text-align:center}
.login img{height:110px}
.login h1{font-size:1.1rem;margin:10px 0 2px}
.login p.sub{color:#777;margin:0 0 20px;font-size:.85rem}
.login form{text-align:left}
.demo-note{font-size:.75rem;color:#777;background:var(--light);border-radius:8px;padding:8px 10px;margin-top:16px;text-align:left}
label{display:block;font-size:.8rem;font-weight:600;color:#555;margin:10px 0 4px}
input,select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:1rem;background:#fff}
input:focus,select:focus{outline:2px solid var(--lime);border-color:var(--lime-d)}
.btn{border:0;border-radius:8px;padding:10px 16px;font-weight:600;cursor:pointer;font-size:.95rem;background:var(--lime);color:#222}
.btn:hover{background:var(--lime-d)}
.btn.block{width:100%;margin-top:18px}
.btn.ghost{background:transparent;border:1px solid var(--line)}
.btn.danger{background:var(--red);color:#fff}
.btn.sm{padding:6px 10px;font-size:.8rem}
.err{color:var(--red);font-size:.85rem;min-height:1.2em;margin-top:8px}
/* Layout */
header.top{background:var(--gray);color:#fff;display:flex;align-items:center;gap:12px;padding:10px 18px;position:sticky;top:0;z-index:5}
header.top img{height:36px;background:#fff;border-radius:6px;padding:2px}
header.top .brand{font-weight:700;letter-spacing:.5px}
header.top .brand small{display:block;font-weight:400;font-size:.7rem;color:#ccc}
header.top .spacer{flex:1}
header.top .user{font-size:.8rem;text-align:right}
header.top .user b{color:var(--lime)}
nav.tabs{display:flex;gap:4px;overflow-x:auto;background:#fff;border-bottom:1px solid var(--line);padding:0 12px}
nav.tabs a{padding:12px 14px;text-decoration:none;font-size:.9rem;white-space:nowrap;border-bottom:3px solid transparent;color:#555}
nav.tabs a.active{border-color:var(--lime-d);color:#111;font-weight:600}
main{max-width:1150px;margin:0 auto;padding:20px 16px 60px}
h2{margin:6px 0 16px}
/* Dashboard */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{background:#fff;border-radius:14px;padding:18px;text-decoration:none;border:1px solid var(--line);border-top:5px solid var(--lime);transition:.15s;display:block}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 18px #0001}
.card .ic{font-size:1.6rem}
.card h3{margin:6px 0 4px;font-size:1.05rem}
.card .big{font-size:1.5rem;font-weight:700;margin:6px 0}
.card .meta{font-size:.8rem;color:#777}
.alert{color:var(--red);font-weight:600}
/* Tabla */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.toolbar input{max-width:280px}
.toolbar select{width:auto}
.toolbar .total{margin-left:auto;font-size:.9rem;color:#555}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);font-size:.9rem}
th{background:#fafaf7;font-size:.75rem;text-transform:uppercase;color:#666;letter-spacing:.4px}
td.num{text-align:right;font-variant-numeric:tabular-nums}
td.acts{white-space:nowrap;text-align:right}
td.acts .btn{margin-left:4px}
.tag{white-space:nowrap;display:inline-block;padding:3px 8px;border-radius:20px;font-size:.75rem;font-weight:600}
.tag.Pendiente{background:#fff4d6;color:#8a6200}.tag.Vencida{background:#fde2e2;color:#a12a2a}.tag.Pagada{background:#dff5e6;color:#1d6e37}.tag.Parcial{background:#e3edff;color:#2a4fa1}
.tag.low{background:#fde2e2;color:#a12a2a}.tag.ok{background:#dff5e6;color:#1d6e37}
.empty{padding:30px;text-align:center;color:#888}
/* Modal */
.modal{position:fixed;inset:0;background:#0006;display:grid;place-items:center;padding:16px;z-index:20}
.modal-box{background:#fff;border-radius:14px;padding:22px;width:100%;max-width:440px;max-height:90vh;overflow:auto}
.modal-box h3{margin:0 0 6px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#222;color:#fff;padding:10px 18px;border-radius:8px;font-size:.9rem;z-index:30}
footer{text-align:center;font-size:.75rem;color:#999;padding:20px}
/* Móvil: tabla -> tarjetas */
@media (max-width:700px){
  header.top .brand small,header.top .user span{display:none}
  table,thead,tbody,tr,td{display:block;border:0}
  thead{display:none}
  table{background:transparent}
  tr{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;padding:8px 4px}
  td{display:flex;justify-content:space-between;gap:10px;padding:6px 10px;border:0}
  td::before{content:attr(data-label);font-weight:600;color:#777;font-size:.75rem;text-transform:uppercase}
  td.num{text-align:right}
  td.acts{justify-content:flex-end}
  td.acts::before{content:''}
  .toolbar input{max-width:none;flex:1 1 100%}
  .toolbar select{flex:1;max-width:none!important}
  .toolbar .total{width:100%;margin:0}
}

/* Tarjeta DISPONIBLE (Flujo de efectivo) */
.disponible{background:#00b050;color:#fff;font-weight:800;text-align:center;border-radius:6px;padding:18px 24px;margin:0 0 18px;max-width:420px;box-shadow:0 6px 18px #00b05040;letter-spacing:.5px}
.disponible .t{font-size:1.15rem}
.disponible .v{font-size:2.1rem;margin-top:4px;font-variant-numeric:tabular-nums}
.disponible.neg{background:var(--red);box-shadow:0 6px 18px #d6454540}
@media (max-width:700px){.disponible{max-width:none}.disponible .v{font-size:1.8rem}}