/* ============================================================
Echando Raíces — páginas de categoría y subcategoría
Añadido 2026-07-27, implementación de la propuesta de diseño
documentada en el proyecto (claude/16_propuesta_paginas_categoria.md),
aprobada por Victoria salvo el set de iconos definitivo de
subcategoría (se deja el set de muestra de la propuesta; ella
buscará un set mejor más adelante — ver bloque de iconos al
final de este archivo, fácil de sustituir uno a uno).
Mismo criterio que custom-product-page.css: variables --hr-color-*
repetidas aquí (no solo en home.css) porque esta página se carga
siempre, no solo en la home. Cero plantillas nuevas — todo el
marcado ya existe en el tema nativo (category-header.tpl,
subcategories.tpl, products-top.tpl, facets.tpl...), esto solo
le da estilo.
Actualización 2026-07-28: reestructuración de subcategorías según
claude/08_arquitectura_categorias_web_nueva.md. Cambios reflejados
en las reglas de icono y de resaltado de árbol activo, más abajo:
- Nueva: Hachís de CBD (id 29, slug /29-hachis-cbd).
- Renombrada: "Vapers de CBD" (12) → "Vapers y joints", slug
/12-vapers-cbd → /12-vapers-joints.
- Fusionada: "Aceites de CBD" (14) + "Cremas y cosmética CBD" (15,
retirada) → "Aceites y cremas de CBD", slug /14-aceites-cbd →
/14-aceites-cremas-cbd.
- Fusionada: "Armarios de cultivo" (20) + "Iluminación de cultivo"
(21, retirada) + "Climatización y ventilación" (22, retirada) →
"Cultivo de interior", slug /20-armarios-cultivo →
/20-cultivo-interior.
============================================================ */
:root {
--hr-color-acento: #581f7c;
--hr-color-acento-claro: #c79ce2;
--hr-color-texto-sobre-acento: #e6dacc;
--hr-color-fondo-oscuro: #221200;
--hr-color-texto-claro: #e6dacc;
--hr-color-texto-oscuro: #221200;
--hr-color-borde-oscuro: rgba(230, 218, 204, 0.25);
--hr-badge-nuevo: #5b7fd6;
--hr-badge-oferta: #b98fe0;
--hr-badge-agotado: #d98a3d;
/* Sistema de bordes redondeados — sitio completo (2026-07-29),
validado con Victoria sobre la propuesta del carrito. */
--hr-radius-accion: 8px;
--hr-radius-imagen: 8px;
--hr-radius-card: 10px;
}
/* --- Fondo general de la página de categoría (mismo patrón que
body.page-product en custom-product-page.css, y que
body.page-index en home.css) --- */
body.page-category #wrapper,
body.page-category #main {
background: var(--hr-color-fondo-oscuro);
color: var(--hr-color-texto-claro);
}
body.page-category a {
color: var(--hr-color-acento-claro);
}
/* --- Migas de pan (idéntico a la ficha de producto) --- */
body.page-category .breadcrumb {
background: transparent;
padding-left: 0;
padding-right: 0;
font-size: 13px;
}
body.page-category .breadcrumb a,
body.page-category .breadcrumb a span {
color: var(--hr-color-acento-claro);
}
body.page-category .breadcrumb a:hover {
color: var(--hr-color-acento);
}
body.page-category .breadcrumb li:last-child span {
color: rgba(230, 218, 204, 0.45);
}
/* --- Tarjetas genéricas del tema (Bootstrap .card / .card-block) que
usa este listado: cabecera de categoría, bloque de subcategorías,
descripción adicional al final. Mismo tratamiento en las tres:
tarjeta oscura con borde sutil, sin el blanco/sombra por defecto
del tema. */
body.page-category .card,
body.page-category .card-block {
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
/* --- Título y descripción de categoría ---
H1 a mayúscula solo inicial (bug: el tema lo forzaba a mayúsculas
completas vía text-transform, aunque el nombre ya está bien escrito
en el admin) y a 28px/700, mismo tamaño que el resto de títulos de
sección de la web (home: "Compra por categoría", "Quiénes somos"). */
/* 2026-07-27: bajado primero a 12px al quitar el padding-top de 20px que
se sumaba desde #subcategories (ver más abajo) — Victoria pidió
dejarlo en 32px como estaba antes de esa reducción, ahora que ya no
se acumula con aquel padding extra. */
/* Corrección 2026-07-27 (ronda 3): el problema real no era el margen de
32px sino que ".block-category" traía de fábrica un
"min-height: 13.75rem" (220px) del tema nativo — pensado para
reservar hueco a una imagen de portada de categoría, que aquí no se
usa. El título + la descripción ocupan ~114px reales; el resto
(~106px) era aire muerto forzado por ese min-height, no por el
margen. Se anula, el bloque ya se ajusta a su contenido. */
body.page-category #js-product-list-header .block-category {
padding: 0;
margin-bottom: 32px;
min-height: auto !important;
}
body.page-category #js-product-list-header h1.h1 {
color: var(--hr-color-texto-claro);
font-size: 28px;
font-weight: 700;
text-transform: none;
margin: 0 0 12px;
}
/* Corrección 2026-07-27 — dos causas encontradas, no solo una:
1) La opacity: 0.9 que había aquí atenuaba el texto sobre fondo
oscuro; quitada.
2) La de verdad: el
que TinyMCE mete dentro de
"#category-description" (el texto real, el div solo es el
envoltorio) llevaba el gris casi negro por defecto del tema
(rgb(35,35,35), confirmado por getComputedStyle) — el mismo bug
ya visto en el enlace "Marcas" y en el icono del carrito: el tema
pone su color por defecto directamente en el elemento hijo con
más especificidad que la herencia desde el div contenedor. Se
fuerza el color también en el
(y cualquier hijo de texto),
no solo en el div. */
body.page-category #category-description,
body.page-category #category-description p,
body.page-category #category-description * {
color: var(--hr-color-texto-claro) !important;
font-size: 16px;
line-height: 1.6;
}
body.page-category #category-description p {
margin: 0;
}
/* Miniatura de categoría (si algún día se sube una) — que no rompa el
diseño oscuro, mismo tratamiento que la galería de producto. */
body.page-category .category-cover img {
border-radius: var(--hr-radius-imagen);
}
/* --- Bloque "Descripción adicional" al final del listado (si algún
día se rellena ese campo) --- */
body.page-category .category-additional-description {
color: var(--hr-color-texto-claro);
font-size: 15px;
line-height: 1.6;
padding: 24px 0;
border-top: 1px solid var(--hr-color-borde-oscuro);
margin-top: 32px;
}
/* ============================================================
Tarjetas de subcategoría — mismo lenguaje que ".hr-category-card"
de la home (home.css), en versión compacta: icono + nombre, sin
descripción (el tema trae "cat_desc" pero ninguna subcategoría
tiene descripción larga rellenada todavía, así que hoy no se ve).
============================================================ */
/* Corrección 2026-07-27: el tema aplica a este bloque un padding-top de
20px heredado de ".card-block" (Bootstrap), que se sumaba al
margin-bottom de la descripción de arriba y dejaba un hueco enorme
antes de las subcategorías. Se quita el padding-top. */
/* Corrección 2026-07-27 (ronda 3): el bloque entero se mueve por JS
(ver custom-category-page.js, moveSubcategoriesBelowProducts) de su
sitio original (arriba, dentro de la columna de contenido, junto al
sidebar) a debajo de todo el listado de productos y la paginación,
como sección aparte a todo el ancho del contenedor (1140px aquí, el
máximo real del layout — ya no hace falta fijarlo a mano, sale solo
por ser hijo directo de ".container" sin clase de columna). El CSS
de aquí en adelante es el de esa sección ya reubicada. */
body.page-category #subcategories {
margin: 32px 0 0;
padding-top: 32px !important;
border-top: 1px solid var(--hr-color-borde-oscuro);
}
body.page-category .subcategory-heading {
color: var(--hr-color-texto-claro);
font-size: 20px;
font-weight: 700;
text-transform: none;
text-align: center;
margin: 0 0 20px;
}
/* Corrección 2026-07-27 (ronda 4): con CSS grid + auto-fill, una fila
incompleta (p. ej. 2 tarjetas sueltas en la última fila de 5) se
quedaba pegada a la izquierda — las columnas vacías del grid quedan
ahí aunque no haya tarjeta que las ocupe. Cambiado a flexbox con
"wrap" + "justify-content: center", que sí centra cualquier fila
(completa o no) respecto al eje vertical del bloque, pedido por
Victoria. Ancho de tarjeta fijo (antes se estiraba con "1fr" para
rellenar la fila) para que el centrado sea predecible. */
body.page-category .subcategories-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
margin: 0;
padding: 0;
list-style: none;
}
body.page-category .subcategories-list li {
display: flex;
flex: 0 0 160px;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
padding: 24px 12px;
border: 1px solid var(--hr-color-borde-oscuro);
border-radius: var(--hr-radius-card);
transition: border-color 0.15s ease, transform 0.15s ease;
}
body.page-category .subcategories-list li:hover {
border-color: var(--hr-color-acento-claro);
transform: translateY(-2px);
}
/* El link-imagen nativo (a.img) hace de caja de icono: 44x44,
centrado, en violeta claro — el icono en sí se pone por
"mask-image" más abajo, uno por subcategoría (ver bloque final). */
body.page-category .subcategory-image {
width: 100%;
}
body.page-category .subcategory-image a.img {
display: block;
width: 44px;
height: 44px;
margin: 0 auto;
background-color: var(--hr-color-acento-claro);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Si algún día se sube una miniatura real de categoría, que se vea
como imagen normal y no como máscara de icono. */
body.page-category .subcategory-image a.img img {
width: 100%;
height: 100%;
object-fit: contain;
-webkit-mask-image: none;
mask-image: none;
}
body.page-category .subcategories-list h5 {
margin: 0;
}
body.page-category .subcategory-name {
color: var(--hr-color-texto-claro) !important;
font-size: 15px;
font-weight: 600;
}
body.page-category .subcategories-list li:hover .subcategory-name {
color: var(--hr-color-acento-claro) !important;
}
/* !important + hijos: mismo motivo que #category-description arriba
(el tema puede meter su propio gris oscuro en un
/ interno,
aunque hoy no se ve porque ninguna subcategoría tiene descripción
rellenada todavía). */
body.page-category .cat_desc,
body.page-category .cat_desc * {
color: rgba(230, 218, 204, 0.7) !important;
font-size: 13px;
line-height: 1.4;
}
/* ============================================================
Sidebar de filtros (árbol de categoría, Marcas, Proveedores,
"Filtrar por"): mismo tratamiento de tarjeta oscura con borde
sutil en los cuatro bloques.
============================================================ */
/* Corrección 2026-07-29 (Victoria, ronda 2): "Filtrar por" quedaba
por detrás del árbol de categorías y de Marcas/Proveedores según
el orden nativo del HTML (varía según si la categoría tiene
marcas/proveedores o no). Se pasa la columna a flex en columna
para poder reordenar solo con CSS, sin tocar plantillas: "Filtrar
por" siempre el primero, el resto mantiene su orden natural. */
body.page-category #left-column {
display: flex;
flex-direction: column;
}
body.page-category #left-column #search_filters_wrapper {
order: -1;
}
body.page-category #left-column .block-categories,
body.page-category #left-column #search_filters_brands,
body.page-category #left-column #search_filters_suppliers {
background: rgba(230, 218, 204, 0.04);
border: 1px solid var(--hr-color-borde-oscuro);
border-radius: var(--hr-radius-card);
padding: 20px;
margin-bottom: 32px;
}
/* Corrección 2026-07-30 (Victoria, ronda 3): "Filtrar por" debe quedar
fuera de cualquier div de filtro, como título único para todo el
bloque (árbol de categoría, marcas, proveedores y disponibilidad/
precio) — no solo para las facetas nativas donde vive en el HTML
(#search_filters_wrapper > #search_filters > p "Filtrar por" +
secciones .facet). Sin tocar el .tpl: se deja
"#search_filters_wrapper" transparente (ya no es una tarjeta, solo
el contenedor que el flex de más arriba pone primero con
"order: -1"), el título pasa a titular suelto sin caja, y cada
faceta nativa (antes apiladas dentro de una única tarjeta compartida
con el título) se convierte en su propia tarjeta independiente,
igual que ya lo son "Marcas" y "Proveedores". Así el título queda
arriba del todo y todo lo demás (árbol, marcas, proveedores,
facetas) cae debajo en cajas propias, tal cual pedido. */
body.page-category #left-column #search_filters_wrapper {
background: transparent;
border: none;
padding: 0;
margin-bottom: 0;
}
/* Corrección 2026-07-30 (ronda 4, "todos los divs... deben tener el
mismo ancho, ponlos como el de marcas"): "#search_filters" (el
contenedor nativo de las facetas) traía sus propios 20px de padding
horizontal de fábrica — de ahí que "Disponibilidad" saliera 40px más
estrecho que "Marcas" (que no tiene ese padding extra, solo el suyo
propio ya contado en ".facet" más abajo). Se anula para que las
facetas usen el ancho completo del sidebar, igual que el resto. */
body.page-category #search_filters {
background: transparent !important;
padding: 0 !important;
}
body.page-category #search_filters > p.text-uppercase.h6 {
font-size: 15px;
font-weight: 700;
color: var(--hr-color-texto-claro);
text-transform: none !important;
margin: 0 0 16px;
}
/* Títulos de bloque ("Filtrar por", "Marcas", "Proveedores").
Ojo: NO se usa aquí un selector genérico "#left-column .h6" — el
propio enlace superior del árbol de categorías (p. ej. "CBD")
también lleva la clase ".h6" del tema (ver category-tree-branch),
y al llevar esta regla un ID (#left-column) tenía más especificidad
que la del resaltado de "elemento activo" de más abajo, así que
ganaba ella y el enlace activo nunca se veía en violeta. Se acota
cada título a su bloque exacto en su lugar.
Ojo también: PrestaShop reutiliza la clase ".facet-label" tanto
para el título "Marcas"/"Proveedores" (un /