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]/vote-points/page.tsx

@@ -1,7 +1,9 @@
 import { getTranslations, setRequestLocale } from 'next-intl/server'
 import { getSession } from '@/lib/session'
-import { getVoteSites } from '@/lib/vote'
+import { getRealmName } from '@/lib/realm'
+import { getVoteSitesForAccount } from '@/lib/vote'
 import { PageShell } from '@/components/PageShell'
+import { ServiceBox } from '@/components/ServiceBox'
 import { VotePanel } from '@/components/VotePanel'
 
 export const dynamic = 'force-dynamic'
@@ -11,13 +13,36 @@ export default async function VotePointsPage({ params }: { params: Promise<{ loc
   setRequestLocale(locale)
   const t = await getTranslations('Vote')
   const session = await getSession()
-  const sites = await getVoteSites()
+  const [realm, sites] = await Promise.all([getRealmName(), getVoteSitesForAccount(session.accountId ?? 0)])
+  const sub = (s: string) => s.replaceAll('{server}', realm)
+  const sections = t.raw('infoSections') as { h: string; lines: string[] }[]
+
   return (
     <PageShell title={t('title')}>
+      <ServiceBox>
+        <br />
+        {sections.map((s, i) => (
+          <div key={i}>
+            <span>{sub(s.h)}</span>
+            {s.lines.map((l, j) => (
+              <p key={j}>{sub(l)}</p>
+            ))}
+            {i < sections.length - 1 && (
+              <>
+                <br />
+                <hr />
+                <br />
+              </>
+            )}
+          </div>
+        ))}
+      </ServiceBox>
+
       <div className="box-content">
-        <div className="body-box-content centered">
-          <p>{t('info', { server: 'NovaWoW' })}</p>
-          <br />
+        <div className="title-box-content">
+          <h2>{t('sitesTitle')}</h2>
+        </div>
+        <div className="body-box-content centered" id="vote-panel">
           <VotePanel sites={sites} canVote={Boolean(session.accountId)} />
         </div>
       </div>