:root{
  color-scheme: light;
  --bg:#eef2f8;--surface:#fff;--surface-2:#f4f7fc;--ink:#0c1a2e;--ink-soft:#45566e;--ink-faint:#7a8aa3;
  --line:#e0e7f0;--line-strong:#cbd6e6;--brand-900:#0b1f3a;--brand-800:#123057;--brand-700:#1b4b8f;--brand-500:#2563c9;
  --accent:#2f80ed;--accent-soft:#dbe9ff;--accent-ink:#1b4b8f;--gold:#caa23f;--danger:#e11d48;--warn:#d97706;
  --shadow:0 1px 2px rgba(8,20,42,.06),0 12px 30px -12px rgba(8,20,42,.20);
  --shadow-lg:0 30px 60px -25px rgba(8,20,42,.5);--radius:18px;
  --font-display:"Sora",system-ui,-apple-system,sans-serif;--font-body:"Inter",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  color-scheme:dark;--bg:#0a0f1a;--surface:#101a2b;--surface-2:#152238;--ink:#eaf1fb;--ink-soft:#a7b6cd;--ink-faint:#6f819c;
  --line:#1f3049;--line-strong:#2b3f5d;--brand-900:#071628;--brand-800:#123057;--brand-700:#2a63b0;--brand-500:#4f8fe8;
  --accent:#4f9bff;--accent-soft:#0e2a4d;--accent-ink:#8fc0ff;--gold:#d8b258;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 34px -14px rgba(0,0,0,.6);--shadow-lg:0 30px 70px -28px rgba(0,0,0,.8);
}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;line-height:1.5}
h1,h2,h3{font-family:var(--font-display);margin:0}
.num{font-family:var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
button{font-family:var(--font-body);cursor:pointer}
a{color:var(--brand-500)}
.eyebrow{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-weight:600}

/* LOGIN */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.login-brandside{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 15% 10%,rgba(37,99,201,.5),transparent 55%),radial-gradient(120% 100% at 90% 90%,rgba(37,99,201,.35),transparent 50%),linear-gradient(160deg,var(--brand-900),var(--brand-800) 60%,#05122a);color:#eaf1fb;padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:700;font-size:1.35rem;letter-spacing:-.02em}
.brand .mark{width:40px;height:40px;flex:none}
.brandside-copy h2{font-size:clamp(1.8rem,3.4vw,2.9rem);font-weight:700;line-height:1.08;letter-spacing:-.02em}
.brandside-copy p{max-width:42ch;color:#bcd2ef;margin:.9rem 0 0;font-size:1.02rem}
.float-card{margin:26px 0 6px;filter:drop-shadow(0 30px 45px rgba(0,0,0,.45))}
.trust{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:.85rem;color:#a9bdd9}
.trust span{display:flex;align-items:center;gap:7px}
.dot-ok{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(37,99,201,.2)}
.login-formside{display:flex;align-items:center;justify-content:center;padding:clamp(24px,4vw,48px);background:var(--surface)}
.login-card{width:100%;max-width:400px}
.login-card>.eyebrow{margin-bottom:8px}
.login-card h1{font-size:1.7rem;font-weight:700;letter-spacing:-.02em}
.login-card .sub{color:var(--ink-soft);margin:.4rem 0 1.7rem;font-size:.96rem}
.field{margin-bottom:15px}
.field label{display:block;font-size:.82rem;font-weight:600;margin-bottom:7px;color:var(--ink-soft)}
.field input{width:100%;padding:13px 14px;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--surface-2);color:var(--ink);font-size:.98rem;font-family:var(--font-body)}
.field input:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-500) 18%,transparent)}
.btn{width:100%;border:none;border-radius:12px;padding:14px;font-size:1rem;font-weight:600;background:linear-gradient(180deg,var(--brand-700),var(--brand-800));color:#fff;box-shadow:0 10px 24px -12px var(--brand-700)}
.btn:hover{filter:brightness(1.07)}
.btn-accent{background:linear-gradient(180deg,var(--accent),var(--accent-ink));box-shadow:0 10px 24px -12px var(--accent-ink)}
.err{color:var(--danger);font-size:.9rem;margin-top:12px;font-weight:500}
.demo-hint{margin-top:22px;padding:13px 15px;border:1px dashed var(--line-strong);border-radius:12px;background:var(--surface-2);font-size:.82rem;color:var(--ink-soft)}
.demo-hint b{color:var(--ink)}
.demo-hint code{font-family:var(--font-display);background:color-mix(in srgb,var(--brand-500) 12%,transparent);padding:1px 6px;border-radius:6px;color:var(--brand-500)}

/* APP */
.app{max-width:1120px;margin:0 auto;padding:0 20px 60px}
.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);margin:0 -20px 26px;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.topbar .brand{color:var(--ink);font-size:1.15rem}.topbar .mark{width:34px;height:34px}
.user-chip{display:flex;align-items:center;gap:10px}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--brand-700),var(--accent));display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-display);font-weight:700;flex:none}
.user-chip .meta{line-height:1.15}.user-chip .meta small{color:var(--ink-faint);font-size:.75rem}
.ghost-btn{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-soft);border-radius:10px;padding:8px 12px;font-size:.82rem;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.ghost-btn:hover{border-color:var(--brand-500);color:var(--brand-500)}
.grid{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:start}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.pad{padding:22px}

.balance-card{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--brand-900),var(--brand-800) 70%);color:#eaf1fb;border:none}
.balance-card::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 120% at 100% 0%,rgba(37,99,201,.28),transparent 55%);pointer-events:none}
.balance-card .pad{position:relative;z-index:1}
.balance-card .eyebrow{color:#93a9c8}
.balance-amount{font-size:clamp(2.6rem,6vw,3.9rem);font-weight:700;letter-spacing:-.03em;line-height:1;margin:8px 0 4px;font-family:var(--font-display);font-variant-numeric:tabular-nums}
.balance-amount .cents,.balance-amount .cur{font-size:.42em;color:#9fb3d6;font-weight:600}
.balance-amount .cur{margin-right:6px;vertical-align:.25em}
.balance-sub{color:#a9bdd9;font-size:.9rem;display:flex;gap:16px;flex-wrap:wrap}.balance-sub b{color:#eaf1fb}
.status-pill{position:absolute;top:20px;right:20px;z-index:2;display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:700;padding:5px 11px;border-radius:999px}
.pill-active{background:var(--accent-soft);color:var(--accent-ink)}
.pill-progress{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.prog-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.prog-head .pct{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:#eaf1fb;font-variant-numeric:tabular-nums}
.prog-track{height:16px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
.prog-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#1e6fd6,var(--accent));box-shadow:0 0 18px rgba(37,99,201,.5);transition:width .9s cubic-bezier(.22,1,.36,1)}
.prog-scale{display:flex;justify-content:space-between;margin-top:8px;font-size:.72rem;color:#93a9c8}

.vcard{aspect-ratio:1.6/1;border-radius:16px;color:#fff;position:relative;overflow:hidden;padding:20px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(135deg,#123057,#071b33 55%,#1b4b8f);box-shadow:var(--shadow-lg)}
.vcard::before{content:"";position:absolute;width:260px;height:260px;right:-70px;top:-90px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,201,.4),transparent 65%)}
.vcard-top{display:flex;justify-content:space-between;align-items:flex-start;position:relative}
.chip{width:44px;height:33px;border-radius:6px;background:linear-gradient(135deg,#e7c766,#b9902f);position:relative}
.chip::after{content:"";position:absolute;inset:6px 8px;border:1px solid rgba(0,0,0,.25);border-radius:3px}
.vcard-num{font-family:var(--font-display);font-size:1.28rem;letter-spacing:.12em;font-variant-numeric:tabular-nums;position:relative}
.vcard-foot{display:flex;justify-content:space-between;align-items:flex-end;position:relative;font-size:.8rem}
.vcard-foot small{display:block;font-size:.6rem;letter-spacing:.1em;color:rgba(255,255,255,.6);text-transform:uppercase;margin-bottom:2px}
.vcard-foot .name{font-family:var(--font-display);letter-spacing:.05em;text-transform:uppercase}
.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.stat{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:13px 15px}
.stat .k{font-size:.74rem;color:var(--ink-faint);font-weight:600;text-transform:uppercase}
.stat .v{font-family:var(--font-display);font-size:1.25rem;font-weight:700;margin-top:3px;font-variant-numeric:tabular-nums}
.v.up{color:var(--accent-ink)}
.summary-row{display:flex;justify-content:space-between;gap:12px;font-size:.9rem;margin-bottom:12px}
.summary-row span{color:var(--ink-soft)}

.section-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 4px}
.section-head h3{font-size:1.05rem;font-weight:700}
.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:520px}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);font-weight:600;text-align:left;padding:12px 22px;border-bottom:1px solid var(--line)}
td{padding:14px 22px;border-bottom:1px solid var(--line);font-size:.9rem}
tr:last-child td{border-bottom:none}
td.amt{text-align:right;font-family:var(--font-display);font-variant-numeric:tabular-nums;font-weight:600}
.amt.abono{color:var(--accent-ink)}
.mov-ic{width:32px;height:32px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;margin-right:10px;flex:none}
.mov{display:flex;align-items:center}
.ic-in{background:var(--accent-soft);color:var(--accent-ink)}
.ic-out{background:color-mix(in srgb,var(--brand-500) 12%,transparent);color:var(--brand-500)}
.empty-mov{padding:26px 22px;color:var(--ink-faint);text-align:center}

/* ADMIN */
.admin-banner{display:flex;align-items:center;gap:10px;background:color-mix(in srgb,var(--gold) 16%,transparent);border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);color:var(--ink);border-radius:12px;padding:11px 15px;font-size:.86rem;margin-bottom:20px}
.ok-banner{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent-ink);border-radius:12px;padding:11px 15px;font-size:.9rem;font-weight:600;margin-bottom:20px}
.client-list{display:flex;flex-direction:column;gap:16px}
.client-item{border:1px solid var(--line);border-radius:14px;background:var(--surface-2);overflow:hidden}
.ci-top{display:flex;align-items:center;gap:14px;padding:15px 16px;border-bottom:1px solid var(--line)}
.client-main{flex:1;min-width:0}.client-main .nm{font-weight:600}.client-main .sd{font-size:.8rem;color:var(--ink-faint)}
.edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px}
.edit-grid label{display:flex;flex-direction:column;gap:6px;font-size:.74rem;font-weight:600;color:var(--ink-soft)}
.fld{padding:10px 12px;border:1.5px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--ink);font-family:var(--font-body);font-size:.92rem;width:100%}
.fld:focus{outline:none;border-color:var(--brand-500)}
.prog-edit{padding:4px 16px 16px}
.pe-head{display:flex;justify-content:space-between;font-size:.74rem;font-weight:600;color:var(--ink-soft);text-transform:uppercase;margin-bottom:8px}
.pctv{font-family:var(--font-display);font-weight:700}
input[type=range]{width:100%;accent-color:var(--accent)}
.mov-edit{padding:0 16px 16px}
.me-head{font-size:.74rem;font-weight:600;color:var(--ink-soft);text-transform:uppercase;margin:6px 0 10px}
.me-row{display:grid;grid-template-columns:1.5fr 1fr .85fr 1fr 1fr 34px;gap:8px;align-items:center;margin-bottom:8px}
.mv{padding:8px 10px;border:1.5px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--ink);font-size:.85rem;width:100%;font-family:var(--font-body)}
.mv:focus{outline:none;border-color:var(--brand-500)}
.del-mov{border:1.5px solid var(--line-strong);background:var(--surface);color:var(--danger);border-radius:8px;height:36px;font-size:1.1rem}
.add-mov{border:1.5px dashed var(--line-strong);background:none;color:var(--brand-500);border-radius:9px;padding:9px;width:100%;font-weight:600;font-size:.85rem;margin-top:4px}
.ci-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 16px 16px;flex-wrap:wrap}
.btn-sm{width:auto;padding:9px 18px;font-size:.85rem;border-radius:10px}
.btn-danger{background:none;border:1.5px solid color-mix(in srgb,var(--danger) 40%,transparent);color:var(--danger);padding:9px 16px;border-radius:10px;font-weight:600;font-size:.82rem}
.new-form{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:end;padding:16px}
.footnote{text-align:center;color:var(--ink-faint);font-size:.78rem;margin-top:30px}

@media (max-width:840px){.login-wrap{grid-template-columns:1fr}.login-brandside{display:none}.grid{grid-template-columns:1fr}}
@media (max-width:640px){.edit-grid,.new-form{grid-template-columns:1fr}.me-row{grid-template-columns:1fr 1fr .8fr 1fr}.me-row .del-mov{grid-column:1/-1;height:32px}}

/* ===== Ajustes para teléfono ===== */
@media (max-width:640px){
  html,body{overflow-x:hidden}
  .app{padding-left:16px;padding-right:16px}
  /* barra NO pegada en móvil: así no tapa la carta ni deja huecos */
  .topbar{position:static;margin-left:-16px;margin-right:-16px;margin-bottom:14px;padding-left:16px;padding-right:16px;gap:10px;overflow:hidden}
  .topbar .brand{font-size:0;gap:0;flex:none}
  .topbar .brand .mark{width:32px;height:32px}
  .user-chip{min-width:0;flex:1 1 auto;justify-content:flex-end;gap:8px}
  .user-chip .avatar{width:34px;height:34px;flex:none}
  .user-chip .meta{min-width:0}
  .user-chip .meta > div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.85rem}
  .user-chip .meta small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .ghost-btn{flex:none;padding:8px 10px}
  .grid{gap:14px}
  .pad{padding:18px}
  .balance-amount{font-size:2.3rem}
  .balance-sub{gap:4px 16px;font-size:.85rem}
  .status-pill{top:14px;right:14px;font-size:.7rem;padding:4px 9px}
  /* tabla sin scroll lateral: ancho completo y se oculta la columna Saldo */
  .table-scroll{overflow-x:visible}
  table{min-width:0;width:100%}
  th:nth-child(4), td:nth-child(4){display:none}
  th,td{padding:12px 12px}
  td{font-size:.86rem}
  td.amt{white-space:nowrap}
  .section-head .eyebrow{display:none}
  /* admin */
  .me-row{grid-template-columns:1fr 1fr;gap:8px}
  .me-row > .mv:first-child{grid-column:1 / -1}
  .me-row .del-mov{grid-column:1 / -1;height:34px}
  .new-form{grid-template-columns:1fr}
  .ci-foot{flex-direction:column;align-items:stretch}
  .ci-foot .btn-sm,.ci-foot .btn-danger{width:100%;text-align:center}
}
@media (max-width:400px){
  .balance-amount{font-size:2rem}
  .stat-row{grid-template-columns:1fr}
}

/* ===== LOGIN nuevo (izquierda imagen | derecha blanco, card flotante) ===== */
.lg2{position:relative;min-height:100vh;overflow:hidden;background:#fff}
.lg2-img{position:absolute;top:0;left:0;width:50%;height:100%;overflow:hidden;background:#123057;box-shadow:14px 0 50px -12px rgba(0,0,0,.30)}
.lg2-img img{width:100%;height:100%;object-fit:cover;display:block}
.lg2-side{position:absolute;top:0;right:0;width:50%;height:100%;background:#fff}
.lg2-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;color:#eaf1fb;padding:20px;background:linear-gradient(135deg,#1b4b8f,#0b1f3a)}
.lg2-ph-ic{font-size:2.4rem;margin-bottom:10px}
.lg2-ph small{display:block;margin-top:8px;opacity:.85;font-size:.78rem}
.lg2-card{position:absolute;top:50%;left:75%;transform:translate(-50%,-50%);z-index:2;width:min(340px,86vw);
  background:#fff;border-radius:20px;border:1px solid #e7edf6;box-shadow:0 30px 70px -22px rgba(6,17,34,.45);
  padding:30px 26px;text-align:center;color:#0c1a2e}
.lg2-logo{display:flex;justify-content:center;margin-bottom:14px}
.mark-lg{width:56px;height:56px;border-radius:15px;object-fit:cover}
.lg2-welcome{font-family:var(--font-display);font-size:1.3rem;font-weight:700;letter-spacing:-.02em;color:#0c1a2e;margin-bottom:20px;text-wrap:balance}
.lg2-card .field{margin-bottom:14px;text-align:left}
.lg2-card .field label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#45566e;margin-bottom:7px}
.lg2-card .field input{width:100%;padding:12px 13px;border:1.5px solid #cbd6e6;border-radius:11px;background:#f5f8fd;color:#0c1a2e;font-size:.95rem;font-family:var(--font-body)}
.lg2-card .field input:focus{outline:none;border-color:#2563c9;box-shadow:0 0 0 4px rgba(37,99,201,.18)}
.lg2-card .btn{margin-top:6px}
.lg2-card .err{color:#e11d48;font-size:.9rem;margin-top:12px;font-weight:600}
@media (max-width:820px){
  .lg2-card{left:50%;width:min(320px,84vw);padding:24px 20px;border-radius:18px}
  .lg2-welcome{font-size:1.1rem;margin-bottom:16px}
  .mark-lg{width:50px;height:50px}
}
@media (max-width:480px){
  .lg2-card{width:min(300px,88vw);padding:20px 16px}
  .lg2-welcome{font-size:1rem;margin-bottom:14px}
  .lg2-card .field{margin-bottom:11px}
  .lg2-card .field input{padding:11px}
}

/* ===== Candado de tamaño: que el logo y las imágenes NO se vean gigantes ===== */
img{max-width:100%}
.brand .mark{width:38px!important;height:38px!important;object-fit:cover;border-radius:10px}
.topbar .brand .mark{width:34px!important;height:34px!important;object-fit:cover}
.mark-lg{width:62px!important;height:62px!important;object-fit:cover;border-radius:15px}
.lg2-img{overflow:hidden}
.lg2-img img{width:100%!important;height:100%!important;object-fit:cover!important;display:block}
.vcard img{max-width:100%}