{{-- Botón (o enlace, con href) que solo tiene ícono: siempre con etiqueta accesible (layout.md §6.7). --}}
@props(['etiqueta', 'href' => null, 'variante' => 'neutro'])
@php
    $clases = [
        'neutro'  => 'text-[var(--texto-suave)] hover:bg-[var(--nav-hover)] hover:text-[var(--texto)]',
        'acento'  => 'text-[var(--acento-texto)] hover:bg-[var(--acento-suave)]',
        'peligro' => 'text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-500/10',
    ][$variante];
    $base = "inline-flex h-8 w-8 items-center justify-center rounded-lg transition $clases focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--acento)]";
@endphp
@if ($href)
    <a href="{{ $href }}" aria-label="{{ $etiqueta }}" title="{{ $etiqueta }}" {{ $attributes->merge(['class' => $base]) }}>{{ $slot }}</a>
@else
    <button aria-label="{{ $etiqueta }}" title="{{ $etiqueta }}" {{ $attributes->merge(['type' => 'button', 'class' => $base]) }}>{{ $slot }}</button>
@endif