{{-- Base de los diálogos (layout.md §6.5): teleport al body, z-[60], cierre con Escape y con clic en el fondo.
     Con wire:model se enlaza a una propiedad booleana del componente Livewire. --}}
@props(['id' => null, 'maxWidth' => '2xl'])
@php
    $id = $id ?? md5($attributes->wire('model'));
    $ancho = [
        'sm' => 'sm:max-w-sm', 'md' => 'sm:max-w-md', 'lg' => 'sm:max-w-lg',
        'xl' => 'sm:max-w-xl', '2xl' => 'sm:max-w-2xl', '3xl' => 'sm:max-w-3xl',
    ][$maxWidth] ?? 'sm:max-w-2xl';
@endphp
<div x-data="{ show: @entangle($attributes->wire('model')) }"
     x-on:keydown.escape.window="show = false"
     x-show="show" x-cloak id="{{ $id }}">
    <template x-teleport="body">
        <div x-show="show" class="fixed inset-0 z-[60] flex items-start justify-center overflow-y-auto px-4 py-10 sm:items-center"
             role="dialog" aria-modal="true">
            <div x-show="show" x-transition.opacity class="fixed inset-0 bg-black/40" x-on:click="show = false"></div>
            <div x-show="show" x-transition
                 class="relative w-full {{ $ancho }} overflow-hidden rounded-2xl border border-[var(--borde)] bg-[var(--superficie)] shadow-[var(--sombra-panel)]">
                {{ $slot }}
            </div>
        </div>
    </template>
</div>