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/components/VotePanel.tsx

@@ -1,16 +1,23 @@
 'use client'
 
 import { useState } from 'react'
-import { useTranslations } from 'next-intl'
-import type { VoteSite } from '@/lib/vote'
+import { useTranslations, useLocale } from 'next-intl'
+import { useRouter } from '@/i18n/navigation'
+import type { VoteSiteStatus } from '@/lib/vote'
 
-export function VotePanel({ sites, canVote }: { sites: VoteSite[]; canVote: boolean }) {
+const REFRESH_ICON = '/nw-themes/nw-ryu/nw-images/nw-icons/refresh.webp'
+
+export function VotePanel({ sites, canVote }: { sites: VoteSiteStatus[]; canVote: boolean }) {
   const t = useTranslations('Vote')
+  const locale = useLocale()
+  const router = useRouter()
   const [busyId, setBusyId] = useState<number | null>(null)
+  const [voted, setVoted] = useState<Set<number>>(new Set())
   const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null)
 
-  async function vote(site: VoteSite) {
-    if (busyId !== null) return
+  async function vote(site: VoteSiteStatus) {
+    if (busyId !== null || voted.has(site.id)) return
+    // Abre el sitio de votos en otra pestaña (como el original) y acredita al volver.
     window.open(site.url, '_blank', 'noopener,noreferrer')
     setBusyId(site.id)
     setMessage(null)
@@ -24,14 +31,18 @@ export function VotePanel({ sites, canVote }: { sites: VoteSite[]; canVote: bool
       const d: { success?: boolean; error?: string; points?: number; siteName?: string; hours?: number; minutes?: number } =
         await res.json()
       if (d.success) {
+        setVoted((v) => new Set(v).add(site.id))
         setMessage({ ok: true, text: t('success', { site: d.siteName ?? site.name, points: d.points ?? 0 }) })
       } else if (d.error === 'cooldown') {
         setMessage({ ok: false, text: t('cooldown', { hours: d.hours ?? 0, minutes: d.minutes ?? 0 }) })
+        setTimeout(() => setMessage(null), 5000)
       } else {
         setMessage({ ok: false, text: t(d.error === 'siteNotFound' ? 'siteNotFound' : 'genericError') })
+        setTimeout(() => setMessage(null), 5000)
       }
     } catch {
       setMessage({ ok: false, text: t('genericError') })
+      setTimeout(() => setMessage(null), 5000)
     } finally {
       setBusyId(null)
     }
@@ -40,33 +51,70 @@ export function VotePanel({ sites, canVote }: { sites: VoteSite[]; canVote: bool
   if (sites.length === 0) return <p className="second-brown">{t('noSites')}</p>
 
   return (
-    <div className="centered">
-      {sites.map((s) => (
-        <div key={s.id} className="item-box">
-          {s.image_url && (
-            // eslint-disable-next-line @next/next/no-img-element
-            <img className="item-img-box" src={s.image_url} alt={s.name} />
-          )}
-          <p className="yellow-info">{s.name}</p>
-          <p className="vp-color small-font">
-            {s.points} {t('pv')}
-          </p>
-          {canVote ? (
-            <button type="button" className="vote-button" onClick={() => vote(s)} disabled={busyId !== null}>
-              {busyId === s.id ? t('voting') : t('vote')}
-            </button>
-          ) : (
-            <a href={s.url} target="_blank" rel="noopener noreferrer">
-              {t('vote')}
-            </a>
-          )}
-        </div>
-      ))}
+    <>
+      <button className="refresh-button" type="button" onClick={() => router.refresh()} title={t('refresh')}>
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img className="refresh-icon" src={REFRESH_ICON} title={t('refresh')} alt={t('refresh')} />
+      </button>
+      <p><span>{t('note')}</span></p>
+      <br />
+
+      {sites.map((s) => {
+        const isVoted = voted.has(s.id)
+        return (
+          <div key={s.id} className="inline-div">
+            <table>
+              <tbody>
+                <tr>
+                  <td>
+                    {s.image_url && (
+                      // eslint-disable-next-line @next/next/no-img-element
+                      <img className="img-med-icon" src={s.image_url} title={s.name} alt={s.name} />
+                    )}
+                  </td>
+                </tr>
+                <tr><td>{s.name}</td></tr>
+                <tr><td><hr /></td></tr>
+                <tr><td className="lefted">{t('pv')}: <span>{s.points}</span></td></tr>
+                <tr>
+                  <td className="lefted small-font third-brown">
+                    {s.lastVoteAt ? t('lastVote', { date: new Date(s.lastVoteAt).toLocaleString(locale) }) : t('neverVoted')}
+                  </td>
+                </tr>
+                <tr><td><hr /></td></tr>
+                <tr>
+                  <td>
+                    {canVote ? (
+                      <button
+                        type="button"
+                        name="vote"
+                        className="vote-button"
+                        value={s.url}
+                        onClick={() => vote(s)}
+                        disabled={busyId !== null || isVoted}
+                        style={isVoted ? { color: '#d79602' } : undefined}
+                      >
+                        {isVoted ? t('voted') : busyId === s.id ? t('voting') : t('vote')}
+                      </button>
+                    ) : (
+                      <a className="vote-button" href={s.url} target="_blank" rel="noopener noreferrer">
+                        {t('vote')}
+                      </a>
+                    )}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        )
+      })}
+
       <hr />
-      <div className="alert-message" style={{ display: message ? 'block' : 'none' }}>
+      <div className="alert-message" id="voteResponse" style={{ display: message ? 'block' : 'none' }}>
         {message && <span className={message.ok ? 'ok-form-response' : 'red-form-response'}>{message.text}</span>}
       </div>
       {!canVote && <p className="second-brown small-font">{t('loginToVote')}</p>}
-    </div>
+      <br />
+    </>
   )
 }