/* club_memberships — registro, pago y «Mi membresía». Usa los tokens de club_core (club.css). */

.club-ms-section { padding-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.club-ms-wizard [hidden], .club-ms-page [hidden], .club-ms-portal [hidden] { display: none !important; }
.club-ms-layout { display: grid; gap: var(--club-space-7); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .club-ms-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--club-space-8); } }
.club-ms-aside { display: grid; gap: var(--club-space-5); }
@media (min-width: 1024px) { .club-ms-aside { position: sticky; top: calc(var(--club-header-h) + 1.5rem); } }
.club-ms-aside__title { font-size: var(--club-fs-md); font-weight: 700; color: var(--club-heading); margin: 0 0 var(--club-space-3); display: flex; align-items: center; gap: var(--club-space-2); }
.club-ms-howto { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--club-space-3); font-size: var(--club-fs-sm); color: var(--club-text-muted); }
.club-ms-howto strong { color: var(--club-heading); }

/* -------------------------------------------------- asistente */
.club-ms-wizard { padding: clamp(1.25rem, .9rem + 1.6vw, 2.25rem); }
.club-ms-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.club-ms-wizard.is-enhanced .club-ms-step + .club-ms-step { margin-top: 0; }
.club-ms-wizard:not(.is-enhanced) .club-ms-step + .club-ms-step { margin-top: var(--club-space-9); padding-top: var(--club-space-7); border-top: 1px solid var(--club-border); }
.club-ms-wizard:not(.is-enhanced) [data-prev], .club-ms-wizard:not(.is-enhanced) [data-next], .club-ms-wizard:not(.is-enhanced) .club-ms-progress { display: none; }
.club-ms-step__title { display: flex; align-items: center; gap: var(--club-space-3); font-size: var(--club-fs-xl); font-weight: 700; color: var(--club-heading); letter-spacing: var(--club-tracking-tight); line-height: var(--club-lh-snug); margin: 0 0 var(--club-space-5); padding: 0; outline: none; }
.club-ms-step__num { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--club-cyan-50); color: var(--club-primary); font-size: var(--club-fs-sm); font-weight: 700; }
.club-ms-step__lead { margin: calc(var(--club-space-3) * -1) 0 var(--club-space-5); font-size: var(--club-fs-sm); }

.club-ms-progress { margin: 0 0 var(--club-space-7); }
.club-ms-steps { list-style: none; margin: 0 0 var(--club-space-3); padding: 0; display: none; justify-content: space-between; gap: var(--club-space-2); }
.club-ms-steps li { display: flex; align-items: center; gap: var(--club-space-2); font-size: var(--club-fs-sm); color: var(--club-text-subtle); }
.club-ms-steps__n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--club-border-strong); font-size: var(--club-fs-xs); font-weight: 700; background: #fff; }
.club-ms-steps li.is-current { color: var(--club-heading); font-weight: 600; }
.club-ms-steps li.is-current .club-ms-steps__n { border-color: var(--club-primary); background: var(--club-primary); color: #fff; }
.club-ms-steps li.is-done .club-ms-steps__n { border-color: var(--club-primary); color: var(--club-primary); background: var(--club-cyan-50); }
.club-ms-progress__bar { height: 4px; border-radius: 4px; background: var(--club-gray-100); overflow: hidden; }
.club-ms-progress__bar span { display: block; height: 100%; width: 20%; background: linear-gradient(90deg, var(--club-primary), var(--club-accent)); transition: width .3s var(--club-ease); }
.club-ms-progress__text { margin: var(--club-space-2) 0 0; font-size: var(--club-fs-xs); font-weight: 600; color: var(--club-text-muted); text-transform: uppercase; letter-spacing: .06em; }
@media (min-width: 720px) {
  .club-ms-steps { display: flex; }
  .club-ms-progress__text { display: none; }
}

/* tarjetas de elección (tipo) */
.club-ms-choices { display: grid; gap: var(--club-space-4); }
@media (min-width: 640px) { .club-ms-choices { grid-template-columns: 1fr 1fr; } }
.club-ms-choice, .club-ms-plan { position: relative; display: block; cursor: pointer; }
.club-ms-choice input, .club-ms-plan input, .club-ms-period__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.club-ms-choice__card, .club-ms-plan__card {
  display: flex; flex-direction: column; gap: var(--club-space-2); height: 100%;
  padding: var(--club-space-5); border: 1.5px solid var(--club-border); border-radius: var(--club-radius-lg);
  background: #fff; transition: border-color .15s, box-shadow .15s, background .15s;
}
.club-ms-choice:hover .club-ms-choice__card, .club-ms-plan:hover .club-ms-plan__card { border-color: var(--club-gray-400); }
.club-ms-choice input:focus-visible + .club-ms-choice__card, .club-ms-plan input:focus-visible + .club-ms-plan__card { box-shadow: var(--club-ring); }
.club-ms-choice input:checked + .club-ms-choice__card, .club-ms-plan input:checked + .club-ms-plan__card { border-color: var(--club-primary); background: var(--club-cyan-50); box-shadow: 0 0 0 1px var(--club-primary); }
.club-ms-choice__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--club-radius-md); background: var(--club-cyan-50); color: var(--club-primary); margin-bottom: var(--club-space-1); }
.club-ms-choice__icon--gold { background: var(--club-gold-50); color: var(--club-gold-600); }
.club-ms-choice__icon .club-icon { width: 24px; height: 24px; }
.club-ms-choice__title { font-size: var(--club-fs-lg); font-weight: 700; color: var(--club-heading); }
.club-ms-choice__text { font-size: var(--club-fs-sm); color: var(--club-text-muted); line-height: 1.5; }
.club-ms-choice input:checked + .club-ms-choice__card::after, .club-ms-plan input:checked + .club-ms-plan__card::after {
  content: ""; position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--club-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/14px no-repeat;
}

/* periodicidad */
.club-ms-period { display: inline-flex; padding: 4px; border-radius: var(--club-radius-pill); background: var(--club-gray-100); margin: 0 0 var(--club-space-5); }
.club-ms-period__opt { position: relative; cursor: pointer; }
.club-ms-period__opt span { display: block; padding: .5rem 1.1rem; border-radius: var(--club-radius-pill); font-size: var(--club-fs-sm); font-weight: 600; color: var(--club-text-muted); min-height: 36px; line-height: 1.4; }
.club-ms-period__opt input:checked + span { background: #fff; color: var(--club-heading); box-shadow: var(--club-shadow-sm); }
.club-ms-period__opt input:focus-visible + span { box-shadow: var(--club-ring); }

/* planes */
.club-ms-plangroup + .club-ms-plangroup { margin-top: var(--club-space-6); }
.club-ms-plangroup__title { font-size: var(--club-fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--club-text-subtle); margin: 0 0 var(--club-space-3); }
.club-ms-plans { display: grid; gap: var(--club-space-4); }
@media (min-width: 640px) { .club-ms-plans { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.club-ms-plan__card { padding-right: calc(var(--club-space-5) + 24px); }
.club-ms-plan.is-featured .club-ms-plan__card { border-color: var(--club-cyan-200); }
.club-ms-plan__flag { align-self: flex-start; font-size: var(--club-fs-xs); font-weight: 700; color: var(--club-primary); background: var(--club-cyan-50); border: 1px solid var(--club-cyan-100); border-radius: var(--club-radius-pill); padding: 2px 10px; }
.club-ms-plan__name { font-size: var(--club-fs-lg); font-weight: 700; color: var(--club-heading); }
.club-ms-plan__price { font-size: var(--club-fs-md); font-weight: 700; color: var(--club-primary); }
.club-ms-plan__desc { font-size: var(--club-fs-sm); color: var(--club-text-muted); }
.club-ms-plan__benefits { display: grid; gap: 6px; margin-top: var(--club-space-2); }
.club-ms-plan__benefit { display: flex; gap: 8px; align-items: flex-start; font-size: var(--club-fs-sm); color: var(--club-text); line-height: 1.4; }
.club-ms-plan__benefit .club-icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--club-success); }
.club-ms-note { display: flex; gap: var(--club-space-2); align-items: flex-start; margin-top: var(--club-space-5) !important; padding: var(--club-space-3) var(--club-space-4); background: var(--club-bg-soft); border-radius: var(--club-radius-md); font-size: var(--club-fs-sm) !important; }
.club-ms-note .club-icon { flex: none; width: 18px; height: 18px; color: var(--club-primary); margin-top: 1px; }

/* cuenta existente */
.club-ms-account { display: flex; gap: var(--club-space-4); align-items: center; padding: var(--club-space-4); border: 1px solid var(--club-border); border-radius: var(--club-radius-md); background: var(--club-bg-soft); }
.club-ms-account__name { margin: 0 0 2px; font-weight: 700; color: var(--club-heading); }

/* resumen y consentimientos */
.club-ms-summary { margin: 0 0 var(--club-space-6); display: grid; gap: 0; border: 1px solid var(--club-border); border-radius: var(--club-radius-md); overflow: hidden; }
.club-ms-summary > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--club-space-3); padding: var(--club-space-3) var(--club-space-4); }
.club-ms-summary > div + div { border-top: 1px solid var(--club-border); }
.club-ms-summary dt { font-size: var(--club-fs-sm); color: var(--club-text-muted); }
.club-ms-summary dd { margin: 0; font-size: var(--club-fs-sm); font-weight: 600; color: var(--club-heading); overflow-wrap: anywhere; }
.club-ms-consents { display: grid; gap: var(--club-space-4); }
.club-ms-consents .club-check { line-height: 1.5; }
.club-ms-consents .club-check.has-error input { outline: 2px solid var(--club-danger); outline-offset: 1px; }

/* navegación */
.club-ms-nav { display: flex; gap: var(--club-space-3); justify-content: space-between; align-items: center; margin-top: var(--club-space-8); padding-top: var(--club-space-5); border-top: 1px solid var(--club-border); }
.club-ms-nav [data-next], .club-ms-nav [data-submit] { margin-left: auto; }
.club-ms-flip { transform: rotate(180deg); }
@media (max-width: 479px) {
  .club-ms-nav { flex-direction: column-reverse; align-items: stretch; }
  .club-ms-nav .club-btn { width: 100%; margin-left: 0; }
  .club-ms-summary > div { grid-template-columns: 1fr; gap: 2px; }
}

/* -------------------------------------------------- gracias / pago */
.club-ms-result { max-width: 760px; margin: 0 auto; }
.club-ms-result__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--club-success-bg); color: var(--club-success); margin-bottom: var(--club-space-5); }
.club-ms-result__icon .club-icon { width: 32px; height: 32px; }
.club-ms-result__icon--info { background: var(--club-cyan-50); color: var(--club-primary); }
.club-ms-result h1 { font-size: var(--club-fs-3xl); margin: 0 0 var(--club-space-3); }
.club-ms-timeline { list-style: none; margin: var(--club-space-7) 0 0; padding: 0; display: grid; gap: 0; }
.club-ms-timeline li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--club-space-4); padding-bottom: var(--club-space-6); }
.club-ms-timeline li::before { content: ""; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: var(--club-border); }
.club-ms-timeline li:last-child::before { display: none; }
.club-ms-timeline__dot { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--club-gray-100); color: var(--club-text-muted); font-weight: 700; font-size: var(--club-fs-sm); }
.club-ms-timeline li.is-done .club-ms-timeline__dot { background: var(--club-success); color: #fff; }
.club-ms-timeline li.is-current .club-ms-timeline__dot { background: var(--club-primary); color: #fff; box-shadow: 0 0 0 4px var(--club-cyan-100); }
.club-ms-timeline__dot .club-icon { width: 18px; height: 18px; }
.club-ms-timeline h3 { font-size: var(--club-fs-md); margin: 6px 0 4px; }
.club-ms-timeline p { margin: 0; font-size: var(--club-fs-sm); color: var(--club-text-muted); }

.club-ms-pay { display: grid; gap: var(--club-space-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .club-ms-pay { grid-template-columns: minmax(0, 1fr) 360px; } }
.club-ms-amount { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); font-weight: 800; letter-spacing: var(--club-tracking-tight); color: var(--club-heading); line-height: 1.1; margin: var(--club-space-2) 0 var(--club-space-1); }
.club-ms-lines { margin: var(--club-space-5) 0 0; display: grid; gap: var(--club-space-2); font-size: var(--club-fs-sm); }
.club-ms-lines > div { display: flex; justify-content: space-between; gap: var(--club-space-4); }
.club-ms-lines dt { color: var(--club-text-muted); }
.club-ms-lines dd { margin: 0; font-weight: 600; color: var(--club-heading); text-align: right; }
.club-ms-lines .is-total { border-top: 1px solid var(--club-border); padding-top: var(--club-space-2); font-size: var(--club-fs-md); }
.club-ms-bank { border: 1px solid var(--club-border); border-radius: var(--club-radius-md); padding: var(--club-space-4); display: grid; gap: var(--club-space-3); }
.club-ms-bank + .club-ms-bank { margin-top: var(--club-space-3); }
.club-ms-bank__row { display: grid; gap: 2px; }
.club-ms-bank__label { font-size: var(--club-fs-xs); color: var(--club-text-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.club-ms-bank__value { display: flex; gap: var(--club-space-2); align-items: center; justify-content: space-between; font-family: var(--club-font-mono); font-size: var(--club-fs-md); color: var(--club-heading); overflow-wrap: anywhere; }
.club-ms-bank__value--text { font-family: var(--club-font); font-weight: 600; font-size: var(--club-fs-base); }
.club-ms-copy { flex: none; min-height: 32px !important; padding: .25rem .6rem !important; font-size: var(--club-fs-xs) !important; }
.club-ms-steps-pay { margin: var(--club-space-4) 0 0; padding-left: 1.2rem; display: grid; gap: var(--club-space-2); font-size: var(--club-fs-sm); color: var(--club-text-muted); }

/* -------------------------------------------------- área de miembros */
.club-ms-portal { display: grid; gap: var(--club-space-6); }
.club-ms-hero { display: grid; gap: var(--club-space-5); }
@media (min-width: 900px) { .club-ms-hero { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.club-ms-status { display: flex; flex-direction: column; gap: var(--club-space-4); }
.club-ms-status__top { display: flex; flex-wrap: wrap; gap: var(--club-space-3); align-items: center; justify-content: space-between; }
.club-ms-status__plan { font-size: var(--club-fs-2xl); font-weight: 800; color: var(--club-heading); letter-spacing: var(--club-tracking-tight); margin: 0; line-height: 1.2; }
.club-ms-status__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--club-space-4); margin: 0; }
.club-ms-status__meta dt { font-size: var(--club-fs-xs); color: var(--club-text-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.club-ms-status__meta dd { margin: 2px 0 0; font-weight: 700; color: var(--club-heading); }
.club-ms-meter { height: 8px; border-radius: 8px; background: var(--club-gray-100); overflow: hidden; }
.club-ms-meter span { display: block; height: 100%; background: var(--club-primary); border-radius: 8px; }
.club-ms-meter.is-warn span { background: var(--club-warning); }
.club-ms-actions { display: flex; flex-wrap: wrap; gap: var(--club-space-3); }
.club-ms-callout { border-left: 4px solid var(--club-primary); }
.club-ms-callout--warn { border-left-color: var(--club-warning); }
.club-ms-callout--danger { border-left-color: var(--club-danger); }
.club-ms-callout h2 { font-size: var(--club-fs-lg); margin: 0 0 var(--club-space-2); }
.club-ms-callout p { margin: 0 0 var(--club-space-4); color: var(--club-text-muted); font-size: var(--club-fs-sm); }
.club-ms-plancards { display: grid; gap: var(--club-space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.club-ms-plancards .club-ms-plan__card { padding-right: var(--club-space-5); }
.club-ms-plancards .is-current .club-ms-plan__card { border-color: var(--club-primary); background: var(--club-cyan-50); }
.club-ms-h2 { font-size: var(--club-fs-lg); font-weight: 700; color: var(--club-heading); margin: 0 0 var(--club-space-4); }
.club-ms-table td, .club-ms-table th { white-space: nowrap; }
@media (max-width: 640px) {
  .club-ms-table thead { display: none; }
  .club-ms-table, .club-ms-table tbody, .club-ms-table tr, .club-ms-table td { display: block; width: 100%; }
  .club-ms-table tr { padding: var(--club-space-3) 0; border-bottom: 1px solid var(--club-border); }
  .club-ms-table td { border: 0 !important; padding: 2px 0 !important; white-space: normal; }
  .club-ms-table td[data-label]::before { content: attr(data-label) ": "; color: var(--club-text-muted); font-size: var(--club-fs-xs); }
}
.club-ms-history { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--club-space-3); font-size: var(--club-fs-sm); }
.club-ms-history li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--club-space-3); }
.club-ms-history time { color: var(--club-text-muted); }
.club-ms-widget p { margin: 0 0 var(--club-space-3); font-size: var(--club-fs-sm); color: var(--club-text-muted); }