/* =========================================================
   Club de Amigos con Beneficios — member-facing pages
   Shares brand fonts/colors with the public site, kept as its
   own small stylesheet since this is a forms/dashboard surface,
   not the marketing landing page.
   ========================================================= */

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../../../assets/fonts/Anton-400-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../../../assets/fonts/Archivo-400-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../../../assets/fonts/Archivo-500-latin.woff2) format('woff2');
}

:root{
  --black:#0b0b0b;
  --near-black:#141210;
  --panel:#1a1714;
  --red:#e5162c;
  --red-dark:#a80f20;
  --white:#f7f4ee;
  --cream:#efe8da;
  --gray:#9a948a;
  --gold:#d4a94c;
  --line:rgba(247,244,238,.14);
  --ff-display:'Anton', Impact, 'Arial Narrow', sans-serif;
  --ff-body:'Archivo', 'Segoe UI', Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  min-height:100vh;
  background:var(--black);
  color:var(--white);
  font-family:var(--ff-body);
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
img{ max-width:100%; display:block; }

.club-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 5vw; border-bottom:1px solid var(--line);
}
.club-brand{
  font-family:var(--ff-display); letter-spacing:.03em; font-size:20px;
  text-decoration:none; color:var(--white);
}
.club-brand span{ display:block; font-family:var(--ff-body); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }
.club-header-link{ font-size:14px; text-decoration:none; color:var(--cream); border:1px solid var(--line); padding:9px 18px; border-radius:999px; transition:border-color .2s, color .2s; }
.club-header-link:hover{ border-color:var(--gold); color:var(--gold); }

.club-wrap{ max-width:480px; margin:0 auto; padding:48px 5vw 90px; }
.club-wrap--wide{ max-width:860px; }

.club-eyebrow{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--red); font-weight:700; margin:0 0 10px; }
.club-title{ font-family:var(--ff-display); font-size:clamp(28px,6vw,40px); line-height:1.05; margin:0 0 10px; }
.club-title .accent{ color:var(--gold); }
.club-subtitle{ color:var(--gray); margin:0 0 32px; line-height:1.5; }

.club-card{
  background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:28px 24px; margin-bottom:20px;
}
.club-card h2{ font-family:var(--ff-display); font-weight:400; font-size:18px; letter-spacing:.02em; margin:0 0 18px; }
.club-card h3{ font-size:14px; text-transform:uppercase; letter-spacing:.08em; color:var(--gold); margin:28px 0 12px; }

.club-field{ margin-bottom:16px; }
.club-field label{ display:block; font-size:13px; color:var(--gray); margin-bottom:6px; }
.club-forgot-link{ display:inline-block; margin-top:8px; font-size:13px; color:var(--gray); text-decoration:none; }
.club-forgot-link:hover{ color:var(--gold); text-decoration:underline; }
.club-field input{
  width:100%; padding:12px 14px; border-radius:8px; border:1px solid var(--line);
  background:var(--near-black); color:var(--white); font:inherit; font-size:15px;
}
.club-field input:focus{ outline:none; border-color:var(--gold); }
.club-field-row{ display:flex; gap:12px; }
.club-field-row .club-field{ flex:1; }

.club-check{ display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--gray); margin-bottom:14px; line-height:1.4; }
.club-check input{ margin-top:3px; }
.club-check a{ color:var(--gold); text-decoration:underline; }

.club-btn{
  display:inline-block; width:100%; text-align:center; padding:13px 20px; border-radius:999px; border:1px solid var(--red);
  background:var(--red); color:#fff; font-weight:600; font-size:15px; cursor:pointer; transition:background .2s, border-color .2s;
}
.club-btn:hover{ background:var(--red-dark); border-color:var(--red-dark); }
.club-btn:disabled{ opacity:.6; cursor:default; }
.club-btn--outline{ background:none; border-color:var(--gold); color:var(--gold); }
.club-btn--outline:hover{ background:var(--gold); color:var(--black); }
.club-btn--sm{ width:auto; padding:9px 16px; font-size:13px; }
.club-btn--danger{ background:none; border-color:#b9354a; color:#f0a1ad; }
.club-btn--danger:hover{ background:#b9354a; color:#fff; }

.club-switch{ margin-top:20px; text-align:center; font-size:14px; color:var(--gray); }
.club-switch a{ color:var(--gold); text-decoration:none; font-weight:600; }
.club-switch a:hover{ text-decoration:underline; }

.club-error{ background:rgba(229,22,44,.12); border:1px solid rgba(229,22,44,.4); color:#ff9aa5; padding:12px 14px; border-radius:8px; font-size:14px; margin-bottom:18px; display:none; }
.club-error.is-visible{ display:block; }
.club-success{ background:rgba(212,169,76,.12); border:1px solid rgba(212,169,76,.4); color:var(--gold); padding:14px; border-radius:8px; font-size:14px; margin-bottom:18px; }

/* ---------- dashboard ---------- */
.club-balance{ text-align:center; padding:10px 0 6px; }
.club-balance-num{ font-family:var(--ff-display); font-size:clamp(44px,12vw,64px); color:var(--gold); line-height:1; }
.club-balance-label{ font-size:13px; color:var(--gray); text-transform:uppercase; letter-spacing:.1em; margin-top:6px; }
.club-pending{ text-align:center; font-size:13px; color:var(--gray); margin-top:10px; }

.club-progress-track{ height:10px; border-radius:999px; background:var(--near-black); overflow:hidden; margin:14px 0 8px; }
.club-progress-fill{ height:100%; background:linear-gradient(90deg, var(--red), var(--gold)); border-radius:999px; transition:width .4s var(--ease-out,ease); }
.club-progress-label{ font-size:13px; color:var(--gray); }

.club-rewards-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.club-reward{ border:1px solid var(--line); border-radius:12px; padding:16px; text-align:center; }
.club-reward--available{ border-color:var(--gold); }
.club-reward-coins{ font-family:var(--ff-display); font-size:22px; color:var(--gold); }
.club-reward-name{ font-size:13px; margin:6px 0 10px; }

.club-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.club-table{ width:100%; min-width:420px; border-collapse:collapse; font-size:13px; }
.club-table th{ text-align:left; color:var(--gray); font-weight:600; text-transform:uppercase; font-size:11px; letter-spacing:.06em; padding:8px 6px; border-bottom:1px solid var(--line); white-space:nowrap; }
.club-table td{ padding:10px 6px; border-bottom:1px solid var(--line); white-space:nowrap; }
.club-table td:nth-child(2){ white-space:normal; }
.club-table tr:last-child td{ border-bottom:none; }

/* Below card width, a wide multi-column table never really fits - stack
   each row into a small label/value card instead of forcing a horizontal
   scrollbar. Opt-in via .club-table--stack (the "Mis datos" 2-column kv
   table already fits as a normal table and keeps the plain layout). Data
   cells carry a data-label attribute (set in JS); a single-cell colspan
   row (empty state) is left exactly as-is. */
@media (max-width:560px){
  .club-table--stack{ min-width:0; }
  .club-table--stack thead{ display:none; }
  .club-table--stack tr{ display:block; padding:10px 0; border-bottom:1px solid var(--line); }
  .club-table--stack tr:last-child{ border-bottom:none; }
  .club-table--stack td{
    display:flex; justify-content:space-between; align-items:center; gap:12px;
    padding:4px 0; border-bottom:none; white-space:normal; text-align:right;
  }
  .club-table--stack td::before{
    content:attr(data-label); color:var(--gray); font-size:11px; text-transform:uppercase;
    letter-spacing:.06em; text-align:left; flex-shrink:0;
  }
  .club-table--stack td:empty{ display:none; }
  .club-table--stack td[colspan]{ display:block; text-align:left; padding:0; }
  .club-table--stack td[colspan]::before{ content:none; }
}

/* Simple 2-column label/value tables ("Mis datos") never need the wide
   multi-column data table's min-width - they just need the value column
   to wrap, including breaking long unbroken strings like an email
   address, so it never spills past the card edge. */
.club-table--kv{ min-width:0; table-layout:fixed; }
.club-table--kv td:first-child{ width:38%; color:var(--gray); white-space:normal; }
.club-table--kv td:nth-child(2){ overflow-wrap:anywhere; }

.club-badge{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:600; }
.club-badge--pending{ background:rgba(212,169,76,.16); color:var(--gold); }
.club-badge--confirmed{ background:rgba(60,170,100,.16); color:#7fd79a; }
.club-badge--cancelled{ background:rgba(154,148,138,.16); color:var(--gray); }

.club-qr-note{ font-size:12px; color:var(--gray); background:var(--near-black); border:1px dashed var(--line); border-radius:10px; padding:12px 14px; margin-top:6px; }

.club-toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%,16px); background:var(--near-black); color:var(--white);
  border:1px solid var(--line); padding:12px 20px; border-radius:999px; font-size:14px; opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; z-index:999;
}
.club-toast--show{ opacity:1; transform:translate(-50%,0); }
.club-toast--error{ border-color:rgba(229,22,44,.5); color:#ff9aa5; }

@media (max-width:480px){
  .club-field-row{ flex-direction:column; gap:0; }
}

.club-rules-btn{ margin-top:22px; }
a.club-btn{ text-decoration:none; }

.club-field input[type="date"]{ color-scheme:dark; }
.club-field input[type="date"]::-webkit-calendar-picker-indicator{ cursor:pointer; opacity:1; }