/* ============================================================
   COMPONENTS — Badges, utilidades y componentes reutilizables
   ============================================================ */

/* ── Badges cupones ── */
.badge-cupones {
  display: inline-flex;
  align-items: center;
  background: rgba(186,157,121,.1);
  color: var(--bb-bronze-dark);
  font-weight: 700;
  font-size: .8rem;
  padding: .22rem .65rem;
  border-radius: 50px;
  border: 1px solid rgba(186,157,121,.18);
}

/* ── Badge ganador ── */
.badge-ganador {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: rgba(186,157,121,.14);
  color: var(--bb-bronze-darker);
  font-weight: 700;
  font-size: .75rem;
  padding: .25rem .75rem;
  border-radius: 50px;
  border: 1px solid rgba(186,157,121,.25);
}

/* ── Badge participando ── */
.badge-participando {
  font-size: .75rem;
  color: var(--text-muted);
  font-weight: 400;
}

/* ── Badge ausente ── */
.badge-ausente {
  font-size: .75rem;
  color: rgba(200,80,80,.8);
  font-weight: 500;
}
.es-ausente td { opacity: .55; }

/* ── Badge posición premio ── */
.badge-posicion {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .75rem;
  flex-shrink: 0;
}

.badge-posicion.oro {
  background: rgba(212,184,96,.15);
  color: #8a6a00;
  border: 1px solid rgba(212,184,96,.3);
}

.badge-posicion.plata {
  background: rgba(180,180,190,.15);
  color: #5a5a70;
  border: 1px solid rgba(180,180,190,.3);
}

.badge-posicion.bronce {
  background: rgba(186,157,121,.15);
  color: var(--bb-bronze-darker);
  border: 1px solid rgba(186,157,121,.3);
}

.badge-posicion.normal {
  background: var(--border-light);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* ── Badge estado sorteo ── */
.badge-estado {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  font-weight: 600;
  padding: .22rem .75rem;
  border-radius: 50px;
}

.badge-estado.pendiente {
  background: rgba(176,122,48,.1);
  color: var(--warning);
  border: 1px solid rgba(176,122,48,.2);
}

.badge-estado.en-proceso {
  background: rgba(60,100,160,.1);
  color: #3c64a0;
  border: 1px solid rgba(60,100,160,.2);
}

.badge-estado.finalizado {
  background: rgba(90,138,90,.1);
  color: var(--success);
  border: 1px solid rgba(90,138,90,.2);
}

/* ── Dot indicador ── */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.status-dot.live {
  background: #e05050;
  box-shadow: 0 0 0 3px rgba(224,80,80,.2);
  animation: pulseDot 1.5s infinite;
}

@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 2px rgba(224,80,80,.2); }
  50%       { box-shadow: 0 0 0 5px rgba(224,80,80,.08); }
}

/* ── Texto helpers ── */
.text-bronze    { color: var(--bb-bronze); }
.text-bronze-dk { color: var(--bb-bronze-dark); }
.text-muted-bb  { color: var(--text-muted); }

/* ── Empty state ── */
.empty-state {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--text-muted);
}

.empty-state i {
  font-size: 2.5rem;
  margin-bottom: .8rem;
  opacity: .4;
  display: block;
}

.empty-state p {
  font-size: .9rem;
}

/* ── Utilidad: separador fino ── */
.divider {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: 1.2rem 0;
}