/* ═══════════════════════════════════════════════════════════════════════════
   ComeCerca — Rewards
   Piezas del programa de contribuciones. Todavía no hay economía real detrás:
   esto es la arquitectura visual sobre la que se construirá.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Perfil ───────────────────────────────────────────────────────────────── */

.reward-profile {
  display: grid;
  gap: var(--space-6);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  max-width: 720px;
}

.reward-profile__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.reward-profile__head > span:last-child { margin-left: auto; }

.reward-avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-primary-tint);
  font-size: 1.6rem;
  flex-shrink: 0;
}

.reward-profile__name { font-size: var(--text-sm); color: var(--color-ink-muted); }

.reward-profile__level {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
}

.reward-progress__bar {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-sunk);
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.reward-progress__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-secondary);
}

.reward-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-4);
}

.reward-stats dt { font-size: var(--text-xs); color: var(--color-ink-muted); }

.reward-stats dd {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
}

.reward-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Una insignia que no se tiene se enseña igual: es la que da el objetivo. */
.chip--locked { opacity: 0.5; border-style: dashed; }

/* ── Contribuciones ───────────────────────────────────────────────────────── */

.reward-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-4);
}

.reward-card {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
}

.reward-card__icon { font-size: 1.6rem; margin-bottom: var(--space-3); }
.reward-card h3 { font-size: var(--text-md); margin-bottom: var(--space-2); }
.reward-card p { font-size: var(--text-sm); color: var(--color-ink-muted); }

/* ── Niveles ──────────────────────────────────────────────────────────────── */

.reward-levels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

.reward-level {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
}

.reward-level--current {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.reward-level__icon { display: block; font-size: 1.6rem; margin-bottom: var(--space-3); }
.reward-level h3 { font-size: var(--text-md); margin-bottom: var(--space-2); }
.reward-level p { font-size: var(--text-sm); color: var(--color-ink-muted); }