web-next: rediseño de security-token, recover, vote-points + rename-guild

- /security-token: diseño completo del original (info + advertencia + NOTA 7 días),
  fecha en formato HH:MM:SS DD-MM-YYYY, botón "Token enviado", enlace a /recover.
- /recover: 4 opciones (contraseña por usuario, nombre de cuenta, token de seguridad
  y enlace de activación por correo); recuperación de token nueva; Turnstile por envío.
- /vote-points: caja de info con las 7 secciones Q&A + panel "Sitios de votación" con
  tarjetas inline-div (imagen, PV, último voto), botón refrescar; abre el sitio y acredita
  PV al volver. lib/vote.ts + getVoteSitesForAccount.
- /rename-guild: renombra una hermandad de la que la cuenta es Maestro por 1000 PD +
  token de seguridad; SOAP .guild rename con comillas; reembolsa los PD si SOAP falla.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web-next/app/[locale]/security-token/SecurityTokenForm.tsx

@@ -1,19 +1,28 @@
 'use client'
 
 import { useState } from 'react'
-import { useTranslations, useLocale } from 'next-intl'
+import { useTranslations } from 'next-intl'
+import { Link } from '@/i18n/navigation'
 
 const ERROR_KEYS = ['cooldown', 'noEmail'] as const
 
+/** Formatea una fecha ISO como "HH:MM:SS DD-MM-YYYY" (igual que el diseño original). */
+function formatDate(iso: string): string {
+  const d = new Date(iso)
+  const p = (n: number) => String(n).padStart(2, '0')
+  return `${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())} ${p(d.getDate())}-${p(d.getMonth() + 1)}-${d.getFullYear()}`
+}
+
 export function SecurityTokenForm({ initialDate }: { initialDate: string | null }) {
   const t = useTranslations('SecurityToken')
-  const locale = useLocale()
   const [date, setDate] = useState(initialDate)
   const [busy, setBusy] = useState(false)
+  const [sent, setSent] = useState(false)
   const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null)
 
-  async function request() {
-    if (busy) return
+  async function request(e: React.FormEvent) {
+    e.preventDefault()
+    if (busy || sent) return
     setBusy(true)
     setMessage(null)
     try {
@@ -21,36 +30,47 @@ export function SecurityTokenForm({ initialDate }: { initialDate: string | null
       const data: { success?: boolean; error?: string; tokenDate?: string } = await res.json()
       if (data.success) {
         setMessage({ ok: true, text: t('success') })
+        setSent(true)
         if (data.tokenDate) setDate(data.tokenDate)
       } else {
         const key = (ERROR_KEYS as readonly string[]).includes(data.error ?? '') ? data.error! : 'genericError'
         setMessage({ ok: false, text: t(key) })
+        // Como el original: el mensaje de error desaparece tras 5 s.
+        setTimeout(() => setMessage(null), 5000)
       }
     } catch {
       setMessage({ ok: false, text: t('genericError') })
+      setTimeout(() => setMessage(null), 5000)
     } finally {
       setBusy(false)
     }
   }
 
   return (
-    <>
-      <p>{t('info')}</p>
+    <div className="centered">
       <br />
-      <div className="centered">
-        <p>
-          {t('lastRequest')}:{' '}
-          <span className="yellow-info">{date ? new Date(date).toLocaleString(locale) : t('never')}</span>
-        </p>
-        <br />
-        <button onClick={request} className="sec-token-button" disabled={busy}>
-          {busy ? t('requesting') : t('request')}
+      <br />
+      <p>{t('requestDateLabel')}</p>
+      <p><span className="yellow-info">{date ? formatDate(date) : t('never')}</span></p>
+      <br />
+      <form id="uw-sec-token-form" onSubmit={request} acceptCharset="utf-8">
+        <button
+          className="sec-token-button"
+          type="submit"
+          disabled={busy || sent}
+          style={sent ? { color: '#d79602' } : undefined}
+        >
+          {sent ? t('sent') : busy ? t('requesting') : t('request')}
         </button>
-        <hr />
-        <div className="alert-message" style={{ display: message ? 'block' : 'none' }}>
-          {message && <span className={message.ok ? 'ok-form-response' : 'red-form-response'}>{message.text}</span>}
-        </div>
+      </form>
+      <br />
+      <hr />
+      <div className="alert-message" id="sec-token-response" style={{ display: message ? 'block' : 'none' }}>
+        {message && <span className={message.ok ? 'ok-form-response' : 'red-form-response'}>{message.text}</span>}
       </div>
-    </>
+      <br />
+      <p><Link href="/recover">{t('forgot')}</Link></p>
+      <br />
+    </div>
   )
 }