/* Subiendo Pay — billetera, tarjetas y movimientos (pasajero). */

.wx-page{
  padding:1rem 1rem calc(6.5rem + env(safe-area-inset-bottom, 0px));
  display:flex;flex-direction:column;gap:1rem;
  background:var(--bg,#f4f7fb);
}

/* ---------- Tarjeta principal de saldo ---------- */
.wx-hero{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:192px;padding:1.15rem 1.25rem 1.1rem;border-radius:24px;color:#fff;
  background:
    radial-gradient(120% 140% at 100% 0%,rgba(34,211,238,.42) 0%,transparent 55%),
    radial-gradient(90% 120% at 0% 100%,rgba(124,58,237,.38) 0%,transparent 60%),
    linear-gradient(135deg,#071333 0%,#0a2a6b 52%,#1d4ed8 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 40px rgba(29,78,216,.32),inset 0 1px 0 rgba(255,255,255,.18);
  display:flex;flex-direction:column;
}
.wx-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.35;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(135deg,transparent 10%,#000 60%);
  mask-image:linear-gradient(135deg,transparent 10%,#000 60%);
}
.wx-hero::after{
  content:"";position:absolute;top:-60%;left:-40%;width:45%;height:220%;z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
  transform:rotate(22deg);animation:wx-shine 6s ease-in-out infinite;
}
@keyframes wx-shine{0%,62%{left:-50%}100%{left:130%}}
.wx-hero-top{display:flex;align-items:center;justify-content:space-between}
.wx-brand{
  display:flex;align-items:center;gap:.45rem;
  font-size:.7rem;font-weight:700;letter-spacing:.2em;opacity:.92;
}
.wx-brand b{color:#67e8f9;font-weight:800}
.wx-brand-dot{
  width:8px;height:8px;border-radius:50%;background:#22d3ee;
  box-shadow:0 0 0 3px rgba(34,211,238,.22),0 0 12px #22d3ee;
}
.wx-contactless{width:22px;height:22px;opacity:.8}
.wx-chip{
  width:40px;height:30px;margin-top:.85rem;border-radius:7px;
  background:linear-gradient(135deg,#fde68a,#f59e0b 55%,#fcd34d);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
  position:relative;
}
.wx-chip::before{
  content:"";position:absolute;inset:6px 8px;border-radius:3px;
  border:1px solid rgba(120,53,15,.45);
  background:linear-gradient(90deg,transparent 45%,rgba(120,53,15,.4) 45%,rgba(120,53,15,.4) 55%,transparent 55%);
}
.wx-hero-label{margin-top:.8rem;font-size:.74rem;font-weight:600;opacity:.75;letter-spacing:.04em}
.wx-hero-balance{
  font-size:2.35rem;font-weight:800;line-height:1.05;letter-spacing:-.03em;margin-top:.1rem;
  text-shadow:0 4px 18px rgba(34,211,238,.35);
  font-variant-numeric:tabular-nums;
}
.wx-hero-bottom{
  margin-top:auto;padding-top:.85rem;
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
}
.wx-hero-holder{
  font-family:'DM Mono',ui-monospace,monospace;font-size:.78rem;letter-spacing:.12em;opacity:.88;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wx-hero-tag{
  font-size:.64rem;font-weight:800;letter-spacing:.14em;padding:.22rem .55rem;border-radius:99px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
}

/* ---------- Acciones rápidas ---------- */
.wx-actions{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}
.wx-action{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem .75rem;border-radius:16px;font:inherit;font-size:.86rem;font-weight:700;
  color:var(--text,#0f172a);background:var(--white,#fff);
  border:1px solid var(--border,#e2e8f0);
  box-shadow:0 4px 14px rgba(15,23,42,.06);
  cursor:pointer;transition:transform .15s,box-shadow .2s,border-color .2s;
}
.wx-action svg{width:18px;height:18px;flex-shrink:0}
.wx-action:active{transform:scale(.97)}
.wx-action-primary{
  color:#fff;border-color:transparent;
  background:linear-gradient(135deg,#06b6d4,#2563eb 60%,#4f46e5);
  box-shadow:0 10px 24px rgba(37,99,235,.35);
}

/* ---------- Paneles ---------- */
.wx-panel{
  background:var(--white,#fff);border:1px solid var(--border,#e2e8f0);border-radius:20px;
  padding:1rem;box-shadow:0 6px 20px rgba(15,23,42,.05);
}
.wx-panel-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.8rem}
.wx-panel-title{font-size:.98rem;font-weight:800;color:var(--text,#0f172a);letter-spacing:-.01em}
.wx-panel-sub{font-size:.72rem;color:var(--text3,#64748b);margin-top:.1rem}

.wx-seg{
  display:flex;gap:.2rem;padding:.2rem;border-radius:12px;
  background:var(--surface,#f1f5f9);border:1px solid var(--border,#e2e8f0);flex-shrink:0;
}
.wx-seg button{
  display:flex;align-items:center;gap:.3rem;
  padding:.38rem .65rem;border-radius:9px;border:0;background:transparent;
  font:inherit;font-size:.72rem;font-weight:700;color:var(--text3,#64748b);cursor:pointer;
}
.wx-seg button.active{background:var(--white,#fff);color:var(--blue,#2563eb);box-shadow:0 2px 8px rgba(15,23,42,.1)}
.wx-seg-badge{
  min-width:18px;height:18px;padding:0 5px;border-radius:99px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#f59e0b;color:#fff;font-size:.62rem;font-weight:800;
}
.wx-seg-badge.hidden{display:none}

/* ---------- Movimientos: altura fija con scroll interno ---------- */
.wx-tx-list{
  display:flex;flex-direction:column;gap:.45rem;
  max-height:min(292px,38vh);overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;
  margin:0 -.25rem;padding:0 .25rem;
}
.wx-tx-list::-webkit-scrollbar{width:4px}
.wx-tx-list::-webkit-scrollbar-thumb{background:var(--border2,#cbd5e1);border-radius:99px}
.wx-tx-list.is-scrollable:not(.at-end){
  -webkit-mask-image:linear-gradient(to bottom,#000 82%,transparent);
  mask-image:linear-gradient(to bottom,#000 82%,transparent);
}
.wx-tx{
  display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:.7rem;
  padding:.6rem .65rem;border-radius:14px;
  background:var(--surface,#f8fafc);border:1px solid transparent;
  flex-shrink:0;
}
.wx-tx.is-pending{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.07)}
.wx-tx-ico{
  width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:rgba(37,99,235,.12);color:#2563eb;
}
.wx-tx-ico svg{width:18px;height:18px}
.wx-tx-ico.k-in{background:rgba(16,185,129,.14);color:#059669}
.wx-tx-ico.k-out{background:rgba(99,102,241,.14);color:#4f46e5}
.wx-tx-ico.k-gift{background:rgba(236,72,153,.14);color:#db2777}
.wx-tx-ico.k-pending{background:rgba(245,158,11,.16);color:#d97706}
.wx-tx-main{min-width:0}
.wx-tx-title{
  font-size:.84rem;font-weight:700;color:var(--text,#0f172a);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wx-tx-meta{display:flex;align-items:center;flex-wrap:wrap;gap:.2rem .4rem;margin-top:.15rem;font-size:.68rem;color:var(--text3,#64748b)}
.wx-tx-meta span{white-space:nowrap}
.wx-pill{padding:.08rem .45rem;border-radius:99px;font-size:.6rem;font-weight:800;letter-spacing:.03em}
.wx-pill.ok{background:rgba(16,185,129,.14);color:#059669}
.wx-pill.pending{background:rgba(245,158,11,.18);color:#b45309}
.wx-pill.failed{background:rgba(239,68,68,.14);color:#dc2626}
.wx-tx-amount{
  font-family:'DM Mono',ui-monospace,monospace;font-size:.86rem;font-weight:500;
  color:var(--text,#0f172a);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.wx-tx-amount.pos{color:#059669}
.wx-tx-amount.muted{color:var(--text3,#94a3b8)}
.wx-empty{
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  padding:1.4rem .75rem;text-align:center;color:var(--text3,#64748b);font-size:.8rem;
}
.wx-empty b{color:var(--text,#0f172a);font-size:.86rem}
.wx-empty-ico{
  width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--surface,#f1f5f9);color:var(--blue,#2563eb);margin-bottom:.2rem;
}
.wx-empty-ico svg{width:22px;height:22px}

/* ---------- Tarjetas guardadas (carrusel) ---------- */
.wx-cards{
  display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;
  margin:0 -1rem;padding:.35rem 1rem .6rem;scroll-padding-inline:1rem;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x;
}
.wx-cards::-webkit-scrollbar{display:none}
.wx-ccard{
  position:relative;flex:0 0 232px;height:142px;scroll-snap-align:start;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:.9rem 1rem;border-radius:18px;border:0;text-align:left;color:#fff;cursor:pointer;
  font:inherit;overflow:hidden;
  background:linear-gradient(135deg,#1e293b,#334155 60%,#475569);
  box-shadow:0 10px 24px rgba(15,23,42,.22);
  transition:transform .18s,box-shadow .2s;
}
.wx-ccard::after{
  content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);
}
.wx-ccard:active{transform:scale(.97)}
.wx-ccard.is-selected{box-shadow:0 0 0 2px var(--white,#fff),0 0 0 4px #22d3ee,0 12px 28px rgba(34,211,238,.3)}
.wx-ccard.wx-brand-visa{background:linear-gradient(135deg,#0b1f6b,#1a3fb5 55%,#2f6bff)}
.wx-ccard.wx-brand-mastercard{background:linear-gradient(135deg,#1a1a2e,#3a1c32 55%,#b8323f)}
.wx-ccard.wx-brand-amex{background:linear-gradient(135deg,#064e5b,#0e7490 55%,#22a6b3)}
.wx-ccard-top{display:flex;align-items:center;justify-content:space-between}
.wx-ccard-chip{
  width:32px;height:24px;border-radius:6px;
  background:linear-gradient(135deg,#fde68a,#f59e0b 55%,#fcd34d);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
}
.wx-ccard-brand{font-size:.82rem;font-weight:800;letter-spacing:.06em}
.wx-brand-visa .wx-ccard-brand{font-style:italic;font-size:1rem;letter-spacing:.02em}
.wx-brand-mastercard .wx-ccard-brand{
  width:40px;height:24px;font-size:0;position:relative;
  background:radial-gradient(circle at 12px 12px,#eb001b 11px,transparent 12px),
             radial-gradient(circle at 28px 12px,rgba(247,158,27,.92) 11px,transparent 12px);
}
.wx-ccard-number{
  font-family:'DM Mono',ui-monospace,monospace;font-size:1rem;letter-spacing:.12em;
  text-shadow:0 1px 2px rgba(0,0,0,.3);
}
.wx-ccard-bottom{
  display:flex;justify-content:space-between;gap:.5rem;
  font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;opacity:.9;
}
.wx-ccard-bottom span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wx-ccard-check{
  position:absolute;right:.65rem;bottom:2.35rem;padding:.15rem .5rem;border-radius:99px;
  background:rgba(34,211,238,.25);border:1px solid rgba(103,232,249,.6);
  font-size:.6rem;font-weight:800;letter-spacing:.04em;
}
.wx-ccard-add{
  align-items:center;justify-content:center;gap:.3rem;text-align:center;
  color:var(--blue,#2563eb);background:var(--surface,#f8fafc);
  border:1.5px dashed var(--border2,#cbd5e1);box-shadow:none;
}
.wx-ccard-add::after{display:none}
.wx-ccard-add b{font-size:.86rem}
.wx-ccard-add small{font-size:.66rem;color:var(--text3,#64748b)}
.wx-add-plus{
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;font-weight:500;color:#fff;
  background:linear-gradient(135deg,#06b6d4,#2563eb);box-shadow:0 6px 16px rgba(37,99,235,.35);
}

/* ---------- Otros métodos ---------- */
.wx-methods{display:flex;flex-direction:column;gap:.5rem}
.wx-method{
  display:flex;align-items:center;gap:.75rem;width:100%;
  padding:.7rem .75rem;border-radius:14px;text-align:left;font:inherit;cursor:pointer;
  background:var(--surface,#f8fafc);border:1.5px solid transparent;color:var(--text,#0f172a);
  transition:border-color .2s,background .2s;
}
.wx-method.is-active{border-color:var(--blue,#2563eb);background:var(--blue-dim,rgba(37,99,235,.08))}
.wx-method-ico{
  width:40px;height:40px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.wx-method-ico svg{width:20px;height:20px}
.wx-ico-wallet{background:linear-gradient(135deg,#06b6d4,#2563eb)}
.wx-ico-mp{background:linear-gradient(135deg,#00b1ea,#0070c9)}
.wx-ico-cash{background:linear-gradient(135deg,#10b981,#047857)}
.wx-method-info{flex:1;min-width:0;display:flex;flex-direction:column}
.wx-method-info b{font-size:.86rem;font-weight:700}
.wx-method-info small{font-size:.7rem;color:var(--text3,#64748b);margin-top:.1rem}
.wx-radio{
  width:20px;height:20px;border-radius:50%;flex-shrink:0;
  border:2px solid var(--border2,#cbd5e1);position:relative;
}
.wx-method.is-active .wx-radio{border-color:var(--blue,#2563eb)}
.wx-method.is-active .wx-radio::after{
  content:"";position:absolute;inset:3px;border-radius:50%;background:var(--blue,#2563eb);
}

/* ---------- Hoja "Agregar tarjeta" ---------- */
.wx-sheet{padding-bottom:1.75rem}
.wx-preview{perspective:1000px;height:176px;margin:0 auto 1.1rem;max-width:300px}
.wx-preview-inner{
  position:relative;width:100%;height:100%;border-radius:20px;
  box-shadow:0 16px 36px rgba(15,23,42,.35);
  transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,.2,.2,1);
}
.wx-preview.is-flipped .wx-preview-inner{transform:rotateY(180deg)}
.wx-preview-face{
  position:absolute;inset:0;border-radius:20px;padding:1.05rem 1.15rem;color:#fff;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(135deg,#071333,#0a2a6b 55%,#1d4ed8);
  transition:background .4s;
}
.wx-preview.wx-brand-visa .wx-preview-face{background:linear-gradient(135deg,#0b1f6b,#1a3fb5 55%,#2f6bff)}
.wx-preview.wx-brand-mastercard .wx-preview-face{background:linear-gradient(135deg,#1a1a2e,#3a1c32 55%,#b8323f)}
.wx-preview.wx-brand-amex .wx-preview-face{background:linear-gradient(135deg,#064e5b,#0e7490 55%,#22a6b3)}
.wx-preview-face::before{
  content:"";position:absolute;inset:0;opacity:.3;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:18px 18px;
}
.wx-preview-back{transform:rotateY(180deg);padding:1.1rem 0}
.wx-preview-stripe{height:38px;background:#0b0f1a}
.wx-preview-cvv{
  margin:0 1.15rem;align-self:flex-end;min-width:74px;padding:.4rem .7rem;border-radius:6px;
  background:#f8fafc;color:#0f172a;text-align:right;
  font-family:'DM Mono',ui-monospace,monospace;letter-spacing:.2em;
}
.wx-preview-note{margin:0 1.15rem;font-size:.64rem;opacity:.75}
.wx-preview-number{
  font-family:'DM Mono',ui-monospace,monospace;font-size:1.12rem;letter-spacing:.12em;
  text-shadow:0 1px 2px rgba(0,0,0,.35);white-space:nowrap;
}
.wx-preview .wx-ccard-bottom small{display:block;font-size:.54rem;opacity:.7;margin-bottom:.1rem}
.wx-preview .wx-ccard-bottom b{font-weight:600;font-size:.72rem}

.wx-form{display:flex;flex-direction:column;gap:.7rem}
.wx-field{display:flex;flex-direction:column;gap:.3rem}
.wx-field > span{font-size:.72rem;font-weight:700;color:var(--text2,#475569);letter-spacing:.02em}
.wx-field input{
  width:100%;padding:.8rem .9rem;border-radius:12px;font:inherit;font-size:.95rem;
  color:var(--text,#0f172a);background:var(--surface,#f8fafc);
  border:1.5px solid var(--border,#e2e8f0);outline:none;transition:border-color .2s,box-shadow .2s;
}
#card-number-input,#card-exp-input,#card-cvv-input{font-family:'DM Mono',ui-monospace,monospace;letter-spacing:.08em}
.wx-field input:focus{border-color:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.14)}
.wx-field.has-error input{border-color:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.12)}
.wx-field-err{font-style:normal;font-size:.7rem;font-weight:600;color:#dc2626;min-height:0}
.wx-field-err:empty{display:none}
.wx-field-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.wx-submit{
  margin-top:.35rem;display:flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;padding:.95rem;border-radius:14px;border:0;cursor:pointer;
  font:inherit;font-size:.95rem;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#06b6d4,#2563eb 60%,#4f46e5);
  box-shadow:0 12px 26px rgba(37,99,235,.35);
}
.wx-submit svg{width:18px;height:18px}
.wx-submit:disabled{opacity:.65;cursor:progress}
.wx-secure{margin:.4rem 0 0;font-size:.7rem;color:var(--text3,#64748b);text-align:center;line-height:1.4}

/* ---------- Modal de recarga ---------- */
.wx-topup-balance{
  display:flex;align-items:center;justify-content:space-between;
  padding:.75rem .9rem;margin-bottom:.9rem;border-radius:14px;color:#fff;
  background:linear-gradient(135deg,#071333,#1d4ed8);
  font-size:.78rem;font-weight:600;
}
.wx-topup-balance b{font-family:'DM Mono',ui-monospace,monospace;font-size:1rem;font-weight:500}
#wallet-topup-modal .wallet-amount-grid{gap:.55rem}
#wallet-topup-modal .wallet-amount-opt{
  padding:1rem .75rem;border-radius:14px;font-family:'DM Mono',ui-monospace,monospace;font-size:1rem;
  background:var(--surface,#f8fafc);border:1.5px solid var(--border,#e2e8f0);
}
#wallet-topup-modal .wallet-amount-opt.selected{
  color:#fff;border-color:transparent;
  background:linear-gradient(135deg,#06b6d4,#2563eb);
  box-shadow:0 8px 20px rgba(37,99,235,.3);
}

/* ---------- Modo oscuro ---------- */
html[data-theme="dark"] .wx-page{background:var(--bg)}
html[data-theme="dark"] .wx-action,
html[data-theme="dark"] .wx-panel{background:var(--card);border-color:var(--border);box-shadow:none}
html[data-theme="dark"] .wx-action-primary{border-color:transparent}
html[data-theme="dark"] .wx-tx,
html[data-theme="dark"] .wx-method,
html[data-theme="dark"] .wx-ccard-add,
html[data-theme="dark"] .wx-seg,
html[data-theme="dark"] .wx-field input,
html[data-theme="dark"] #wallet-topup-modal .wallet-amount-opt{background:var(--surface)}
html[data-theme="dark"] .wx-seg button.active{background:var(--card)}
html[data-theme="dark"] .wx-seg button{color:var(--text3) !important}
html[data-theme="dark"] .wx-seg button.active,
html[data-theme="dark"] .wx-ccard-add{color:#60a5fa !important}
html[data-theme="dark"] .wx-tx.is-pending{background:rgba(245,158,11,.1)}
html[data-theme="dark"] .wx-tx-amount.pos,
html[data-theme="dark"] .wx-pill.ok,
html[data-theme="dark"] .wx-tx-ico.k-in{color:#34d399}
html[data-theme="dark"] .wx-pill.pending,
html[data-theme="dark"] .wx-tx-ico.k-pending{color:#fbbf24}
html[data-theme="dark"] .wx-method.is-active{background:var(--blue-dim)}
html[data-theme="dark"] .wx-field input:focus{border-color:#60a5fa !important}
html[data-theme="dark"] .wx-field.has-error input{border-color:#f87171 !important}
html[data-theme="dark"] #wallet-topup-modal .wallet-amount-opt.selected{
  background:linear-gradient(135deg,#06b6d4,#2563eb);color:#fff;
}

@media (prefers-reduced-motion:reduce){
  .wx-hero::after{animation:none;display:none}
  .wx-preview-inner{transition:none}
}