{{-- Etiqueta (badge) del kit ui-ctc. variante: neutro | acento | exito | peligro | aviso | info.
     Con color="#hex" se pinta con el color dado (p. ej. el color de un status configurado por cliente). --}}
@props(['variante' => 'neutro', 'color' => null])
@php
    $variantes = [
        'neutro'  => 'bg-[var(--superficie-2)] text-[var(--texto)]',
        'acento'  => 'bg-[var(--acento-suave)] text-[var(--acento-texto)]',
        'exito'   => 'bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300',
        'peligro' => 'bg-rose-50 text-rose-700 dark:bg-rose-500/10 dark:text-rose-300',
        'aviso'   => 'bg-amber-50 text-amber-700 dark:bg-amber-500/10 dark:text-amber-300',
        'info'    => 'bg-sky-50 text-sky-700 dark:bg-sky-500/10 dark:text-sky-300',
    ];
@endphp
<span {{ $attributes->merge(['class' => 'inline-flex items-center gap-1 whitespace-nowrap rounded-md px-2 py-[3px] text-[12px] font-semibold leading-tight ' . ($color ? 'text-[var(--texto)]' : $variantes[$variante])]) }}
      @if ($color) style="background-color: color-mix(in srgb, {{ $color }} 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, {{ $color }} 40%, transparent);" @endif>{{ $slot }}</span>