<!-- Portal: Recuperar contraseña -->
<div class="w-full max-w-md mx-auto">
  <div class="text-center mb-8">
    <span class="w-14 h-14 rounded-2xl flex items-center justify-center text-white text-2xl font-bold mx-auto mb-4" style="background:#8eb02f">U</span>
    <h1 class="text-2xl font-bold text-slate-800">¿Olvidaste tu contraseña?</h1>
    <p class="text-slate-500 text-sm mt-1">Te enviaremos un enlace para restablecerla</p>
  </div>

  {{ if .error }}
  <div class="bg-red-50 border border-red-200 text-red-700 rounded-xl px-4 py-3 mb-4 text-sm">
    {{ .error }}
  </div>
  {{ end }}

  {{ if .success }}
  <div class="bg-green-50 border border-green-200 text-green-700 rounded-xl px-4 py-3 mb-4 text-sm">
    {{ .success }}
  </div>
  {{ end }}

  <div class="bg-white rounded-2xl shadow-lg border border-slate-200 p-8">
    <form method="POST" action="/portal/forgot-password">
      <div class="space-y-4">
        <div>
          <label class="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1">Correo electrónico</label>
          <input type="email" name="email" required autofocus
            class="w-full border border-slate-200 rounded-xl px-4 py-3 text-sm outline-none focus:border-[#8eb02f] transition-colors"
            placeholder="tu@email.com">
        </div>
        <button type="submit"
          class="w-full py-3 rounded-xl font-semibold text-white text-sm transition-colors"
          style="background:#8eb02f"
          onmouseover="this.style.background='#6d8c24'"
          onmouseout="this.style.background='#8eb02f'">
          Enviar enlace de recuperación
        </button>
      </div>
    </form>
  </div>

  <p class="text-center text-sm text-slate-400 mt-6">
    <a href="/portal/login" class="hover:text-slate-600 transition-colors">← Volver al inicio de sesión</a>
  </p>

  <p class="text-center text-xs text-slate-400 mt-3">
    &copy; 2025 U-site &mdash; Todos los derechos reservados
  </p>
</div>
