web-next: «Información» de /account con iconos, correos ocultos, PD|PV y 2FA

Los fieldsets Datos básicos/Estado de la cuenta ahora replican el markup nuevo:
iconos Font Awesome por campo (account-ficon), .separate account-info,
«Nombre de la cuenta», correos enmascarados (maskEmail), PD | PV en una línea
(dp-color/vp-color), Token, «2FA: Desactivado» (fa-lock-open red-info), Cuenta
baneada con enlace «Consultar historial» (/ban-history), reclutada y amigos.
Se quita Créditos Battlepay. Clases account-ficon/account-info al tema; claves
i18n accountName/twofaLabel/twofaOff/banHistoryLink.

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

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

@@ -1,5 +1,5 @@
 import { getTranslations, setRequestLocale } from 'next-intl/server'
-import { redirect } from '@/i18n/navigation'
+import { redirect, Link } from '@/i18n/navigation'
 import { getSession } from '@/lib/session'
 import { getAccountDashboard, getAccountRank } from '@/lib/account'
 import { isAdmin } from '@/lib/admin'
@@ -8,6 +8,15 @@ import { AccountTools } from '@/components/AccountTools'
 
 export const dynamic = 'force-dynamic'
 
+// Enmascara el correo: muestra los primeros caracteres del usuario y el dominio.
+function maskEmail(e: string): string {
+  if (!e) return ''
+  const [local, domain] = e.split('@')
+  if (!domain) return e
+  const visible = local.slice(0, Math.min(6, Math.max(1, local.length - 2)))
+  return `${visible}***@${domain}`
+}
+
 const ICONS = '/nw-themes/nw-ryu/nw-images/nw-icons'
 
 export default async function AccountPage({ params }: { params: Promise<{ locale: string }> }) {
@@ -33,45 +42,27 @@ export default async function AccountPage({ params }: { params: Promise<{ locale
         <div className="body-box-content">
           <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 className="separate account-info">
+              <p><i className="fa-solid fa-user account-ficon third-brown"></i> {t('accountName')}: <span>{data.gameAccount}</span></p>
+              <p><i className="fa-solid fa-at account-ficon third-brown"></i> {t('regMail')}: <span>{maskEmail(data.regMail)}</span></p>
+              <p><i className="fa-solid fa-at account-ficon third-brown"></i> {t('currentMail')}: <span>{maskEmail(data.email)}</span></p>
+              <p><i className="fa-solid fa-calendar-days account-ficon third-brown"></i> {t('joindate')}: <span>{data.joindate}</span></p>
+              <p><i className="fa-solid fa-globe account-ficon third-brown"></i> {t('lastIpWeb')}: <span>{data.lastIp}</span></p>
+              <p><i className="fa-solid fa-globe account-ficon third-brown"></i> {t('lastIpServer')}: <span>{data.lastAttemptIp}</span></p>
             </div>
           </fieldset>
 
           <fieldset className="account-fieldset">
             <legend>{t('accountState')}</legend>
-            <div className="separate">
+            <div className="separate account-info">
               {/* eslint-disable-next-line @next/next/no-img-element */}
               <img src={rank.image} className="nw-rank" alt={`${t('level')} ${rank.level}`} title={`${t('level')} ${rank.level}`} />
-              <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>
-                </>
-              )}
+              <p><i className="fa-solid fa-coins account-ficon third-brown"></i> <span className="dp-color">{t('dp')}</span>: <span>{data.dp}</span> | <span className="vp-color">{t('vp')}</span>: <span>{data.vp}</span></p>
+              <p><i className="fa-solid fa-shield-halved account-ficon third-brown"></i> {t('securityToken')}: <span>{data.securityTokenDate ? t('requested') : t('notRequested')}</span></p>
+              <p><i className="fa-solid fa-lock-open red-info account-ficon"></i> {t('twofaLabel')}: <span> {t('twofaOff')}</span></p>
+              <p><i className="fa-solid fa-gavel account-ficon third-brown"></i> {t('banned')}: <span>{data.isBanned ? t('yes') : t('no')}</span> (<Link href="/ban-history">{t('banHistoryLink')}</Link>)</p>
+              <p><i className="fa-solid fa-handshake account-ficon third-brown"></i> {t('recruited')}: <span>{data.isRecruited ? t('yes') : t('no')}</span></p>
+              <p><i className="fa-solid fa-user-group account-ficon third-brown"></i> {t('recruitedFriends')}: <span>{data.recruitedCount}</span></p>
             </div>
           </fieldset>
         </div>