{{-- Requiere contenedor con x-data="filePreviewModal()" --}}
<div x-show="open"
     x-cloak
     x-transition:enter="ease-out duration-200"
     x-transition:enter-start="opacity-0"
     x-transition:enter-end="opacity-100"
     x-transition:leave="ease-in duration-150"
     x-transition:leave-start="opacity-100"
     x-transition:leave-end="opacity-0"
     class="fixed inset-0 z-[70] flex items-center justify-center p-4 sm:p-6"
     role="dialog"
     aria-modal="true">
    <div class="absolute inset-0 bg-slate-900/70 backdrop-blur-sm" @click="closePreview()"></div>
    <div class="relative z-10 flex max-h-[90vh] w-full max-w-4xl flex-col overflow-hidden rounded-2xl border border-teal-200/80 bg-white shadow-2xl dark:border-teal-800/50 dark:bg-slate-900"
         @click.stop
         x-transition:enter="ease-out duration-200"
         x-transition:enter-start="opacity-0 scale-95"
         x-transition:enter-end="opacity-100 scale-100">
        <div class="flex items-center justify-between gap-3 border-b border-slate-200 px-4 py-3 dark:border-slate-700">
            <p class="min-w-0 truncate text-sm font-semibold text-slate-900 dark:text-slate-100" x-text="title"></p>
            <div class="flex shrink-0 items-center gap-2">
                <a :href="url" :download="title" class="inline-flex items-center gap-1 rounded-lg border border-slate-300 px-2.5 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-50 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-800">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                    {{ __('Descargar') }}
                </a>
                <button type="button" class="rounded-lg p-2 text-slate-500 hover:bg-slate-100 hover:text-slate-800 dark:hover:bg-slate-800 dark:hover:text-slate-200" @click="closePreview()" aria-label="{{ __('Cerrar') }}">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                </button>
            </div>
        </div>
        <div class="overflow-auto p-4" style="max-height: calc(90vh - 5rem);">
            <template x-if="kind === 'image'">
                <div class="flex justify-center">
                    <img :src="url" :alt="title" class="max-h-[70vh] w-auto max-w-full rounded-lg object-contain shadow-md" />
                </div>
            </template>
            <template x-if="kind === 'pdf'">
                <iframe :src="url" class="h-[72vh] w-full rounded-lg border border-slate-200 dark:border-slate-600" title="PDF"></iframe>
            </template>
            <template x-if="kind === 'video'">
                <div class="flex justify-center">
                    <video :src="url" controls class="max-h-[70vh] max-w-full rounded-lg"></video>
                </div>
            </template>
            <template x-if="kind === 'other'">
                <p class="py-8 text-center text-slate-600 dark:text-slate-400">
                    {{ __('Vista previa no disponible para este tipo de archivo.') }}
                    <a :href="url" target="_blank" class="mt-2 inline-flex items-center gap-1 font-semibold text-teal-600 hover:underline">{{ __('Abrir en pestaña nueva') }}</a>
                </p>
            </template>
        </div>
    </div>
</div>