{% extends "base.html" %}
{% block title %}Error 404{% endblock %}

{% block content %}
<section class="container mx-auto px-4 py-16">
  <div class="max-w-2xl mx-auto">
    <div class="card shadow-lg">
      <div class="card-h">
        <h1 class="text-3xl font-bold leading-tight">Upps… te perdiste</h1>
        <p class="text-sm mt-2" style="color: var(--muted-foreground);">
          La página solicitada no existe o fue movida.
        </p>
      </div>

      <div class="card-c">
        <div class="sep my-6"></div>

        <div class="flex flex-col gap-3">
          <a class="btn btn-primary" href="/">Volver al inicio</a>
          <a class="btn btn-outline" href="javascript:history.back()">Volver atrás</a>
        </div>

        <p class="text-xs mt-6" style="color: var(--muted-foreground);">
          Código: 404
        </p>
      </div>
    </div>
  </div>
</section>
{% endblock %}