/**
 * Componentes Badge/Chip reutilizables
 * 
 * Estilo base consistente para todos los bloques del tema Vitruve.
 * Los badges tienen 4 colores predefinidos seleccionables en WordPress.
 * 
 * @package Vitruve_Custom_Theme
 */

/**
 * ESTILO BASE BADGE
 */
.vitruve-badge {
	display: inline-block;
	padding: var(--space-2) var(--space-4);
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: var(--font-semibold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: var(--radius-full);
	line-height: 1;
	white-space: nowrap;
}

/**
 * VARIANTES DE COLOR VITRUVE
 * Seleccionables en el editor de WordPress
 */

/* Amarillo Vitruve */
.vitruve-badge--yellow {
	background-color: rgba(255, 229, 0, 0.17);
	color: #FFE500;
}

/* Turquesa Vitruve */
.vitruve-badge--turquoise {
	background-color: rgba(0, 255, 229, 0.17);
	color: #00FFE5;
}

/* Morado Vitruve */
.vitruve-badge--purple {
	background-color: rgba(102, 68, 255, 0.17);
	color: #6644FF;
}

/* Azul Vitruve */
.vitruve-badge--blue {
	background-color: rgba(133, 196, 245, 0.17);
	color: #85C4F5;
}

/* Verde Vitruve */
.vitruve-badge--green {
	background-color: rgba(0, 200, 83, 0.17);
	color: #00C853;
}

/* Naranja Vitruve */
.vitruve-badge--orange {
	background-color: rgba(255, 152, 0, 0.17);
	color: #FF9800;
}

/**
 * VARIANTE CON BLUR
 * Para usar sobre imágenes
 */
.vitruve-badge--blur {
	backdrop-filter: blur(10px);
}

/**
 * RESPONSIVE
 */
@media (max-width: 640px) {
	.vitruve-badge {
		font-size: 10px;
		padding: var(--space-1) var(--space-3);
	}
}