/* ============================================================
   CUSTOM FILTERS UI — ctg-tienda-elementor
   Archivo: assets/css/custom-filters-ui.css
   v1.4 — + Grupos Marca/Modelo + tipografía Barlow + botón limpiar
   ============================================================ */

/*
   @import ELIMINADO para evitar el flash visual.
   La fuente Montserrat debe cargarse via <link> en el <head> del tema,
   O bien añadirla en: Apariencia > Personalizar > Fuentes adicionales,
   O en el header.php del tema con:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">

   La fuente Barlow (usada en títulos, subcategorías, submodelos y el
   botón "Limpiar filtros") debe cargarse igual, vía wp_enqueue_style en
   class-ctg-tienda-elementor-plugin.php (enqueue_frontend), o por el tema.

   El @import dentro de un .css cargado con wp_enqueue_style bloquea el render
   de TODAS las reglas del archivo hasta que Google Fonts responda.
   Eso crea la ventana de tiempo donde el HTML original se ve antes que los estilos.
*/

/* ── Variables ───────────────────────────────────────────── */
.ctg-filtros-tienda {
  --cfu-black:      #111111;
  --cfu-white:      #ffffff;
  --cfu-gray-light: #f2f2f2;
  --cfu-gray-mid:   #d0d0d0;
  --cfu-gray-text:  #999999;
  --cfu-divider:    #ebebeb;
  --cfu-radius-pill: 999px;
  --cfu-transition: 0.18s ease;
  --cfu-font:       'Barlow', sans-serif;
  --cfu-font-title: 'Barlow', sans-serif;
  --cfu-limpiar-azul: #023398;
  --cfu-marca-titulo: #001133;
}

.ctg-filtros-tienda,
.ctg-filtros-tienda * {
  font-family: var(--cfu-font) !important;
  font-weight: 400 !important;
}

/* ══════════════════════════════════════════════════════════════
   OCULTADO ANTICIPADO — sin depender del atributo data-cfu-mode
   ══════════════════════════════════════════════════════════════

   CAUSA DEL FLASH: el CSS original ocultaba elementos usando el selector
   [data-cfu-mode="radio-list"] y [data-cfu-mode="pills"], pero ese atributo
   lo AGREGA el JS después de que la página ya se pintó. Por eso el usuario
   veía el HTML original hasta que el JS corría.

   SOLUCIÓN: ocultar los elementos PHP directamente por su selector estático,
   desde el primer render del CSS, SIN necesitar que el JS haya corrido.

   Esto es seguro porque:
   - Si el JS falla: los elementos PHP siguen ocultos, pero la nueva UI no aparece.
     → Mejor que mostrar duplicados.
   - Si el JS corre OK: inserta la nueva UI antes del panel y todo se ve correcto.
   ══════════════════════════════════════════════════════════════ */

/* Ocultar shell original (trigger/dropdown/tags) en TODOS los paneles de filtro
   (categorías y taxonomías). El JS construye la UI nueva antes de este elemento. */
.ctg-filtros-tienda:not(.ctg-filtros-tienda--editor) [data-ctg-filtros-panel] > .ctg-filtros-block__shell,
.ctg-filtros-tienda--desplegable.ctg-filtros-tienda--editor [data-ctg-filtros-panel] > .ctg-filtros-block__shell {
  display: none !important;
}

/* Ocultar el título PHP de TODOS los paneles de filtro */
.ctg-filtros-tienda:not(.ctg-filtros-tienda--editor) [data-ctg-filtros-panel] > .ctg-filtros-block__title,
.ctg-filtros-tienda--desplegable.ctg-filtros-tienda--editor [data-ctg-filtros-panel] > .ctg-filtros-block__title {
  display: none !important;
}

/* Ocultar título PHP del bloque precio */
.ctg-filtros-tienda:not(.ctg-filtros-tienda--editor) .ctg-filtros-field > .ctg-filtros-field__title,
.ctg-filtros-tienda--desplegable.ctg-filtros-tienda--editor .ctg-filtros-field > .ctg-filtros-field__title {
  display: none !important;
}

/* Ocultar inputs numéricos de precio (siguen en el form, solo ocultos visualmente) */
.ctg-filtros-tienda:not(.ctg-filtros-tienda--editor) .ctg-precio-row,
.ctg-filtros-tienda--desplegable.ctg-filtros-tienda--editor .ctg-precio-row {
  display: none !important;
}

/* Ocultar slider visual original (reemplazado por el nuevo) */
.ctg-filtros-tienda:not(.ctg-filtros-tienda--editor) .ctg-precio-slider-visual,
.ctg-filtros-tienda--desplegable.ctg-filtros-tienda--editor .ctg-precio-slider-visual {
  display: none !important;
}

/* Mantener los selectores por data-cfu-mode por retrocompatibilidad */
[data-cfu-mode="radio-list"] > .ctg-filtros-block__title,
[data-cfu-mode="pills"]      > .ctg-filtros-block__title {
  display: none !important;
}

[data-cfu-mode="radio-list"] > .ctg-filtros-block__shell,
[data-cfu-mode="pills"]      > .ctg-filtros-block__shell,
[data-cfu-mode="radio-list"] .ctg-filtros-block__tags,
[data-cfu-mode="pills"]      .ctg-filtros-block__tags {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   SEPARADORES — solo debajo del título de sección
   ══════════════════════════════════════════════════════════════ */

.cfu-section {
  padding-bottom: 1.4rem;
  border-bottom: none;
}

.cfu-section:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.ctg-filtros-field {
  padding-bottom: 1.4rem;
  border-bottom: none;
}

.ctg-filtros-field:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* ── Título de sección — único separador permitido ─────────── */
.cfu-section-title,
.cfu-price-title,
.ctg-filtros-tienda [data-ctg-filtros-grupos] > .ctg-filtros-block__title {
  font-size: 0.9rem;
  font-weight: 500 !important;
  letter-spacing: 0;
  text-transform: uppercase !important;
  color: var(--cfu-marca-titulo) !important;
  margin: 0 0 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--cfu-divider);
}

/* ══════════════════════════════════════════════════════════════
   1. CATEGORÍAS — radio buttons verticales
   ══════════════════════════════════════════════════════════════ */
.cfu-radio-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.cfu-radio-list__item { display: flex; align-items: center; }

.cfu-radio-list__label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.48rem 0;
  cursor: pointer;
  transition: opacity var(--cfu-transition);
}

.cfu-radio-list__item:last-child .cfu-radio-list__label {
  /* no border — clean list */
}

.cfu-radio-list__label:hover { opacity: 0.6; }

.cfu-marca-modelo__item:hover { opacity: 0.6; }

.cfu-radio-list__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.cfu-radio-list__circle {
  width: 17px;
  height: 17px;
  min-width: 17px;
  border-radius: 50%;
  border: 1.5px solid var(--cfu-gray-mid);
  background: var(--cfu-white);
  position: relative;
  flex-shrink: 0;
  transition: border-color var(--cfu-transition), background var(--cfu-transition);
}

.cfu-radio-list__input:checked ~ .cfu-radio-list__circle {
  border-color: var(--cfu-black);
  background: var(--cfu-black);
}

.cfu-radio-list__input:checked ~ .cfu-radio-list__circle::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--cfu-white);
}

.cfu-radio-list__text {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--cfu-black);
  line-height: 1.3;
}

.cfu-radio-list__count {
  font-size: 0.78rem;
  color: var(--cfu-gray-text);
}

.cfu-radio-list__input:checked ~ .cfu-radio-list__text {
  font-weight: 600;
}

.cfu-radio-list__item--child .cfu-radio-list__label {
  padding-left: 1.1rem;
}

/* ══════════════════════════════════════════════════════════════
   2. PRECIO — etiqueta + slider B&W
   ══════════════════════════════════════════════════════════════ */

.cfu-price-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--cfu-black);
  margin-bottom: 0.5rem;
}

.cfu-price-label strong { font-weight: 700; }

.cfu-slider-track {
  position: relative;
  height: 3px;
  background: var(--cfu-gray-mid);
  border-radius: 2px;
  margin: 16px 10px 6px;
  cursor: pointer;
}

.cfu-slider-range {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--cfu-black);
  border-radius: 2px;
  pointer-events: none;
}

.cfu-slider-handle {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--cfu-black);
  border: 2.5px solid var(--cfu-white);
  box-shadow: 0 1px 5px rgba(0,0,0,0.28);
  transform: translate(-50%, -50%);
  cursor: grab;
  z-index: 3;
  margin: 0;
  padding: 0;
  transition: box-shadow var(--cfu-transition), transform 0.1s ease;
}

.cfu-slider-handle:active {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 2px 10px rgba(0,0,0,0.38);
}

.cfu-slider-handle:focus-visible {
  outline: 2px solid var(--cfu-black);
  outline-offset: 3px;
}

/* ══════════════════════════════════════════════════════════════
   3. MARCAS / TAXONOMÍAS — pills
   ══════════════════════════════════════════════════════════════ */
.cfu-pills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.cfu-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.85rem;
  border-radius: var(--cfu-radius-pill);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  border: 1px solid var(--cfu-gray-mid);
  background: var(--cfu-gray-light);
  color: var(--cfu-black);
  transition:
    background var(--cfu-transition),
    color var(--cfu-transition),
    border-color var(--cfu-transition),
    transform 0.1s ease;
  user-select: none;
  -webkit-user-select: none;
}

.cfu-pill:hover,
.cfu-pill:focus,
.cfu-pill:focus-visible {
  border-color: #aaa;
  background: #e6e6e6;
  color: var(--cfu-black);
  outline: none;
}

.cfu-pill--active {
  background: var(--cfu-black) !important;
  color: var(--cfu-white) !important;
  border-color: var(--cfu-black) !important;
}

.cfu-pill:active { transform: scale(0.96); }

.cfu-pill__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
/* ══════════════════════════════════════════════════════════════
   DESPLEGABLE — acordeón en bloques
   ══════════════════════════════════════════════════════════════ */
.ctg-filtros-tienda__icon-tpl {
  display: none !important;
}

.ctg-filtros-tienda--desplegable .ctg-filtros-tienda__form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ctg-filtros-tienda--desplegable [data-ctg-filtros-panel] {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
}

.ctg-filtros-tienda--desplegable .cfu-section:not(.cfu-desplegable),
.ctg-filtros-tienda--desplegable .ctg-filtros-field:not(.cfu-desplegable) {
  padding-bottom: 0;
  margin-bottom: 0;
}

.ctg-filtros-tienda .cfu-desplegable {
  box-sizing: border-box;
  overflow: hidden;
  margin: 0;
}

.ctg-filtros-tienda .cfu-desplegable__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  line-height: inherit;
  box-sizing: border-box;
  background: transparent;
  background-image: none;
  filter: none;
  min-height: 0;
  max-width: none;
}

.ctg-filtros-tienda button.cfu-desplegable__cabecera {
  margin: 0;
  font: inherit;
  line-height: inherit;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  width: 100%;
  background: transparent;
  background-image: none;
  box-shadow: none;
  filter: none;
  appearance: none;
  -webkit-appearance: none;
}

.ctg-filtros-tienda .cfu-desplegable__cabecera:hover,
.ctg-filtros-tienda .cfu-desplegable__cabecera:focus,
.ctg-filtros-tienda .cfu-desplegable__cabecera:active,
.ctg-filtros-tienda .cfu-desplegable__cabecera:focus-visible {
  color: inherit;
  box-shadow: none;
  outline: none;
  transform: none;
  opacity: 1;
  background: transparent;
  background-image: none;
  filter: none;
}

.ctg-filtros-tienda .cfu-desplegable__titulo {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 500 !important;
  letter-spacing: 0;
  text-transform: uppercase !important;
  color: var(--cfu-marca-titulo) !important;
  line-height: 1.3;
}

.ctg-filtros-tienda .cfu-desplegable__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  color: var(--cfu-black);
}

.ctg-filtros-tienda .cfu-desplegable__icon svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.ctg-filtros-tienda .cfu-desplegable__cuerpo[hidden] {
  display: none !important;
}

.ctg-filtros-tienda .cfu-desplegable .cfu-section-title,
.ctg-filtros-tienda .cfu-desplegable > .cfu-price-title {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   Contador en pills
   ══════════════════════════════════════════════════════════════ */
.cfu-pill__text {
  /* permite que el span de nombre y el de conteo convivan */
}

.cfu-pill__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.35rem;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(0,0,0,0.12);
  color: inherit;
  line-height: 1;
  transition: background var(--cfu-transition);
}

.cfu-pill--active .cfu-pill__count {
  background: rgba(255,255,255,0.25);
}

/* Items sin resultados: atenuados */
.cfu-item--empty {
  opacity: 0.4;
  pointer-events: none;
}

/* Contador en radio-list: espacio consistente */
.cfu-radio-list__count {
  display: inline-block;
  margin-left: 0.3rem;
  font-size: 0.75rem;
  color: var(--cfu-gray-text);
  font-weight: 400;
}

/* ══════════════════════════════════════════════════════════════
   4. MARCA / MODELO — grupos plegables (atributo "Marca | Modelo")
   ══════════════════════════════════════════════════════════════ */

.cfu-marca-lista {
  display: flex;
  flex-direction: column;
}

.ctg-filtros-tienda .cfu-marca-grupo__header,
.ctg-filtros-tienda .cfu-marca-grupo__header:hover,
.ctg-filtros-tienda .cfu-marca-grupo__header:focus,
.ctg-filtros-tienda .cfu-marca-grupo__header:active,
.ctg-filtros-tienda .cfu-marca-grupo__header:focus-visible {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.65rem 0;
  margin-bottom: 0.5rem;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-bottom: 1px solid #e2e2e2;
  box-shadow: none !important;
  cursor: pointer;
  font: inherit;
  font-weight: 500 !important;
  color: var(--cfu-marca-titulo) !important;
  text-align: left;
  outline: none !important;
  opacity: 1 !important;
  transition: none;
}

.ctg-filtros-tienda .cfu-marca-grupo__nombre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem !important;
  text-transform: uppercase !important;
  color: var(--cfu-marca-titulo) !important;
  font-weight: 500 !important;
}

.cfu-marca-grupo__chevron {
  width: 8px;
  height: 8px;
  border: none;
  border-right: 2px solid var(--cfu-marca-titulo);
  border-bottom: 2px solid var(--cfu-marca-titulo);
  margin-left: 0.5rem;
  margin-bottom: 2px;
  flex-shrink: 0;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.cfu-marca-grupo__header[aria-expanded="true"] .cfu-marca-grupo__chevron {
  transform: rotate(225deg);
}

.cfu-marca-grupo__body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0 0 0.75rem 0.15rem;
}

.cfu-marca-grupo__body[hidden] {
  display: none !important;
}

.cfu-marca-modelo__item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
}

.cfu-marca-modelo__circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid #b5b5b5;
  flex: 0 0 auto;
  transition: border-color 0.15s ease;
}

.cfu-marca-modelo__item:hover .cfu-marca-modelo__circle {
  border-color: #888;
}

.cfu-marca-modelo__item input:checked ~ .cfu-marca-modelo__circle {
  border-color: var(--cfu-black);
  box-shadow: inset 0 0 0 3px #fff, 0 0 0 1px var(--cfu-black);
  background: var(--cfu-black);
}

.cfu-marca-modelo__item input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* ══════════════════════════════════════════════════════════════
   5. TIPOGRAFÍA — Barlow para títulos, subcategorías y submodelos
   (misma especificidad que la regla global de Montserrat + !important,
   por eso va después en el archivo: así gana en la cascada)
   ══════════════════════════════════════════════════════════════ */

.ctg-filtros-tienda .cfu-section-title,
.ctg-filtros-tienda .cfu-price-title,
.ctg-filtros-tienda .cfu-marca-grupo__nombre {
  font-family: var(--cfu-font-title) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em;
}

.ctg-filtros-tienda .cfu-radio-list__item--child .cfu-radio-list__text {
  font-family: var(--cfu-font-title) !important;
  text-transform: uppercase !important;
  color: var(--cfu-gray-text) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
}

/* Modelos (Marca/Modelo): no se fuerza mayúscula ni minúscula, se respeta tal cual viene */
.ctg-filtros-tienda .cfu-marca-modelo__label {
  font-family: var(--cfu-font-title) !important;
  text-transform: none !important;
  color: var(--cfu-black) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
}

/* ══════════════════════════════════════════════════════════════
   6. BOTÓN "LIMPIAR FILTROS"
   ══════════════════════════════════════════════════════════════ */

.ctg-filtros-tienda .ctg-filtros-tienda__limpiar,
.ctg-filtros-tienda .ctg-filtros-tienda__limpiar:hover,
.ctg-filtros-tienda .ctg-filtros-tienda__limpiar:focus,
.ctg-filtros-tienda .ctg-filtros-tienda__limpiar:active {
  margin-top: 10px;
  background: var(--cfu-limpiar-azul) !important;
  border: 1.5px solid var(--cfu-limpiar-azul);
  border-radius: 0 !important;
  padding: 8px 14px;
  font-family: var(--cfu-font-title) !important;
  font-size: 13px;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em;
  color: #ffffff !important;
  cursor: pointer;
  outline: none !important;
  box-shadow: none !important;
  transition: none;
}