/**
 * placeholders.css — Placeholders visuales de marca.
 *
 * Se usan donde config.js no tiene una imagen real asignada todavía
 * (campo "image": null). Son intencionalmente parte del sistema visual
 * (gradiente + patrón + iniciales), no un estado de error — y llevan una
 * etiqueta discreta para identificarlos como reemplazables.
 *
 * Para reemplazar una imagen: agregar la ruta en config.js (campo "image"
 * del item correspondiente). No requiere tocar HTML/CSS/JS.
 */
.placeholder-fill {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.035) 0px,
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px,
      transparent 14px
    ),
    var(--ph-gradient, linear-gradient(160deg, var(--purple-700), var(--bg-surface)));
}

.placeholder-fill::after {
  content: attr(data-label);
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(10, 7, 16, 0.55);
  padding: 3px 8px;
  border-radius: var(--radius-xs);
}

.placeholder-fill::before {
  content: "";
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
}

/* Categorías de color reutilizando la paleta de marca */
.placeholder-gold { --ph-gradient: linear-gradient(160deg, var(--gold-600), var(--purple-900)); }
.placeholder-coral { --ph-gradient: linear-gradient(160deg, var(--cat-coral), var(--purple-900)); }
.placeholder-purple { --ph-gradient: linear-gradient(160deg, var(--cat-purple), var(--purple-950)); }
.placeholder-green { --ph-gradient: linear-gradient(160deg, var(--cat-green), var(--purple-900)); }
.placeholder-cyan { --ph-gradient: linear-gradient(160deg, var(--cat-cyan), var(--purple-900)); }
.placeholder-teal { --ph-gradient: linear-gradient(160deg, var(--cat-teal), var(--purple-900)); }
.placeholder-sport { --ph-gradient: linear-gradient(160deg, var(--purple-500), var(--purple-950)); }
.placeholder-casino { --ph-gradient: linear-gradient(150deg, var(--gold-600) -10%, var(--purple-800) 60%); }
.placeholder-sportbook { --ph-gradient: linear-gradient(150deg, var(--cat-cyan) -10%, var(--purple-900) 60%); }
.placeholder-soporte { --ph-gradient: linear-gradient(150deg, var(--cat-coral) -10%, var(--purple-900) 60%); }