From af2438399d3ec77f419a9c9db9a32298ac556fd3 Mon Sep 17 00:00:00 2001
From: adevopg <adevopg@gmail.com>
Date: Mon, 13 Jul 2026 01:44:49 +0000
Subject: [PATCH] =?UTF-8?q?UI:=20estilar=20enlaces=20del=20=C3=ADndice=20d?=
 =?UTF-8?q?e=20admin=20y=20del=20panel=20de=20servicios=20de=20la=20cuenta?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Se veían como enlaces azules sin estilo. Ahora:
- /admin: rejilla de tarjetas (icono + etiqueta + flecha) con hover dorado.
- /account (servicios): chips con borde, fondo de panel y hover dorado en vez de
  enlaces subrayados azules.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 web-next/app/[locale]/account/page.tsx | 17 +++++----
 web-next/app/[locale]/admin/page.tsx   | 52 +++++++++++---------------
 2 files changed, 31 insertions(+), 38 deletions(-)

diff --git a/web-next/app/[locale]/account/page.tsx b/web-next/app/[locale]/account/page.tsx
index 6c21e89..53b7e29 100644
--- a/web-next/app/[locale]/account/page.tsx
+++ b/web-next/app/[locale]/account/page.tsx
@@ -147,15 +147,18 @@ function ServicesPanel({ t }: { t: (k: string) => string }) {
       {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>
-          <ul className="space-y-1.5 text-sm">
+          <div className="flex flex-col gap-2">
             {g.items.map((it) => (
-              <li key={it.href}>
-                <Link href={it.href} className="text-sky-400 hover:text-amber-300 hover:underline">
-                  {it.label}
-                </Link>
-              </li>
+              <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>
             ))}
-          </ul>
+          </div>
         </section>
       ))}
     </div>
diff --git a/web-next/app/[locale]/admin/page.tsx b/web-next/app/[locale]/admin/page.tsx
index 982c3e6..8220161 100644
--- a/web-next/app/[locale]/admin/page.tsx
+++ b/web-next/app/[locale]/admin/page.tsx
@@ -13,41 +13,31 @@ export default async function AdminPage({ params }: { params: Promise<{ locale:
   if (!session.bnetId) redirect({ href: '/login', locale })
   if (!(await isAdmin(session))) redirect({ href: '/', locale })
 
+  const items: { href: string; label: string; icon: string }[] = [
+    { href: '/admin/news', label: t('manageNews'), icon: '📰' },
+    { href: '/admin/prices', label: t('managePrices'), icon: '💲' },
+    { href: '/admin/votes', label: t('manageVotes'), icon: '🗳️' },
+    { href: '/admin/gold', label: t('manageGold'), icon: '🪙' },
+    { href: '/admin/users', label: t('manageUsers'), icon: '👤' },
+    { href: '/admin/recruit', label: t('manageRecruit'), icon: '🎁' },
+  ]
+
   return (
     <main className="mx-auto max-w-3xl px-4 py-8">
       <h1 className="mb-6 text-2xl font-bold text-amber-500">{t('title')}</h1>
-      <ul className="space-y-2">
-        <li>
-          <Link href="/admin/news" className="text-sky-400 hover:underline">
-            {t('manageNews')}
+      <div className="grid gap-3 sm:grid-cols-2">
+        {items.map((it) => (
+          <Link
+            key={it.href}
+            href={it.href}
+            className="flex items-center gap-3 rounded-xl border border-nw-border/70 bg-nw-panel/80 p-4 shadow-lg shadow-black/30 backdrop-blur transition hover:border-nw-gold/60 hover:bg-nw-panel-2/70"
+          >
+            <span className="text-2xl" aria-hidden>{it.icon}</span>
+            <span className="font-semibold text-nw-text">{it.label}</span>
+            <span className="ml-auto text-nw-gold-light" aria-hidden>→</span>
           </Link>
-        </li>
-        <li>
-          <Link href="/admin/prices" className="text-sky-400 hover:underline">
-            {t('managePrices')}
-          </Link>
-        </li>
-        <li>
-          <Link href="/admin/votes" className="text-sky-400 hover:underline">
-            {t('manageVotes')}
-          </Link>
-        </li>
-        <li>
-          <Link href="/admin/gold" className="text-sky-400 hover:underline">
-            {t('manageGold')}
-          </Link>
-        </li>
-        <li>
-          <Link href="/admin/users" className="text-sky-400 hover:underline">
-            {t('manageUsers')}
-          </Link>
-        </li>
-        <li>
-          <Link href="/admin/recruit" className="text-sky-400 hover:underline">
-            {t('manageRecruit')}
-          </Link>
-        </li>
-      </ul>
+        ))}
+      </div>
     </main>
   )
 }