Aplica el sistema de diseño (nw-input/nw-btn/nw-card) a todas las páginas

Reemplazo masivo de los estilos sueltos repetidos por las clases del sistema visual
en ~20 componentes/páginas (auth, cuenta, servicios de personaje, foro, admin, voto):
- inputs -> .nw-input, botones primarios -> .nw-btn, tarjetas -> .nw-card.
Cohesión visual completa con la home y la cabecera.

Verificado: build OK, páginas clave 200/redirect correctos, clases aplicadas.

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

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

@@ -17,7 +17,7 @@ export default async function AccountPage({ params }: { params: Promise<{ locale
 
   const data = await getAccountDashboard(session)
 
-  const card = 'rounded-lg border border-amber-900/60 bg-[#241812] p-4'
+  const card = 'nw-card'
 
   return (
     <main className="mx-auto max-w-3xl px-4 py-8">

web-next/app/[locale]/change-email/ChangeEmailForm.tsx

@@ -40,7 +40,7 @@ export function ChangeEmailForm() {
     }
   }
 
-  const field = 'w-full rounded border border-amber-900/60 bg-[#2c1e14] px-3 py-2'
+  const field = 'nw-input'
 
   return (
     <div className="mx-auto max-w-sm">
@@ -51,7 +51,7 @@ export function ChangeEmailForm() {
         <input type="email" placeholder={t('newEmail')} value={form.newEmail} onChange={(e) => upd('newEmail', e.target.value)} className={field} />
         <input type="email" placeholder={t('confEmail')} value={form.confEmail} onChange={(e) => upd('confEmail', e.target.value)} className={field} />
         <input type="text" maxLength={6} placeholder={t('token')} value={form.token} onChange={(e) => upd('token', e.target.value)} className={field} />
-        <button type="submit" disabled={busy} className="w-full rounded bg-amber-600 px-4 py-2 font-semibold text-[#1b120b] disabled:opacity-60">
+        <button type="submit" disabled={busy} className="w-full nw-btn disabled:opacity-60">
           {busy ? t('sending') : t('submit')}
         </button>
       </form>

web-next/app/[locale]/change-password/ChangePasswordForm.tsx

@@ -56,7 +56,7 @@ export function ChangePasswordForm() {
     }
   }
 
-  const field = 'w-full rounded border border-amber-900/60 bg-[#2c1e14] px-3 py-2'
+  const field = 'nw-input'
 
   return (
     <div className="mx-auto max-w-sm">
@@ -66,7 +66,7 @@ export function ChangePasswordForm() {
         <input type="password" maxLength={16} placeholder={t('newPassword')} value={form.newPassword} onChange={(e) => upd('newPassword', e.target.value)} className={field} />
         <input type="password" maxLength={16} placeholder={t('confPassword')} value={form.confPassword} onChange={(e) => upd('confPassword', e.target.value)} className={field} />
         <input type="text" maxLength={6} placeholder={t('token')} value={form.token} onChange={(e) => upd('token', e.target.value)} className={field} />
-        <button type="submit" disabled={busy || done} className="w-full rounded bg-amber-600 px-4 py-2 font-semibold text-[#1b120b] disabled:opacity-60">
+        <button type="submit" disabled={busy || done} className="w-full nw-btn disabled:opacity-60">
           {busy ? t('changing') : t('submit')}
         </button>
       </form>

web-next/app/[locale]/forum/topic/[topicId]/page.tsx

@@ -37,7 +37,7 @@ export default async function TopicPage({
 
       <div className="space-y-4">
         {posts.map((post) => (
-          <article key={post.id} className="rounded-lg border border-amber-900/60 bg-[#241812] p-4">
+          <article key={post.id} className="nw-card">
             <div className="mb-2 flex items-center justify-between border-b border-amber-900/40 pb-2 text-sm">
               <span className="font-semibold text-amber-400">{post.poster}</span>
               {post.time && (

web-next/app/[locale]/login/LoginForm.tsx

@@ -59,7 +59,7 @@ export function LoginForm() {
           placeholder={t('email')}
           autoFocus
           required
-          className="w-full rounded border border-amber-900/60 bg-[#2c1e14] px-3 py-2"
+          className="nw-input"
         />
         <div className="relative">
           <input
@@ -69,7 +69,7 @@ export function LoginForm() {
             placeholder={t('password')}
             maxLength={16}
             required
-            className="w-full rounded border border-amber-900/60 bg-[#2c1e14] px-3 py-2 pr-10"
+            className="nw-input pr-10"
           />
           <button
             type="button"
@@ -84,7 +84,7 @@ export function LoginForm() {
         <button
           type="submit"
           disabled={busy || (!!SITE_KEY && !captcha)}
-          className="w-full rounded bg-amber-600 px-4 py-2 font-semibold text-[#1b120b] disabled:opacity-60"
+          className="w-full nw-btn disabled:opacity-60"
         >
           {busy ? t('connecting') : t('submit')}
         </button>

web-next/app/[locale]/recover/RecoverForm.tsx

@@ -39,7 +39,7 @@ export function RecoverForm() {
     }
   }
 
-  const field = 'w-full rounded border border-amber-900/60 bg-[#2c1e14] px-3 py-2'
+  const field = 'nw-input'
 
   return (
     <div className="mx-auto max-w-sm">
@@ -52,7 +52,7 @@ export function RecoverForm() {
         </select>
         <input type="email" placeholder={t('email')} value={email} onChange={(e) => setEmail(e.target.value)} required className={field} />
         <Turnstile onVerify={setCaptcha} />
-        <button type="submit" disabled={busy || (!!SITE_KEY && !captcha)} className="w-full rounded bg-amber-600 px-4 py-2 font-semibold text-[#1b120b] disabled:opacity-60">
+        <button type="submit" disabled={busy || (!!SITE_KEY && !captcha)} className="w-full nw-btn disabled:opacity-60">
           {busy ? t('sending') : t('submit')}
         </button>
       </form>

web-next/app/[locale]/register/RegisterForm.tsx

@@ -53,7 +53,7 @@ export function RegisterForm() {
     }
   }
 
-  const input = 'w-full rounded border border-amber-900/60 bg-[#2c1e14] px-3 py-2'
+  const input = 'nw-input'
 
   return (
     <div className="mx-auto max-w-sm">
@@ -69,7 +69,7 @@ export function RegisterForm() {
           <span>{t('terms')}</span>
         </label>
         <Turnstile onVerify={setCaptcha} />
-        <button type="submit" disabled={busy || !accepted || (!!SITE_KEY && !captcha)} className="w-full rounded bg-amber-600 px-4 py-2 font-semibold text-[#1b120b] disabled:opacity-60">
+        <button type="submit" disabled={busy || !accepted || (!!SITE_KEY && !captcha)} className="w-full nw-btn disabled:opacity-60">
           {busy ? t('creating') : t('submit')}
         </button>
       </form>

web-next/app/[locale]/reset-password/ResetForm.tsx

@@ -42,14 +42,14 @@ export function ResetForm({ token }: { token: string }) {
     }
   }
 
-  const field = 'w-full rounded border border-amber-900/60 bg-[#2c1e14] px-3 py-2'
+  const field = 'nw-input'
 
   return (
     <div className="mx-auto max-w-sm text-center">
       <form onSubmit={handleSubmit} className="space-y-3">
         <input type="password" maxLength={16} placeholder={t('password')} value={password} onChange={(e) => setPassword(e.target.value)} required className={field} />
         <input type="password" maxLength={16} placeholder={t('confPassword')} value={confPassword} onChange={(e) => setConfPassword(e.target.value)} required className={field} />
-        <button type="submit" disabled={busy || done} className="w-full rounded bg-amber-600 px-4 py-2 font-semibold text-[#1b120b] disabled:opacity-60">
+        <button type="submit" disabled={busy || done} className="w-full nw-btn disabled:opacity-60">
           {busy ? t('saving') : t('submit')}
         </button>
       </form>

web-next/app/[locale]/security-token/SecurityTokenForm.tsx

@@ -43,7 +43,7 @@ export function SecurityTokenForm({ initialDate }: { initialDate: string | null
       <button
         onClick={request}
         disabled={busy}
-        className="rounded bg-amber-600 px-4 py-2 font-semibold text-[#1b120b] disabled:opacity-60"
+        className="nw-btn disabled:opacity-60"
       >
         {busy ? t('requesting') : t('request')}
       </button>

web-next/app/[locale]/select-account/SelectAccountForm.tsx

@@ -45,7 +45,7 @@ export function SelectAccountForm({ accounts }: { accounts: GameAccount[] }) {
           key={a.id}
           onClick={() => select(a.id)}
           disabled={busy !== null}
-          className="w-full rounded bg-amber-600 px-4 py-2 font-semibold text-[#1b120b] disabled:opacity-60"
+          className="w-full nw-btn disabled:opacity-60"
         >
           {busy === a.id ? t('entering') : a.username}
         </button>

web-next/app/api/character/rename/checkout/route.ts

@@ -1,41 +0,0 @@
-import { getSession } from '@/lib/session'
-import { getGameCharacters } from '@/lib/characters'
-import { getRenamePrice } from '@/lib/prices'
-import { createCheckoutSession } from '@/lib/stripe'
-
-export async function POST(request: Request) {
-  const session = await getSession()
-  if (!session.accountId) return Response.json({ success: false, error: 'notAuthenticated' }, { status: 401 })
-
-  let character = ''
-  try {
-    const body = await request.json()
-    character = String(body.character ?? '')
-  } catch {
-    return Response.json({ success: false, error: 'invalidRequest' }, { status: 400 })
-  }
-  if (!character) return Response.json({ success: false, error: 'invalidCharacter' })
-
-  const chars = await getGameCharacters(session.accountId)
-  if (!chars.find((c) => c.name === character)) {
-    return Response.json({ success: false, error: 'invalidCharacter' })
-  }
-
-  const price = await getRenamePrice()
-  const site = process.env.SITE_URL || ''
-  const ip = (request.headers.get('x-forwarded-for') || '').split(',')[0].trim() || '0.0.0.0'
-
-  const r = await createCheckoutSession({
-    accountId: session.accountId,
-    username: session.username || '',
-    email: session.bnetEmail || '',
-    acoreIp: ip,
-    amount: price,
-    characterName: character,
-    productName: `Renombrar personaje: ${character}`,
-    successUrl: `${site}/rename/success`,
-    cancelUrl: `${site}/rename`,
-  })
-  if (!r.success || !r.url) return Response.json({ success: false, error: 'stripeError' })
-  return Response.json({ success: true, url: r.url })
-}

web-next/app/globals.css

@@ -39,6 +39,9 @@ body {
   .nw-heading {
     @apply bg-gradient-to-b from-nw-gold-light to-nw-gold bg-clip-text font-extrabold tracking-wide text-transparent;
   }
+  .nw-input {
+    @apply w-full rounded-md border border-nw-border bg-nw-panel-2 px-3 py-2 text-nw-text outline-none transition focus:border-nw-gold;
+  }
 }
 
 /* Contenido HTML de noticias/foro */

web-next/components/AdminNewsManager.tsx

@@ -47,15 +47,15 @@ export function AdminNewsManager({ initialNews }: { initialNews: NewsItem[] }) {
     if (data.success) setNews(news.filter((n) => n.id !== id))
   }
 
-  const field = 'w-full rounded border border-amber-900/60 bg-[#2c1e14] px-3 py-2'
+  const field = 'nw-input'
 
   return (
     <div>
-      <form onSubmit={create} className="mb-8 space-y-3 rounded-lg border border-amber-900/60 bg-[#241812] p-4">
+      <form onSubmit={create} className="mb-8 space-y-3 nw-card">
         <input value={titulo} onChange={(e) => setTitulo(e.target.value)} placeholder={t('newsTitle')} maxLength={200} className={field} />
         <textarea value={contenido} onChange={(e) => setContenido(e.target.value)} placeholder={t('newsContent')} rows={5} className={field} />
         <input value={enlace} onChange={(e) => setEnlace(e.target.value)} placeholder={t('newsLink')} className={field} />
-        <button type="submit" disabled={busy} className="rounded bg-amber-600 px-4 py-2 font-semibold text-[#1b120b] disabled:opacity-60">
+        <button type="submit" disabled={busy} className="nw-btn disabled:opacity-60">
           {busy ? t('creating') : t('create')}
         </button>
         {error && <p className="text-red-400">{error}</p>}

web-next/components/AdminVotesManager.tsx

@@ -44,15 +44,15 @@ export function AdminVotesManager({ initial }: { initial: VoteSite[] }) {
     if ((await res.json()).success) setSites(sites.filter((s) => s.id !== id))
   }
 
-  const field = 'w-full rounded border border-amber-900/60 bg-[#2c1e14] px-3 py-2'
+  const field = 'nw-input'
   return (
     <div>
-      <form onSubmit={create} className="mb-8 space-y-3 rounded-lg border border-amber-900/60 bg-[#241812] p-4">
+      <form onSubmit={create} className="mb-8 space-y-3 nw-card">
         <input value={form.name} onChange={(e) => upd('name', e.target.value)} placeholder={t('voteName')} className={field} />
         <input value={form.url} onChange={(e) => upd('url', e.target.value)} placeholder={t('voteUrl')} className={field} />
         <input value={form.imageUrl} onChange={(e) => upd('imageUrl', e.target.value)} placeholder={t('voteImage')} className={field} />
         <input type="number" min="0" value={form.points} onChange={(e) => upd('points', e.target.value)} placeholder={t('votePoints')} className={field} />
-        <button type="submit" disabled={busy} className="rounded bg-amber-600 px-4 py-2 font-semibold text-[#1b120b] disabled:opacity-60">
+        <button type="submit" disabled={busy} className="nw-btn disabled:opacity-60">
           {busy ? t('creating') : t('create')}
         </button>
       </form>

web-next/components/CharacterActionForm.tsx

@@ -54,7 +54,7 @@ export function CharacterActionForm({ characters, endpoint, actionLabel }: Props
           value={character}
           onChange={(e) => setCharacter(e.target.value)}
           required
-          className="w-full rounded border border-amber-900/60 bg-[#2c1e14] px-3 py-2"
+          className="nw-input"
         >
           <option value="" disabled>
             {t('selectCharacter')}
@@ -68,7 +68,7 @@ export function CharacterActionForm({ characters, endpoint, actionLabel }: Props
         <button
           type="submit"
           disabled={busy || !character}
-          className="w-full rounded bg-amber-600 px-4 py-2 font-semibold text-[#1b120b] disabled:opacity-60"
+          className="w-full nw-btn disabled:opacity-60"
         >
           {busy ? t('processing') : actionLabel}
         </button>

web-next/components/GoldForm.tsx

@@ -36,7 +36,7 @@ export function GoldForm({ characters, options }: { characters: string[]; option
     }
   }
 
-  const field = 'w-full rounded border border-amber-900/60 bg-[#2c1e14] px-3 py-2'
+  const field = 'nw-input'
   if (characters.length === 0) return <p className="text-amber-200/70">{t('noCharactersYet')}</p>
 
   return (
@@ -54,7 +54,7 @@ export function GoldForm({ characters, options }: { characters: string[]; option
             </option>
           ))}
         </select>
-        <button type="submit" disabled={busy || !character || !amount} className="w-full rounded bg-amber-600 px-4 py-2 font-semibold text-[#1b120b] disabled:opacity-60">
+        <button type="submit" disabled={busy || !character || !amount} className="w-full nw-btn disabled:opacity-60">
           {busy ? t('processing') : tp('gold.buy')}
         </button>
       </form>

web-next/components/NewTopicForm.tsx

@@ -36,13 +36,13 @@ export function NewTopicForm({ forumId }: { forumId: number }) {
     }
   }
 
-  const field = 'w-full rounded border border-amber-900/60 bg-[#2c1e14] px-3 py-2'
+  const field = 'nw-input'
   return (
-    <form onSubmit={handleSubmit} className="mt-8 space-y-3 rounded-lg border border-amber-900/60 bg-[#241812] p-4">
+    <form onSubmit={handleSubmit} className="mt-8 space-y-3 nw-card">
       <h3 className="font-semibold text-amber-400">{t('newTopic')}</h3>
       <input value={name} onChange={(e) => setName(e.target.value)} placeholder={t('newTopicName')} maxLength={200} className={field} />
       <textarea value={text} onChange={(e) => setText(e.target.value)} placeholder={t('newTopicText')} rows={4} className={field} />
-      <button type="submit" disabled={busy} className="rounded bg-amber-600 px-4 py-2 font-semibold text-[#1b120b] disabled:opacity-60">
+      <button type="submit" disabled={busy} className="nw-btn disabled:opacity-60">
         {busy ? t('publishing') : t('publish')}
       </button>
       {error && <p className="text-red-400">{error}</p>}

web-next/components/PaidServiceForm.tsx

@@ -52,7 +52,7 @@ export function PaidServiceForm({ characters, checkoutEndpoint, payLabel }: Prop
           value={character}
           onChange={(e) => setCharacter(e.target.value)}
           required
-          className="w-full rounded border border-amber-900/60 bg-[#2c1e14] px-3 py-2"
+          className="nw-input"
         >
           <option value="" disabled>
             {t('selectCharacter')}
@@ -66,7 +66,7 @@ export function PaidServiceForm({ characters, checkoutEndpoint, payLabel }: Prop
         <button
           type="submit"
           disabled={busy || !character}
-          className="w-full rounded bg-amber-600 px-4 py-2 font-semibold text-[#1b120b] disabled:opacity-60"
+          className="w-full nw-btn disabled:opacity-60"
         >
           {busy ? t('processing') : payLabel}
         </button>

web-next/components/ReplyForm.tsx

@@ -37,11 +37,11 @@ export function ReplyForm({ topicId }: { topicId: number }) {
     }
   }
 
-  const field = 'w-full rounded border border-amber-900/60 bg-[#2c1e14] px-3 py-2'
+  const field = 'nw-input'
   return (
     <form onSubmit={handleSubmit} className="mt-6 space-y-3">
       <textarea value={text} onChange={(e) => setText(e.target.value)} placeholder={t('replyText')} rows={3} className={field} />
-      <button type="submit" disabled={busy} className="rounded bg-amber-600 px-4 py-2 font-semibold text-[#1b120b] disabled:opacity-60">
+      <button type="submit" disabled={busy} className="nw-btn disabled:opacity-60">
         {busy ? t('sending') : t('sendReply')}
       </button>
       {error && <p className="text-red-400">{error}</p>}

web-next/components/TransferForm.tsx

@@ -35,7 +35,7 @@ export function TransferForm({ characters, price }: { characters: string[]; pric
     }
   }
 
-  const field = 'w-full rounded border border-amber-900/60 bg-[#2c1e14] px-3 py-2'
+  const field = 'nw-input'
   if (characters.length === 0) return <p className="text-amber-200/70">{t('noCharactersYet')}</p>
 
   return (
@@ -46,7 +46,7 @@ export function TransferForm({ characters, price }: { characters: string[]; pric
           {characters.map((c) => <option key={c} value={c}>{c}</option>)}
         </select>
         <input type="text" placeholder={tp('transfer.destination')} value={destination} onChange={(e) => setDestination(e.target.value)} required className={field} />
-        <button type="submit" disabled={busy || !character || !destination.trim()} className="w-full rounded bg-amber-600 px-4 py-2 font-semibold text-[#1b120b] disabled:opacity-60">
+        <button type="submit" disabled={busy || !character || !destination.trim()} className="w-full nw-btn disabled:opacity-60">
           {busy ? t('processing') : tp('transfer.pay', { price })}
         </button>
       </form>

web-next/components/VotePanel.tsx

@@ -43,7 +43,7 @@ export function VotePanel({ sites, canVote }: { sites: VoteSite[]; canVote: bool
     <>
       <div className="flex flex-wrap justify-center gap-4">
         {sites.map((s) => (
-          <div key={s.id} className="w-40 rounded-lg border border-amber-900/60 bg-[#241812] p-3 text-center">
+          <div key={s.id} className="w-40 nw-card p-3 text-center">
             {s.image_url && <img src={s.image_url} alt={s.name} className="mx-auto mb-2 max-h-16" />}
             <p className="font-semibold text-amber-300">{s.name}</p>
             <p className="mb-2 text-xs text-amber-200/60">