{{-- Mensaje de estado (layout.md §6.6): exito, aviso, error o info. El color nunca va solo: siempre con texto. --}}
@props(['tipo' => 'info'])
@php
    $clases = [
        'exito' => 'bg-emerald-50 text-emerald-800 border-emerald-200 dark:bg-emerald-500/10 dark:text-emerald-300 dark:border-emerald-500/30',
        'aviso' => 'bg-amber-50 text-amber-900 border-amber-200 dark:bg-amber-500/10 dark:text-amber-300 dark:border-amber-500/30',
        'error' => 'bg-red-50 text-red-800 border-red-200 dark:bg-red-500/10 dark:text-red-300 dark:border-red-500/30',
        'info'  => 'bg-sky-50 text-sky-800 border-sky-200 dark:bg-sky-500/10 dark:text-sky-300 dark:border-sky-500/30',
    ][$tipo] ?? '';
@endphp
<div role="{{ $tipo === 'error' ? 'alert' : 'status' }}" {{ $attributes->merge(['class' => "rounded-lg border px-4 py-3 text-[13px] $clases"]) }}>
    {{ $slot }}
</div>