/**
 * Panel de filtros del listado de Insights/Recursos.
 *
 * El widget "Taxonomy Filter" de Pro imprime cada termino como un <button
 * class="e-filter-item" aria-pressed>. No trae casillas, ni grupos plegables,
 * ni chips de filtros activos, que es lo que pide el diseno: las casillas y
 * los chips se dibujan aqui sobre ese mismo marcado (asi se conserva el
 * comportamiento del widget) y el plegado lo maneja listado.js.
 */

/* ---------- lista de terminos como casillas ---------- */

/* body + .elementor-element por especificidad: el widget escribe la
   direccion y la alineacion de la lista con (0,3,0) y el selector de clase
   sola perdia, con los terminos centrados en vez de alineados a la izquierda. */
body .elementor-element.scala-filtro .e-filter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  padding: 0;
}

body .elementor-element.scala-filtro .e-filter-item {
  width: 100%;
  justify-content: flex-start;
}

/* "Todos" lo imprime al final y en el diseno va primero. */
.scala-filtro .e-filter-item[data-filter="__all"] {
  order: -1;
}

.scala-filtro .e-filter-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--e-global-typography-s-font-family, Inter), sans-serif;
  font-size: var(--e-global-typography-s-font-size, 12px);
  line-height: 1.3;
  cursor: pointer;
}

/* Una sola definicion de casilla para los terminos y para "Ordenar por": son
   marcados distintos (botones del widget y una lista de iconos), pero el
   diseno usa la misma casilla en los dos. */
.scala-filtro .e-filter-item::before,
.scala-filtro__orden .elementor-icon-list-text::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 1px solid var(--e-global-color-borgonas_light_hover, #E9DEE6);
  border-radius: 3px;
  background: var(--e-global-color-lino_claro_light, #FEFEFD);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
  transition: background-color .15s ease, border-color .15s ease;
}

/* Marcada: cuadro relleno con el tilde como SVG centrado. El tilde se dibuja
   con un SVG y no con dos bordes girados de un pseudo: dentro de un cuadro de
   14px quedaba descentrado y grueso. */
.scala-filtro .e-filter-item[aria-pressed="true"]::before,
.scala-filtro__orden .esta-activo .elementor-icon-list-text::before {
  border-color: var(--e-global-color-primary, #692556);
  background-color: var(--e-global-color-primary, #692556);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4 4.7 9 10 3.3' fill='none' stroke='%23FEFEFD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.scala-filtro .e-filter-item[aria-pressed="true"] {
  color: var(--e-global-color-verde_acero_darker, #393830);
}

/* ---------- grupos: separador y plegado ---------- */

.scala-filtro__grupo + .scala-filtro__grupo,
.scala-filtro__grupo {
  /* Separadores del diseno: #E9DEE6 (borgonas_light_hover). El aire entre la
     linea y el titulo NO va aqui: es el padding del contenedor, en el
     documento, porque Elementor lo escribe con mas especificidad. */
  border-top: 1px solid var(--e-global-color-borgonas_light_hover, #E9DEE6);
}

.scala-filtro__cabecera {
  margin-bottom: 6px;
}

.scala-filtro__cabecera {
  cursor: pointer;
}

.scala-filtro__chevron svg,
.scala-filtro__chevron i {
  transition: transform .25s ease;
}

.scala-filtro__grupo.esta-plegado .scala-filtro__chevron svg,
.scala-filtro__grupo.esta-plegado .scala-filtro__chevron i {
  transform: rotate(-90deg);
}

.scala-filtro__grupo.esta-plegado > :not(.scala-filtro__cabecera) {
  display: none;
}

/* ---------- chips de filtros activos ---------- */

.scala-filtro__activos:empty {
  display: none;
}

.scala-filtro__chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 0;
  /* Pastilla con el fondo del diseno: #F0E9EE (borgonas_light). */
  border-radius: 100px;
  background: var(--e-global-color-borgonas_light, #F0E9EE);
  font-family: var(--e-global-typography-s-font-family, Inter), sans-serif;
  font-size: var(--e-global-typography-s-font-size, 12px);
  line-height: 1.2;
  color: var(--e-global-color-verde_acero_darker, #393830);
}

.scala-filtro__chip button {
  border: 0;
  background: none;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  color: var(--e-global-color-lino_claro_dark_active, #706E6C);
  cursor: pointer;
}

.scala-filtro__chip button:hover {
  color: var(--e-global-color-primary, #692556);
}

/* ---------- "Ordenar por": enlaces con la misma casilla ---------- */

.scala-filtro__orden .elementor-icon-list-item {
  gap: 10px;
}

.scala-filtro__orden .elementor-icon-list-text {
  display: flex;
  align-items: center;
  gap: 10px;
}