/* =============================================================================
   LIJ — Colecciones y categorías (Fase 8 del rediseño)
   ESTADO (2026-09-21): PARCIALMENTE EN PRODUCCIÓN — aplicado a la plantilla 67
   real ("Categoría de productos", condición include/product_archive, gobierna
   los hubs de edad, Barco de Vapor, Juvenil, colecciones, autores, personajes
   y premios): la sección 2 (filtros FacetWP) ya rige sin scope, para
   cualquier término. La sección 1 (card circular de "Categorías") ya se quitó
   del prefijo de prueba .fase8-test — se desplegó primero en la plantilla 35
   ("Resultados de búsqueda", Fase Búsqueda, secciones "Colecciones
   destacadas"/"Categorías" reutilizadas tal cual desde la página de prueba
   post 48588, ver docs/redesign/FASE-8-COLECCIONES.md). Para la plantilla 67
   real el contenido curado por término (qué colecciones/categorías mostrar en
   cada hub) sigue pendiente de decisión.

   Deliberado NO desplegar todavía: no se forzó ningún [data-lij-theme] en la
   plantilla real (a diferencia de la página de prueba, que sí forzaba el tema
   '0-2' para poder previsualizarla). Sin un tema forzado, los Global Colors
   dinámicos (lijacc07/lijpgd06) resuelven a sus valores por defecto (rojo/
   crema de marca) en cualquier término — seguro para los 6 hubs de edad, el
   Barco de Vapor, Juvenil y las 232 colecciones a la vez. Activar la paleta
   diferenciada por rango de edad requiere resolver antes el mecanismo de
   MAPA-REACT-ELEMENTOR.md §5.3 (todas sus opciones necesitan una decisión de
   Francisco, una de ellas PHP mínimo con aprobación explícita).

   Fuente de verdad: html/_preview/0-2-anos/index.html y
   html/_preview/vista-de-coleccion/index.html (export Figma Dev Mode).

   Qué NO hace este archivo (a propósito):
   - No toca la plantilla 59 ("Item producto", el loop-grid item). Esa
     plantilla la comparten el archivo de categoría Y "Libros relacionados"
     (ya publicado, Fase 9); ya usa los Global Fonts/Colors del rediseño
     (lijttl02, lijtxt04) y su título de card en 20px coincide con el que trae
     el export de "vista de colección" — no es una inconsistencia a corregir,
     es el mismo componente compartido.
   - No convierte los 8 acordeones de filtro en píldoras/flyout. Ese cambio de
     patrón (acordeón → píldora con panel flotante) está identificado en
     docs/redesign/MAPA-REACT-ELEMENTOR.md §8 como una decisión de UI aparte,
     pendiente de evaluar (FacetWP Flyout, plugin ya activo, es la vía nativa
     recomendada). Aquí solo se aplican tipografía/color de marca sobre la
     estructura de acordeón que ya existe.
   - No define colores de tema nuevos: usa los 6 ya definidos en
     lij-design-system.css §3 (sin activarlos todavía en la plantilla real,
     ver nota arriba).
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. Card circular de "Categorías"
   Reutiliza el token --lij-circle (156px) y las 6 clases .lij-icon--cat-* que
   ya existían en lij-design-system.css §5.2 desde antes de esta fase (con el
   icono real a 108px, tal como ya documentaba el comentario de ese bloque).
   Es la única pieza nueva y genuinamente compartida (6 usos idénticos); por
   eso es una clase del archivo de fase y no un custom_css repetido 6 veces
   por widget, a diferencia del patrón usado para las fotos de "Colecciones
   destacadas" en la Home (cada una es una imagen distinta, sin patrón común
   más allá del tamaño).
   ----------------------------------------------------------------------------- */
.lij-circle-card {
    width: var(--lij-circle);
    height: var(--lij-circle);
    border-radius: var(--lij-radius-pill);
    background-color: var(--lij-cream);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lij-circle-card .lij-icon {
    width: 108px;
    height: 108px;
}


/* -----------------------------------------------------------------------------
   2. Filtros (FacetWP) — solo tipografía y color de marca
   EN PRODUCCIÓN (2026-09-11) — sin scope de prueba: aplica a cualquier
   plantilla que use estas clases (67 y, por compartir el mismo componente de
   listado filtrable, también 35 "Resultados de búsqueda" y 23 "Novedades",
   ver docs/design-system/PAGE_PATTERNS.md §2/§7).
   Los 13 facetwp-facet y los 8 nested-accordion son markup de FacetWP/
   Elementor, no widgets con controles nativos de Global Color/Font. Se
   reskinan por selector, sin tocar el JS de FacetWP ni la estructura de
   acordeón. Clases confirmadas en MAPA-REACT-ELEMENTOR.md §8.
   ----------------------------------------------------------------------------- */
.facetwp-facet,
.facet-resultados,
.facet-orden,
.facet-seleccion,
.facet-reset,
.facet-paginacion {
    font-family: var(--lij-font-title);
    color: var(--lij-text);
}

/* Título de cada acordeón de filtro (Categorías, Curso, Género, Proyectos,
   Lengua, Editorial, Formato, Precio): peso fuerte, color de marca. */
.elementor-widget-n-accordion .e-n-accordion-item-title-text {
    font-family: var(--lij-font-title);
    font-weight: var(--lij-weight-strong);
    color: var(--lij-accent);
}

/* Chips de "selections" (filtros activos con ×) y el enlace "Limpiar
   filtros": ya son la pieza que el diseño pide como "fila de resumen"
   (MAPA-REACT-ELEMENTOR.md §8) — solo se les da el color/radio de marca. */
.facet-seleccion .facetwp-selection-value {
    background-color: var(--lij-accent);
    color: var(--lij-on-red);
    border-radius: var(--lij-radius-s);
}

.facet-reset a {
    color: var(--lij-accent);
    font-weight: var(--lij-weight-strong);
}


/* -----------------------------------------------------------------------------
   3. Resultados de búsqueda (plantilla 35, Fase Búsqueda) — filtros como
   píldoras con panel desplegable
   EN PRODUCCIÓN (2026-09-21). Colección/Edad/Autor/Categorías se movieron de
   la columna lateral a una fila propia bajo el buscador grande (ver
   docs/redesign/backups/elementor/2026-09-21). Se reutiliza el mismo widget
   nested-accordion (con "default_state: all_collapsed" para que arranquen
   cerrados) — no es un componente nuevo, solo una reinterpretación visual:
   el <summary> nativo pasa de "cabecera de acordeón" a "píldora", y su
   contenido (<div role="region">, ya nativo de Elementor) pasa de empujar
   el layout a flotar en position:absolute. Los 7 filtros que NO son parte
   del diseño aprobado (Curso, Género, Proyectos, Lengua, Editorial, Formato,
   Precio) se ocultan enteros (hide_desktop/hide_tablet en el contenedor,
   hide_mobile/hide_mobile_extra que ya traía) — siguen existiendo en
   FacetWP/Elementor, solo no se muestran. El listado de resultados (columna
   "Productos") se ensanchó a 100% al ya no compartir fila con la columna de
   filtros. Ver también js/lij-header.js para el filtro del Flyout móvil que
   excluye esos mismos 7 nombres del cajón de "Mostrar filtros".
   ----------------------------------------------------------------------------- */
/* Título "Resultados para «X»" / "Todos nuestros libros" (smb2b_titulo_
   buscador() en functions-shortcode.php): en la fuente de la verdad
   (SearchPage.tsx, .section-heading) va centrado, no alineado a la
   izquierda como venía el widget de cabecera por defecto. Se centra el
   texto y el contenedor flex que lo envuelve (traía justify-content:
   flex-start de la configuración original del widget). */
.elementor-element-6a49cb8c {
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
}

.elementor-element-6ee88421 {
    width: 100% !important;
}

.elementor-element-6ee88421 .elementor-heading-title {
    width: 100%;
    text-align: center;
}

/* Más aire entre el header del sitio y el bloque de título+buscador+
   filtros: la Fase Búsqueda traía 42px de padding-top (ajuste original en
   Elementor); la fuente de la verdad usa 64px de padding vertical para
   cualquier PageSection (Sections.css: ".page-section{padding:64px 0}").
   Se sube a ese mismo valor. El padding real lo aplica el `.e-con-inner`
   hijo (Elementor separa fondo del "boxed" container de su padding
   interno), no el contenedor con el ID. */
.elementor-element-579ca3fd > .e-con-inner {
    padding-top: 64px !important;
}

/* Franja blanca entre el título y el buscador: el contenedor del título
   (elementor-element-579ca3fd) trae un margin-bottom:1em de la edición
   original en Elementor — al ser un margen (no padding), cae FUERA del
   fondo crema de ambos contenedores y deja ver el gris/blanco por defecto
   de la página. Se anula el margen y se traslada el mismo espacio a
   padding-top de "buscador-y-filtros" (adentro de su propio fondo), tal
   como pide el diseño: título y buscador son una sola sección continua,
   sin costura, con separación pero sin cambio de color. */
.elementor-element-579ca3fd {
    margin-bottom: 0 !important;
}

.buscador-y-filtros {
    padding-top: 16px;
}

/* El contenedor "Listado" (grid de resultados) no traía fondo propio —
   usaba el gris/blanco por defecto de la página en vez del mismo crema que
   la cabecera/buscador/filtros, dejando una costura visible entre
   secciones. En la fuente de la verdad (SearchPage.tsx) todo este bloque
   (título, buscador, filtros y grid) es UNA sola sección con un solo
   color de fondo. */
.elementor-element-1c91fe76 {
    background-color: var(--lij-page-dark, #FFF3EB) !important;
}

/* Costura blanca entre el "Listado" y "Nuestras colecciones destacadas":
   el Listado traía un margin-bottom:32px (ajuste original en Elementor)
   que cae fuera de su propio fondo y deja ver el gris por defecto de la
   página. En la fuente de la verdad las PageSection son de tono alterno
   (oscuro/claro) pero SIEMPRE contiguas, sin margen entre ellas — cada
   una resuelve su propio espaciado con su padding interno. Se quita el
   margen para que ambas secciones queden pegadas, cada una con su color. */
.elementor-element-1c91fe76 {
    margin-bottom: 0 !important;
}

/* Contador "X de Y resultados" + selector "Ordenar por": no son parte del
   diseño aprobado para esta página — se ocultan (siguen funcionando por
   detrás, solo no se muestran). Es el contenedor completo (no solo los 2
   facetwp-facet) para que el título de la cabecera pase a ocupar todo el
   ancho en vez de dejar un hueco vacío a la derecha. */
.elementor-element-15d33d4 {
    display: none !important;
}

.buscador-resultados .elementor-widget-container,
.buscador-resultados .elementor-shortcode,
.buscador-resultados .widget_product_search {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Mismo shortcode [buscador_wc] que el header (ver SEARCH.md §1), pero
   calcado del buscador grande de la fuente de la verdad (SearchLarge.css/
   .search-large en nueva-web-lij-main, el mismo que ya usa la Home): borde
   fino 1px, 550px de ancho, texto 24px, botón SIN fondo (el ícono va
   directo en rojo sobre el crema, no en un círculo rojo). */
.buscador-resultados form.woocommerce-product-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    width: 550px;
    max-width: 100%;
    margin: 0 auto;
    padding: 4px 9px 4px var(--lij-space-s, 16px);
    border: 1px solid var(--lij-red, #ED1B2F);
    border-radius: var(--lij-radius-pill, 1000px);
    background-color: #fff;
}

.buscador-resultados form.woocommerce-product-search input.search-field {
    flex: 1 1 auto;
    min-width: 1px;
    height: auto;
    margin: 0;
    padding: 8px 4px;
    border: none;
    border-radius: 0;
    background: transparent;
    outline: none;
    box-shadow: none;
    font-family: var(--lij-font-title);
    font-weight: var(--lij-weight-body, 500);
    font-size: 24px;
    line-height: 1.2;
    color: var(--lij-accent, var(--lij-red));
}

.buscador-resultados form.woocommerce-product-search input.search-field::placeholder {
    color: var(--lij-accent, var(--lij-red));
    opacity: 1;
}

.buscador-resultados form.woocommerce-product-search input.search-field:focus::placeholder {
    opacity: .55;
}

.buscador-resultados form.woocommerce-product-search .search-field + button,
.buscador-resultados form.woocommerce-product-search button[type="submit"] {
    position: relative;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    min-width: 38px !important;
    max-width: 38px;
    margin: 0 !important;
    padding: 4px !important;
    border: none;
    border-radius: var(--lij-radius-s, 8px);
    background-color: transparent !important;
    color: transparent;
    font-size: 0 !important;
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
}

.buscador-resultados form.woocommerce-product-search button::before {
    content: none;
    display: none;
}

.buscador-resultados form.woocommerce-product-search button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background-color: var(--lij-red, #ED1B2F);
    mask-image: url('/wp-content/uploads/2026/09/header/lij-header-icon-search.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url('/wp-content/uploads/2026/09/header/lij-header-icon-search.svg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.buscador-resultados form.woocommerce-product-search button:hover::after {
    opacity: .7;
}

.filtros-pildoras,
.filtros-resumen {
    width: 100%;
}

.filtros-resumen > .e-con-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100%;
}

/* El contenedor "filtros-pildoras" es un Elementor Container insertado por
   escritura directa en BD (no desde el editor) — Elementor no llegó a
   generar el CSS por-elemento de sus ajustes flex (fila/wrap/centrado):
   se comprobó que ni este ni otros contenedores del mismo post tienen una
   regla `.elementor-element-ID{...}` propia para flex-direction (el CSS
   generado de la plantilla no cambió tras "Regenerar" — probablemente ese
   cálculo ocurre en el guardado del editor, no en una visita normal). Se
   fuerza el layout real por CSS plano en vez de depender de esas
   variables, apuntando al `.e-con-inner` que Elementor sí crea siempre
   (contenedor "boxed") — no a `.filtros-pildoras` en sí. */
.filtros-pildoras > .e-con-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;                        /* v3 .filter-bar__row */
    width: 100%;
}

/* Cada widget nested-accordion de Elementor viene con su wrapper a
   width:100% (bloque) por defecto — dentro de una fila flex eso hace que
   cada píldora ocupe la fila entera y las siguientes bajen de línea. Se
   fuerza a "lo que ocupe su contenido" para que las 4 queden una junto a
   otra. */
.filtros-pildoras > .e-con-inner > .elementor-element {
    width: auto !important;
    flex: 0 0 auto !important;
}

.filtros-pildoras .e-n-accordion {
    width: fit-content;
    display: block;
}

/* El widget nested-accordion trae su propio borde entre título/contenido
   vía variables CSS (widget-nested-accordion.min.css: --n-accordion-border-
   width:1px por defecto) — se anulan las variables además del `border:none`
   ya declarado más abajo, por si alguna regla propia de Elementor las
   consume sin el !important que sí tienen las nuestras. */
.filtros-pildoras.elementor-widget-n-accordion,
.filtros-pildoras .elementor-widget-n-accordion {
    --n-accordion-border-width: 0;
}

.filtros-pildoras .e-n-accordion-item {
    position: relative;
}

/* Línea fina bajo cada píldora — RAÍZ REAL ENCONTRADA (no era un artefacto
   de renderizado): cada widget nested-accordion trae de fábrica un borde
   propio en su envoltorio `.elementor-widget-container` (ajuste de borde
   de la edición original en Elementor, confirmado en el CSS generado del
   post 35: "border-style:solid;border-width:0px 0px 1px 0px;border-color:
   #9A9A9A" — se repite en los 9 acordeones del template, los 4 visibles y
   los 5 ocultos). No es el `<summary>`/píldora el que lo tiene, por eso no
   aparecía al revisar border/box-shadow/text-decoration sobre el propio
   botón: hay que anularlo un nivel más arriba, en el contenedor del
   widget. */
.filtros-pildoras .elementor-widget-container {
    border-bottom: none !important;
}

/* El <summary> nativo: quitar el marcador de disclosure del navegador y
   convertirlo en píldora roja — más ancha (padding horizontal generoso) y
   con más separación entre el título y la flecha. */
.filtros-pildoras .e-n-accordion-item-title {
    display: inline-flex !important;
    align-items: center;
    /* v3 .btn-primary--small: 12/16, 4px hasta la flecha, 46px de alto */
    gap: 4px !important;
    height: 46px;
    padding: 12px 16px !important;
    border-radius: var(--lij-radius-pill, 1000px) !important;
    background: var(--lij-red, #ED1B2F) !important;
    cursor: pointer;
    list-style: none;
    border: none !important;
}

.filtros-pildoras .e-n-accordion-item-title::-webkit-details-marker,
.filtros-pildoras .e-n-accordion-item-title::marker {
    display: none;
    content: '';
}

.filtros-pildoras .e-n-accordion-item-title-text {
    color: #fff !important;
    font-weight: var(--lij-weight-strong) !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    white-space: nowrap;
}

/* El padding-right del botón no le ganaba sitio real al ícono (verificado:
   el borde derecho del ícono coincidía exactamente con el borde derecho
   del botón, sin aire) — se le da el espacio directamente al propio ícono
   en vez de confiar en el padding del contenedor flex. */
/* El widget posiciona el icono en absoluto, fuera del flujo: así no ocupaba
   sitio y el padding-right no lo separaba del borde. En el flujo, la píldora
   mide relleno + texto + 4 + flecha + relleno, como v3. */
.filtros-pildoras .e-n-accordion-item-title-icon {
    position: static !important;
    margin: 0 !important;
    align-self: center !important;
    height: auto !important;
    transform: none !important;                  /* el widget lo sube con translateY(-50%) */
}

/* La flecha de v3 (.filter__chevron): el chevron fino del tema girado un
   cuarto de vuelta, blanco, 14px — en lugar del chevron grueso de Font
   Awesome del widget, que además quedaba más alto que el texto. */
.filtros-pildoras .e-n-accordion-item-title-icon > span {
    display: none !important;
}

.filtros-pildoras .e-n-accordion-item-title-icon::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background-color: #fff;
    transform: rotate(90deg);
    -webkit-mask: url('../images/lij/chevron-right.svg') center / 100% 100% no-repeat;
    mask: url('../images/lij/chevron-right.svg') center / 100% 100% no-repeat;
}

.filtros-pildoras .e-n-accordion-item-title-icon svg {
    fill: #fff !important;
    width: 14px;
    height: 14px;
}

/* El panel de contenido: ya es un elemento nativo de Elementor
   (role="region", solo visible cuando el <details> padre está abierto —
   comportamiento nativo del navegador, no se toca). Se reposiciona de
   "bloque en el flujo" a "flotante debajo de la píldora".

   BUG REAL VERIFICADO (Playwright, 6 capturas cada 80ms tras el clic): con
   `top: calc(100% + 8px)` el panel "cae" progresivamente (378px → 439px →
   490px → 551px de top) durante ~300ms y recién ahí salta de vuelta a su
   posición correcta (317px) — el widget nativo de Elementor anima la
   altura del <details> al abrirse (transición propia del núcleo, no
   agregada por este archivo) y, como el top es un porcentaje del alto del
   contenedor, el panel "persigue" esa altura cambiante en vez de quedarse
   fijo bajo la píldora. Se reemplaza el `top` porcentual por uno fijo en
   píxeles (44px de píldora + 8px de aire = 52px) para que no dependa en
   absoluto de la altura del <details>, y se anula cualquier transición
   heredada en el propio <details>/<summary> para que no vuelva a moverse. */
.filtros-pildoras [role="region"] {
    position: absolute !important;
    top: 54px;                                   /* 46 de píldora + 8 */
    left: 0;
    z-index: 20;
    width: max-content;
    min-width: 260px;
    max-width: 340px;
    max-height: 340px;
    overflow-y: auto;
    background: var(--lij-red, #ED1B2F);
    border: none !important;
    border-radius: var(--lij-radius-m, 16px);
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, .15);
    padding: var(--lij-space-xxs, 8px);
    transition: none !important;
    animation: none !important;
}

/* La fila entera no debe reservar el alto de los 4 paneles (que ahora
   flotan) — cada <details> vuelve a medir solo lo que mide su píldora, sin
   ninguna transición/animación heredada que la haga "crecer" al abrirse. */
.filtros-pildoras .e-n-accordion-item {
    height: 46px !important;
    min-height: 0 !important;
    max-height: 46px !important;
    transition: none !important;
    animation: none !important;
    overflow: visible;
}

.filtros-pildoras summary {
    transition: none !important;
    animation: none !important;
}

/* Filas de FacetWP dentro del panel flotante: SIN casilla de check (pedido
   explícito de Francisco) — solo nombre + cantidad, mismo lenguaje visual
   que el panel de sugerencias del buscador/megamenú (texto blanco sobre
   rojo, fila completa clicable). FacetWP dibuja su casilla nativa como
   imagen de fondo (facetwp/assets/css/front.css: "background:url(checkbox
   .png)") — se anula esa imagen y el padding que le hacía sitio. */
/* Filas separadas por línea blanca fina — igual que .search-item del panel
   de sugerencias del buscador del header (lij-header.css §6.3:
   "border-bottom: 0.5px solid var(--lij-cream)"), en vez del margen +
   radio que traía antes cada fila suelta. */
.filtros-pildoras [role="region"] .facetwp-checkbox {
    background-image: none !important;
    padding: 10px var(--lij-space-s, 16px) !important;
    margin-bottom: 0;
    border-radius: 0;
    border-bottom: 0.5px solid var(--lij-cream);
    color: #fff;
    font-family: var(--lij-font-title);
    font-weight: var(--lij-weight-body, 500);
}

.filtros-pildoras [role="region"] .facetwp-display-value,
.filtros-pildoras [role="region"] .facetwp-counter {
    color: #fff;
}

.filtros-pildoras [role="region"] .facetwp-counter {
    opacity: .75;
    font-weight: var(--lij-weight-strong);
}

.filtros-pildoras [role="region"] .facetwp-checkbox:hover {
    background-color: var(--lij-red-hover, #BD0F20);
}

.filtros-pildoras [role="region"] .facetwp-checkbox.checked {
    background-color: var(--lij-red-hover, #BD0F20);
    font-weight: var(--lij-weight-strong);
}

/* Cabecera del panel con el nombre del filtro (p. ej. "Colección"), igual
   que el encabezado del panel de sugerencias del buscador (search-overlay)
   — insertada por JS (js/lij-header.js), un nodo por panel. */
.filtros-pildoras [role="region"] .lij-panel-titulo {
    display: block;
    width: 100%;
    padding: 8px var(--lij-space-s, 16px) 12px;
    margin-bottom: 4px;
    border-bottom: .5px solid rgba(255, 255, 255, .3);
    font-family: var(--lij-font-title);
    font-weight: var(--lij-weight-strong);
    font-size: 16px;
    color: #fff;
}

/* Buscador propio del panel "Autor" (insertado por JS, ver lij-header.js). */
.filtros-pildoras [role="region"] .lij-panel-buscador {
    display: block;
    width: calc(100% - 16px);
    margin: 0 8px 8px;
    height: 32px;
    padding: 0 10px;
    border: none;
    outline: none;
    border-radius: var(--lij-radius-s, 8px);
    background: var(--lij-red-hover, #BD0F20);
    font-family: var(--lij-font-title);
    font-weight: var(--lij-weight-body, 500);
    font-size: 14px;
    color: #fff;
}

.filtros-pildoras [role="region"] .lij-panel-buscador::placeholder {
    color: rgba(255, 255, 255, .7);
}

/* Buscador de "Autor" dentro del panel (si FacetWP agrega un input de
   búsqueda interno al facet) hereda el mismo tratamiento blanco-sobre-rojo. */
.filtros-pildoras [role="region"] input[type="text"] {
    background: var(--lij-red-hover, #BD0F20);
    border: none;
    border-radius: var(--lij-radius-s, 8px);
    color: #fff;
    padding: 8px;
}

.filtros-pildoras [role="region"] input[type="text"]::placeholder {
    color: rgba(255, 255, 255, .7);
}


/* =============================================================================
   PANEL DE SUGERENCIAS DEL BUSCADOR — hero de la home y buscador grande de
   resultados (Fase Búsqueda, 2026-09-21)
   -----------------------------------------------------------------------------
   Mismo panel de "búsquedas recientes"/autocompletado en vivo que ya tiene el
   buscador de cabecera desde la Fase 4m (`lij-header.css` §6.3) — las tres
   instancias imprimen el mismo marcado `.search-overlay` porque comparten el
   mismo shortcode `[buscador_wc]` (ver `smb2b_buscador_wc()` en
   functions-shortcode.php). Hasta ahora esto quedaba fuera de alcance a
   propósito (DECISIONS.md 2026-09-12: "el buscador grande del hero/
   resultados... no tiene el JS de la Fase 4m enganchado") porque esas dos
   páginas todavía no tenían diseño propio para su buscador grande. Ya lo
   tienen (Fase Búsqueda), así que `js/lij-header.js` (`initAbierto()`) engancha
   aquí el mismo panel — sin el botón de lupa que colapsa/expande el campo en
   la cabecera: aquí el campo siempre está desplegado, no hay nada que
   colapsar.

   Reglas calcadas 1:1 de `lij-header.css` §6.3 (mismo marcado, mismo
   lenguaje visual: fondo rojo, filas con miniatura), con el ancho real de
   estos dos buscadores (550px, ver `.buscador-resultados form...` más
   arriba) en vez de los 383px de la cabecera, y ancladas sobre
   `.widget_product_search` de cada instancia — el `<div>` que en el
   shortcode envuelve tanto el `<form>` como el `.search-overlay`, igual que
   en la cabecera. `top: calc(100% + 8px)` en vez del `43px` fijo de la
   cabecera porque aquí el alto del campo no está fijado por CSS propio (line-
   height de 24px + padding), así que anclar al 100% del propio contenedor es
   más fiable que adivinar un valor en píxeles. */
.lij-hero-search__field .widget_product_search,
.buscador-resultados .widget_product_search {
    position: relative;
}

.lij-hero-search__field .search-overlay,
.buscador-resultados .search-overlay {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 550px;
    max-width: 100%;
    max-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: var(--lij-space-s, 16px);
    border-radius: var(--lij-radius-m, 16px);
    background: var(--lij-red, #ED1B2F);
    box-shadow: var(--lij-shadow-panel, 0 8px 24px rgba(0, 0, 0, .18));
    overflow: hidden;
    z-index: 20;
}

.lij-hero-search__field .search-overlay[hidden],
.buscador-resultados .search-overlay[hidden] {
    display: none;
}

.lij-hero-search__field .search-overlay__header,
.buscador-resultados .search-overlay__header {
    width: 100%;
    padding: var(--lij-space-s, 16px);
    border-bottom: 0.5px solid var(--lij-cream, #FFF9F5);
    font-family: var(--lij-font-title);
    font-weight: var(--lij-weight-strong);
    font-size: 16px;
    line-height: 1.4;
    color: var(--lij-on-red, #FFF9F5);
    text-align: left;
}

.lij-hero-search__field .search-overlay__header:empty,
.buscador-resultados .search-overlay__header:empty {
    display: none;
}

.lij-hero-search__field .search-overlay__list,
.buscador-resultados .search-overlay__list {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--lij-cream, #FFF9F5) transparent;
}

.lij-hero-search__field .search-overlay__list::-webkit-scrollbar,
.buscador-resultados .search-overlay__list::-webkit-scrollbar {
    width: 6px;
}

.lij-hero-search__field .search-overlay__list::-webkit-scrollbar-track,
.buscador-resultados .search-overlay__list::-webkit-scrollbar-track {
    background: transparent;
}

.lij-hero-search__field .search-overlay__list::-webkit-scrollbar-thumb,
.buscador-resultados .search-overlay__list::-webkit-scrollbar-thumb {
    background-color: var(--lij-cream, #FFF9F5);
    border-radius: var(--lij-radius-pill, 1000px);
}

.lij-hero-search__field .search-overlay__empty,
.buscador-resultados .search-overlay__empty {
    padding: var(--lij-space-s, 16px);
    font-family: var(--lij-font-title);
    font-weight: var(--lij-weight-body);
    font-size: 16px;
    line-height: 1.4;
    color: var(--lij-on-red, #FFF9F5);
}

/* `!important` en padding/alto: mismo motivo que la cabecera
   (`lij-header.css` §6.3) — `.search-item` también es un `<button>` dentro
   de `.widget_product_search`, así que hereda la regla vieja de
   `estilos.css:464-475` (`padding: 0 1rem !important; min-width: fit-content
   !important; height: 44px`) pensada para el botón de envío del buscador. */
.lij-hero-search__field .search-item,
.buscador-resultados .search-item {
    display: flex;
    align-items: center;
    gap: var(--lij-space-xxs, 8px);              /* v3 .search-item: 8px */
    width: 100%;
    min-width: 0 !important;
    height: auto !important;
    padding: var(--lij-space-xxs, 8px) var(--lij-space-s, 16px) !important;   /* v3: 8px 16px */
    background: var(--lij-red, #ED1B2F);
    border: none;
    border-bottom: 0.5px solid var(--lij-cream, #FFF9F5);
    border-radius: 0 !important;
    text-align: left;
    cursor: pointer;
}

/* Anula la lupa heredada de `estilos.css:825`
   (`header .widget_product_search button:before`) — `.search-item` también
   es un `<button>` dentro de `.widget_product_search`. */
.lij-hero-search__field .search-item::before,
.buscador-resultados .search-item::before {
    content: none;
}

.lij-hero-search__field .search-item:hover,
.lij-hero-search__field .search-item:focus-visible,
.buscador-resultados .search-item:hover,
.buscador-resultados .search-item:focus-visible {
    background: var(--lij-red-hover, #BD0F20);
}

.lij-hero-search__field .search-item__thumb,
.buscador-resultados .search-item__thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 0;                            /* v3 .search-item__thumb: sin radio ni fondo */
    background: none;
}

.lij-hero-search__field .search-item__text,
.buscador-resultados .search-item__text {
    flex: 1 0 0;
    min-width: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--lij-font-title);
    font-weight: var(--lij-weight-body);
    font-size: 16px;
    line-height: 1.4;
    color: var(--lij-on-red, #FFF9F5);
}

/* --- Selector de idioma SIMULADO (2026-09-23) ----------------------------
   Implementa LanguageSwitch.tsx de la fuente de la verdad v2
   (nueva-web-lij-main-v2), decisión de Francisco (docs/DECISIONS.md
   2026-09-23): por ahora se agregan ÚNICAMENTE los títulos de idioma, sin
   funcionalidad real detrás (WPML no está instalado; el mecanismo real
   queda para más adelante). [selector_idioma_simulado]
   (functions-shortcode.php) solo imprime en archivos de la taxonomía
   `colecciones` — no aparece en los demás usos de esta plantilla 67
   compartida (edad, Barco de Vapor, Juvenil, autores, personajes, premios).
   Agregado como widget nuevo justo debajo del título de archivo
   (theme-archive-title), sin tocar ese widget. */
.selector-idioma {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: var(--lij-space-xxs, 8px);
    font-family: var(--lij-font-title);
    font-weight: var(--lij-weight-body, 500);
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--lij-accent, #ED1B2F);
}

.selector-idioma__link[aria-current='true'] {
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: var(--lij-weight-strong, 900);
}

.selector-idioma__divider {
    opacity: 0.5;
}

/* v3 (2026-10-06, LanguageSwitch.css): Avenir Medium 16, 8px entre opciones
   y el único separador del sitio entre ellas — una barra de 1px tan alta
   como el texto, del color del texto (`.divider` de global.css), en vez del
   carácter "|" a media opacidad. El idioma actual solo va subrayado. */
.selector-idioma {
    gap: 8px;
    font-size: 16px;
}

.selector-idioma__link[aria-current='true'] {
    font-weight: var(--lij-weight-body, 500);
}

.selector-idioma__divider {
    display: block;
    flex: none;
    width: 1px;
    height: 1em;
    background: currentColor;
    opacity: 1;
}


/* =============================================================================
   [lij_libros] — rejilla de libros que se carga al bajar (v3, 2026-10-06:
   grid.css .collection-grid + Items.css .item-squared--grid + BookFeed).
   Shortcode en functions-shortcode.php, JS en js/lij-book-feed.js.

   2 columnas en teléfono, 3 desde 800px, 4 desde 1180 (la densidad acordada
   en la revisión) y 5 desde 1560. Cada tarjeta ocupa dos filas de la
   rejilla (cubierta y título) como subgrid: las cubiertas de una fila se
   apoyan en la misma línea y los títulos empiezan a la misma altura y toman
   solo el alto del más largo de esa fila, hasta tres líneas.
   ============================================================================= */
.lij-libros {
    width: 100%;
}

.lij-libros__rejilla {
    --lij-libros-columnas: 2;
    display: grid;
    grid-template-columns: repeat(var(--lij-libros-columnas), minmax(0, 1fr));
    gap: 32px 40px;
    width: 100%;
}

@media (min-width: 800px) { .lij-libros__rejilla { --lij-libros-columnas: 3; } }
@media (min-width: 1180px) { .lij-libros__rejilla { --lij-libros-columnas: 4; } }
@media (min-width: 1560px) { .lij-libros__rejilla { --lij-libros-columnas: 5; } }
@media (max-width: 599px) { .lij-libros__rejilla { gap: 24px 16px; } }

.lij-libro {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 8px;
    justify-items: center;
    width: 100%;
    padding: 4px;
    text-decoration: none !important;
}

/* La cubierta llena la columna: sin alto fijo ni padding lateral; 16px bajo
   ella más los 8 de la fila = 24px hasta el título. */
.lij-libro__portada {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-self: end;
    width: 100%;
    padding: 0 0 16px;
}

.lij-libro__portada img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center bottom;
}

/* El título de un libro en las rejillas va en gris oscuro, no en el color
   de la sección: una página llena de títulos rojos gritaba demasiado
   (reunión de seguimiento, sept. 2026). Una cuarta línea se corta con "…". */
.lij-libro__titulo {
    align-self: start;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    font-family: var(--lij-font-title);
    font-weight: 750;
    font-size: 18px;
    line-height: 1.2;
    color: #262626;
    text-align: center;
}

.lij-libro:hover .lij-libro__titulo {
    text-decoration: underline;
}

@media (max-width: 599px) {
    .lij-libro__portada { padding-bottom: 6px; }
    .lij-libro__titulo { font-size: 16px; }
}

.lij-libros__mas {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    padding: 32px 0 8px;
}

.lij-libros__mas[hidden],
.lij-libros__fin[hidden] {
    display: none;
}

.lij-libros__spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgb(38 38 38 / 20%);
    border-top-color: #262626;
    border-radius: 50%;
    animation: lij-libros-giro 0.8s linear infinite;
}

@keyframes lij-libros-giro {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .lij-libros__spinner { animation-duration: 2.4s; }
}

/* Donde acaba la lista: una frase y un camino, no un final en seco. */
.lij-libros__fin {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px 0 8px;
    text-align: center;
}

.lij-libros__fin-texto {
    margin: 0;
    font-family: var(--lij-font-title);
    font-weight: 750;
    font-size: 24px;
    line-height: 1.2;
    color: var(--lij-accent, #ED1B2F);
}

.lij-libros__fin-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 1000px;
    background: var(--lij-red, #ED1B2F);
    font-family: var(--lij-font-title);
    font-weight: 750;
    font-size: 20px;
    line-height: 1.2;
    color: #FFFFFF !important;
    text-decoration: none !important;
}

.lij-libros__fin-boton:hover {
    background: var(--lij-red-hover, #C8102E);
}


/* =============================================================================
   Página de colección v3 (plantilla de Theme Builder "Colección (v3)",
   condición `colecciones`) y página «Material extra» — 2026-10-06.
   Fuente: CollectionPage.tsx / MaterialExtraPage.tsx / MaterialExtra.css de
   nueva-web-lij-main-v3. La estructura está en Elementor; aquí, solo lo que
   el panel no expresa.

   Tonos de banda: la cabecera es oscura y desde ahí cada banda toma el tono
   contrario, como en el PDF base. Como las bandas de libros sin libros se
   ocultan, el tono no se puede fijar en el panel: lo reparte lij-header.js
   ("Bandas de la colección") entre los contenedores `.lij-banda` visibles,
   con estas dos clases.
   ============================================================================= */
.lij-tono-claro { background-color: #FFF9F5 !important; }
.lij-tono-oscuro { background-color: #FFF3EB !important; }

/* Una banda de libros (o la de Material extra) sin contenido no se dibuja.
   Cada banda trae una rejilla por idioma y solo la del idioma elegido está
   visible (2026-10-08): cuentan los libros de la rejilla visible. */
.lij-banda--condicional:not(:has(.lij-libros:not([hidden]) .lij-libro, .lij-material-cta)) {
    display: none !important;
}

.lij-libros[hidden] {
    display: none !important;
}

/* El personaje de la cabecera: 160px de alto, a su proporción (v3
   .collection-head__character). */
.lij-coleccion-personaje img {
    height: 160px !important;
    width: auto !important;
    object-fit: contain;
}

.lij-material-cta {
    display: flex;
    justify-content: center;
}

/* --- «Material extra» ------------------------------------------------------ */

/* El título de página de v3 (.page-title): Lilita One 40px, rojo. */
.lij-material-titulo {
    margin: 0;
    padding: 0 40px;
    font-family: var(--lij-font-headline, 'Lilita One'), sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 1.2;
    color: var(--lij-accent, #ED1B2F);
    text-align: center;
    text-wrap: balance;
}

@media (max-width: 599px) {
    .lij-material-titulo { font-size: 32px; padding: 0 16px; }
}

.lij-material-videos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 100%;
    container-type: inline-size;
}

/* Los vídeos en fila: el elegido tan grande como permita un portátil
   (hasta 880px) en el centro y los vecinos asomando a cada lado al 82%,
   atenuados; la fila se desliza al elegir otro. */
.lij-video-stage {
    --video-w: min(880px, 100cqi - 80px - 272px);
    --video-gap: 48px;
    --side-scale: 0.82;
    --arrow: 70px;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.lij-video-stage__track {
    position: relative;
    height: calc(var(--video-w) * 9 / 16);
}

.lij-video-stage__slide {
    position: absolute;
    top: 0;
    left: calc(50% - var(--video-w) / 2);
    width: var(--video-w);
    transform: translateX(calc(var(--offset) * (var(--video-w) + var(--video-gap)))) scale(var(--side-scale));
    opacity: 0.6;
    cursor: pointer;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.5s ease;
}

.lij-video-stage__slide--activo {
    transform: translateX(0) scale(1);
    opacity: 1;
    cursor: auto;
}

.lij-video-stage__slide--lejos {
    opacity: 0;
    pointer-events: none;
}

.lij-video-stage__flechas {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.lij-video-stage__flecha {
    position: absolute;
    top: calc(var(--video-w) * 9 / 32 - var(--arrow) / 2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--arrow);
    min-height: var(--arrow);
    padding: 8px 16px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
}

.lij-video-stage__flecha[hidden] { display: none; }
.lij-video-stage__flecha:hover { background: transparent; }

.lij-video-stage__flecha--prev {
    left: calc(50% - var(--video-w) * (0.5 + (1 - var(--side-scale)) / 4) - var(--video-gap) / 2 - var(--arrow) / 2);
}

.lij-video-stage__flecha--next {
    right: calc(50% - var(--video-w) * (0.5 + (1 - var(--side-scale)) / 4) - var(--video-gap) / 2 - var(--arrow) / 2);
}

.lij-video-stage__chevron {
    display: block;
    width: 32px;
    height: 32px;
    background-color: var(--lij-accent, #ED1B2F);
    -webkit-mask: url('../images/lij/chevron-right.svg') center / 100% 100% no-repeat;
    mask: url('../images/lij/chevron-right.svg') center / 100% 100% no-repeat;
}

.lij-video-stage__flecha--prev .lij-video-stage__chevron {
    -webkit-mask-image: url('../images/lij/chevron-left.svg');
    mask-image: url('../images/lij/chevron-left.svg');
}

.lij-video-stage__flecha:hover .lij-video-stage__chevron { opacity: 0.7; }

@media (max-width: 599px) {
    .lij-video-stage {
        --video-w: calc(100cqi - 32px);
        --video-gap: 32px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .lij-video-stage__flechas {
        position: static;
        display: flex;
        min-height: var(--arrow);
        padding: 0 16px;
    }

    .lij-video-stage__flecha { position: static; }
    .lij-video-stage__flecha--next { margin-left: auto; }
}

/* Parado, en pausa o terminado, el vídeo tiene las esquinas del panel más
   grande del sitio (32px); mientras se reproduce, se cuadra. */
.lij-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 32px;
    background: #262626;
    transition: border-radius 0.3s ease;
}

.lij-video-frame--reproduciendo { border-radius: 0; }

@media (max-width: 599px) {
    .lij-video-frame { border-radius: 16px; }
}

.lij-video-frame iframe,
.lij-video-frame__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.lij-video-frame__poster {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
}

.lij-video-frame__poster img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* El botón redondo del PDF base: círculo de acento con el icono crema. */
.lij-extra-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--lij-red, #ED1B2F);
    transition: background-color 0.15s ease;
}

.lij-video-frame__poster:hover .lij-extra-icon { background: #BD0F20; }

.lij-extra-icon__glyph {
    width: 100%;
    height: 100%;
    background-color: #FFF9F5;
    -webkit-mask: url('../images/lij/icon-material-video.svg') center / contain no-repeat;
    mask: url('../images/lij/icon-material-video.svg') center / contain no-repeat;
}

.lij-video-texto {
    width: 100%;
    max-width: 960px;
    text-align: center;
}

.lij-video-texto__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.lij-video-texto__item[hidden] { display: none; }

.lij-video-texto__desc {
    padding: 0 40px;
    font-family: var(--lij-font-title);
    font-size: 18px;
    line-height: 1.4;
    color: #262626;
}

.lij-video-texto__desc p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
    .lij-video-stage__slide, .lij-video-frame { transition: none; }
}

/* Descargables: cada uno es un contenedor-enlace de Elementor con la clase
   `lij-descarga` (icono + nombre), diseñado a mano en la página. El círculo
   crema de las categorías, un tono más oscuro al pasar el ratón (v3
   .extra-download). */
.lij-descarga .elementor-icon {
    transition: background-color 160ms ease;
}

.lij-descarga:hover .elementor-icon,
.lij-descarga:focus-visible .elementor-icon {
    background-color: #FFE8D6 !important;
}

.lij-descarga:hover .elementor-heading-title {
    text-decoration: underline;
}

/* El color global de los h1 del tema pisaba el rojo del título; y el
   botón "Ver material extra" es el btn-primary de v3 (8px), no la píldora
   del cierre de [lij_libros]. */
.lij-material-titulo { color: #ED1B2F !important; }
.lij-material-cta__boton { border-radius: 8px; }

/* Los estilos globales de <button> del tema (fondo rojo, display, padding)
   se colaban en la miniatura y las flechas del escenario de vídeos. */
.lij-material-videos .lij-video-frame__poster {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.lij-material-videos .lij-video-stage__flecha,
.lij-material-videos .lij-video-stage__flecha:hover,
.lij-material-videos .lij-video-stage__flecha:focus {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}
.lij-video-texto__desc p { margin: 0 !important; }


/* =============================================================================
   Resultados de búsqueda (plantilla 35) igualados a v3 — 2026-10-06
   (SearchPage.tsx/.css, SearchLarge.css, grid.css, Items.css).
   ============================================================================= */

/* Buscador grande: 640px en esta página (.search-page__field), texto de 20px
   (--text-l) y peso medium, como .search-large input. */
.buscador-resultados form.woocommerce-product-search {
    width: 640px;
}

.buscador-resultados .search-overlay {
    width: 640px;
}

.buscador-resultados form.woocommerce-product-search input.search-field {
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}

/* Relleno del texto como .search-large input (8px 4px): con los 16px del
   formulario, el texto de ayuda empieza a 20px del borde, no a 32. Vale para
   el buscador de la home y el de resultados. */
.lij-hero-search__field form.woocommerce-product-search input.search-field,
.buscador-resultados form.woocommerce-product-search input.search-field {
    padding: 8px 4px !important;
}

/* Rejilla de resultados con la tarjeta "Libro rejilla (v3)" (plantilla de
   Loop 53533): igual que la .collection-grid de v3. Cada tarjeta ocupa dos
   filas de la rejilla (portada y título) como subgrid: las portadas de una
   fila se apoyan en la misma línea y los títulos empiezan a la misma altura
   y ocupan solo lo que el más largo de esa fila, hasta 3 líneas. Columnas
   como v3: 2 por debajo de 800px, 3 desde 800, 4 desde 1180, 5 desde 1560
   (los cortes del Kit de Elementor no coinciden, se ajustan aquí). */
.lij-rejilla-v3 .elementor-loop-container {
    grid-auto-rows: auto;
    align-items: start;
}

@media (min-width: 800px) and (max-width: 1179px) {
    .lij-rejilla-v3 .elementor-loop-container { --grid-columns: 3 !important; }
}

@media (min-width: 1560px) {
    .lij-rejilla-v3 .elementor-loop-container { --grid-columns: 5 !important; }
}

@media (max-width: 799px) {
    .lij-rejilla-v3 .elementor-loop-container { --grid-columns: 2 !important; }
}

.lij-rejilla-v3 .e-loop-item {
    display: grid !important;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 8px;
    justify-items: center;
}

.lij-rejilla-v3 .e-loop-item > .elementor,
.lij-rejilla-v3 .e-loop-item .lij-libro-v3 {
    display: contents !important;
}

.lij-rejilla-v3 .lij-libro-v3__portada {
    align-self: end;
    width: 100%;
}

.lij-rejilla-v3 .lij-libro-v3__portada img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-height: none;
    object-fit: contain;
    object-position: center bottom;
}

.lij-rejilla-v3 .lij-libro-v3__titulo {
    align-self: start;
    width: 100%;
}

.lij-rejilla-v3 .lij-libro-v3__titulo .elementor-heading-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lij-rejilla-v3 .lij-libro-v3__titulo .elementor-heading-title a {
    color: inherit;
    text-decoration: none;
}

.lij-rejilla-v3 .e-loop-item:hover .lij-libro-v3__titulo .elementor-heading-title {
    text-decoration: underline;
}

/* Sin paginación a la vista, como v3 (que muestra todos los resultados): el
   "Mostrar más" de FacetWP se pulsa solo cuando el final de la rejilla se
   acerca a la pantalla (lij-header.js, "Resultados: carga al bajar"), con el
   spinner de BookFeed mientras carga. También en la ficha de autor (plantilla
   53552, copia de la 35, 2026-10-08). */
:is(.elementor-35, .elementor-53552) .facet-paginacion .facetwp-load-more {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    padding: 0 !important;
    border: 0 !important;
}

:is(.elementor-35, .elementor-53552) .facet-paginacion .lij-libros__mas {
    display: flex;
}

/* La tarjeta v3 gana a la regla de la Fase Búsqueda para la tarjeta antigua
   (lij-product.css, .resultados-busqueda-grid … título rojo 900 !important),
   que se conserva para la plantilla 59. */
.resultados-busqueda-grid.lij-rejilla-v3 .lij-libro-v3__titulo .elementor-heading-title,
.lij-rejilla-v3 .elementor-widget-theme-post-title.lij-libro-v3__titulo .elementor-heading-title {
    color: #262626 !important;
    font-weight: 750 !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
}

@media (max-width: 599px) {
    .resultados-busqueda-grid.lij-rejilla-v3 .lij-libro-v3__titulo .elementor-heading-title,
    .lij-rejilla-v3 .elementor-widget-theme-post-title.lij-libro-v3__titulo .elementor-heading-title {
        font-size: 16px !important;
    }
}

/* Columnas: Elementor las fija por clase (.elementor-grid-4 .elementor-grid
   { repeat(4, 1fr) }), no por variable; se sobrescriben en los cortes de v3. */
.lij-rejilla-v3 .elementor-loop-container.elementor-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; column-gap: 40px !important; row-gap: 32px !important; }
@media (min-width: 1560px) { .lij-rejilla-v3 .elementor-loop-container.elementor-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } }
@media (max-width: 1179px) { .lij-rejilla-v3 .elementor-loop-container.elementor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 799px) { .lij-rejilla-v3 .elementor-loop-container.elementor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 599px) { .lij-rejilla-v3 .elementor-loop-container.elementor-grid { column-gap: 16px !important; row-gap: 24px !important; } }

/* El enlace que envuelve la portada era inline y dejaba 6px de hueco de
   línea bajo la imagen: 16px + 8px hasta el título, como v3. */
.lij-rejilla-v3 .lij-libro-v3__portada a { display: block; line-height: 0; }

/* v3 no atenúa los libros agotados (el sitio no vende, ver DECISIONS.md
   2026-09-10): se anula aquí la regla de estilos.css para .outofstock, solo
   en la rejilla v3 de resultados. */
.lij-rejilla-v3 .e-loop-item.outofstock,
.lij-rejilla-v3 .e-loop-item.outofstock * {
    opacity: 1 !important;
    filter: none !important;
}
.lij-rejilla-v3 .facetwp-template div.product.outofstock .elementor-widget-image img,
.lij-rejilla-v3 .facetwp-template div.product.outofstock img {
    filter: none !important;
    opacity: 1 !important;
}
.lij-rejilla-v3 .e-loop-item.product.outofstock .lij-libro-v3__portada img {
    filter: none !important;
    opacity: 1 !important;
}


/* =============================================================================
   Filtros de la búsqueda igualados a v3 (FilterBar.css + overlay.css) —
   2026-10-07, auditoría AUDITORIA-VISUAL-V3-2026-10-07.md (A1-A3, M16-M21)
   ============================================================================= */

/* --- Píldora: más oscura al pasar el ratón, con el panel abierto o con algún
   valor elegido (v3 .filter__trigger--on / hover de .btn-primary). El
   contador "Edad (1)" lo escribe lij-header.js. */
.filtros-pildoras .e-n-accordion-item-title:hover,
.filtros-pildoras .e-n-accordion-item[open] > .e-n-accordion-item-title,
.filtros-pildoras .e-n-accordion-item.lij-filtro--activo > .e-n-accordion-item-title {
    background: var(--lij-red-hover, #BD0F20) !important;
}

/* --- Panel: el rojo de .search-overlay, ancho al contenido entre 280 y
   360px, sin relleno propio (las filas van a sangre) y 16px al final. La
   cabecera queda fija y solo se desplaza la lista. */
.filtros-pildoras [role="region"] {
    display: flex !important;
    flex-direction: column !important;          /* el contenedor de Elementor pasa a fila en teléfono */
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    min-width: 280px;
    max-width: 360px;
    max-height: 320px;
    padding: 0 0 16px !important;
    overflow: hidden !important;
}

.filtros-pildoras .e-n-accordion-item:not([open]) [role="region"] {
    display: none !important;
}

.filtros-pildoras [role="region"] > .elementor-element:has(.facetwp-facet) {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--lij-cream, #FFF9F5) transparent;
}

/* El último filtro (Categorías) abre hacia la izquierda, alineado con el
   borde derecho de su píldora (v3 .filter-panel--end). */
.filtros-pildoras > .e-con-inner > .elementor-element:last-child [role="region"] {
    left: auto !important;
    right: 0 !important;
}

.filtros-pildoras [role="region"] .lij-panel-titulo {
    flex: none;
    padding: 16px !important;
    margin: 0 !important;
    border-bottom: 0.5px solid var(--lij-cream, #FFF9F5) !important;
    font-weight: 750;
    font-size: 16px;
    line-height: 1.4;
}

/* Buscador del panel Autor (v3 .filter-panel__search). */
.filtros-pildoras [role="region"] .lij-panel-buscador-caja {
    flex: none;
    width: 100%;
    padding: 8px 16px;
    border-bottom: 0.5px solid var(--lij-cream, #FFF9F5);
}

.filtros-pildoras [role="region"] .lij-panel-buscador {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 8px !important;
    font-weight: var(--lij-weight-body, 500) !important;   /* Medium: el 550 de v3; en WP 550 caería en Heavy */
    font-size: 16px !important;
    line-height: 1.4;
    text-overflow: ellipsis;
}

/* Filas (v3 .search-item + .filter-option): 8/16, texto 16/550 a la
   izquierda que se corta con "…", contador 16/750 al 70% a la derecha. */
.filtros-pildoras [role="region"] .facetwp-checkbox {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 16px !important;
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: var(--lij-weight-body, 500) !important;   /* Medium: el 550 de v3; en WP 550 caería en Heavy */
    line-height: 1.4;
    cursor: pointer;
}

.filtros-pildoras [role="region"] .facetwp-display-value {
    flex: 1 1 auto;                              /* el nombre ensancha el panel hasta 360 y luego se corta */
    min-width: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 !important;
}

.filtros-pildoras [role="region"] .facetwp-counter {
    flex-shrink: 0;
    font-weight: 750 !important;
    opacity: 0.7 !important;
    padding: 0 !important;
}

/* Elegida: crema con texto rojo (v3 .filter-option--selected). */
.filtros-pildoras [role="region"] .facetwp-checkbox.checked,
.filtros-pildoras [role="region"] .facetwp-checkbox.checked:hover {
    background-color: var(--lij-cream, #FFF9F5) !important;
    font-weight: var(--lij-weight-body, 500) !important;   /* Medium: el 550 de v3; en WP 550 caería en Heavy */
}

.filtros-pildoras [role="region"] .facetwp-checkbox.checked .facetwp-display-value,
.filtros-pildoras [role="region"] .facetwp-checkbox.checked .facetwp-counter {
    color: var(--lij-red, #ED1B2F) !important;
}

/* Sin resultados con los filtros actuales: atenuada e inerte (v3
   .filter-option:disabled). Solo aplica si el facet muestra "fantasmas". */
.filtros-pildoras [role="region"] .facetwp-checkbox.disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

/* Teléfono: dos filas de píldoras; el panel abre bajo la fila entera y a su
   ancho, en vez de colgar de cada píldora y salirse de la pantalla (v3
   FilterBar.css, max-width 599px). */
@media (max-width: 599px) {
    .filtros-pildoras > .e-con-inner {
        position: relative;
    }

    .filtros-pildoras > .e-con-inner > .elementor-element,
    .filtros-pildoras > .e-con-inner > .elementor-element > .elementor-widget-container,
    .filtros-pildoras .e-n-accordion,
    .filtros-pildoras .e-n-accordion-item {
        position: static !important;
    }

    .filtros-pildoras [role="region"],
    .filtros-pildoras > .e-con-inner > .elementor-element:last-child [role="region"] {
        top: calc(100% + 8px) !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        min-width: 0;
        max-width: none;
    }
}

/* --- Resumen de filtros activos (v3 .filter-bar__summary): cada filtro como
   texto rojo sin caja con "×", y "Limpiar filtros" subrayado al lado. Se
   anulan aquí, solo en este resumen, la tarjeta blanca "Seleccionado" y el
   botón rojo heredados de estilos.css (2173-2290). */
.filtros-resumen .facetwp-selections ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0 !important;
    background: none !important;
    border-radius: 0;
    list-style: none;
}

.filtros-resumen .facetwp-selections ul::before {
    content: none !important;
    display: none !important;
}

.filtros-resumen .facetwp-selections ul li {
    display: contents;
    margin: 0 !important;
}

.filtros-resumen .facetwp-selections .facetwp-selection-label {
    display: none !important;                    /* "Edad:" — v3 solo muestra el valor */
}

/* 16px bajo las píldoras (v3 .filter-bar gap), no los 24 del bloque, y 32
   hasta la rejilla (24 + los 8 de relleno del bloque), como sin filtros. */
.filtros-resumen:has(.facetwp-selection-value) {
    margin-top: -8px;
    margin-bottom: 24px;
}

.filtros-resumen .facetwp-selections .facetwp-selection-value {
    display: inline-block !important;
    margin: 0 !important;                        /* FacetWP le da 10px a la derecha */
    width: auto !important;
    padding: 8px !important;
    border-radius: 8px;
    background: none !important;
    font-family: var(--lij-font-title);
    font-weight: 750;
    font-size: 16px;
    line-height: 1.4;
    color: var(--lij-accent, #ED1B2F);
    cursor: pointer;
    transition: color 120ms ease;
}

.filtros-resumen .facetwp-selections .facetwp-selection-value::after {
    content: " ×";
}

.filtros-resumen .facetwp-selections .facetwp-selection-value:hover,
.filtros-resumen .facetwp-selections .facetwp-selection-value:focus-visible {
    background: none !important;
    color: var(--lij-red-hover, #BD0F20);
}

.filtros-resumen .facetwp-reset {
    display: inline-block;
    width: auto !important;
    margin: 0 !important;
    padding: 8px !important;
    border-radius: 8px !important;
    background: none !important;
    font-family: var(--lij-font-title) !important;
    font-weight: 750;
    font-size: 16px !important;
    line-height: 1.4;
    color: var(--lij-accent, #ED1B2F);
    text-decoration: underline;
    text-underline-position: from-font;
    cursor: pointer;
}

.filtros-resumen .facetwp-reset:hover,
.filtros-resumen .facetwp-reset:active {
    background: none !important;
    color: var(--lij-red-hover, #BD0F20);
}

/* --- Sin resultados (v3 SearchPage.tsx): las píldoras se quedan (FacetWP
   oculta la píldora cuya faceta no tiene opciones; aquí se mantiene) y el
   mensaje es un párrafo de 20/550 en gris (v3 .collection-empty). */
.filtros-pildoras > .e-con-inner > .elementor-element {
    display: block !important;
}

.filtros-pildoras [role="region"] .facetwp-facet:empty::after {
    content: "Sin coincidencias";
    display: block;
    padding: 16px;
    font-family: var(--lij-font-title);
    font-weight: var(--lij-weight-body, 500);   /* Medium: el 550 de v3; en WP 550 caería en Heavy */
    font-size: 16px;
    line-height: 1.4;
    color: #fff;
}

.lij-sin-resultados {
    width: fit-content;                          /* v3: el párrafo mide lo que su texto, hasta el ancho disponible */
    max-width: 100%;
    margin: 0 auto;
    font-family: var(--lij-font-title);
    font-weight: var(--lij-weight-body, 500);   /* Medium: el 550 de v3; en WP 550 caería en Heavy */
    font-size: 20px;
    line-height: 1.4;
    color: var(--lij-text, #262626);
    text-align: center;
}

/* La regla heredada de estilos.css (2412: imagen "carrito vacío" de fondo,
   295px de relleno arriba y un ancho desbordado) no aplica aquí: en v3 el
   mensaje va solo, justo debajo de los filtros. */
.resultados-busqueda-grid .e-loop-nothing-found-message,
.resultados-busqueda-grid .e-loop-nothing-found-message__text {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background-image: none !important;
    transform: none !important;
    left: auto !important;
}

/* Material extra, descargables en teléfono: una fila que se desliza, como el
   carrusel de v3 en ese ancho (Carousel.css: sin flechas, tarjetas de 164px
   con 8px entre ellas y el margen de página de 16px), en vez de apilarse a
   todo el ancho. */
@media (max-width: 599px) {
    .lij-descargas {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 16px;
        scrollbar-width: none;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .lij-descargas::-webkit-scrollbar {
        display: none;
    }

    .lij-descargas > .lij-descarga {
        flex: 0 0 164px !important;
        width: 164px !important;
        max-width: 164px !important;
        scroll-snap-align: start;
    }
}

/* La línea de texto del envoltorio del icono sumaba 6px bajo el círculo
   (162 frente a 156): el nombre quedaba más bajo que en v3. */
.lij-descarga .elementor-icon-wrapper {
    display: flex;
    line-height: 0;
}

/* El nombre del descargable es un <p>: traía 16px de margen inferior y la
   tarjeta medía 231 en vez de 215. */
.lij-descarga .elementor-heading-title {
    margin: 0 !important;
}

/* Fin del listado (y su indicador de carga) a 32px de la rejilla más su
   propio relleno de 32, como v3 BookFeed: allí rejilla y cierre son hermanos
   dentro de la banda, que los separa 32. Vale para la ficha y las secciones. */
.lij-libros__fin,
.lij-libros__mas {
    margin-top: 32px;
}

/* Lupa del buscador grande de la home igual que la de resultados y v3
   (.search-large__submit: botón de 38px con el icono a 30): en la home salía
   el glifo de unos 20px. */
.lij-hero-search__field form.woocommerce-product-search .search-field + button,
.lij-hero-search__field form.woocommerce-product-search button[type="submit"] {
    position: relative;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    min-width: 38px !important;
    max-width: 38px;
    margin: 0 !important;
    padding: 4px !important;
    border: none;
    border-radius: var(--lij-radius-s, 8px);
    background-color: transparent !important;
    color: transparent;
    font-size: 0 !important;
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
}

.lij-hero-search__field form.woocommerce-product-search button::before {
    content: none !important;
    display: none !important;
}

.lij-hero-search__field form.woocommerce-product-search button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px !important;                      /* otra regla anterior la dejaba en 24 */
    height: 30px !important;
    background-color: var(--lij-red, #ED1B2F);
    -webkit-mask: url('/wp-content/uploads/2026/09/header/lij-header-icon-search.svg') center / contain no-repeat;
    mask: url('/wp-content/uploads/2026/09/header/lij-header-icon-search.svg') center / contain no-repeat;
}

.lij-hero-search__field form.woocommerce-product-search button:hover::after {
    opacity: .7;
}

/* Selector de idioma como v3 (LanguageSwitch.css): pegado al título (solo
   los 4px del contenedor; el margen de 8 de arriba lo separaba 12), cada
   idioma con 2px de relleno y radio 4, y subrayado al pasar el ratón. */
.selector-idioma {
    margin-top: 0 !important;
}

.selector-idioma__link {
    padding: 2px;
    border-radius: 4px;
}

@media (hover: hover) {
    .selector-idioma__link:hover {
        text-decoration: underline !important;   /* la regla general de enlaces lo quitaba */
        text-underline-offset: 3px;
    }
}

/* Título "Material extra" (colección sin vídeos) como el título de página de
   v3 (.page-title: 40/48, 32 en teléfono): la regla del Kit para h1
   (.elementor-kit-21 h1) le ganaba y lo dejaba en 32/22.4 y 18 en teléfono. */
h1.lij-material-titulo {
    font-size: 40px !important;
    line-height: 1.2 !important;
}

@media (max-width: 599px) {
    h1.lij-material-titulo {
        font-size: 32px !important;
    }
}

/* Descargables desde 600px: con tres, la separación es la del carrusel de v3
   (Carousel.tsx: el hueco que sobra repartido entre las tarjetas, sin pasar
   de 64), descontando los 70px de cada flecha. A 820 da 54, a 1440 64. */
@media (min-width: 600px) {
    .lij-descargas:has(> .lij-descarga:nth-child(3):last-child) {
        column-gap: min(64px, calc((100% - 140px - 3 * 164px) / 2)) !important;
    }
}