:root{
  --bg:#0a0a0f; --bg2:#10101a; --card:#1a1a28; --card2:#22222f;
  --accent:#ff6b2b; --accent-light:#ff8f5a; --accent-dark:#cc4a10;
  --green:#25D366; --red:#ff5252;
  --text:#f0f0f5; --text2:#a0a0b8; --text3:#666680;
  --border:#2a2a3a; --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);color:var(--text);
  min-height:100dvh;line-height:1.4;
  background-image:radial-gradient(900px 500px at 50% -10%, rgba(255,107,43,.10), transparent 70%);
}
.app{max-width:520px;margin:0 auto;padding:20px 16px 60px}

.topbar{padding:14px 4px 22px;text-align:center}
.topbar h1{font-size:26px;font-weight:800;letter-spacing:-.5px}
.topbar h1 span{color:var(--accent)}
.topbar .sub{color:var(--text2);font-size:14px;margin-top:2px}

/* Nav */
.nav{display:inline-flex;gap:6px;margin-top:12px;background:var(--bg2);border:1px solid var(--border);border-radius:11px;padding:4px}
.nav a{padding:8px 18px;border-radius:8px;color:var(--text2);text-decoration:none;font-size:14px;font-weight:600;transition:.15s}
.nav a.active{background:var(--accent);color:#fff}

/* Resúmenes */
.resumen{display:flex;flex-direction:column;gap:16px;margin-top:18px}
.card-res{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.res-head{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;font-weight:700;font-size:14px}
.res-head span{font-size:15px}
.res-head.ing{background:rgba(37,211,102,.12);color:#b6f5cf}
.res-head.egr{background:rgba(255,82,82,.12);color:#ffb6b6}
.res-table{width:100%;border-collapse:collapse;font-size:14px}
.res-table td{padding:10px 16px;border-top:1px solid var(--border);color:var(--text)}
.res-table td.num{text-align:right;font-variant-numeric:tabular-nums;color:var(--text2);font-weight:600}
.res-table td.muted{color:var(--text3);text-align:center}
.neto{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-radius:var(--radius);background:var(--card2);border:1px solid var(--border)}
.neto span{font-weight:600;color:var(--text2)}
.neto strong{font-size:20px;font-weight:800}
.neto.pos strong{color:var(--green)}
.neto.neg strong{color:var(--red)}
.empty{text-align:center;color:var(--text3);padding:40px 20px}
.empty.err{color:var(--red)}

form{display:flex;flex-direction:column;gap:16px}

/* Segmented */
.seg{display:flex;background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:4px;gap:4px}
.seg-btn{
  flex:1;padding:11px 8px;border:none;border-radius:9px;background:transparent;
  color:var(--text2);font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;
  transition:.15s;
}
.seg-btn.active{background:var(--accent);color:#fff;box-shadow:0 2px 10px rgba(255,107,43,.35)}
#tipo-seg .seg-btn[data-tipo="Ingreso"].active{background:var(--green);box-shadow:0 2px 10px rgba(37,211,102,.3)}
.seg.moneda{flex:0 0 auto;width:120px;padding:3px}
.seg.moneda .seg-btn{padding:9px 6px;font-size:14px}

/* Fields */
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:13px;font-weight:600;color:var(--text2);padding-left:2px}
input,select{
  width:100%;padding:13px 14px;background:var(--card);border:1px solid var(--border);
  border-radius:11px;color:var(--text);font-family:inherit;font-size:16px;outline:none;
  transition:.15s;
}
input::placeholder{color:var(--text3)}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,107,43,.15)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a0a0b8' d='M6 8L0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}

.monto-row{display:flex;gap:10px;align-items:stretch}
.monto-row #monto{flex:1;font-size:22px;font-weight:700}

/* Details */
.more{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:0 14px}
.more summary{padding:14px 2px;cursor:pointer;font-weight:600;font-size:14px;color:var(--accent-light);list-style:none}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"+ ";font-weight:700}
.more[open] summary::before{content:"− "}
.more[open]{padding-bottom:14px;display:flex;flex-direction:column;gap:14px}
.more .field{margin-top:0}

/* Submit */
.submit{
  margin-top:6px;padding:16px;border:none;border-radius:13px;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:#fff;font-family:inherit;font-size:17px;font-weight:700;cursor:pointer;
  box-shadow:0 6px 20px rgba(255,107,43,.3);transition:.15s;
}
.submit:active{transform:translateY(1px)}
.submit:disabled{opacity:.6;cursor:wait}

.hidden{display:none!important}

/* Cuotas: fila de 2 */
.row2{display:flex;gap:12px}
.row2 .field{flex:1}

/* Checkbox estimado */
.check{display:flex;gap:10px;align-items:flex-start;background:rgba(255,107,43,.08);border:1px solid var(--accent-dark);border-radius:12px;padding:13px 14px;cursor:pointer}
.check input{width:20px;height:20px;flex:0 0 auto;margin-top:1px;accent-color:var(--accent)}
.check span{font-size:13px;color:var(--text2);line-height:1.45}
.check strong{color:var(--accent-light)}

/* Preview del plan */
.preview{min-height:0;font-size:14px;color:var(--text2);text-align:center;font-weight:600}
.preview:not(:empty){padding:13px 14px;background:var(--card);border:1px solid var(--border);border-radius:12px}
.preview b{color:var(--accent-light);font-weight:700}
.preview .total{color:var(--text);display:block;margin-top:4px;font-size:13px}

/* Planes activos */
.planes-wrap{margin-top:30px}
.planes-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding:0 2px}
.planes-head h2{font-size:16px;font-weight:700}
.link-btn{background:var(--bg2);border:1px solid var(--border);color:var(--text2);width:36px;height:36px;border-radius:10px;font-size:17px;cursor:pointer}
.plan-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:12px}
.plan-card .pc-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.plan-card .pc-title{font-weight:700;font-size:15px}
.plan-card .pc-tag{font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px;background:var(--card2);color:var(--text2);white-space:nowrap}
.plan-card .pc-tag.est{background:rgba(255,107,43,.15);color:var(--accent-light)}
.plan-card .pc-sub{color:var(--text2);font-size:13px;margin-top:4px}
.plan-card .pc-bar{height:7px;background:var(--bg2);border-radius:4px;margin-top:11px;overflow:hidden}
.plan-card .pc-bar > i{display:block;height:100%;background:var(--accent);border-radius:4px}
.plan-card .pc-foot{display:flex;justify-content:space-between;font-size:12px;color:var(--text3);margin-top:7px}
.plan-card .pc-foot b{color:var(--text);font-weight:700}

/* Toast */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(120px);
  background:var(--card2);border:1px solid var(--border);color:var(--text);
  padding:13px 20px;border-radius:12px;font-weight:600;font-size:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);transition:.3s;z-index:50;max-width:90vw;text-align:center;
}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.ok{border-color:var(--green);color:#b6f5cf}
.toast.err{border-color:var(--red);color:#ffb6b6}