/* ================================================================
   IO Codex — portal.css
   Panel de Usuario · mismo sistema de diseño que el sitio principal
================================================================ */

/* ── 0. Variables ────────────────────────────────────────────────── */

:root {
  --bg:         #040b0a;
  --bg-2:       #061311;
  --panel:      #071613;
  --panel-2:    #0b1e1a;
  --line:       rgba(15,224,192,.14);
  --line-gold:  rgba(212,175,90,.30);
  --teal:       #11e2c2;
  --teal-soft:  #2af5d6;
  --teal-deep:  #0a5a4e;
  --gold:       #d4af5a;
  --gold-light: #f3dd99;
  --gold-deep:  #8a6a2a;
  --text:       #e9f5f1;
  --muted:      #74948c;
  --red:        #ff4466;
  --mono:       'IBM Plex Mono', monospace;
  --sans:       'Outfit', sans-serif;
  --serif:      'Cinzel', serif;
  --radius:     8px;
  --t:          0.2s ease;
  --nav-h:      60px;
  --glow:       0 0 22px rgba(17,226,194,.18);
}

/* ── 1. Reset & Base ─────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background:  var(--bg);
  color:       var(--text);
  font-family: var(--sans);
  min-height:  100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a    { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }
[hidden] { display: none !important; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(17,226,194,.2); border-radius: 3px; }


/* ── 2. Shared form elements ─────────────────────────────────────── */

.pass-wrap {
  position: relative;
}

.pass-wrap input {
  padding-right: 2.8rem !important;
}

.pass-toggle {
  position:   absolute;
  right:      .7rem;
  top:        50%;
  transform:  translateY(-50%);
  background: transparent;
  border:     none;
  color:      var(--muted);
  padding:    .2rem;
  cursor:     pointer;
  transition: color var(--t);
}
.pass-toggle:hover { color: var(--teal); }

.forgot-link {
  display:    block;
  width:      100%;
  margin-top: .8rem;
  font-size:  .78rem;
}

/* ── LOGIN PAGE ──────────────────────────────────────────────────── */

/* Cancela el overlay body::before que inyecta styles.css */
body.login-page::before { display: none; }

.login-page {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  min-height:      100vh;
  padding:         1.5rem 1rem;
  background-image:
    linear-gradient(rgba(17,226,194,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,226,194,.025) 1px, transparent 1px);
  background-size: 55px 55px;
}

.login-wrap {
  position:  relative;
  z-index:   1;
  width:     100%;
  max-width: 400px;
}

.login-card {
  background:    var(--panel);
  border:        1px solid var(--line);
  border-radius: 14px;
  box-shadow:    var(--glow), 0 24px 64px rgba(0,0,0,.6);
  overflow:      hidden;
}

/* Header de la card de login */
.login-card__header {
  padding:       2rem 2rem 1.5rem;
  border-bottom: 1px solid var(--line);
  text-align:    center;
}

.login-logo {
  width:           52px;
  height:          52px;
  border:          1.5px solid var(--teal);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto 1rem;
  box-shadow:      0 0 18px rgba(17,226,194,.2);
}

.login-brand {
  font-family:     var(--serif);
  font-size:       1.05rem;
  letter-spacing:  .18em;
  color:           var(--teal);
  margin-bottom:   .3rem;
}

.login-subtitle {
  font-size:   .82rem;
  color:       var(--muted);
  letter-spacing: .06em;
}

/* Formulario */
.login-form {
  padding: 1.8rem 2rem 2rem;
}

.form-description {
  font-size:     .85rem;
  color:         var(--muted);
  margin-bottom: 1.4rem;
  line-height:   1.6;
}

.form-field {
  margin-bottom: 1.2rem;
}

.form-field label {
  display:       block;
  font-size:     .78rem;
  font-weight:   500;
  letter-spacing:.04em;
  color:         var(--muted);
  margin-bottom: .4rem;
}

.form-field input {
  width:         100%;
  background:    var(--bg-2);
  border:        1px solid var(--line);
  border-radius: var(--radius);
  color:         var(--text);
  font-family:   var(--sans);
  font-size:     .9rem;
  padding:       .65rem .9rem;
  transition:    border-color var(--t), box-shadow var(--t);
  outline:       none;
}

.form-field input:focus {
  border-color: var(--teal);
  box-shadow:   0 0 0 3px rgba(17,226,194,.12);
}

.form-field input::placeholder { color: var(--muted); opacity: .6; }

.form-error {
  font-size:     .8rem;
  color:         var(--red);
  min-height:    1.2rem;
  margin-bottom: .8rem;
}

.login-btn {
  width:          100%;
  background:     var(--teal);
  color:          var(--bg);
  border:         none;
  border-radius:  var(--radius);
  font-family:    var(--sans);
  font-size:      .82rem;
  font-weight:    600;
  letter-spacing: .1em;
  padding:        .75rem;
  transition:     background var(--t), opacity var(--t);
  cursor:         pointer;
}

.login-btn:hover:not(:disabled)  { background: var(--teal-soft); }
.login-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Estado de éxito en login */
.success-state {
  padding:    2rem;
  text-align: center;
}

.success-icon {
  width:           64px;
  height:          64px;
  border:          1.5px solid var(--teal);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto 1.2rem;
  background:      rgba(17,226,194,.06);
}

.success-state h2 {
  font-family: var(--serif);
  font-size:   1.1rem;
  color:       var(--teal);
  margin-bottom: .6rem;
}

.success-state p {
  font-size:     .85rem;
  color:         var(--muted);
  margin-bottom: 1.4rem;
  line-height:   1.7;
}

.link-btn {
  background:    transparent;
  border:        1px solid var(--line);
  border-radius: var(--radius);
  color:         var(--muted);
  font-size:     .8rem;
  padding:       .5rem 1.2rem;
  cursor:        pointer;
  transition:    border-color var(--t), color var(--t);
}
.link-btn:hover { border-color: var(--teal); color: var(--teal); }

/* Footer del login */
.login-footer {
  text-align:  center;
  margin-top:  1.2rem;
  font-size:   .8rem;
  color:       var(--muted);
}

.login-footer a,
.login-footer .link-btn {
  color:      var(--teal);
  transition: color var(--t);
  background: transparent;
  border:     none;
  padding:    0;
  font-size:  inherit;
}
.login-footer a:hover,
.login-footer .link-btn:hover { color: var(--teal-soft); border: none; }


/* ── 3. DASHBOARD ────────────────────────────────────────────────── */

/* Header fijo */
.portal-header {
  position:        fixed;
  top:             0; left: 0; right: 0;
  height:          var(--nav-h);
  background:      rgba(4,11,10,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom:   1px solid var(--line);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 2rem;
  z-index:         100;
}

.portal-header__brand {
  display:     flex;
  align-items: center;
  gap:         .55rem;
  font-family: var(--serif);
  font-size:   .9rem;
  letter-spacing: .14em;
  color:       var(--teal);
}

.portal-header__right {
  display:     flex;
  align-items: center;
  gap:         1rem;
}

.portal-header__user {
  font-size:  .82rem;
  color:      var(--muted);
  max-width:  160px;
  overflow:   hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.logout-btn {
  display:     flex;
  align-items: center;
  gap:         .35rem;
  background:  transparent;
  border:      1px solid var(--line);
  border-radius: 6px;
  color:       var(--muted);
  font-size:   .78rem;
  padding:     .35rem .75rem;
  transition:  border-color var(--t), color var(--t);
}
.logout-btn:hover { border-color: var(--teal); color: var(--teal); }

/* Main */
.portal-main {
  max-width:  860px;
  margin:     0 auto;
  padding:    calc(var(--nav-h) + 2rem) 1.5rem 4rem;
}

/* Loading */
.loading-state {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             1rem;
  padding-top:     4rem;
  color:           var(--muted);
  font-size:       .85rem;
}

.spinner {
  width:  36px;
  height: 36px;
  border: 2px solid var(--line);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Error state */
.error-state {
  text-align:  center;
  padding-top: 4rem;
  color:       var(--muted);
  font-size:   .9rem;
}

/* ── Banner: prueba vencida ──────────────────────────────────────── */

.trial-expired-banner {
  display:         flex;
  align-items:     center;
  gap:             1rem;
  background:      rgba(248,113,113,.08);
  border:          1px solid rgba(248,113,113,.3);
  border-radius:   10px;
  padding:         1rem 1.25rem;
  margin-bottom:   1.25rem;
}

.trial-expired-banner__icon {
  flex-shrink:     0;
  width:           36px;
  height:          36px;
  border-radius:   50%;
  background:      rgba(248,113,113,.15);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #f87171;
}

.trial-expired-banner__body {
  flex:            1;
  min-width:       0;
}

.trial-expired-banner__title {
  margin:          0 0 .2rem;
  font-size:       .9rem;
  font-weight:     600;
  color:           #f87171;
}

.trial-expired-banner__text {
  margin:          0;
  font-size:       .82rem;
  color:           var(--muted);
  line-height:     1.5;
}

.trial-expired-banner__btn {
  flex-shrink:     0;
  padding:         .45rem 1.1rem;
  border-radius:   6px;
  border:          1px solid rgba(17,226,194,.4);
  background:      rgba(17,226,194,.08);
  color:           var(--teal);
  font-size:       .8rem;
  font-weight:     600;
  cursor:          pointer;
  white-space:     nowrap;
  transition:      background .15s, border-color .15s;
}

.trial-expired-banner__btn:hover {
  background:      rgba(17,226,194,.16);
  border-color:    rgba(17,226,194,.65);
}

/* ── Tarjeta de perfil ───────────────────────────────────────────── */

.profile-card {
  display:       flex;
  align-items:   center;
  gap:           1.4rem;
  background:    var(--panel);
  border:        1px solid var(--line);
  border-radius: 14px;
  padding:       1.8rem 2rem;
  margin-bottom: 1.5rem;
}

.profile-card__avatar {
  width:           64px;
  height:          64px;
  min-width:       64px;
  border-radius:   50%;
  background:      linear-gradient(135deg, var(--teal-deep), var(--bg-2));
  border:          1.5px solid var(--teal);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--serif);
  font-size:       1.3rem;
  color:           var(--teal);
  letter-spacing:  .05em;
}

.profile-card__name {
  font-family:   var(--serif);
  font-size:     1.25rem;
  font-weight:   600;
  color:         var(--text);
  margin-bottom: .5rem;
}

.profile-card__badges {
  display:     flex;
  flex-wrap:   wrap;
  gap:         .5rem;
  margin-bottom: .5rem;
}

.profile-card__since {
  font-size: .78rem;
  color:     var(--muted);
}

/* ── Badges ─────────────────────────────────────────────────────── */

.badge {
  display:       inline-block;
  font-size:     .7rem;
  font-weight:   600;
  letter-spacing:.06em;
  padding:       .25rem .65rem;
  border-radius: 4px;
  border:        1px solid;
}

/* Plan badges */
.badge--plan[data-plan="trader"]  { color: var(--teal);  border-color: rgba(17,226,194,.35);  background: rgba(17,226,194,.08);  }
.badge--plan[data-plan="pro"]     { color: var(--gold);  border-color: rgba(212,175,90,.35);  background: rgba(212,175,90,.08);  }
.badge--plan[data-plan="elite"]   { color: #c084fc;      border-color: rgba(192,132,252,.35); background: rgba(192,132,252,.08); }
.badge--plan[data-plan="codexer"] { color: #f97316;      border-color: rgba(249,115,22,.35);  background: rgba(249,115,22,.08);  }
.badge--plan:not([data-plan])     { color: var(--muted); border-color: var(--line);           background: transparent;           }

/* Status badges */
.badge--active    { color: var(--teal); border-color: rgba(17,226,194,.35);  background: rgba(17,226,194,.08);  }
.badge--pending   { color: var(--gold); border-color: rgba(212,175,90,.35);  background: rgba(212,175,90,.08);  }
.badge--expired   { color: #f87171;     border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.08); }
.badge--cortesia  { color: #b36fff;     border-color: rgba(160,80,255,.35);  background: rgba(160,80,255,.08);  }
.badge--verificar { color: #f0b429;     border-color: rgba(240,180,41,.35);  background: rgba(240,180,41,.08);  }

/* ── Info section ────────────────────────────────────────────────── */

.info-section {
  background:    var(--panel);
  border:        1px solid var(--line);
  border-radius: 14px;
  padding:       1.6rem 2rem;
  margin-bottom: 1.5rem;
}

.section-title {
  font-family:   var(--serif);
  font-size:     .85rem;
  font-weight:   600;
  letter-spacing:.12em;
  color:         var(--teal);
  margin-bottom: 1.4rem;
  padding-bottom:.7rem;
  border-bottom: 1px solid var(--line);
}

.section-title-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  border-bottom:   1px solid var(--line);
  padding-bottom:  .7rem;
  margin-bottom:   1.4rem;
}
.section-title-row .section-title {
  margin-bottom:  0;
  padding-bottom: 0;
  border-bottom:  none;
}

.edit-profile-btn {
  background:    transparent;
  border:        none;
  color:         var(--muted);
  padding:       .3rem;
  cursor:        pointer;
  line-height:   0;
  border-radius: 6px;
  transition:    color var(--t), background var(--t);
}
.edit-profile-btn:hover {
  color:       var(--teal);
  background:  rgba(17,226,194,.08);
}

.renew-input {
  width:         100%;
  background:    var(--panel);
  border:        1px solid var(--line);
  border-radius: var(--radius);
  color:         var(--text);
  font-family:   var(--sans);
  font-size:     .84rem;
  padding:       .55rem .8rem;
  transition:    border-color var(--t);
}
.renew-input:focus {
  outline:      none;
  border-color: rgba(17,226,194,.4);
}
.renew-input::placeholder { color: var(--muted); }
.renew-input[type="date"]::-webkit-calendar-picker-indicator {
  filter:  invert(60%) sepia(15%) saturate(300%) hue-rotate(120deg);
  cursor:  pointer;
  opacity: .7;
}

.info-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1rem 2rem;
}

.info-item {
  display:        flex;
  flex-direction: column;
  gap:            .25rem;
}

.info-label {
  font-size:      .73rem;
  font-weight:    500;
  letter-spacing: .05em;
  color:          var(--muted);
}

.info-value {
  font-size:  .9rem;
  color:      var(--text);
  word-break: break-word;
}

.info-value.mono {
  font-family: var(--mono);
  font-size:   .82rem;
  color:       var(--teal-soft);
}

/* ── Referidos section ───────────────────────────────────────────── */

.referral-section {
  background:    var(--panel);
  border:        1px solid var(--line);
  border-radius: 14px;
  padding:       1.6rem 2rem;
  margin-bottom: 1.5rem;
}

.referral-stats {
  display:       flex;
  gap:           1rem;
  margin-bottom: 1.4rem;
}

.stat-card {
  background:    var(--panel-2);
  border:        1px solid var(--line);
  border-radius: 10px;
  padding:       1rem 1.5rem;
  display:       flex;
  flex-direction:column;
  align-items:   center;
  min-width:     120px;
}

.stat-card--highlight {
  border-color:  rgba(17,226,194,.35);
  background:    rgba(17,226,194,.06);
  flex:          1;
}

.stat-card--active {
  border-color:  rgba(17,226,194,.2);
}

.stat-card--inactive {
  border-color:  rgba(255,255,255,.06);
}
.stat-card--inactive .stat-value {
  color: var(--muted);
}

.stat-value {
  font-family: var(--mono);
  font-size:   2rem;
  font-weight: 500;
  color:       var(--teal);
  line-height: 1;
  margin-bottom: .3rem;
}

.stat-label {
  font-size:   .72rem;
  color:       var(--muted);
  text-align:  center;
}

/* Link card */
.referral-link-card {
  background:    var(--bg-2);
  border:        1px solid var(--line);
  border-radius: 10px;
  padding:       1rem 1.2rem;
  margin-bottom: 1.4rem;
}

.referral-link-label {
  font-size:     .73rem;
  color:         var(--muted);
  margin-bottom: .5rem;
  font-weight:   500;
  letter-spacing:.04em;
}

.referral-link-row {
  display:     flex;
  align-items: center;
  gap:         .8rem;
  flex-wrap:   wrap;
}

.referral-link-url {
  font-family: var(--mono);
  font-size:   .78rem;
  color:       var(--teal);
  word-break:  break-all;
  flex:        1;
}

.copy-btn {
  display:       flex;
  align-items:   center;
  gap:           .35rem;
  background:    transparent;
  border:        1px solid var(--teal);
  border-radius: 6px;
  color:         var(--teal);
  font-size:     .75rem;
  padding:       .35rem .8rem;
  white-space:   nowrap;
  transition:    background var(--t), color var(--t);
  flex-shrink:   0;
}
.copy-btn:hover { background: rgba(17,226,194,.1); }

/* Dropdown de referidos */
.referral-dropdown {
  margin-top: 1rem;
}

.referral-dropdown-toggle {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  cursor:          pointer;
  padding:         .65rem 0;
  font-size:       .83rem;
  font-weight:     500;
  color:           var(--text);
  list-style:      none;
  border-bottom:   1px solid var(--line);
  user-select:     none;
}

.referral-dropdown-toggle::-webkit-details-marker { display: none; }
.referral-dropdown-toggle::marker               { display: none; }

.referral-dropdown-chevron {
  color:      var(--muted);
  flex-shrink: 0;
  transition: transform .2s ease;
}

.referral-dropdown[open] .referral-dropdown-chevron {
  transform: rotate(180deg);
}

/* Tabla de referidos */
.referral-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       .83rem;
  margin-top:      .5rem;
}

.referral-table th {
  text-align:     left;
  font-size:      .72rem;
  font-weight:    500;
  letter-spacing: .05em;
  color:          var(--muted);
  padding:        .5rem .6rem;
  border-bottom:  1px solid var(--line);
}

.referral-table td {
  padding:        .7rem .6rem;
  border-bottom:  1px solid rgba(15,224,192,.07);
  color:          var(--text);
  vertical-align: middle;
}

.referral-table tr:last-child td { border-bottom: none; }

.referral-table td.mono {
  font-family: var(--mono);
  font-size:   .75rem;
  color:       var(--muted);
}

.referral-status {
  display:       inline-block;
  padding:       .18rem .55rem;
  border-radius: 4px;
  font-size:     .7rem;
  font-weight:   600;
  letter-spacing:.02em;
}

.referral-status--activo {
  background: rgba(17,226,194,.12);
  color:      var(--teal);
}

.referral-status--inactivo {
  background: rgba(255,255,255,.05);
  color:      var(--muted);
}

.referral-status--pagado {
  background: rgba(255,215,0,.12);
  color:      #e6c619;
}

.comm-hist-title {
  font-size:     .8rem;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:         var(--muted);
  margin:        0 0 .8rem;
}

.comm-hist-table td,
.comm-hist-table th { font-size: .82rem; }

.comm-hist-txid {
  font-family: monospace;
  font-size:   .75rem;
  color:       var(--muted);
  max-width:   180px;
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comm-hist-txid--none { color: rgba(255,255,255,.2); }

.commission-pending {
  font-size:  .72rem;
  color:      var(--muted);
  font-style: italic;
}

/* ── Referral Gate ───────────────────────────────────────────────── */

.referral-gate {
  padding:    2rem 1.8rem 2.4rem;
  max-width:  680px;
}

.gate-intro {
  margin-bottom: 2rem;
}

.gate-greeting {
  font-size:     1.05rem;
  font-weight:   600;
  color:         var(--teal);
  margin-bottom: .6rem;
}

.gate-text {
  font-size:   .88rem;
  color:       var(--muted);
  line-height: 1.65;
  margin-top:  .55rem;
}

.gate-section-title {
  font-size:     .72rem;
  font-weight:   600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:         var(--gold);
  margin-bottom: .9rem;
}

.gate-fields {
  display:        flex;
  flex-direction: column;
  gap:            .1rem;
}

.gate-fields-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   0 1rem;
}

.gate-req {
  color: var(--red);
  margin-left: .2rem;
}

.gate-checks {
  display:        flex;
  flex-direction: column;
  gap:            .75rem;
  margin:         1.4rem 0 0;
}

.gate-check-label {
  display:     flex;
  align-items: flex-start;
  gap:         .6rem;
  font-size:   .87rem;
  color:       var(--text);
  cursor:      pointer;
  line-height: 1.5;
}

.gate-check-label input[type="checkbox"] {
  margin-top:  .2rem;
  accent-color: var(--teal);
  flex-shrink: 0;
  width:  16px;
  height: 16px;
  cursor: pointer;
}

.gate-check-label input[type="checkbox"]:disabled {
  opacity: .4;
  cursor:  not-allowed;
}

.gate-link {
  color:           var(--teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gate-confirmation {
  margin:        1.6rem 0 1.2rem;
  padding:       1.4rem 1.6rem;
  background:    var(--panel-2);
  border:        1px solid var(--line);
  border-radius: var(--radius);
}

.gate-confirmation__title {
  font-size:     .95rem;
  font-weight:   600;
  color:         var(--teal);
  margin-bottom: .8rem;
}

.gate-submit-btn {
  display:          block;
  width:            100%;
  padding:          .85rem 1.4rem;
  background:       var(--teal);
  color:            #041a17;
  font-size:        .88rem;
  font-weight:      700;
  letter-spacing:   .06em;
  text-transform:   uppercase;
  border:           none;
  border-radius:    var(--radius);
  cursor:           pointer;
  transition:       background var(--t), opacity var(--t);
  margin-top:       .4rem;
}

.gate-submit-btn:hover  { background: var(--teal-soft); }
.gate-submit-btn:disabled { opacity: .5; cursor: not-allowed; }

.gate-error {
  font-size:   .83rem;
  color:       var(--red);
  margin-top:  .7rem;
}

.gate-req-opt {
  font-size:  .75rem;
  color:      var(--muted);
  font-weight: 400;
}

.gate-select {
  width:            100%;
  padding:          .55rem .85rem;
  background:       var(--panel-2);
  border:           1px solid var(--line);
  border-radius:    6px;
  color:            var(--text);
  font-size:        .9rem;
  font-family:      inherit;
  cursor:           pointer;
  transition:       border-color var(--t);
}
.gate-select:focus {
  outline:      none;
  border-color: var(--teal);
}

.membership-commission-msg {
  font-size:   .82rem;
  color:       var(--muted);
  margin-bottom: .75rem;
  line-height: 1.5;
}

.commission-info-block {
  background:    var(--panel-2);
  border:        1px solid var(--line);
  border-radius: var(--radius);
  padding:       1rem 1.2rem;
  margin-bottom: 1rem;
}
.commission-info-row {
  display:       flex;
  flex-direction: column;
  gap:           .3rem;
}
.commission-info-row + .commission-info-row {
  margin-top:  .75rem;
  padding-top: .75rem;
  border-top:  1px solid var(--line);
}
.commission-info-label {
  font-size:      .7rem;
  font-weight:    600;
  color:          var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.commission-info-val {
  font-size:   1rem;
  font-weight: 600;
  color:       var(--text);
}
.commission-info-val--active { color: var(--teal); }
.commission-pct-sub {
  font-size:   .75em;
  font-weight: 400;
  color:       var(--muted);
  margin-left: .25em;
}

.commission-progress-bar-wrap {
  width:         100%;
  background:    var(--line);
  border-radius: 4px;
  height:        6px;
  overflow:      hidden;
  margin-top:    .5rem;
}
.commission-progress-bar {
  height:        6px;
  border-radius: 4px;
  background:    #e88c14;
  transition:    width .4s;
  width:         0%;
}
.commission-progress-bar--done { background: var(--teal); }
.commission-progress-caption {
  margin-top: .35rem;
  font-size:  .8rem;
  color:      var(--muted);
}
.commission-progress-caption--ok {
  color:       var(--teal);
  font-weight: 600;
}
.commission-days-msg {
  margin:      .6rem 0 0;
  font-size:   .78rem;
  font-weight: 600;
  color:       var(--teal);
  opacity:     .85;
}

.freq-switch-row {
  display:     flex;
  align-items: center;
  gap:         .75rem;
  flex-wrap:   wrap;
  margin-top:  1rem;
}
.freq-switch-label {
  font-size:   .82rem;
  color:       var(--muted);
  white-space: nowrap;
}
.freq-switch-btns {
  display:       flex;
  border:        1px solid var(--border);
  border-radius: 6px;
  overflow:      hidden;
}
.freq-btn {
  padding:    .38rem .9rem;
  font-size:  .8rem;
  background: transparent;
  border:     none;
  color:      var(--muted);
  cursor:     pointer;
  transition: background .15s, color .15s;
}
.freq-btn:not(:first-child) { border-left: 1px solid var(--border); }
.freq-btn--active {
  background:  var(--teal);
  color:       #000;
  font-weight: 600;
}
.freq-btn:hover:not(.freq-btn--active) { background: rgba(10,122,102,.08); }

.request-commission-btn {
  display:          inline-block;
  padding:          .7rem 1.5rem;
  background:       transparent;
  border:           1.5px solid var(--teal);
  border-radius:    6px;
  color:            var(--teal);
  font-size:        .9rem;
  font-weight:      600;
  letter-spacing:   .04em;
  cursor:           pointer;
  transition:       background var(--t), color var(--t);
  margin-top:       1rem;
  margin-bottom:    .5rem;
}
.request-commission-btn:hover  { background: var(--teal); color: #000; }
.request-commission-btn:disabled { opacity: .5; cursor: not-allowed; }
.request-commission-btn--confirm {
  background:   var(--teal);
  color:        #000;
  border-color: var(--teal);
}
.request-commission-btn--confirm:hover { background: #00c49a; }

.request-commission-cancel {
  display:        block;
  margin-top:     .5rem;
  font-size:      .8rem;
  color:          var(--muted);
  background:     none;
  border:         none;
  cursor:         pointer;
  text-decoration: underline;
  padding:        0;
}
.request-commission-cancel:hover { color: var(--text); }

.request-commission-msg {
  font-size:   .85rem;
  margin-top:  .4rem;
}
.request-commission-msg--ok  { color: var(--teal); }
.request-commission-msg--err { color: var(--red); }

@media (max-width: 520px) {
  .gate-fields-row {
    grid-template-columns: 1fr;
  }
  .referral-gate {
    padding: 1.4rem 1rem 2rem;
  }
}

.muted-text {
  font-size:  .83rem;
  color:      var(--muted);
  padding:    .5rem 0;
}


/* ── Set password card (recovery flow) ──────────────────────────── */

.set-password-card {
  max-width:     420px;
  margin:        0 auto;
  background:    var(--panel);
  border:        1px solid var(--line);
  border-radius: 14px;
  padding:       2.4rem 2rem;
  box-shadow:    var(--glow);
}

.set-password-title {
  font-family:   var(--serif);
  font-size:     1.1rem;
  color:         var(--teal);
  margin-bottom: .6rem;
}

.set-password-desc {
  font-size:     .84rem;
  color:         var(--muted);
  margin-bottom: 1.6rem;
  line-height:   1.6;
}

/* ── Dashboard Tabs ──────────────────────────────────────────────── */

.dashboard-tabs {
  display:       flex;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2rem;
}

.dashboard-tab {
  background:     transparent;
  border:         none;
  border-bottom:  2px solid transparent;
  color:          var(--muted);
  font-family:    var(--sans);
  font-size:      .82rem;
  font-weight:    500;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding:        .85rem 1.4rem;
  cursor:         pointer;
  margin-bottom:  -1px;
  transition:     color var(--t), border-color var(--t);
}

.dashboard-tab:hover { color: var(--text); }

.dashboard-tab--active {
  color:               var(--teal);
  border-bottom-color: var(--teal);
}


/* ── Renovar Plan ────────────────────────────────────────────────── */

.renew-section {
  padding: 1.5rem 0;
}

.renew-open-btn {
  background:     transparent;
  border:         1px solid var(--teal);
  border-radius:  var(--radius);
  color:          var(--teal);
  font-family:    var(--sans);
  font-size:      .85rem;
  font-weight:    600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding:        .65rem 1.6rem;
  cursor:         pointer;
  transition:     background var(--t), box-shadow var(--t);
}
.renew-open-btn:hover {
  background: rgba(17,226,194,.08);
  box-shadow: 0 0 14px rgba(17,226,194,.18);
}

.renew-backdrop {
  position:        fixed;
  inset:           0;
  background:      rgba(4,11,10,.78);
  backdrop-filter: blur(3px);
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         200;
  padding:         1rem;
}

.renew-modal {
  background:    var(--panel-2);
  border:        1px solid var(--line);
  border-radius: 12px;
  width:         100%;
  max-width:     400px;
  box-shadow:    0 12px 48px rgba(0,0,0,.55), var(--glow);
  overflow:      hidden;
}

.renew-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         .9rem 1.2rem;
  border-bottom:   1px solid var(--line);
}

.renew-title {
  font-size:      .88rem;
  font-weight:    600;
  letter-spacing: .03em;
  color:          var(--text);
  flex:           1;
  text-align:     center;
}

.renew-close,
.renew-back {
  background:  transparent;
  border:      none;
  color:       var(--muted);
  padding:     .2rem;
  cursor:      pointer;
  line-height: 0;
  flex-shrink: 0;
  transition:  color var(--t);
}
.renew-close:hover,
.renew-back:hover { color: var(--text); }

.renew-body {
  padding:        1.2rem;
  display:        flex;
  flex-direction: column;
  gap:            .9rem;
}

.renew-footer {
  padding: .6rem 1.2rem 1.2rem;
  display: flex;
  justify-content: flex-end;
}

.renew-label {
  display:        block;
  font-size:      .7rem;
  font-weight:    600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--muted);
  margin-bottom:  -.2rem;
}

.renew-select {
  width:               100%;
  background:          var(--panel);
  border:              1px solid var(--line);
  border-radius:       var(--radius);
  color:               var(--text);
  font-family:         var(--sans);
  font-size:           .84rem;
  padding:             .55rem 2.2rem .55rem .8rem;
  cursor:              pointer;
  appearance:          none;
  -webkit-appearance:  none;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2374948c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right .75rem center;
  transition:          border-color var(--t);
}
.renew-select:focus { outline: none; border-color: rgba(17,226,194,.4); }
.renew-select option { background: var(--panel); }

.renew-period-toggle {
  display: flex;
  gap:     .5rem;
}

.renew-period-btn {
  flex:          1;
  background:    var(--panel);
  border:        1px solid var(--line);
  border-radius: var(--radius);
  color:         var(--muted);
  font-family:   var(--sans);
  font-size:     .82rem;
  font-weight:   500;
  padding:       .55rem;
  cursor:        pointer;
  text-align:    center;
  transition:    all var(--t);
}
.renew-period-btn:hover:not(.renew-period-btn--active) {
  color:        var(--text);
  border-color: rgba(17,226,194,.3);
}
.renew-period-btn--active {
  border-color: var(--teal);
  color:        var(--teal);
  background:   rgba(17,226,194,.06);
}

.renew-discount {
  font-style:  normal;
  font-size:   .7rem;
  font-weight: 600;
  color:       var(--teal-soft);
  margin-left: .2rem;
}
.renew-period-btn--active .renew-discount { color: var(--teal); }

.renew-price-row {
  display:       flex;
  align-items:   baseline;
  gap:           .4rem;
  padding:       .65rem .9rem;
  background:    rgba(17,226,194,.04);
  border:        1px solid rgba(17,226,194,.12);
  border-radius: var(--radius);
}

.renew-price-amount {
  font-family: var(--mono);
  font-size:   1.4rem;
  font-weight: 500;
  color:       var(--teal);
  line-height: 1;
}

.renew-price-unit {
  font-size: .78rem;
  color:     var(--muted);
}

.renew-next-btn {
  display:        inline-flex;
  align-items:    center;
  gap:            .45rem;
  background:     var(--teal);
  border:         none;
  border-radius:  var(--radius);
  color:          var(--bg);
  font-family:    var(--sans);
  font-size:      .82rem;
  font-weight:    700;
  letter-spacing: .05em;
  padding:        .6rem 1.3rem;
  cursor:         pointer;
  transition:     opacity var(--t);
}
.renew-next-btn:hover { opacity: .86; }

.renew-asset-row {
  display: flex;
  gap:     .5rem;
}

.renew-asset-btn {
  flex:          1;
  background:    var(--panel);
  border:        1px solid var(--line);
  border-radius: var(--radius);
  color:         var(--muted);
  font-family:   var(--mono);
  font-size:     .78rem;
  font-weight:   500;
  padding:       .5rem;
  cursor:        pointer;
  text-align:    center;
  transition:    all var(--t);
}
.renew-asset-btn:hover:not(.renew-asset-btn--active) {
  color:        var(--text);
  border-color: rgba(17,226,194,.3);
}
.renew-asset-btn--active {
  border-color: var(--teal);
  color:        var(--teal);
  background:   rgba(17,226,194,.06);
}

.renew-qr-wrap {
  display:         flex;
  justify-content: center;
  padding:         .25rem 0;
}

.renew-qr {
  width:         192px;
  height:        192px;
  object-fit:    contain;
  background:    #fff;
  border:        1px solid var(--line);
  border-radius: var(--radius);
  cursor:        zoom-in;
  transition:    opacity var(--t);
}
.renew-qr:hover { opacity: .88; }

/* QR Lightbox */
.qr-lightbox {
  position:        fixed;
  inset:           0;
  background:      rgba(4,11,10,.93);
  backdrop-filter: blur(5px);
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         300;
  cursor:          zoom-out;
  padding:         2rem;
}

.qr-lightbox__img {
  max-width:      min(86vw, 400px);
  max-height:     min(86vh, 400px);
  object-fit:     contain;
  background:     #fff;
  border-radius:  var(--radius);
  box-shadow:     0 0 60px rgba(0,0,0,.7);
  pointer-events: none;
}

.renew-addr-row {
  display:       flex;
  align-items:   center;
  gap:           .5rem;
  background:    rgba(17,226,194,.04);
  border:        1px solid rgba(17,226,194,.12);
  border-radius: var(--radius);
  padding:       .5rem .7rem;
}

.renew-addr {
  flex:        1;
  font-family: var(--mono);
  font-size:   .62rem;
  color:       var(--teal);
  word-break:  break-all;
  user-select: all;
}

.renew-amount-note {
  font-size:   .74rem;
  color:       var(--muted);
  text-align:  center;
  padding-top: .3rem;
  border-top:  1px solid var(--line);
}

/* "He realizado mi pago" button */
.renew-paid-btn {
  width:          100%;
  background:     transparent;
  border:         1px solid var(--teal);
  border-radius:  var(--radius);
  color:          var(--teal);
  font-family:    var(--sans);
  font-size:      .82rem;
  font-weight:    600;
  padding:        .62rem 1rem;
  cursor:         pointer;
  text-align:     center;
  transition:     background var(--t);
}
.renew-paid-btn:hover { background: rgba(17,226,194,.07); }

/* Slide 3 inputs */
.renew-input {
  width:         100%;
  background:    var(--panel);
  border:        1px solid var(--line);
  border-radius: var(--radius);
  color:         var(--text);
  font-family:   var(--sans);
  font-size:     .84rem;
  padding:       .55rem .8rem;
  transition:    border-color var(--t);
}
.renew-input::placeholder { color: var(--muted); }
.renew-input:focus        { outline: none; border-color: rgba(17,226,194,.4); }

/* File upload area */
.renew-upload {
  position:      relative;
  border:        1px dashed rgba(17,226,194,.3);
  border-radius: var(--radius);
  overflow:      hidden;
  cursor:        pointer;
  min-height:    80px;
  transition:    border-color var(--t);
}
.renew-upload:hover { border-color: rgba(17,226,194,.6); }

.renew-upload__input {
  position: absolute;
  inset:    0;
  opacity:  0;
  cursor:   pointer;
  z-index:  1;
}

.renew-upload__placeholder {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             .3rem;
  padding:         1.2rem 1rem;
  color:           var(--muted);
  font-size:       .78rem;
  pointer-events:  none;
}
.renew-upload__placeholder svg { color: var(--teal); opacity: .6; margin-bottom: .1rem; }
.renew-upload__placeholder em  { font-style: normal; font-size: .67rem; }

.renew-upload__preview {
  width:      100%;
  max-height: 180px;
  object-fit: contain;
  background: var(--bg);
  display:    block;
  padding:    .4rem;
}

.renew-proof-error {
  font-size:  .76rem;
  color:      var(--red);
  min-height: 1.1em;
  margin-top: -.3rem;
}

/* Success state */
.renew-proof-success {
  padding:        2.5rem 1.5rem 2rem;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  gap:            .85rem;
}

.renew-proof-success__icon {
  width:           48px;
  height:          48px;
  background:      rgba(17,226,194,.1);
  border:          1px solid rgba(17,226,194,.3);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--teal);
}

.renew-proof-success__title {
  font-size:   .95rem;
  font-weight: 600;
  color:       var(--teal);
}

.renew-proof-success__text {
  font-size:   .82rem;
  color:       var(--muted);
  line-height: 1.65;
  max-width:   280px;
}

.renew-proof-success__close {
  background:    transparent;
  border:        1px solid var(--line);
  border-radius: var(--radius);
  color:         var(--muted);
  font-family:   var(--sans);
  font-size:     .8rem;
  padding:       .5rem 1.3rem;
  cursor:        pointer;
  margin-top:    .4rem;
  transition:    all var(--t);
}
.renew-proof-success__close:hover { border-color: rgba(17,226,194,.3); color: var(--text); }


/* ── Historial de membresías ─────────────────────────────────────── */

.hist-section {
  padding: 0;
}

.hist-loading {
  display:        flex;
  justify-content:center;
  padding:        2.5rem 0;
}

.hist-card {
  background:    var(--panel);
  border:        1px solid var(--line);
  border-radius: var(--radius);
  padding:       .95rem 1.3rem;
  margin-bottom: .7rem;
  transition:    border-color var(--t), box-shadow var(--t);
}

.hist-card--active {
  border-color: rgba(17,226,194,.28);
  box-shadow:   0 0 0 1px rgba(17,226,194,.08) inset;
}

.hist-card__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             .5rem;
  margin-bottom:   .75rem;
}

.hist-card__left {
  display:     flex;
  align-items: center;
  gap:         .65rem;
}

.hist-card__billing {
  font-size:      .72rem;
  font-weight:    500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:          var(--muted);
}

.hist-card__body {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   .6rem 1.4rem;
}

.hist-item {
  display:        flex;
  flex-direction: column;
  gap:            .22rem;
}

.hist-label {
  font-size:      .68rem;
  font-weight:    500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color:          var(--muted);
}

.hist-value {
  font-size: .86rem;
  color:     var(--text);
}

.hist-mono {
  font-family: var(--mono);
  font-size:   .78rem;
  color:       var(--muted);
}

.hist-badge {
  display:        inline-flex;
  align-items:    center;
  font-size:      .7rem;
  font-weight:    600;
  letter-spacing: .05em;
  padding:        .25rem .72rem;
  border-radius:  4px;
  border:         1px solid;
  white-space:    nowrap;
}

.hist-badge--active {
  color:        var(--teal);
  border-color: rgba(17,226,194,.35);
  background:   rgba(17,226,194,.08);
}

.hist-badge--expired {
  color:        var(--muted);
  border-color: var(--line);
  background:   transparent;
}


/* ── 4. Responsive ───────────────────────────────────────────────── */

@media (max-width: 640px) {
  .portal-header { padding: 0 1rem; }

  .portal-header__user { display: none; }

  .portal-main { padding: calc(var(--nav-h) + 1.2rem) 1rem 3rem; }

  .profile-card {
    flex-direction: column;
    text-align:     center;
    padding:        1.4rem;
  }

  .profile-card__badges { justify-content: center; }

  .info-grid { grid-template-columns: 1fr; }

  .info-section,
  .referral-section { padding: 1.2rem; }

  /* Referidos responsive */
  .referral-stats {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   .65rem;
  }

  .stat-card {
    min-width: 0;
    padding:   .75rem 1rem;
  }

  .stat-value { font-size: 1.6rem; }

  #referralTableWrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .referral-table { font-size: .78rem; }

  .referral-table th,
  .referral-table td { padding: .5rem .45rem; }

  .request-commission-btn {
    display: block;
    width:   100%;
    text-align: center;
  }

  .referral-link-row { flex-direction: column; align-items: flex-start; }

  .dashboard-tab { padding: .7rem .85rem; font-size: .73rem; }

  .hist-section { padding: 0 .2rem; }

  .hist-card { padding: .8rem 1rem; }

  .hist-card__body { grid-template-columns: 1fr; gap: .5rem; }

  /* Renovar modal: bottom-sheet en móvil */
  .renew-backdrop {
    align-items: flex-end;
    padding:     0;
  }

  .renew-modal {
    border-radius:  14px 14px 0 0;
    max-height:     92vh;
    display:        flex;
    flex-direction: column;
  }

  .renew-slide {
    display:        flex;
    flex-direction: column;
    flex:           1;
    min-height:     0;
    overflow:       hidden;
  }

  .renew-body {
    overflow-y:                  auto;
    -webkit-overflow-scrolling:  touch;
    overscroll-behavior:         contain;
    flex:                        1;
    gap:                         .75rem;
    padding:                     1rem;
  }

  .renew-footer {
    padding:          .75rem 1rem 1.4rem;
    border-top:       1px solid var(--line);
    background:       var(--panel-2);
    flex-shrink:      0;
  }

  .renew-next-btn,
  .renew-paid-btn {
    width:            100%;
    justify-content:  center;
  }

  .renew-qr { width: 150px; height: 150px; }

  .renew-upload__preview { max-height: 130px; }

  .qr-lightbox__img {
    max-width:  92vw;
    max-height: 92vw;
  }
}

@media (max-width: 400px) {
  .login-form       { padding: 1.4rem 1.2rem 1.6rem; }
  .login-card__header { padding: 1.6rem 1.2rem 1.2rem; }
}