web-next: migrar toda la UI al tema real nw-ryu

Reescritura completa del frontend Next.js del sistema visual Tailwind
"simulado" al tema Django original (nw-ryu), para paridad pixel con la
web actual antes del cutover.

- Tema real: copia de static/nw-themes/nw-ryu + favicons a public/, el
  layout carga el novavow-style.css real de ultimo (gana la cascada sobre
  Tailwind) + Font Awesome.
- Shell replicando los partials Django: SiteHeader, Video, Social, Footer,
  ServerClock; home con estructura real (main-page/middle-content/...).
- Helpers reutilizables: PageShell (main-page > middle-content > body-content
  > title-content) y ServiceBox (title-box-content + back-to-account).
- Paginas migradas a clases reales del tema (fieldset/tool-button/char-box/
  item-box/info-box-light/max-center-table/alert-message/botones reales),
  eliminando el markup Tailwind (.nw-btn/.nw-card/.nw-input):
  auth (login/register/recover/reset/select-account/activate),
  cuenta + servicios de personaje (revive/unstuck/rename/customize/
  change-race/change-faction/level-up/gold/transfer + pago Stripe),
  ajustes (change-password/change-email/security-token),
  comunidad (vote-points/recruit/battlepay), foro completo, y
  admin (indice + 7 secciones + los Admin*Manager).
- Se conserva el bilingue (next-intl); claves nuevas en messages/es|en.json.

Verificado: typecheck + build OK; rutas protegidas 307->login; sin
MISSING_MESSAGE; cero Tailwind residual (solo .nw-tool-btn/.nw-page,
clases propias en globals.css).

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

web-next/app/[locale]/account/page.tsx

@@ -3,10 +3,13 @@ import { redirect, Link } from '@/i18n/navigation'
 import { getSession } from '@/lib/session'
 import { getAccountDashboard } from '@/lib/account'
 import { isAdmin } from '@/lib/admin'
-import { LogoutButton } from '@/components/LogoutButton'
+import { PageShell } from '@/components/PageShell'
 
 export const dynamic = 'force-dynamic'
 
+// Grupos de servicios con su icono del sprite real (acc-icon <clase>).
+type ToolItem = { href: string; icon: string; label: string; desc: string }
+
 export default async function AccountPage({ params }: { params: Promise<{ locale: string }> }) {
   const { locale } = await params
   setRequestLocale(locale)
@@ -19,148 +22,186 @@ export default async function AccountPage({ params }: { params: Promise<{ locale
   const data = await getAccountDashboard(session)
   const admin = await isAdmin(session)
 
-  const card = 'nw-card'
-
-  return (
-    <main className="mx-auto max-w-3xl px-4 py-8">
-      <div className="mb-6 flex items-center justify-between">
-        <h1 className="text-2xl font-bold text-amber-500">{t('title')}</h1>
-        <LogoutButton className="rounded border border-amber-900/60 px-3 py-1 text-sm text-amber-200 hover:text-amber-400" />
-      </div>
-
-      {admin && (
-        <Link
-          href="/admin"
-          className="mb-6 flex items-center justify-between gap-3 rounded-lg border border-nw-gold/50 bg-nw-gold/10 px-4 py-3 text-sm font-semibold text-nw-gold-light transition hover:bg-nw-gold/20"
-        >
-          <span>🛡️ {t('adminPanel')}</span>
-          <span aria-hidden>→</span>
-        </Link>
-      )}
-
-      <div className="grid gap-4 sm:grid-cols-2">
-        <section className={card}>
-          <div className="space-y-1 text-sm">
-            <p>{t('bnetAccount')}: <span className="text-amber-400">{data.bnetEmail}</span></p>
-            <p>{t('gameAccount')}: <span className="text-amber-400">{data.gameAccount}</span></p>
-            <p>
-              {t('securityToken')}:{' '}
-              <span className="text-amber-400">
-                {data.securityTokenDate
-                  ? `${t('requested')} — ${new Date(data.securityTokenDate).toLocaleString(locale)}`
-                  : t('notRequested')}
-              </span>
-            </p>
-          </div>
-        </section>
-
-        <section className={card}>
-          <h2 className="mb-2 text-lg font-semibold">{t('points')}</h2>
-          <div className="space-y-1 text-sm">
-            <p>{t('dp')}: <span className="text-amber-400">{data.dp}</span></p>
-            <p>{t('vp')}: <span className="text-amber-400">{data.vp}</span></p>
-            <p>{t('battlepayCredits')}: <span className="text-amber-400">{data.battlepayCredits}</span></p>
-          </div>
-        </section>
-      </div>
-
-      <section className="mt-6">
-        <h2 className="mb-3 text-lg font-semibold">{t('characters')}</h2>
-        {data.characters.length === 0 ? (
-          <p className="text-amber-200/70">{t('noCharacters')}</p>
-        ) : (
-          <div className="grid gap-3 sm:grid-cols-2 md:grid-cols-3">
-            {data.characters.map((c) => (
-              <div key={c.name} className={`${card} flex gap-3`}>
-                {/* eslint-disable-next-line @next/next/no-img-element */}
-                <img
-                  src={c.imageUrl}
-                  alt={c.raceName}
-                  className="h-16 w-16 shrink-0 rounded-md object-cover ring-1 ring-nw-border/60"
-                  loading="lazy"
-                />
-                <div className="min-w-0">
-                  <p className={`truncate font-semibold class-${c.classCss}`}>{c.name}</p>
-                  <p className="text-xs text-nw-muted">
-                    {t('level')} {c.level} · {c.raceName} {c.className}
-                  </p>
-                  <p className="mt-1 flex items-center gap-1 text-xs text-amber-200/70" title={c.zone}>
-                    <span aria-hidden>📍</span>
-                    <span className="truncate">{c.zone}</span>
-                  </p>
-                  <p className="text-xs text-amber-200/60">
-                    {c.gold}g {c.silver}s {c.copper}c
-                  </p>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </section>
-
-      <ServicesPanel t={t} />
-    </main>
-  )
-}
-
-function ServicesPanel({ t }: { t: (k: string) => string }) {
-  const groups: { title: string; items: { href: string; label: string }[] }[] = [
+  const groups: { title: string; items: ToolItem[] }[] = [
+    {
+      title: t('accountSettings'),
+      items: [
+        { href: '/change-password', icon: 'password-icon', label: t('svcChangePassword'), desc: t('svcChangePasswordDesc') },
+        { href: '/change-email', icon: 'email-icon', label: t('svcChangeEmail'), desc: t('svcChangeEmailDesc') },
+        { href: '/security-token', icon: 'token-icon', label: t('svcToken'), desc: t('svcTokenDesc') },
+      ],
+    },
     {
       title: t('servicesTitle'),
       items: [
-        { href: '/rename', label: t('svcRename') },
-        { href: '/customize', label: t('svcCustomize') },
-        { href: '/change-race', label: t('svcChangeRace') },
-        { href: '/change-faction', label: t('svcChangeFaction') },
-        { href: '/level-up', label: t('svcLevelUp') },
-        { href: '/gold', label: t('svcGold') },
-        { href: '/transfer', label: t('svcTransfer') },
+        { href: '/rename', icon: 'rename-icon', label: t('svcRename'), desc: t('svcRenameDesc') },
+        { href: '/customize', icon: 'customize-icon', label: t('svcCustomize'), desc: t('svcCustomizeDesc') },
+        { href: '/change-race', icon: 'change-race-icon', label: t('svcChangeRace'), desc: t('svcChangeRaceDesc') },
+        { href: '/change-faction', icon: 'change-faction-icon', label: t('svcChangeFaction'), desc: t('svcChangeFactionDesc') },
+        { href: '/level-up', icon: 'level-up-icon', label: t('svcLevelUp'), desc: t('svcLevelUpDesc') },
+        { href: '/gold', icon: 'gold-icon', label: t('svcGold'), desc: t('svcGoldDesc') },
+        { href: '/transfer', icon: 'tranfer-char-icon', label: t('svcTransfer'), desc: t('svcTransferDesc') },
       ],
     },
     {
       title: t('utilitiesTitle'),
       items: [
-        { href: '/revive', label: t('svcRevive') },
-        { href: '/unstuck', label: t('svcUnstuck') },
-        { href: '/security-token', label: t('svcToken') },
-      ],
-    },
-    {
-      title: t('accountSettings'),
-      items: [
-        { href: '/change-password', label: t('svcChangePassword') },
-        { href: '/change-email', label: t('svcChangeEmail') },
+        { href: '/revive', icon: 'revive-icon', label: t('svcRevive'), desc: t('svcReviveDesc') },
+        { href: '/unstuck', icon: 'unstuck-icon', label: t('svcUnstuck'), desc: t('svcUnstuckDesc') },
       ],
     },
     {
       title: t('communityTitle'),
       items: [
-        { href: '/vote-points', label: t('svcVote') },
-        { href: '/recruit', label: t('svcRecruit') },
-        { href: '/battlepay', label: t('svcStore') },
+        { href: '/vote-points', icon: 'vote-icon', label: t('svcVote'), desc: t('svcVoteDesc') },
+        { href: '/recruit', icon: 'recruit-a-friend-icon', label: t('svcRecruit'), desc: t('svcRecruitDesc') },
+        { href: '/battlepay', icon: 'store-icon', label: t('svcStore'), desc: t('svcStoreDesc') },
       ],
     },
   ]
 
   return (
-    <div className="mt-8 grid gap-4 sm:grid-cols-2">
-      {groups.map((g) => (
-        <section key={g.title} className="nw-card">
-          <h2 className="mb-3 text-lg font-semibold text-nw-gold-light">{g.title}</h2>
-          <div className="flex flex-col gap-2">
-            {g.items.map((it) => (
-              <Link
-                key={it.href}
-                href={it.href}
-                className="flex items-center justify-between gap-2 rounded-lg border border-nw-border/60 bg-nw-panel-2/40 px-3 py-2 text-sm text-nw-text transition hover:border-nw-gold/60 hover:bg-nw-panel-2/80 hover:text-nw-gold-light"
-              >
-                <span>{it.label}</span>
-                <span className="text-nw-muted" aria-hidden>→</span>
-              </Link>
-            ))}
-          </div>
-        </section>
-      ))}
-    </div>
+    <PageShell title={t('title')}>
+      {/* Información de la cuenta */}
+      <div className="box-content">
+        <div className="title-box-content centered">
+          <h2>{t('infoTitle')}</h2>
+        </div>
+        <div className="body-box-content">
+          <table className="max-center-table">
+            <tbody>
+              <tr>
+                <td>{t('bnetAccount')}</td>
+                <td className="real-info-box yellow-info">{data.bnetEmail}</td>
+              </tr>
+              <tr>
+                <td>{t('gameAccount')}</td>
+                <td className="real-info-box yellow-info">{data.gameAccount}</td>
+              </tr>
+              <tr>
+                <td>{t('dp')}</td>
+                <td className="real-info-box dp-color">{data.dp}</td>
+              </tr>
+              <tr>
+                <td>{t('vp')}</td>
+                <td className="real-info-box vp-color">{data.vp}</td>
+              </tr>
+              <tr>
+                <td>{t('battlepayCredits')}</td>
+                <td className="real-info-box yellow-info">{data.battlepayCredits}</td>
+              </tr>
+              <tr>
+                <td>{t('securityToken')}</td>
+                <td className="real-info-box">
+                  {data.securityTokenDate ? (
+                    <span className="green-info">
+                      {t('requested')} — {new Date(data.securityTokenDate).toLocaleString(locale)}
+                    </span>
+                  ) : (
+                    <span className="red-info2">{t('notRequested')}</span>
+                  )}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Personajes */}
+      <div className="box-content">
+        <div className="title-box-content centered">
+          <h2>{t('characters')}</h2>
+        </div>
+        <div className="body-box-content centered">
+          {data.characters.length === 0 ? (
+            <p className="second-brown">{t('noCharacters')}</p>
+          ) : (
+            data.characters.map((c) => (
+              <div key={c.name} className={`char-box char-box-${c.classCss}`}>
+                <div className="char-text">
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img className="char-icon img-small-icon" src={c.imageUrl} alt={c.raceName} height={64} loading="lazy" />
+                  <span className={`${c.classCss} big-font shadow`}>{c.name}</span>
+                  <br />
+                  <span className="second-brown shadow">
+                    {t('level')} {c.level} · {c.raceName} {c.className}
+                  </span>
+                  <br />
+                  <span className="second-brown shadow">📍 {c.zone}</span>
+                  <br />
+                  <span className="shadow">
+                    {c.gold}
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img className="img-align" src="/nw-themes/nw-ryu/nw-images/nw-icons/money-gold.gif" alt="g" /> {c.silver}
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img className="img-align" src="/nw-themes/nw-ryu/nw-images/nw-icons/money-silver.webp" alt="s" /> {c.copper}
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img className="img-align" src="/nw-themes/nw-ryu/nw-images/nw-icons/money-copper.gif" alt="c" />
+                  </span>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+
+      {/* Utilidades y Herramientas */}
+      <div className="box-content">
+        <div className="title-box-content centered">
+          <h2>{t('toolsTitle')}</h2>
+        </div>
+        <div className="body-box-content-account">
+          {admin && (
+            <Link href="/admin">
+              <div className="tool-button">
+                <div className="acc-icon store-icon"></div>
+                <div className="tool-button-div">
+                  <span className="yellow-info shadow">🛡️ {t('adminPanel')}</span>
+                  <br />
+                  <span className="second-brown shadow">{t('adminPanelDesc')}</span>
+                </div>
+              </div>
+            </Link>
+          )}
+          {groups.map((g) => (
+            <div key={g.title}>
+              <div className="title-content-h3">
+                <h3 className="big-font">{g.title}</h3>
+              </div>
+              <table className="max-center-table fixed-layout-table">
+                <tbody>
+                  {rows(g.items).map((pair, i) => (
+                    <tr key={i}>
+                      {pair.map((it) => (
+                        <td key={it.href}>
+                          <Link href={it.href}>
+                            <div className="tool-button">
+                              <div className={`acc-icon ${it.icon}`}></div>
+                              <div className="tool-button-div">
+                                <span className="first-brown shadow">{it.label}</span>
+                                <br />
+                                <span className="second-brown shadow">{it.desc}</span>
+                              </div>
+                            </div>
+                          </Link>
+                        </td>
+                      ))}
+                      {pair.length === 1 && <td />}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          ))}
+        </div>
+      </div>
+    </PageShell>
   )
 }
+
+// Agrupa los items de dos en dos (2 columnas, como el my-account de Django).
+function rows<T>(items: T[]): T[][] {
+  const out: T[][] = []
+  for (let i = 0; i < items.length; i += 2) out.push(items.slice(i, i + 2))
+  return out
+}