/* Planes y membresía (v9) + Mi portal. Solo tokens de css/base.css. */
.pl-area,.po-area{max-width:1080px}

/* Membresía */
.pl-account{padding:26px;border:1px solid var(--brand-line);border-radius:calc(var(--radius) + 3px);background:linear-gradient(130deg,var(--brand-soft),var(--surface))}
.pl-account-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:20px}
.pl-account-head h2{margin:6px 0 0;font:800 34px/1 var(--heading);text-transform:uppercase}
.pl-status{padding:8px 12px;border:1px solid var(--line-strong);border-radius:20px;color:var(--muted);font-size:11px;font-weight:700;white-space:nowrap}
.pl-status.is-ok{border-color:var(--brand-line);color:var(--brand)}
.pl-account-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:16px}
.pl-account-grid small{display:block;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.pl-account-grid b{display:block;margin-top:6px;font:800 30px/1 var(--heading)}
.pl-account-note{margin:16px 0 0;color:var(--muted);font-size:12px}
.pl-account--none .pl-account-head{margin-bottom:0}

/* Catálogo */
.pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.pl-card{display:flex;flex-direction:column}
.pl-name{margin:8px 0 6px;font:800 30px/1.02 var(--heading);text-transform:uppercase}
.pl-desc{margin:0;color:var(--muted);font-size:12px;line-height:1.6;white-space:pre-line}
.pl-price{margin-top:18px;font:800 40px/1 var(--heading);color:var(--brand)}
.pl-price s{font-size:22px;color:var(--muted);font-weight:700}
.pl-period{color:var(--muted);font-size:11px}
.pl-promo{margin:10px 0 0;padding:8px 10px;border-radius:var(--radius-sm);background:var(--brand-soft);color:var(--brand);font-size:12px;font-weight:700}
.pl-limits{list-style:none;margin:14px 0 18px;padding:12px 0 0;border-top:1px solid var(--line);color:var(--text-soft);font-size:12px;display:grid;gap:6px;flex:1}
.pl-limits li:before{content:"✓ ";color:var(--brand)}
.pl-cta-plain{display:block;padding:12px;border:1px dashed var(--line-strong);border-radius:var(--radius-sm);color:var(--muted);font-size:12px;text-align:center}
.pl-note{margin:16px 0 0;color:var(--muted);font-size:12px;line-height:1.6}

/* Mi portal */
.po-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.po-card{display:flex;flex-direction:column}
.po-card-top{display:flex;align-items:center;gap:10px}
.po-icon{font-size:24px;line-height:1}
.po-title{margin:12px 0 4px;font:800 30px/1.02 var(--heading);text-transform:uppercase}
.po-muted{margin:0;color:var(--muted);font-size:12px}
.po-facts{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:12px}
.po-facts small{display:block;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.po-facts b{display:block;margin-top:5px;font-size:14px}
.po-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:18px}
.po-actions .btn{flex:1 1 auto;white-space:nowrap}

@media(max-width:650px){
  .pl-account{padding:20px 16px}
  .pl-account-head h2{font-size:28px}
  .pl-account-grid b{font-size:26px}
}

/* «Tu cuota» (GET api/payments, me:payments): lo que debe, con importes. */
.pl-dues{margin-top:16px;padding:22px 26px;border:1px solid var(--line-strong);border-radius:calc(var(--radius) + 3px);background:var(--surface)}
.pl-dues.is-ok{border-color:var(--brand-line)}
.pl-dues h2{margin:6px 0 0;font:800 28px/1.05 var(--heading);text-transform:uppercase}
.pl-dues.is-ok h2{color:var(--brand)}
.pl-dues-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.pl-due{padding:12px 14px;border-radius:var(--radius-sm);background:var(--field)}
.pl-due-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.pl-due > small{display:block;margin-top:4px;color:var(--muted);font-size:12px}
.pl-due-amount{margin-top:8px;font:800 24px/1 var(--heading)}
.pl-due-amount small{font:600 12px var(--body);color:var(--muted)}
.pl-due-hint{margin:8px 0 0;color:var(--text-soft);font-size:12px}
.pl-status.is-late{border-color:var(--danger);color:var(--danger-text)}
@media(max-width:650px){.pl-dues{padding:18px 16px}.pl-dues h2{font-size:24px}}
/* Débito automático (GET api/auto-debit). */
#pl-debit:empty{display:none}
.pl-debit-detail{margin:10px 0 0;font-size:14px;font-weight:600}
.pl-debit-email{margin:16px 0 0;max-width:420px}
.pl-debit-consent{display:flex;align-items:flex-start;gap:9px;margin-top:16px;color:var(--text-soft);font-size:13px;cursor:pointer}
.pl-debit-consent input{flex:none;margin-top:2px;accent-color:var(--brand)}
.pl-debit-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
/* Pagá por transferencia: las cuentas que el gym marcó en la Caja. */
.pl-transfer{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.pl-transfer-title{display:block;font-size:14px}
.pl-acct{margin-top:10px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--field)}
.pl-acct-bank{display:block;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.pl-acct-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;margin-top:8px}
.pl-acct-row span{grid-column:1;grid-row:1;color:var(--muted);font-size:11px}
.pl-acct-row b{grid-column:1;grid-row:2;min-width:0;font-size:14px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pl-acct-row .pl-copy{grid-column:2;grid-row:1 / span 2}
.pl-copy{min-height:32px;padding:4px 12px;border:1px solid var(--line-strong);border-radius:20px;background:none;color:var(--text);font-size:12px;font-weight:700;cursor:pointer}
.pl-copy:hover,.pl-copy:focus-visible{border-color:var(--brand);color:var(--brand)}
.pl-acct-meta{margin:8px 0 0;color:var(--muted);font-size:12px}
/* Tus pagos (GET api/payments/history). */
.pl-history{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pl-pay{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.pl-pay-main{min-width:0}
.pl-pay-main b{display:block;font-size:14px;overflow-wrap:anywhere}
.pl-pay small{display:block;margin-top:3px;color:var(--muted);font-size:12px}
.pl-pay-side{flex:none;text-align:right}
.pl-pay-side b{font:800 20px/1 var(--heading)}
/* Pagar online (POST api/payments/checkout): el botón de cada cuota, renovar y el primer plan. */
.pl-due-actions{margin-top:12px}
.pl-pay-btn{min-height:40px;padding:10px 16px}
.pl-offer .pl-note{margin:-6px 0 14px}
.pl-offer .pl-card .pl-pay-btn{width:100%}
@media(max-width:650px){.pl-due-actions .pl-pay-btn{width:100%}}
/* El aviso al volver de la pasarela (#planes/pago-ok | pago-pendiente | pago-error). */
.pl-return{margin:0 0 16px;padding:14px 18px;border:1px solid var(--line-strong);border-left-width:4px;border-radius:var(--radius-sm);background:var(--surface)}
.pl-return b{display:block;font-size:15px}
.pl-return p{margin:4px 0 0;color:var(--text-soft);font-size:12px}
.pl-return.is-ok{border-color:var(--brand-line);border-left-color:var(--brand)}
.pl-return.is-ok b{color:var(--brand)}
.pl-return.is-wait{border-left-color:var(--text-soft)}
.pl-return.is-bad{border-color:var(--danger);border-left-color:var(--danger)}
.pl-return.is-bad b{color:var(--danger-text)}
/* Comprobantes de transferencia (me:receipts): «Ya transferí», el formulario y cómo va cada uno. */
.pl-due-actions{display:flex;flex-wrap:wrap;gap:8px}
.pl-due-hint.is-bad{color:var(--danger-text)}
.pl-rc-form{margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
.pl-rc-form .form-group{margin-bottom:12px}
.pl-rc-form input[type=file]{padding:10px;font-size:13px}
.pl-rc-form .pl-account-note{margin-top:10px}
.pl-rc-list{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.pl-rc-list .pl-history{margin-top:10px}
.pl-rc-list .pl-pay-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.pl-rc-chip{display:inline-block;padding:3px 9px;border:1px solid var(--line-strong);border-radius:20px;color:var(--text-soft);font-size:11px;font-weight:700;white-space:nowrap}
.pl-rc-chip.is-ok{border-color:var(--brand-line);color:var(--brand)}
.pl-rc-chip.is-bad{border-color:var(--danger);color:var(--danger-text)}
.pl-rc-reason{color:var(--danger-text)!important}
@media(max-width:650px){.pl-due-actions .btn{width:100%}}