{% extends "base.html" %}
{% set PAGE_TITLE = "Página no encontrada" %}
{% block title %}{{ PAGE_TITLE }}{% endblock %}

{# Contenido reutilizable para inyectar en distintos bloques #}
{% set __page %}
  <main style="min-height:calc(100vh - 220px);display:flex;align-items:center;justify-content:center;padding:24px;">
    <section class="card" style="max-width:880px;width:100%;margin-inline:auto;text-align:center;padding:40px 28px;border-radius:var(--radius-lg,16px);box-shadow:var(--shadow-lg,0 10px 30px rgba(0,0,0,.15));background:var(--bg-card,#111);">
      <div style="font-weight:800;font-size:clamp(64px,12vw,128px);line-height:1;letter-spacing:-2px;">404</div>
      <h1 style="margin:8px 0 12px;font-size:clamp(20px,3.5vw,28px);font-weight:700;">Página no encontrada</h1>
      <p style="margin:0 0 24px;color:var(--text-muted,#9aa4b2);font-size:16px;">
        La URL solicitada
        <code style="padding:2px 6px;border-radius:8px;background:var(--bg,rgba(255,255,255,.06));border:1px solid var(--border,rgba(255,255,255,.12));">
          {{ request.url.path if request is defined }}
        </code>
        no existe o ha sido movida.
      </p>

      <div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap;">
        <a href="/" class="btn" style="display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;text-decoration:none;font-weight:600;border:1px solid var(--border,rgba(255,255,255,.12));background:var(--brand,#6d28d9);color:#fff;">
          <i class="fa-solid fa-house"></i> Ir al inicio
        </a>
        <a href="#" onclick="history.back();return false;" class="btn" style="display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;text-decoration:none;font-weight:600;border:1px solid var(--border,rgba(255,255,255,.12));background:transparent;color:var(--text-primary,#fff);">
          <i class="fa-solid fa-arrow-left"></i> Volver atrás
        </a>
      </div>

      <div style="margin-top:28px;font-size:13px;color:var(--text-muted,#9aa4b2);">
        Si crees que esto es un error, contacta con el administrador.
      </div>
    </section>
  </main>
{% endset %}

{# Intentamos varios nombres de bloque comunes de tu base.html #}
{% block content %}{{ __page | safe }}{% endblock %}
{% block main %}{{ __page | safe }}{% endblock %}
{% block page %}{{ __page | safe }}{% endblock %}
{% block body %}{{ __page | safe }}{% endblock %}