{{-- Modal padrão (Livewire): título, corpo, ações no rodapé.
     Uso: <x-km.modal :mostrar="$aberto" titulo="...">corpo<x-slot name="acoes">botões</x-slot></x-km.modal> --}}
@props(['mostrar' => false, 'titulo' => '', 'largura' => '560px'])
@if ($mostrar)
    <div class="fixed inset-0 z-50 flex items-center justify-center p-4" style="background:rgba(16,24,40,.5)">
        <div class="w-full bg-white rounded-lg shadow-xl overflow-hidden" style="max-width:{{ $largura }}">
            <div class="px-4 py-3 border-b">
                <p class="text-sm font-bold text-gray-700">{{ $titulo }}</p>
            </div>
            <div class="p-4" style="max-height:70vh;overflow-y:auto">{{ $slot }}</div>
            @isset($acoes)
                <div class="flex flex-wrap justify-end gap-2 px-4 py-3 border-t" style="background:#f8faf9">{{ $acoes }}</div>
            @endisset
        </div>
    </div>
@endif