store: el árbol de categorías, igual que el original (colores y sin fantasmas)

Investigadas las 750 categorías de la BD contra el HTML real del original. Los
ítems estaban perfectos (554 hojas, 3068 ítems, mismo contenido en cada una: no
faltaba ninguno). Todo lo roto era de categorías:

- 45 CATEGORÍAS FANTASMA, todas con nombre de código ("11-1", "23-10"). El seed
  dedujo el árbol de los códigos de las hojas ("11-1-1" => padre "11-1"), pero
  el original NO siempre pinta ese nivel: en 45 hojas el "-1-" del código no
  corresponde a nada y cuelgan directas de su raíz. Ahora se lee el anidamiento
  real (<ul>/<li>): 705 categorías (20 + 131 + 554) en vez de 750.
- El nombre de una categoría NO es texto plano, es HTML, y lo estábamos
  aplanando: 141 nombres perdían su color y 40 cabeceras el suyo. Hay dos
  mecanismos y los dos hacen falta: la clase en la CABECERA, que sustituye a
  first-brown para colorear la categoría entera ("Brujo" en color de brujo), y
  los <span class="no-toggle X"> dentro del nombre (clases y las etiquetas
  [Nivel 232 a 245] / (DPS) en otro tono).
- 21 nombres TRUNCADOS en Tokens de Armadura: guardábamos "Guerrero" donde el
  original dice "Guerrero, Sacerdote, Druida" (solo se quedó el primer span).

El HTML se trocea en el SERVIDOR (`parseCategoryName`) y al cliente le llegan
solo texto + nombre de clase, así que no hay HTML de la BD entrando en el DOM.
El texto sin color va suelto, NO envuelto en <span>: el tema tiene
`span { color: #fff }` y lo pondría blanco en vez de heredar el de la cabecera.

`name` pasa a VARCHAR(512): con el HTML, el más largo mide 198 y no cabía en 191.
El name_en se genera en el propio seed traduciendo solo el TEXTO y respetando
las etiquetas, así que sql/store_category_en.sql sobra y se borra.
gen_store_catalog.py regenera el seed entero (categorías del HTML, ítems de la
BD, que ya estaban verificados) y es reproducible byte a byte.

Verificado en el navegador contra el original: mismo árbol, 0 categorías con
nombre de código, "[Nivel 232 a 245]" en marrón tenue y los colores de clase
oficiales (Guerrero #C79C6E, Sacerdote blanco, Druida #FF7D0A). En inglés
también, conservando los colores.

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

web-next/components/StoreBrowser.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { Fragment, useEffect, useState } from 'react'
 import { useTranslations, useLocale } from 'next-intl'
 import { CharacterSelect, type CharOption } from '@/components/CharacterSelect'
 import { WowheadLink } from '@/components/WowheadLink'
@@ -62,8 +62,25 @@ function CategoryNode({
   }, [open])
   return (
     <li>
-      <span className={`${spanClass} first-brown`} role="button" tabIndex={0} onClick={() => setOpen((o) => !o)}>
-        <i className={`fas fa-angle-right green-info${open ? ' fa-rotate-90' : ''}`} /> {cat.name}
+      {/* `cat.css` y no `first-brown` fijo: el original colorea algunas
+          categorías enteras por clase (p.ej. "Brujo" en color de brujo) poniendo
+          esa clase EN LUGAR de first-brown. Y dentro del nombre, cada parte
+          puede llevar la suya ("Guerrero, Sacerdote, Druida", "[Nivel 232 a
+          245]" en otro tono). */}
+      <span className={`${spanClass} ${cat.css}`} role="button" tabIndex={0} onClick={() => setOpen((o) => !o)}>
+        <i className={`fas fa-angle-right green-info${open ? ' fa-rotate-90' : ''}`} />{' '}
+        {/* El texto sin color va SUELTO, no envuelto: el tema tiene
+            `span { color: #fff }`, así que meterlo en un <span> lo pondría
+            blanco en vez de heredar el color de la cabecera. */}
+        {cat.name.map((p, i) =>
+          p.cls ? (
+            <span key={i} className={`no-toggle ${p.cls}`}>
+              {p.text}
+            </span>
+          ) : (
+            <Fragment key={i}>{p.text}</Fragment>
+          ),
+        )}
       </span>
       {open && (
         <>