{{-- resources/views/error404.blade.php --}}
<x-layouts.app :title="__('Error 404')">
    <div class="min-h-[60vh] flex flex-col justify-center items-center text-center space-y-6 px-6 py-16">
        <h1 class="text-5xl font-bold text-rose-600">¡Ups! 🛑</h1>

        <p class="text-xl font-semibold text-gray-700 dark:text-gray-300">
            No deberías estar aquí... 👀
        </p>

        <p class="text-lg text-gray-600 dark:text-gray-400 max-w-xl">
            Tal vez tomaste un atajo por <span class="italic">la infrashtruktura</span> 🧱 y terminaste en un lugar
            prohibido.
        </p>

        <p class="text-gray-500 dark:text-gray-400">
            Te invitamos a regresar usando el menú de navegación lateral o el botón de abajo.
        </p>

        <a href="{{ route('dashboard') }}"
            class="inline-block mt-4 px-6 py-3 bg-violet-600 text-white font-semibold rounded-lg hover:bg-violet-700 transition">
            Volver al inicio
        </a>

        <div class="mt-10 opacity-50 text-sm">
            <em>"Esos errores en la infrashtruktura, pues afectan..." </em>
        </div>
    </div>
</x-layouts.app>