/**
 * GuHePe - Badge/Tag Components
 * =============================
 * Estilos de badges e tags
 */

/* ===== BASE TAG ===== */
.tag {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* ===== TAG VARIANTS ===== */
.tag-primary {
    background-color: rgba(168, 85, 247, 0.2);
    color: var(--color-primary);
}

.tag-secondary {
    background-color: rgba(34, 211, 238, 0.2);
    color: var(--color-secondary);
}

.tag-neutral {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
}

.tag-success {
    background-color: rgba(34, 197, 94, 0.2);
    color: var(--color-success);
}

.tag-warning {
    background-color: rgba(245, 158, 11, 0.2);
    color: var(--color-warning);
}

.tag-error {
    background-color: rgba(239, 68, 68, 0.2);
    color: var(--color-error);
}

/* ===== TAG GROUP ===== */
.tag-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

@media (max-width: 767px) {
    .tag-group {
        justify-content: center;
    }
}