diff --git a/web-next/app/[locale]/gold/page.tsx b/web-next/app/[locale]/gold/page.tsx
index 0e16d54..49bcab7 100644
--- a/web-next/app/[locale]/gold/page.tsx
+++ b/web-next/app/[locale]/gold/page.tsx
@@ -22,7 +22,7 @@ export default async function GoldPage({ params }: { params: Promise<{ locale: s
   return (
     <PageShell title={t('gold.title')}>
       <ServiceBox>
-        <GoldForm characters={chars.map((c) => c.name)} options={options} />
+        <GoldForm characters={chars.map((c) => ({ name: c.name, classCss: c.classCss }))} options={options} />
       </ServiceBox>
     </PageShell>
   )
diff --git a/web-next/app/[locale]/recruit/page.tsx b/web-next/app/[locale]/recruit/page.tsx
index 8bcd996..09e9102 100644
--- a/web-next/app/[locale]/recruit/page.tsx
+++ b/web-next/app/[locale]/recruit/page.tsx
@@ -20,7 +20,9 @@ export default async function RecruitPage({ params }: { params: Promise<{ locale
   const rewards = loggedIn ? await getRecruitRewards(session.accountId!) : []
   const level80Count = loggedIn ? await getRecruitedLevel80Count(session.accountId!) : 0
   const stats = loggedIn ? await getRecruitStats(session.accountId!) : { isRecruited: false, recruitedCount: 0 }
-  const characters = loggedIn ? (await getGameCharacters(session.accountId!)).map((c) => c.name) : []
+  const characters = loggedIn
+    ? (await getGameCharacters(session.accountId!)).map((c) => ({ name: c.name, classCss: c.classCss }))
+    : []
 
   return (
     <PageShell title={t('title')}>
diff --git a/web-next/app/[locale]/revive/page.tsx b/web-next/app/[locale]/revive/page.tsx
index 0147749..19e45ee 100644
--- a/web-next/app/[locale]/revive/page.tsx
+++ b/web-next/app/[locale]/revive/page.tsx
@@ -20,7 +20,15 @@ export default async function RevivePage({ params }: { params: Promise<{ locale:
   return (
     <PageShell title={t('reviveTitle')}>
       <ServiceBox>
-        <CharacterActionForm characters={chars.map((c) => c.name)} endpoint="/api/character/revive" actionLabel={t('reviveAction')} buttonClass="revive-button" />
+        <CharacterActionForm
+          characters={chars.map((c) => ({ name: c.name, classCss: c.classCss }))}
+          endpoint="/api/character/revive"
+          actionLabel={t('reviveAction')}
+          processingLabel={t('reviveProcessing')}
+          doneLabel={t('reviveDone')}
+          promptText={t('reviveChoose')}
+          buttonClass="revive-button"
+        />
       </ServiceBox>
     </PageShell>
   )
diff --git a/web-next/app/[locale]/trade-points/page.tsx b/web-next/app/[locale]/trade-points/page.tsx
index 49694f2..dca76da 100644
--- a/web-next/app/[locale]/trade-points/page.tsx
+++ b/web-next/app/[locale]/trade-points/page.tsx
@@ -79,7 +79,7 @@ export default async function TradePointsPage({ params }: { params: Promise<{ lo
           </div>
         </fieldset>
 
-        <TradePointsForm characters={chars.map((c) => c.name)} />
+        <TradePointsForm characters={chars.map((c) => ({ name: c.name, classCss: c.classCss }))} />
       </ServiceBox>
     </PageShell>
   )
diff --git a/web-next/app/[locale]/transfer/page.tsx b/web-next/app/[locale]/transfer/page.tsx
index 75a9602..b4883f3 100644
--- a/web-next/app/[locale]/transfer/page.tsx
+++ b/web-next/app/[locale]/transfer/page.tsx
@@ -22,7 +22,7 @@ export default async function TransferPage({ params }: { params: Promise<{ local
   return (
     <PageShell title={t('transfer.title')}>
       <ServiceBox>
-        <TransferForm characters={chars.map((c) => c.name)} price={price} />
+        <TransferForm characters={chars.map((c) => ({ name: c.name, classCss: c.classCss }))} price={price} />
       </ServiceBox>
     </PageShell>
   )
diff --git a/web-next/app/[locale]/unstuck/page.tsx b/web-next/app/[locale]/unstuck/page.tsx
index fa96e89..6f21173 100644
--- a/web-next/app/[locale]/unstuck/page.tsx
+++ b/web-next/app/[locale]/unstuck/page.tsx
@@ -20,7 +20,27 @@ export default async function UnstuckPage({ params }: { params: Promise<{ locale
   return (
     <PageShell title={t('unstuckTitle')}>
       <ServiceBox>
-        <CharacterActionForm characters={chars.map((c) => c.name)} endpoint="/api/character/unstuck" actionLabel={t('unstuckAction')} buttonClass="unstuck-button" />
+        <br />
+        <p>{t.rich('unstuckInfo1', { b: (c) => <span>{c}</span> })}</p>
+        <p>{t('unstuckInfo2')}</p>
+        <br />
+        <fieldset>
+          <legend>NOTA</legend>
+          <div className="separate2">
+            <p>{t('unstuckNote1')}</p>
+            <p>{t('unstuckNote2')}</p>
+          </div>
+        </fieldset>
+
+        <CharacterActionForm
+          characters={chars.map((c) => ({ name: c.name, classCss: c.classCss }))}
+          endpoint="/api/character/unstuck"
+          actionLabel={t('unstuckAction')}
+          processingLabel={t('unstuckProcessing')}
+          doneLabel={t('unstuckDone')}
+          promptText={t('unstuckChoose')}
+          buttonClass="unstuck-button"
+        />
       </ServiceBox>
     </PageShell>
   )
diff --git a/web-next/components/CharacterActionForm.tsx b/web-next/components/CharacterActionForm.tsx
index c112781..88945b0 100644
--- a/web-next/components/CharacterActionForm.tsx
+++ b/web-next/components/CharacterActionForm.tsx
@@ -2,26 +2,41 @@
 
 import { useState } from 'react'
 import { useTranslations } from 'next-intl'
+import { useRouter } from '@/i18n/navigation'
+import { CharacterSelect, type CharOption } from '@/components/CharacterSelect'
 
 const ERROR_KEYS = ['noCharacter', 'notOfflineOrOwned', 'cooldown', 'soapError'] as const
 
 interface Props {
-  characters: string[]
+  characters: CharOption[]
   endpoint: string
   actionLabel: string
   buttonClass?: string
+  processingLabel?: string // texto mientras procesa (por defecto t('processing'))
+  doneLabel?: string // si se pasa, muestra el estado "hecho" (dorado) y refresca a los 5s
+  promptText?: string // texto encima del selector (por defecto t('choose'))
 }
 
 /** Formulario reutilizable para acciones de personaje por SOAP (revive, unstuck...). */
-export function CharacterActionForm({ characters, endpoint, actionLabel, buttonClass = '' }: Props) {
+export function CharacterActionForm({
+  characters,
+  endpoint,
+  actionLabel,
+  buttonClass = '',
+  processingLabel,
+  doneLabel,
+  promptText,
+}: Props) {
   const t = useTranslations('Services')
+  const router = useRouter()
   const [character, setCharacter] = useState('')
   const [busy, setBusy] = useState(false)
+  const [done, setDone] = useState(false)
   const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null)
 
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault()
-    if (busy || !character) return
+    if (busy || done || !character) return
     setBusy(true)
     setMessage(null)
     try {
@@ -32,10 +47,22 @@ export function CharacterActionForm({ characters, endpoint, actionLabel, buttonC
         body: JSON.stringify({ character }),
       })
       const data: { success?: boolean; error?: string } = await res.json()
-      if (data.success) setMessage({ ok: true, text: t('success') })
-      else {
+      if (data.success) {
+        setMessage({ ok: true, text: t('success') })
+        if (doneLabel) {
+          // Como el original: tras 5 s se limpia el formulario y se refresca.
+          setDone(true)
+          setTimeout(() => {
+            setDone(false)
+            setCharacter('')
+            setMessage(null)
+            router.refresh()
+          }, 5000)
+        }
+      } else {
         const key = (ERROR_KEYS as readonly string[]).includes(data.error ?? '') ? data.error! : 'genericError'
         setMessage({ ok: false, text: t(key) })
+        setTimeout(() => setMessage(null), 5000)
       }
     } catch {
       setMessage({ ok: false, text: t('genericError') })
@@ -50,29 +77,25 @@ export function CharacterActionForm({ characters, endpoint, actionLabel, buttonC
 
   return (
     <div className="centered">
-      <p>{t('choose')}</p>
+      <br />
+      <br />
+      <p>{promptText ?? t('choose')}</p>
       <br />
       <form onSubmit={handleSubmit} acceptCharset="utf-8">
-        <select value={character} onChange={(e) => setCharacter(e.target.value)} required>
-          <option value="" disabled>
-            {t('selectCharacter')}
-          </option>
-          {characters.map((c) => (
-            <option key={c} value={c}>
-              {c}
-            </option>
-          ))}
-        </select>
+        <CharacterSelect characters={characters} value={character} onChange={setCharacter} placeholder={t('selectCharacter')} />
         <br />
-        <button type="submit" className={buttonClass} disabled={busy || !character}>
-          {busy ? t('processing') : actionLabel}
+        <button
+          type="submit"
+          className={buttonClass}
+          disabled={busy || done || !character}
+          style={done ? { color: '#d79602' } : undefined}
+        >
+          {done && doneLabel ? doneLabel : busy ? processingLabel ?? t('processing') : actionLabel}
         </button>
       </form>
       <hr />
       <div className="alert-message" style={{ display: message ? 'block' : 'none' }}>
-        {message && (
-          <span className={message.ok ? 'ok-form-response' : 'red-form-response'}>{message.text}</span>
-        )}
+        {message && <span className={message.ok ? 'ok-form-response' : 'red-form-response'}>{message.text}</span>}
       </div>
     </div>
   )
diff --git a/web-next/components/CharacterSelect.tsx b/web-next/components/CharacterSelect.tsx
new file mode 100644
index 0000000..5efd75e
--- /dev/null
+++ b/web-next/components/CharacterSelect.tsx
@@ -0,0 +1,46 @@
+'use client'
+
+export interface CharOption {
+  name: string
+  classCss?: string // clase CSS de color por clase (priest, warrior…)
+}
+
+/**
+ * Selector de personaje con las opciones coloreadas por clase (como el diseño
+ * original: `class="priest big-font"`). El propio <select> toma el color de la
+ * clase del personaje seleccionado. Se usa en todas las herramientas que piden
+ * elegir un personaje.
+ */
+export function CharacterSelect({
+  characters,
+  value,
+  onChange,
+  placeholder,
+  name,
+  required = true,
+  className,
+}: {
+  characters: CharOption[]
+  value: string
+  onChange: (value: string) => void
+  placeholder: string
+  name?: string
+  required?: boolean
+  className?: string
+}) {
+  const selectedCss = characters.find((c) => c.name === value)?.classCss
+  const selectClass = [className, selectedCss].filter(Boolean).join(' ') || undefined
+
+  return (
+    <select name={name} className={selectClass} value={value} onChange={(e) => onChange(e.target.value)} required={required}>
+      <option value="" disabled>
+        {placeholder}
+      </option>
+      {characters.map((c) => (
+        <option key={c.name} value={c.name} className={c.classCss ? `${c.classCss} big-font` : undefined}>
+          {c.name}
+        </option>
+      ))}
+    </select>
+  )
+}
diff --git a/web-next/components/GoldForm.tsx b/web-next/components/GoldForm.tsx
index 15d39eb..55eb773 100644
--- a/web-next/components/GoldForm.tsx
+++ b/web-next/components/GoldForm.tsx
@@ -3,8 +3,9 @@
 import { useState } from 'react'
 import { useTranslations } from 'next-intl'
 import type { GoldOption } from '@/lib/prices'
+import { CharacterSelect, type CharOption } from '@/components/CharacterSelect'
 
-export function GoldForm({ characters, options }: { characters: string[]; options: GoldOption[] }) {
+export function GoldForm({ characters, options }: { characters: CharOption[]; options: GoldOption[] }) {
   const t = useTranslations('Services')
   const tp = useTranslations('Paid')
   const [character, setCharacter] = useState('')
@@ -41,10 +42,7 @@ export function GoldForm({ characters, options }: { characters: string[]; option
   return (
     <div className="centered">
       <form onSubmit={handleSubmit} acceptCharset="utf-8">
-        <select value={character} onChange={(e) => setCharacter(e.target.value)} required>
-          <option value="" disabled>{t('selectCharacter')}</option>
-          {characters.map((c) => <option key={c} value={c}>{c}</option>)}
-        </select>
+        <CharacterSelect characters={characters} value={character} onChange={setCharacter} placeholder={t('selectCharacter')} />
         <br />
         <select value={amount} onChange={(e) => setAmount(e.target.value)} required>
           <option value="" disabled>{tp('gold.selectAmount')}</option>
diff --git a/web-next/components/PaidServiceForm.tsx b/web-next/components/PaidServiceForm.tsx
index 4dce205..fbdd8e4 100644
--- a/web-next/components/PaidServiceForm.tsx
+++ b/web-next/components/PaidServiceForm.tsx
@@ -2,9 +2,10 @@
 
 import { useState } from 'react'
 import { useTranslations } from 'next-intl'
+import { CharacterSelect, type CharOption } from '@/components/CharacterSelect'
 
 interface Props {
-  characters: string[]
+  characters: CharOption[]
   checkoutEndpoint: string
   payLabel: string // ya formateado con el precio
   buttonClass?: string
@@ -51,16 +52,7 @@ export function PaidServiceForm({ characters, checkoutEndpoint, payLabel, button
       <p>{t('choose')}</p>
       <br />
       <form onSubmit={handleSubmit} acceptCharset="utf-8">
-        <select value={character} onChange={(e) => setCharacter(e.target.value)} required>
-          <option value="" disabled>
-            {t('selectCharacter')}
-          </option>
-          {characters.map((c) => (
-            <option key={c} value={c}>
-              {c}
-            </option>
-          ))}
-        </select>
+        <CharacterSelect characters={characters} value={character} onChange={setCharacter} placeholder={t('selectCharacter')} />
         <br />
         <button type="submit" className={buttonClass} disabled={busy || !character}>
           {busy ? t('processing') : payLabel}
diff --git a/web-next/components/RecruitPanel.tsx b/web-next/components/RecruitPanel.tsx
index 1e36769..31f557a 100644
--- a/web-next/components/RecruitPanel.tsx
+++ b/web-next/components/RecruitPanel.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from 'react'
 import type { RecruitRewardView } from '@/lib/recruit-claim'
+import type { CharOption } from '@/components/CharacterSelect'
 
 const ICON_BASE = 'https://wotlk.ultimowow.com/static/images/wow/icons/tiny'
 
@@ -32,12 +33,13 @@ export function RecruitPanel({
   recruitedCount,
 }: {
   rewards: RecruitRewardView[]
-  characters: string[]
+  characters: CharOption[]
   level80Count: number
   isRecruited: boolean
   recruitedCount: number
 }) {
-  const [character, setCharacter] = useState(characters[0] ?? '')
+  const [character, setCharacter] = useState(characters[0]?.name ?? '')
+  const selectedCss = characters.find((c) => c.name === character)?.classCss
   const [busyId, setBusyId] = useState<number | null>(null)
   const [msg, setMsg] = useState<{ ok: boolean; text: string } | null>(null)
 
@@ -97,9 +99,9 @@ export function RecruitPanel({
       {characters.length > 0 && (
         <p className="lefted">
           Recibir recompensas en:{' '}
-          <select value={character} onChange={(e) => setCharacter(e.target.value)} className="account-select">
+          <select value={character} onChange={(e) => setCharacter(e.target.value)} className={['account-select', selectedCss].filter(Boolean).join(' ')}>
             {characters.map((c) => (
-              <option key={c} value={c}>{c}</option>
+              <option key={c.name} value={c.name} className={c.classCss ? `${c.classCss} big-font` : undefined}>{c.name}</option>
             ))}
           </select>
         </p>
diff --git a/web-next/components/ServicePageContent.tsx b/web-next/components/ServicePageContent.tsx
index fc9c2d6..08f19ea 100644
--- a/web-next/components/ServicePageContent.tsx
+++ b/web-next/components/ServicePageContent.tsx
@@ -25,7 +25,7 @@ export async function ServicePageContent({ service, locale }: { service: string;
     <PageShell title={t(`${service}.title`)}>
       <ServiceBox>
         <PaidServiceForm
-          characters={chars.map((c) => c.name)}
+          characters={chars.map((c) => ({ name: c.name, classCss: c.classCss }))}
           checkoutEndpoint={`/api/character/${service}/checkout`}
           payLabel={t(`${service}.pay`, { price })}
           buttonClass={`${service}-button`}
diff --git a/web-next/components/TradePointsForm.tsx b/web-next/components/TradePointsForm.tsx
index 3f4d320..0e59523 100644
--- a/web-next/components/TradePointsForm.tsx
+++ b/web-next/components/TradePointsForm.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from 'react'
 import { Turnstile } from '@/components/Turnstile'
+import { CharacterSelect, type CharOption } from '@/components/CharacterSelect'
 
 function tradeError(error?: string): string {
   switch (error) {
@@ -78,7 +79,7 @@ function PasswordInput({
 }
 
 /* ---------------------------------- VENTA ---------------------------------- */
-function SellForm({ characters, visible }: { characters: string[]; visible: boolean }) {
+function SellForm({ characters, visible }: { characters: CharOption[]; visible: boolean }) {
   const [points, setPoints] = useState('')
   const [gold, setGold] = useState('')
   const [character, setCharacter] = useState('')
@@ -138,10 +139,7 @@ function SellForm({ characters, visible }: { characters: string[]; visible: bool
             <tr><td><input type="number" maxLength={5} min="1" max="99999" step="1" value={gold} onChange={(e) => setGold(e.target.value)} placeholder="Valor del código en oro" required /></td></tr>
             <tr><td>¿A qué personaje se enviará el oro?</td></tr>
             <tr><td>
-              <select value={character} onChange={(e) => setCharacter(e.target.value)} required>
-                <option disabled value="">Selecciona un personaje</option>
-                {characters.map((c) => <option key={c} value={c}>{c}</option>)}
-              </select>
+              <CharacterSelect characters={characters} value={character} onChange={setCharacter} placeholder="Selecciona un personaje" />
             </td></tr>
             <tr><td><br /><PasswordInput id="password-sell" value={password} onChange={setPassword} placeholder="Contraseña de tu cuenta" maxLength={16} /></td></tr>
             <tr><td><input type="text" maxLength={6} value={token} onChange={(e) => setToken(e.target.value)} placeholder="Token de seguridad" required /></td></tr>
@@ -169,7 +167,7 @@ function SellForm({ characters, visible }: { characters: string[]; visible: bool
 }
 
 /* ---------------------------------- COMPRA --------------------------------- */
-function BuyForm({ characters, visible }: { characters: string[]; visible: boolean }) {
+function BuyForm({ characters, visible }: { characters: CharOption[]; visible: boolean }) {
   const [code, setCode] = useState('')
   const [character, setCharacter] = useState('')
   const [password, setPassword] = useState('')
@@ -247,10 +245,7 @@ function BuyForm({ characters, visible }: { characters: string[]; visible: boole
             )}
             <tr><td>¿De qué personaje se cobrará el oro?</td></tr>
             <tr><td>
-              <select value={character} onChange={(e) => setCharacter(e.target.value)} required>
-                <option disabled value="">Selecciona un personaje</option>
-                {characters.map((c) => <option key={c} value={c}>{c}</option>)}
-              </select>
+              <CharacterSelect characters={characters} value={character} onChange={setCharacter} placeholder="Selecciona un personaje" />
             </td></tr>
             <tr><td><br /><PasswordInput id="password-buy" value={password} onChange={setPassword} placeholder="Contraseña de tu cuenta" maxLength={16} /></td></tr>
             <tr><td><input type="text" maxLength={6} value={token} onChange={(e) => setToken(e.target.value)} placeholder="Token de seguridad" required /></td></tr>
@@ -268,7 +263,7 @@ function BuyForm({ characters, visible }: { characters: string[]; visible: boole
   )
 }
 
-export function TradePointsForm({ characters }: { characters: string[] }) {
+export function TradePointsForm({ characters }: { characters: CharOption[] }) {
   // Como el original: al cargar no se muestra ningún formulario; se revela al
   // pulsar VENTA o COMPRA.
   const [active, setActive] = useState<'sell' | 'buy' | null>(null)
diff --git a/web-next/components/TransferForm.tsx b/web-next/components/TransferForm.tsx
index 0558fa1..d2e06bb 100644
--- a/web-next/components/TransferForm.tsx
+++ b/web-next/components/TransferForm.tsx
@@ -2,8 +2,9 @@
 
 import { useState } from 'react'
 import { useTranslations } from 'next-intl'
+import { CharacterSelect, type CharOption } from '@/components/CharacterSelect'
 
-export function TransferForm({ characters, price }: { characters: string[]; price: number }) {
+export function TransferForm({ characters, price }: { characters: CharOption[]; price: number }) {
   const t = useTranslations('Services')
   const tp = useTranslations('Paid')
   const [character, setCharacter] = useState('')
@@ -40,10 +41,7 @@ export function TransferForm({ characters, price }: { characters: string[]; pric
   return (
     <div className="centered">
       <form onSubmit={handleSubmit} acceptCharset="utf-8">
-        <select value={character} onChange={(e) => setCharacter(e.target.value)} required>
-          <option value="" disabled>{t('selectCharacter')}</option>
-          {characters.map((c) => <option key={c} value={c}>{c}</option>)}
-        </select>
+        <CharacterSelect characters={characters} value={character} onChange={setCharacter} placeholder={t('selectCharacter')} />
         <br />
         <input type="text" placeholder={tp('transfer.destination')} value={destination} onChange={(e) => setDestination(e.target.value)} required />
         <br />
diff --git a/web-next/components/VotePanel.tsx b/web-next/components/VotePanel.tsx
index 37804dd..d11f901 100644
--- a/web-next/components/VotePanel.tsx
+++ b/web-next/components/VotePanel.tsx
@@ -56,7 +56,7 @@ export function VotePanel({ sites, canVote }: { sites: VoteSiteStatus[]; canVote
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img className="refresh-icon" src={REFRESH_ICON} title={t('refresh')} alt={t('refresh')} />
       </button>
-      <p><span>{t('note')}</span></p>
+      <p><span>{t('noteLabel')}</span> {t('note')}</p>
       <br />
 
       {sites.map((s) => {
@@ -78,28 +78,31 @@ export function VotePanel({ sites, canVote }: { sites: VoteSiteStatus[]; canVote
                 <tr><td className="lefted">{t('pv')}: <span>{s.points}</span></td></tr>
                 <tr>
                   <td className="lefted small-font third-brown">
-                    {s.lastVoteAt ? t('lastVote', { date: new Date(s.lastVoteAt).toLocaleString(locale) }) : t('neverVoted')}
+                    {s.lastVoteAt ? t('lastVote', { date: new Date(s.lastVoteAt).toLocaleString(locale) }) : ''}
                   </td>
                 </tr>
                 <tr><td><hr /></td></tr>
                 <tr>
                   <td>
-                    {canVote ? (
+                    {!canVote ? (
+                      <a className="vote-button" href={s.url} target="_blank" rel="noopener noreferrer">
+                        {t('vote')}
+                      </a>
+                    ) : isVoted || s.onCooldown ? (
+                      <button type="button" name="vote" className="voted-button" disabled>
+                        {t('voted')}
+                      </button>
+                    ) : (
                       <button
                         type="button"
                         name="vote"
                         className="vote-button"
                         value={s.url}
                         onClick={() => vote(s)}
-                        disabled={busyId !== null || isVoted}
-                        style={isVoted ? { color: '#d79602' } : undefined}
+                        disabled={busyId !== null}
                       >
-                        {isVoted ? t('voted') : busyId === s.id ? t('voting') : t('vote')}
+                        {busyId === s.id ? t('voting') : t('vote')}
                       </button>
-                    ) : (
-                      <a className="vote-button" href={s.url} target="_blank" rel="noopener noreferrer">
-                        {t('vote')}
-                      </a>
                     )}
                   </td>
                 </tr>
diff --git a/web-next/lib/characters.ts b/web-next/lib/characters.ts
index 76bdb12..081b454 100644
--- a/web-next/lib/characters.ts
+++ b/web-next/lib/characters.ts
@@ -1,19 +1,21 @@
 import type { RowDataPacket } from 'mysql2'
 import { db, DB } from './db'
+import { getClassCss } from './character-info'
 
 export interface GameCharacter {
   name: string
   online: boolean
+  classCss: string // clase CSS de color por clase (priest, warrior…), para el <select>
 }
 
 /** Personajes de una cuenta de juego (acore_characters). Vacío si no está poblada. */
 export async function getGameCharacters(accountId: number): Promise<GameCharacter[]> {
   try {
     const [rows] = await db(DB.characters).query<RowDataPacket[]>(
-      'SELECT name, online FROM characters WHERE account = ?',
+      'SELECT name, online, class FROM characters WHERE account = ?',
       [accountId],
     )
-    return rows.map((r) => ({ name: r.name, online: r.online === 1 }))
+    return rows.map((r) => ({ name: r.name, online: r.online === 1, classCss: getClassCss(r.class) }))
   } catch {
     return []
   }
diff --git a/web-next/lib/vote.ts b/web-next/lib/vote.ts
index f0f89dc..e5f5d60 100644
--- a/web-next/lib/vote.ts
+++ b/web-next/lib/vote.ts
@@ -33,12 +33,13 @@ export async function getVoteSites(): Promise<VoteSite[]> {
 
 export interface VoteSiteStatus extends VoteSite {
   lastVoteAt: string | null // ISO del último voto de la cuenta en este sitio, o null
+  onCooldown: boolean // true si aún no puede volver a votar (dentro de las 12h30m)
 }
 
 /** Sitios de votación con la fecha del último voto de la cuenta (para el recuadro). */
 export async function getVoteSitesForAccount(accountId: number): Promise<VoteSiteStatus[]> {
   const sites = await getVoteSites()
-  if (!accountId) return sites.map((s) => ({ ...s, lastVoteAt: null }))
+  if (!accountId) return sites.map((s) => ({ ...s, lastVoteAt: null, onCooldown: false }))
   try {
     const [rows] = await db(DB.default).query<RowDataPacket[]>(
       'SELECT vote_site_id, MAX(created_at) AS last FROM home_votelog WHERE account_id = ? GROUP BY vote_site_id',
@@ -47,10 +48,15 @@ export async function getVoteSitesForAccount(accountId: number): Promise<VoteSit
     const map = new Map(rows.map((r) => [Number(r.vote_site_id), r.last as Date]))
     return sites.map((s) => {
       const last = map.get(s.id)
-      return { ...s, lastVoteAt: last ? new Date(last).toISOString() : null }
+      const lastMs = last ? new Date(last).getTime() : 0
+      return {
+        ...s,
+        lastVoteAt: last ? new Date(last).toISOString() : null,
+        onCooldown: lastMs > 0 && Date.now() - lastMs < COOLDOWN_MS,
+      }
     })
   } catch {
-    return sites.map((s) => ({ ...s, lastVoteAt: null }))
+    return sites.map((s) => ({ ...s, lastVoteAt: null, onCooldown: false }))
   }
 }
 
diff --git a/web-next/messages/en.json b/web-next/messages/en.json
index e4ddfdc..2cc1621 100644
--- a/web-next/messages/en.json
+++ b/web-next/messages/en.json
@@ -256,7 +256,17 @@
     "info": "Information",
     "back": "Back to my account",
     "backShort": "Back",
-    "choose": "Choose your character:"
+    "choose": "Choose your character:",
+    "unstuckInfo1": "The <b>Unstuck character</b> tool lets you unstuck a character that is stuck and moves it to its Hearthstone location.",
+    "unstuckInfo2": "Use this option when your character is trapped and no other option works.",
+    "unstuckNote1": "The character must be offline.",
+    "unstuckNote2": "You can repeat the action on the same character every 12 hours.",
+    "unstuckChoose": "Choose the character you want to unstuck",
+    "unstuckProcessing": "Unstucking",
+    "unstuckDone": "Unstucked",
+    "reviveChoose": "Choose the character you want to revive",
+    "reviveProcessing": "Reviving",
+    "reviveDone": "Revived"
   },
   "Paid": {
     "rename": {
@@ -522,7 +532,8 @@
     "title": "Vote for us",
     "info": "Vote for {server} on the sites below and earn VP. You can vote on each site every 12 hours.",
     "sitesTitle": "Vote sites",
-    "note": "Note: some sites may take a few minutes to credit the vote.",
+    "noteLabel": "Note:",
+    "note": "some sites may take a few minutes to credit the vote.",
     "refresh": "Refresh",
     "vote": "Vote",
     "voting": "Voting",
diff --git a/web-next/messages/es.json b/web-next/messages/es.json
index 3954818..c3dae33 100644
--- a/web-next/messages/es.json
+++ b/web-next/messages/es.json
@@ -256,7 +256,17 @@
     "info": "Información",
     "back": "Regresar a mi cuenta",
     "backShort": "Regresar",
-    "choose": "Escoge el personaje:"
+    "choose": "Escoge el personaje:",
+    "unstuckInfo1": "La herramienta <b>Desbloquear personaje</b> te permite desbloquear un personaje que esté atascado y lo mueve a la ubicación de su Piedra Hogar.",
+    "unstuckInfo2": "Usa esta opción cuando tu personaje se encuentre atrapado y ninguna otra opción te sirva.",
+    "unstuckNote1": "Se requiere que el personaje esté desconectado.",
+    "unstuckNote2": "Se puede repetir la acción en un mismo personaje cada 12 horas.",
+    "unstuckChoose": "Escoge el personaje que quieres desbloquear",
+    "unstuckProcessing": "Desbloqueando",
+    "unstuckDone": "Desbloqueado",
+    "reviveChoose": "Escoge el personaje que quieres revivir",
+    "reviveProcessing": "Reviviendo",
+    "reviveDone": "Revivido"
   },
   "Paid": {
     "rename": {
@@ -522,7 +532,8 @@
     "title": "Votar por nosotros",
     "info": "Vota por {server} en las siguientes páginas y recibe PV. Puedes votar en cada sitio cada 12 horas.",
     "sitesTitle": "Sitios de votación",
-    "note": "Nota: algunos sitios pueden demorar unos minutos en acreditar el voto.",
+    "noteLabel": "Nota:",
+    "note": "algunos sitios pueden demorar unos minutos en acreditar el voto.",
     "refresh": "Refrescar",
     "vote": "Votar",
     "voting": "Votando",
diff --git a/web-next/public/nw-themes/nw-ryu/nw-css/novawow-style.css b/web-next/public/nw-themes/nw-ryu/nw-css/novawow-style.css
index 0d62ecb..24d262c 100644
--- a/web-next/public/nw-themes/nw-ryu/nw-css/novawow-style.css
+++ b/web-next/public/nw-themes/nw-ryu/nw-css/novawow-style.css
@@ -106,6 +106,14 @@ legend {
     width: 48.1%;
 }
 
+.account-fieldset {
+    background: hsla(0, 100%, 0%, 0.7);
+    background-blend-mode: saturation;
+    background-position: left;
+    background-size: 200%;
+    background-image: url(../nw-images/nw-general/account-info.png);
+}
+
 @media screen and (max-width: 1024px) {
     .account-fieldset {
         display: block;
@@ -850,12 +858,14 @@ textarea:focus, select:focus, input[type=password]:focus, input[type=number]:foc
 }
 /* acc panels */
 #account-settings, #character-settings, #account-history {
-    background: hsla(0,100%,0%,0.5);
-    background-image: url(../nw-images/nw-general/account-settings.webp);
+    background: hsla(0, 100%, 0%, 0.7);
+    background-image: url(../nw-images/nw-general/account-info.png);
     background-repeat: no-repeat;
+    background-blend-mode: saturation;
     background-position: right;
+    background-size: 100%;
     position: relative;
-    margin-bottom: 10px;
+    margin-bottom: 15px;
     border: 2px solid #352e2b;
     cursor: pointer;
     text-align: center;
diff --git a/web-next/public/nw-themes/nw-ryu/nw-images/nw-general/account-info.png b/web-next/public/nw-themes/nw-ryu/nw-images/nw-general/account-info.png
new file mode 100644
index 0000000..c318f70
Binary files /dev/null and b/web-next/public/nw-themes/nw-ryu/nw-images/nw-general/account-info.png differ
diff --git a/web-next/sql/seed_votesites.sql b/web-next/sql/seed_votesites.sql
new file mode 100644
index 0000000..8a5e680
--- /dev/null
+++ b/web-next/sql/seed_votesites.sql
@@ -0,0 +1,14 @@
+-- Sitios de votación (/vote-points). Se gestionan en /admin/votes, pero este seed
+-- reproduce los 4 del diseño original con sus logos (public/.../nw-vote-sites/) y URLs.
+-- OJO: las URLs apuntan a los listados de UltimoWoW (IDs 94649/496618/94147/91402);
+-- cámbialas por las de NovaWoW/nightspire en /admin/votes para que los votos cuenten aquí.
+
+DELETE FROM home_votelog WHERE vote_site_id IN (SELECT id FROM home_votesite WHERE name = 'TopTest');
+DELETE FROM home_votesite WHERE name = 'TopTest';
+
+INSERT INTO home_votesite (name, url, image_url, points, created_at, updated_at) VALUES
+  ('Gtop100', 'https://gtop100.com/topsites/World-of-Warcraft/sitedetails/UltimoWoW-94649?vote=1&pingUsername=91402', '/nw-themes/nw-ryu/nw-images/nw-vote-sites/gtop100.jpg', 1, NOW(), NOW()),
+  ('TopG', 'https://topg.org/wow-private-servers/in-496618-91402', '/nw-themes/nw-ryu/nw-images/nw-vote-sites/topg.webp', 1, NOW(), NOW()),
+  ('Top100arena', 'http://www.top100arena.com/in.asp?id=94147&incentive=91402', '/nw-themes/nw-ryu/nw-images/nw-vote-sites/top100arena.jpg', 1, NOW(), NOW()),
+  ('Arena-Top100', 'https://www.arena-top100.com/index.php?a=in&u=UltimoWoW&id=91402', '/nw-themes/nw-ryu/nw-images/nw-vote-sites/arenatop100.webp', 1, NOW(), NOW())
+ON DUPLICATE KEY UPDATE url = VALUES(url), image_url = VALUES(image_url), points = VALUES(points), updated_at = NOW();