From 742567cfbfed02c10496cadba73525801b7a199a Mon Sep 17 00:00:00 2001
From: adevopg <adevopg@gmail.com>
Date: Wed, 15 Jul 2026 00:34:58 +0000
Subject: [PATCH] Fix: /store no mostraba nada al elegir personaje
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

El selector funcionaba: el fetch del catálogo respondía y React montaba el
árbol entero, pero el tema lo tenía oculto y no se veía nada en pantalla.

Son reglas del store original (BENNU), que ocultaba estos elementos y los
revelaba con jQuery (.show()/slideToggle()). En el port a React la visibilidad
la decide el montaje del componente, y el tema nw-ryu se carga el último para
ganar la cascada, así que hay que deshacerlas con !important:

- #store-div: ocultaba el árbol completo (el síntoma reportado).
- #store-list li ul: habría ocultado las subcategorías al desplegarlas.

Además, el <ul> anidado comparte clase con el <span> que lo abre (igual que en
el markup original), así que el display:inline-block de los spans deformaba la
lista. Esas reglas pasan a ir atadas a `span`.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 web-next/app/globals.css | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/web-next/app/globals.css b/web-next/app/globals.css
index 406ce85..11915dc 100644
--- a/web-next/app/globals.css
+++ b/web-next/app/globals.css
@@ -519,21 +519,25 @@ textarea:focus {
 
 /* ==== Tienda (/store) ==== */
 #store-list, #store-list ul { list-style: none; margin: 0; padding-left: 14px; }
+#store-list ul { display: block !important; }
 #store-list > li { margin: 4px 0; }
-#store-list .store-cat,
-#store-list .store-subcat,
-#store-list .store-sub-subcat {
+/* Ojo: como en el markup original, el <ul> anidado comparte clase con el <span>
+   que lo abre (store-subcat/store-sub-subcat), así que estas reglas van atadas a
+   `span` para no convertir la lista en inline-block ni teñirla al pasar el ratón. */
+#store-list span.store-cat,
+#store-list span.store-subcat,
+#store-list span.store-sub-subcat {
   display: inline-block !important;
   cursor: pointer;
   padding: 3px 0;
   user-select: none;
 }
-#store-list .store-cat:hover,
-#store-list .store-subcat:hover,
-#store-list .store-sub-subcat:hover { color: #fff; }
-#store-list .store-cat i,
-#store-list .store-subcat i,
-#store-list .store-sub-subcat i { transition: transform .2s; margin-right: 4px; }
+#store-list span.store-cat:hover,
+#store-list span.store-subcat:hover,
+#store-list span.store-sub-subcat:hover { color: #fff; }
+#store-list span.store-cat i,
+#store-list span.store-subcat i,
+#store-list span.store-sub-subcat i { transition: transform .2s; margin-right: 4px; }
 /* Rejilla de objetos dentro de una hoja (visible: React solo la monta al abrir) */
 #store-list .item-list {
   display: flex !important;
@@ -553,7 +557,11 @@ textarea:focus {
 #store-list .item-box .item-img-box { width: 44px; height: 44px; border-radius: 6px; }
 #store-list .item-box .item-name { margin: 4px 0; min-height: 32px; }
 #store-list .item-box hr { margin: 6px 0; border-color: #352e2b; }
-#store-div { margin-top: 14px; }
+/* El tema esconde #store-div y los <ul> anidados (`display:none`) porque el store
+   original los revelaba con jQuery (.show()/slideToggle()). Aquí la visibilidad la
+   decide React montándolos, así que hay que deshacer ese display:none del tema
+   (que se carga después y gana la cascada). */
+#store-div { margin-top: 14px; display: block !important; }
 
 /* Carrito */
 #cart-list { margin-top: 16px; }