{{-- Botón de Cierre Administrativo (Mobile) - Solo Admin/Jefe --}}
<div x-data="{ confirmando: false }">
    <button @click="confirmando = true" type="button"
        class="px-3 py-1.5 bg-rose-600 hover:bg-rose-700 text-white rounded font-bold text-[10px] uppercase shadow-sm flex items-center gap-1 transition">
        <svg class="w-3 h-3 fill-current" 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>
    <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-5 max-w-xs w-full mx-4">
            <h3 class="font-bold text-slate-800 text-sm mb-1">Cierre Administrativo</h3>
            <p class="text-xs text-slate-500 mb-3">#{{ $solicitud->numero }}</p>
            <div class="bg-amber-50 border border-amber-200 rounded-lg p-3 mb-3 text-xs">
                <div class="text-amber-500 font-bold text-base mb-0.5">★★★★★</div>
                <p class="text-amber-800 italic">"Esta conformación fue realizada automáticamente."</p>
            </div>
            <div class="flex gap-2">
                <button @click="confirmando = false" type="button"
                    class="flex-1 py-1.5 rounded border border-slate-200 text-slate-600 text-xs font-medium hover:bg-slate-50">
                    Cancelar
                </button>
                <form method="POST" action="{{ route('ejecuciones.cerrar', $solicitud->id) }}" class="flex-1">
                    @csrf
                    <button type="submit"
                        class="w-full py-1.5 rounded bg-rose-600 hover:bg-rose-700 text-white text-xs font-bold">
                        Confirmar
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
