<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
</script>

<template>
  <div class="h-full flex flex-col items-center justify-center gap-6 p-8 text-center">
    <h1 class="text-5xl font-bold text-teal-600">404</h1>
    <p class="text-lg text-gray-700">Uy, no encontramos esa página.</p>

    <button
      @click="router.push('/')"
      class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-teal-600 text-white hover:bg-teal-700 transition">
      ← Volver al inicio
    </button>
  </div>
</template>

<style scoped>
/* Estilos extra opcionales */
</style>