{{-- Botón de Cierre Administrativo (Desktop) - Solo Admin/Jefe --}}
<div x-data="{ confirmando: false }" class="inline-flex items-center">
    <button @click="confirmando = true" type="button"
        class="btn bg-rose-600 hover:bg-rose-700 text-white rounded-md px-3 py-2 flex items-center text-sm shadow-sm transition-all duration-150"
        title="Cerrar definitivamente con conformación automática (★★★★★)">
        <svg class="w-4 h-4 mr-1.5 fill-current shrink-0" viewBox="0 0 24 24">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
        </svg>
        Cerrar
    </button>
    {{-- Mini-modal de confirmación inline --}}
    <div x-show="confirmando" x-transition
        class="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
        @click.self="confirmando = false">
        <div class="bg-white rounded-xl shadow-2xl p-6 max-w-sm w-full mx-4">
            <div class="flex items-center mb-4">
                <div class="w-10 h-10 rounded-full bg-rose-100 flex items-center justify-center mr-3 shrink-0">
                    <svg class="w-5 h-5 fill-current text-rose-600" viewBox="0 0 24 24">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
                    </svg>
                </div>
                <div>
                    <h3 class="font-bold text-slate-800 text-base">Cierre Administrativo</h3>
                    <p class="text-xs text-slate-500">#{{ $solicitud->numero }}</p>
                </div>
            </div>
            <p class="text-sm text-slate-700 mb-2">Se registrará automáticamente:</p>
            <div class="bg-amber-50 border border-amber-200 rounded-lg p-3 mb-4 text-sm">
                <div class="text-amber-600 font-bold text-lg mb-1">★★★★★</div>
                <p class="text-amber-800 italic text-xs">"Esta conformación fue realizada automáticamente."</p>
            </div>
            <p class="text-xs text-slate-500 mb-4">La solicitud pasará a estado <span class="font-semibold text-slate-700">Cerrada</span> de forma definitiva.</p>
            <div class="flex gap-2">
                <button @click="confirmando = false" type="button"
                    class="flex-1 py-2 rounded-lg border border-slate-200 text-slate-600 text-sm font-medium hover:bg-slate-50 transition">
                    Cancelar
                </button>
                <form method="POST" action="{{ route('ejecuciones.cerrar', $solicitud->id) }}" class="flex-1">
                    @csrf
                    <button type="submit"
                        class="w-full py-2 rounded-lg bg-rose-600 hover:bg-rose-700 text-white text-sm font-bold transition shadow-sm">
                        Confirmar y Cerrar
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
