{{-- Tarjeta o panel (layout.md §6.1). Slots opcionales: acciones (a la derecha del título) y pie. --}}
@props(['titulo' => null, 'descripcion' => null, 'relleno' => true])
<section {{ $attributes->merge(['class' => 'overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)]']) }}>
    @if ($titulo || isset($acciones))
        <header class="flex flex-wrap items-center justify-between gap-3 border-b border-[var(--borde)] px-4 py-3">
            <div class="min-w-0">
                @if ($titulo)<h2 class="text-[15px] font-bold text-[var(--texto)]">{{ $titulo }}</h2>@endif
                @if ($descripcion)<p class="mt-0.5 text-[12px] text-[var(--texto-suave)]">{{ $descripcion }}</p>@endif
            </div>
            @isset($acciones)<div class="flex flex-wrap items-center gap-2">{{ $acciones }}</div>@endisset
        </header>
    @endif
    <div @class(['p-4' => $relleno])>{{ $slot }}</div>
    @isset($pie)
        <footer class="border-t border-[var(--borde)] bg-[var(--superficie-2)] px-4 py-3">{{ $pie }}</footer>
    @endisset
</section>