/* ============================================================
   RETOSPAY Wallet — front (Mi Cuenta y checkout)
   Hereda la identidad del tema Woodmart vía sus variables CSS
   (color primario, alternativo, textos, tipografías y radios).
   Los valores tras la coma son respaldo si la variable no existe.
   ============================================================ */
.rpw-wallet,
.rpw-checkout-box,
.rpw-gateway-balance{
  --rpw-primary: var(--wd-primary-color, #1e3a8a);
  --rpw-alt:     var(--wd-alternative-color, var(--wd-primary-color, #0f172a));
  --rpw-text:    var(--wd-text-color, #333);
  --rpw-title:   var(--wd-title-color, #111);
  --rpw-muted:   #7a7a7a;
  --rpw-bg:      var(--wd-main-bgcolor, #fff);
  --rpw-brd:     var(--wd-form-brd-color, #e6e6e6);
  --rpw-radius:  var(--wd-form-brd-radius, 12px);
  --rpw-title-font: var(--wd-title-font, inherit);
  --rpw-ok:  #1f8f4e;
  --rpw-bad: #c0392b;
  color: var(--rpw-text);
}

/* ---------- Layout ---------- */
.rpw-wallet{display:flex;flex-direction:column;gap:22px}
.rpw-card{background:var(--rpw-bg);border:1px solid var(--rpw-brd);border-radius:calc(var(--rpw-radius) + 4px);padding:24px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.rpw-grid{display:flex;flex-wrap:wrap;gap:22px}
.rpw-grid>.rpw-card{flex:1 1 300px;min-width:0}
.rpw-card-title{margin:0 0 12px;font-size:18px;font-family:var(--rpw-title-font);color:var(--rpw-title)}
.rpw-subtitle{margin:18px 0 8px;font-size:14px;color:var(--rpw-title)}
.rpw-muted{color:var(--rpw-muted)}
.rpw-small{font-size:12px}
.rpw-r{text-align:right!important}

/* ---------- Tarjeta de saldo (hero) ---------- */
.rpw-card--hero{
  position:relative;overflow:hidden;border:0;color:#fff;
  background:
    linear-gradient(rgba(0,0,0,.12),rgba(0,0,0,.32)),
    linear-gradient(135deg,var(--rpw-primary),var(--rpw-alt));
}
.rpw-card--hero::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.08)}
.rpw-hero-label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.rpw-hero-usd{font-size:42px;font-weight:700;line-height:1.1;margin:6px 0 2px;font-family:var(--rpw-title-font);letter-spacing:-.01em}
.rpw-hero-bs{font-size:17px;opacity:.95}
.rpw-hero-note{margin:14px 0 0;font-size:13px;opacity:.85;max-width:560px}
.rpw-card--hero .rpw-muted{color:rgba(255,255,255,.75)}

/* ---------- Recarga ---------- */
.rpw-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.rpw-chip{border:1px solid var(--rpw-brd);background:transparent;color:var(--rpw-title);border-radius:999px;padding:7px 16px;cursor:pointer;font-weight:600;transition:all .15s ease}
.rpw-chip:hover{border-color:var(--rpw-primary);color:var(--rpw-primary)}
.rpw-chip.is-active{background:var(--rpw-primary);color:#fff;border-color:var(--rpw-primary)}
.rpw-recharge-form label{display:block;font-weight:600;margin-bottom:6px;color:var(--rpw-title)}
.rpw-recharge-form input[type=text]{width:100%;max-width:260px}
.rpw-preview{margin:10px 0 14px;font-size:15px}
.rpw-preview strong{color:var(--rpw-primary)}
.rpw-btn{margin-top:2px}
.rpw-list{list-style:none;padding:0;margin:0}
.rpw-list li{padding:8px 0;border-bottom:1px solid var(--rpw-brd)}
.rpw-list li:last-child{border-bottom:0}
.rpw-pill{display:inline-block;padding:2px 9px;border-radius:999px;background:color-mix(in srgb,var(--rpw-primary) 12%,transparent);color:var(--rpw-primary);font-size:12px;font-weight:600}
@supports not (background:color-mix(in srgb,red 10%,transparent)){.rpw-pill{background:rgba(0,0,0,.06)}}

/* ---------- Referidos ---------- */
.rpw-ref{display:flex;gap:8px;flex-wrap:wrap}
.rpw-ref input{flex:1 1 200px;min-width:0}
.rpw-stats{display:flex;gap:24px;margin:16px 0;flex-wrap:wrap}
.rpw-stats>div{display:flex;flex-direction:column}
.rpw-stat-n{font-size:22px;font-weight:700;color:var(--rpw-title);font-family:var(--rpw-title-font)}
.rpw-stat-l{font-size:12px;color:var(--rpw-muted)}
.rpw-wa{display:inline-block;background:#25d366;color:#fff!important;padding:9px 16px;border-radius:var(--rpw-radius);text-decoration:none;font-weight:600}
.rpw-wa:hover{filter:brightness(.94)}

/* ---------- Movimientos ---------- */
.rpw-table{width:100%;border-collapse:collapse;font-size:14px}
.rpw-table th{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--rpw-muted);font-weight:600}
.rpw-table th,.rpw-table td{padding:11px 8px;border-bottom:1px solid var(--rpw-brd);text-align:left;vertical-align:top}
.rpw-table tbody tr:last-child td{border-bottom:0}
.rpw-row--credit .rpw-amount{color:var(--rpw-ok);font-weight:700}
.rpw-row--debit .rpw-amount{color:var(--rpw-bad);font-weight:700}
.rpw-pagination{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}

@media (max-width:640px){
  .rpw-card{padding:18px}
  .rpw-table thead{display:none}
  .rpw-table tr{display:block;border-bottom:2px solid var(--rpw-brd);padding:8px 0}
  .rpw-table td{display:flex;justify-content:space-between;gap:12px;border:0;padding:4px 0;text-align:right}
  .rpw-table td::before{content:attr(data-label);font-weight:600;color:var(--rpw-muted);text-align:left}
  .rpw-hero-usd{font-size:34px}
}

/* ---------- Checkout y "Pagar pedido" ---------- */
.rpw-checkout-box{
  border:1px solid var(--rpw-brd);border-left:4px solid var(--rpw-primary);
  border-radius:var(--rpw-radius);padding:14px 16px;margin:0 0 18px;background:var(--rpw-bg)
}
.rpw-checkout-label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;margin:0;font-weight:500}
.rpw-checkout-label input{margin-top:3px}
.rpw-checkout-info{margin:0}
.rpw-apply-btn{margin-left:8px}
.rpw-gateway-balance{margin:6px 0 0;font-size:14px}
.rpw-gateway-balance strong{color:var(--rpw-primary)}

/* ---------- Enviar saldo ---------- */
.rpw-transfer-form label{display:block;font-weight:600;margin:10px 0 6px;color:var(--rpw-title)}
.rpw-transfer-form input[type=text]{width:100%;max-width:320px}
.rpw-confirm{border:1px dashed var(--rpw-primary);border-radius:var(--rpw-radius);padding:16px 18px;background:color-mix(in srgb,var(--rpw-primary) 6%,transparent)}
@supports not (background:color-mix(in srgb,red 10%,transparent)){.rpw-confirm{background:rgba(0,0,0,.03)}}
.rpw-recipient{font-size:17px;margin:6px 0 10px}
.rpw-inline-forms{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.rpw-btn--ghost{background:transparent!important;color:var(--rpw-title)!important;border:1px solid var(--rpw-brd)!important;box-shadow:none!important}
.rpw-btn--ghost:hover{border-color:var(--rpw-primary)!important;color:var(--rpw-primary)!important}

/* ---------- Cabecera de la página ---------- */
.rpw-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rpw-title{margin:0;font-size:24px;font-family:var(--rpw-title-font);color:var(--rpw-title)}
.rpw-back{font-size:14px;text-decoration:none;color:var(--rpw-muted)}
.rpw-back:hover{color:var(--rpw-primary)}

/* ---------- Interruptor, botones-enlace ---------- */
.rpw-switch{display:flex;gap:10px;align-items:center;cursor:pointer;font-weight:600;margin:6px 0;color:var(--rpw-title)}
.rpw-switch input{width:20px;height:20px;accent-color:var(--rpw-primary)}
.rpw-inline{display:inline}
.rpw-linkbtn{background:none!important;border:0!important;padding:0 0 0 8px!important;color:var(--rpw-bad)!important;cursor:pointer;font-size:13px;box-shadow:none!important;text-decoration:underline}
.rpw-transfer-form select{width:100%;max-width:320px;margin-bottom:6px}

/* ---------- Botón "Pagar con RetosWallet" junto a "Pagar cuota" (Mis retos, planes UPP) ---------- */
.rpw-paywallet-btn{display:inline-block;margin-left:8px;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.6;text-decoration:none!important;color:#fff!important;background:var(--wd-primary-color,#1e3a8a);white-space:nowrap;vertical-align:middle}
.rpw-paywallet-btn:hover{filter:brightness(.92);color:#fff!important}