{{-- Enlace con aspecto de botón. variante: primario (una por vista), secundario o peligro. --}}
@props(['variante' => 'secundario'])
@php
    $clases = [
        'primario'   => 'bg-[var(--acento)] text-[var(--acento-contraste)] hover:bg-[var(--acento-hover)] active:bg-[var(--acento-activo)]',
        'secundario' => 'border border-[var(--borde-fuerte)] bg-[var(--superficie)] text-[var(--texto)] hover:bg-[var(--nav-hover)]',
        'peligro'    => 'bg-red-600 text-white hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600',
    ][$variante];
@endphp
<a {{ $attributes->merge(['class' => "inline-flex h-9 items-center justify-center gap-2 rounded-lg px-4 text-[13px] font-semibold transition $clases focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--acento)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--superficie)]"]) }}>
    {{ $slot }}
</a>