/* ================================================================
   PUNTOSFAMILIA — SISTEMA DE TIERS
   Bronze (0-10k) / Silver (10k-20k) / Epico (20k-30k) / Legendario (30k+)
   Los colores de tier son constantes deliberadas, no variables del
   design system, para mantener identidad visual consistente.
   ================================================================ */

/* ---- BADGE DE TIER (emoji + label) --------------------------- */

.tier-badge {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  font-weight: var(--weight-bold);
  font-size:   var(--text-sm);
}

.tier-emoji {
  display:          inline-block;
  animation:        energyPulse 1.8s ease-in-out infinite;
  transform-origin: center;
  filter:           drop-shadow(0 0 6px currentColor);
}

/* ---- COLORES DE TEXTO POR TIER ------------------------------- */

.tier-bronze-text    { color: #E8A45A; }
.tier-silver-text    { color: #94A3B8; }
.tier-epico-text     { color: #A78BFA; }
.tier-legendario-text { color: #FCD34D; }

/* ---- BARRAS DE PROGRESO POR TIER ----------------------------- */

.progress-bar.tier-bronze {
  background: linear-gradient(90deg, #92400E, #D97706, #F59E0B);
}

.progress-bar.tier-silver {
  background: linear-gradient(90deg, #475569, #94A3B8, #CBD5E1);
}

.progress-bar.tier-epico {
  background: linear-gradient(90deg, #5B21B6, #7C3AED, #A78BFA);
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.4);
}

.progress-bar.tier-legendario {
  background: linear-gradient(90deg, #B45309, #F59E0B, #FDE047, #F59E0B, #B45309);
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
  box-shadow: 0 0 20px rgba(253, 224, 71, 0.45),
              0 0 40px rgba(245, 158, 11, 0.20);
}

/* ---- LISTA DE REGLAS DE TIERS (index.html) ------------------- */

.reglas-tier-list {
  display:       flex;
  flex-direction: column;
  gap:           var(--space-2);
  margin-top:    var(--space-4);
}

.reglas-tier-item {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-2);
  padding:         var(--space-3) var(--space-4);
  background:      var(--bg-surface-2);
  border:          1px solid var(--border-subtle);
  border-radius:   var(--radius-md);
  transition:      border-color var(--transition-fast), transform var(--transition-fast);
}

.reglas-tier-item:hover {
  border-color: var(--border-strong);
  transform:    translateX(4px);
}

.reglas-tier-detalle {
  font-size: var(--text-xs);
  color:     var(--text-muted);
}

/* ---- BADGES DE RAREZA (canjeador) --------------------------- */

.canjeador-rareza {
  display:       inline-block;
  align-self:    flex-start;
  font-size:     0.65rem;
  font-weight:   var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding:       2px 8px;
  border:        1px solid;
  border-radius: var(--radius-full);
}

.rareza-comun      { color: #94A3B8; border-color: #94A3B8; }
.rareza-rara       { color: #A78BFA; border-color: #A78BFA; }
.rareza-epica      { color: #FCD34D; border-color: #FCD34D; }
.rareza-legendaria { color: #F87171; border-color: #F87171;
  box-shadow: 0 0 8px rgba(248, 113, 113, 0.4); }