:root{
  --bg:#0b1220; --panel:#0f1b30; --panel2:#13233c; --line:#1e3354;
  --text:#e8eef7; --muted:#93a4bd; --blue:#2563eb; --blue2:#1d4ed8;
  --green:#16a34a; --amber:#d97706; --red:#dc2626; --chipbg:#0a1626;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.45;
}
.screen{min-height:100dvh}
[hidden]{display:none!important}
button{font:inherit;cursor:pointer}

/* ── Login ── */
#login{display:flex;align-items:center;justify-content:center;padding:24px}
.login-box{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:28px 22px;box-shadow:0 12px 40px rgba(0,0,0,.4)}
.brand{font-size:24px;font-weight:800;letter-spacing:.5px}
.subtitle{color:var(--muted);margin:2px 0 22px}
form{display:flex;flex-direction:column;gap:6px}
label{font-size:13px;color:var(--muted);margin-top:10px}
input{background:#091220;border:1px solid var(--line);color:var(--text);
  border-radius:10px;padding:13px 14px;font-size:16px;outline:none}
input:focus{border-color:var(--blue)}
#loginBtn{margin-top:18px;background:var(--blue);color:#fff;border:none;border-radius:10px;
  padding:14px;font-size:16px;font-weight:700}
#loginBtn:active{background:var(--blue2)}
#loginBtn:disabled{opacity:.6}
.error{color:#fecaca;background:#3b0d0d;border:1px solid #7f1d1d;border-radius:8px;
  padding:9px 11px;font-size:14px;margin-top:12px}
.help{display:block;text-align:center;margin-top:18px;color:var(--muted);
  font-size:14px;text-decoration:none}
.help:hover{color:var(--text)}

/* ── Topbar ── */
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  background:var(--panel);border-bottom:1px solid var(--line);padding:14px 18px;
  padding-top:max(14px,env(safe-area-inset-top))}
.ghost{background:transparent;border:1px solid var(--line);color:var(--text);
  border-radius:9px;padding:7px 12px;font-size:14px}
.ghost:active{background:var(--panel2)}

main{padding:18px;max-width:780px;margin:0 auto}
h1{font-size:20px;margin:4px 0 14px}
.resumen{color:var(--muted);font-size:14px;margin-bottom:14px}
.loading,.empty{color:var(--muted);text-align:center;padding:30px 10px}

/* ── Cards ── */
.cards{display:flex;flex-direction:column;gap:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 16px;display:flex;flex-direction:column;gap:6px;text-align:left;width:100%}
.card:active{background:var(--panel2)}
.card .row1{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.card .ramo{font-weight:700;font-size:16px}
.card .aseg{color:var(--muted);font-size:13px}
.card .meta{color:var(--muted);font-size:13px}
.card .nro{font-variant-numeric:tabular-nums}

.badge{font-size:12px;font-weight:700;padding:4px 9px;border-radius:999px;white-space:nowrap}
.badge.vig{background:rgba(22,163,74,.15);color:#86efac;border:1px solid #14532d}
.badge.pv{background:rgba(217,119,6,.15);color:#fcd34d;border:1px solid #78350f}
.badge.ven{background:rgba(148,163,184,.15);color:#cbd5e1;border:1px solid #334155}
.badge.anu{background:rgba(220,38,38,.15);color:#fca5a5;border:1px solid #7f1d1d}

/* ── Detalle ── */
#detailView main{padding-top:8px}
#backBtn{margin-bottom:12px}
.dgroup{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:14px}
.dgroup h2{font-size:15px;margin:0 0 10px;color:var(--blue)}
.kv{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-bottom:1px solid #122036;font-size:14px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--muted)}
.kv .v{text-align:right;font-weight:600}
.cuota{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #122036;font-size:14px}
.cuota:last-child{border-bottom:none}
.pill{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px}
.pill.ok{background:rgba(22,163,74,.15);color:#86efac}
.pill.pend{background:rgba(217,119,6,.15);color:#fcd34d}
.muted{color:var(--muted)}