web-next: /account idéntico al my-account de Django

La página de cuenta no se parecía a la de Django (oro descuadrado, info como
tabla, herramientas en grupos abiertos). Reescrita para replicar el
partials/my-account.html + isla AccountDashboard de Django:

- Información en DOS fieldsets (.account-fieldset): «Datos básicos» (cuentas,
  correos, fecha de registro, IPs) y «Estado de la cuenta» (insignia de rango
  nw-rank + PD/PV/créditos/token + baneo + reclutamiento). lib/account.ts
  ampliado para traer reg_mail/email/joindate/last_ip/last_attempt_ip, estado
  de baneo (account_banned) y nº de reclutados.
- Personajes en char-box con el markup exacto de Django: retrato flotante +
  oro EN LÍNEA (monedas width=10). Antes las monedas salían a tamaño nativo
  (descuadre) y apiladas.
- Herramientas en paneles plegables (acordeón) «OPCIONES DE CUENTA / OPCIONES
  DE PERSONAJE» como Django (componente cliente AccountTools), con los
  servicios ya implementados en Next y las etiquetas/descripciones exactas.
- globals.css: revertir otro reset del preflight de Tailwind — img{display:
  block} apilaba verticalmente los iconos en línea (monedas); el tema los usa
  inline como la web Django. Volvemos a img{display:inline}.

Verificado con Playwright (login real con cuenta de prueba + captura): info,
personajes con oro en línea y paneles que expanden con sus iconos; home sin
regresión por el cambio de img.

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

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

@@ -1,14 +1,14 @@
 import { getTranslations, setRequestLocale } from 'next-intl/server'
-import { redirect, Link } from '@/i18n/navigation'
+import { redirect } from '@/i18n/navigation'
 import { getSession } from '@/lib/session'
 import { getAccountDashboard } from '@/lib/account'
 import { isAdmin } from '@/lib/admin'
 import { PageShell } from '@/components/PageShell'
+import { AccountTools } from '@/components/AccountTools'
 
 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 }
+const ICONS = '/nw-themes/nw-ryu/nw-images/nw-icons'
 
 export default async function AccountPage({ params }: { params: Promise<{ locale: string }> }) {
   const { locale } = await params
@@ -22,186 +22,99 @@ export default async function AccountPage({ params }: { params: Promise<{ locale
   const data = await getAccountDashboard(session)
   const admin = await isAdmin(session)
 
-  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', 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', 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', 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 (
     <PageShell title={t('title')}>
-      {/* Información de la cuenta */}
+      {/* Información: dos fieldsets como en Django */}
       <div className="box-content">
-        <div className="title-box-content centered">
+        <div className="title-box-content">
           <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>
+          <fieldset className="account-fieldset">
+            <legend>{t('basicData')}</legend>
+            <div className="separate">
+              <p>{t('bnetAccount')}: <span>{data.bnetEmail}</span></p>
+              <p>{t('gameAccount')}: <span>{data.gameAccount}</span></p>
+              <p>{t('regMail')}: <span>{data.regMail}</span></p>
+              <p>{t('currentMail')}: <span>{data.email}</span></p>
+              <p>{t('joindate')}: <span>{data.joindate}</span></p>
+              <p>{t('lastIpWeb')}: <span>{data.lastIp}</span></p>
+              <p>{t('lastIpServer')}: <span>{data.lastAttemptIp}</span></p>
+            </div>
+          </fieldset>
+
+          <fieldset className="account-fieldset">
+            <legend>{t('accountState')}</legend>
+            <div className="separate">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img src="/nw-themes/nw-ryu/nw-images/nw-ranks/1_Newbie.svg" className="nw-rank" alt="rank" title={`${t('level')} 1`} />
+              <p>{t('dp')}: <span>{data.dp}</span></p>
+              <p>{t('vp')}: <span>{data.vp}</span></p>
+              <p>{t('battlepayCredits')}: <span>{data.battlepayCredits}</span></p>
+              <p>
+                {t('securityToken')}:{' '}
+                <span>
+                  {data.securityTokenDate
+                    ? `${t('requested')} - ${new Date(data.securityTokenDate).toLocaleString(locale)}`
+                    : t('notRequested')}
+                </span>
+              </p>
+              {data.isBanned ? (
+                <>
+                  <p>{t('banned')}: <span>{t('yes')}</span></p>
+                  <p>{t('banEnd')}: <span>{data.unbanDate}</span></p>
+                </>
+              ) : (
+                <>
+                  <p>{t('banned')}: <span>{t('no')}</span></p>
+                  <p>{t('recruited')}: <span>{data.isRecruited ? t('yes') : t('no')}</span></p>
+                  <p>{t('recruitedFriends')}: <span>{data.recruitedCount}</span></p>
+                </>
+              )}
+            </div>
+          </fieldset>
         </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}`}>
+      {/* Mis personajes: rejilla con char-box como en Django */}
+      {data.characters.length > 0 && (
+        <div className="box-content">
+          <div className="title-box-content">
+            <h2>{t('characters')}</h2>
+          </div>
+          <div className="characters-grid body-box-content">
+            {data.characters.map((c) => (
+              <div className={`char-box char-box-${c.classCss}`} key={c.name}>
                 <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>
+                  <img className="img-small-icon char-icon" src={c.imageUrl} alt={c.name} height={64} loading="lazy" />
+                  <p className={`${c.classCss} big-font`}>{c.name}</p>
+                  <p><span>{t('level')} {c.level}</span></p>
+                  <p className="second-brown">{c.zone}</p>
+                  <p>
+                    <span>
+                      {/* eslint-disable-next-line @next/next/no-img-element */}
+                      {c.gold}<img className="img-align" src={`${ICONS}/money-gold.gif`} width={10} alt="g" />{' '}
+                      {/* eslint-disable-next-line @next/next/no-img-element */}
+                      {c.silver}<img className="img-align" src={`${ICONS}/money-silver.webp`} width={10} alt="s" />{' '}
+                      {/* eslint-disable-next-line @next/next/no-img-element */}
+                      {c.copper}<img className="img-align" src={`${ICONS}/money-copper.gif`} width={10} alt="c" />
+                    </span>
+                  </p>
                 </div>
               </div>
-            ))
-          )}
+            ))}
+          </div>
         </div>
-      </div>
+      )}
 
-      {/* Utilidades y Herramientas */}
+      {/* Utilidades y Herramientas: paneles plegables como en Django */}
       <div className="box-content">
-        <div className="title-box-content centered">
+        <div className="title-box-content">
           <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>
+        <AccountTools isAdmin={admin} />
       </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
-}

web-next/app/globals.css

@@ -39,6 +39,14 @@ select {
 table {
   border-collapse: separate;
 }
+/* 3) Tailwind pone img{display:block}, lo que apila verticalmente los iconos
+   en línea (monedas de oro/plata/cobre, iconos inline del tema). El tema los
+   usa inline (como la web Django). Volvemos a inline; las imágenes que deban
+   ser bloque ya lo fijan por su propia clase (.img-med-icon, etc., mayor
+   especificidad). */
+img {
+  display: inline;
+}
 
 /* Componentes reutilizables */
 @layer components {