/* ==========================================================================
   Promotional badges ("reclamos")
   Etiquetas adicionales que acompañan al status. Reutilizan .diamond-dec
   (mismo tamaño, padding y radius que el status) y solo cambian color +
   animación según la variante. No se altera el status original.
   ========================================================================== */

:root {
	--badge-urgent: #C0392B;        /* rojo elegante */
	--badge-urgent-glow: rgba(192, 57, 43, 0.45);
	--badge-new: #2E7D5B;           /* verde */
	--badge-featured: var(--secondary); /* dorado de marca */
	--badge-exclusive-bg: var(--primary);
}

/* Contenedor: status (izq.) + reclamos (a su derecha), en fila y con wrap. */
.status-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

/* Base de los reclamos. La forma (padding/radius/font) la aporta .diamond-dec.
   Aquí solo garantizamos que el badge sea autónomo si se usara sin enlace. */
.promo-badge {
	cursor: default;
	will-change: transform;
}

/* --------------------------------------------------------------------------
   Urgente — rojo + pulso (latido). Reclamo de escasez/prisa.
   -------------------------------------------------------------------------- */
.promo-badge--urgent {
	background-color: var(--badge-urgent) !important;
	color: var(--white);
	animation: promo-pulse 1.6s ease-in-out infinite;
}
.promo-badge--urgent::before {
	background-color: rgba(255, 255, 255, 0.85) !important;
}

@keyframes promo-pulse {
	0%, 100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 var(--badge-urgent-glow);
	}
	50% {
		transform: scale(1.04);
		box-shadow: 0 0 0 0.5rem rgba(192, 57, 43, 0);
	}
}

/* --------------------------------------------------------------------------
   Destacado — dorado + brillo que recorre. Reclamo de oferta.
   -------------------------------------------------------------------------- */
.promo-badge--featured {
	background-color: var(--badge-featured) !important;
	color: var(--white);
	position: relative;
	overflow: hidden;
}
.promo-badge--featured::before {
	background-color: var(--white) !important;
}
.promo-badge--featured::after {
	content: '';
	position: absolute;
	top: 0;
	left: -150%;
	width: 75%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	transform: skewX(-20deg);
	animation: promo-shine 3.5s ease-in-out infinite;
}

@keyframes promo-shine {
	0%        { left: -150%; }
	60%, 100% { left: 150%; }
}

/* --------------------------------------------------------------------------
   Novedad — verde + entrada suave (fade-in, una sola vez).
   -------------------------------------------------------------------------- */
.promo-badge--new {
	background-color: var(--badge-new) !important;
	color: var(--white);
	animation: promo-fade-in 0.7s ease-out both;
}
.promo-badge--new::before {
	background-color: rgba(255, 255, 255, 0.85) !important;
}

@keyframes promo-fade-in {
	from { opacity: 0; transform: translateY(-0.4rem); }
	to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Neutro — gris sobrio, sin animación. Idéntico en tono al status.
   -------------------------------------------------------------------------- */
.promo-badge--neutral {
	background-color: var(--lightgray) !important;
	color: var(--primary);
}
.promo-badge--neutral::before {
	background-color: var(--secondary) !important;
}

/* --------------------------------------------------------------------------
   Exclusivo (WOW) — borde dorado giratorio + halo pulsante. Reclamo premium.
   El borde se anima vía @property; si el navegador no lo soporta, el gradiente
   queda estático (degradación elegante) y el halo sigue animando.
   -------------------------------------------------------------------------- */
@property --promo-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

.promo-badge--exclusive {
	background-color: var(--badge-exclusive-bg) !important;
	color: var(--white);
	position: relative;
	z-index: 0;
	box-shadow: 0 0 0.7rem rgba(202, 149, 0, 0.4);
	animation: promo-glow 2.8s ease-in-out infinite;
}
.promo-badge--exclusive::before {
	background-color: var(--secondary) !important;
}
.promo-badge--exclusive::after {
	content: '';
	position: absolute;
	inset: 0px;
	border-radius: inherit;
	z-index: -1;
	background: conic-gradient(
		from var(--promo-angle),
		var(--secondary),
		#fff3cf,
		var(--secondary),
		#9c7400,
		var(--secondary)
	);
	animation: promo-rotate 3.5s linear infinite;
}

@keyframes promo-rotate {
	to { --promo-angle: 360deg; }
}
@keyframes promo-glow {
	0%, 100% { box-shadow: 0 0 0.7rem rgba(202, 149, 0, 0.35); }
	50%      { box-shadow: 0 0 1.3rem rgba(202, 149, 0, 0.65); }
}

/* --------------------------------------------------------------------------
   Accesibilidad: respetar reduced-motion (además del modo a11y del tema).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.promo-badge,
	.promo-badge::after {
		animation: none !important;
	}
	.promo-badge--exclusive {
		box-shadow: 0 0 0.7rem rgba(202, 149, 0, 0.4);
	}
}