Fix: /store no mostraba nada al elegir personaje

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>
This commit is contained in:
2026-07-15 00:34:58 +00:00
parent f0b006404c
commit 742567cfbf
+18 -10
View File
@@ -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; }