/* Sydak Living — skin nouislider para sliders de BEF (DOCS/02 §6.15).
   Se carga vía libraries-extend sobre better_exposed_filters/nouislider.
   Clases verificadas en web/libraries/nouislider/nouislider.css (v15).
   Vertical y RTL quedan con la geometría estándar de la librería (solo
   heredan color); el slider de BEF es horizontal (div.bef-slider). */

/* Contenedor que crea el JS de BEF; margen lateral = vuelo del asa. */
.bef-slider {
  margin-block: var(--space-5) var(--space-4);
  margin-inline: 10px;
}

/* Con tooltips visibles (se posicionan encima) hace falta cabecera. */
.bef-slider:has(.noUi-tooltip) {
  margin-block-start: var(--space-8);
}

.c-filters .bef-slider {
  min-inline-size: 14rem;
}

/* Vuelo del riel dentro de la barra de filtros: 3rem, no los 10px de arriba.
   MEDIDO, no elegido: el globo va centrado sobre el asa, el asa de tope cae
   justo en el extremo del riel, y el más ancho de esta vista —«5.000.000 €»,
   87 px con esta tipografía— se salía por la derecha de su columna mientras el
   de la columna de al lado se salía por la izquierda, así que entre los dos se
   comían los 24 px del hueco y se tocaban. 48 px = la mitad del globo más ancho
   (43,5) con 4,5 de margen. Medido después: −4,5 px, o sea dentro, de 320 a
   1920 px de ventana.
   ⚠️ Si cambia el formato de los globos, esta medida se queda corta: con el
   formato anterior de BEF («5000000  €», 81 px) bastaban 44 px, y al meterle los
   puntos de millar —js/bef-tooltips.js— el globo creció 6 px y la holgura se
   quedó en medio píxel. Se vuelve a medir, no se estima.
   Sólo aquí: fuera de la barra el riel se queda con el vuelo estándar, que es el
   del asa. */
.c-filters .bef-slider {
  margin-inline: 3rem;
}

/* ——— Riel ——— */

.noUi-target {
  border: 0;
  border-radius: 0;
  background: var(--div-line);
  box-shadow: none;
}

.noUi-horizontal {
  block-size: 2px;
}

.noUi-connects {
  border-radius: 0;
}

.noUi-connect {
  background: var(--div-accent);
}

/* ——— Asa: círculo 20px, borde 1.25px, sin decoración default ——— */

.noUi-horizontal .noUi-handle {
  inline-size: 20px;
  block-size: 20px;
  inset-inline-end: -10px;
  inset-block-start: -9px; /* centra 20px sobre el riel de 2px */
}

.noUi-handle {
  border: 1.25px solid var(--div-accent-strong);
  border-radius: 50%;
  background: var(--div-bg);
  box-shadow: none;
  cursor: grab;
}

.noUi-active {
  box-shadow: none;
  cursor: grabbing;
}

/* Sin las rayitas default; el ::after pasa a ser área táctil 44px. */
.noUi-handle::before {
  content: none;
}

.noUi-handle::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
}

/* nouislider engancha los eventos en .noUi-touch-area (hijo del asa):
   también se amplía a 44px para que el área táctil sea real. */
.noUi-handle .noUi-touch-area {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 44px;
  block-size: 44px;
  transform: translate(-50%, -50%);
}

.noUi-handle:focus-visible {
  outline: 2px solid var(--div-focus);
  outline-offset: 3px;
}

/* ——— Tooltip: serif pequeña sobre surface ——— */

.noUi-tooltip {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--div-line);
  border-radius: var(--radius-sm);
  background: var(--div-surface);
  font-family: var(--ff-text);
  font-size: var(--fs-small);
  font-variant-numeric: lining-nums;
  line-height: 1.3;
  color: var(--div-ink);
}

/* ——— Deshabilitado ——— */

[disabled] .noUi-connect {
  background: var(--div-line);
}

[disabled].noUi-target .noUi-handle,
[disabled] .noUi-handle {
  border-color: var(--div-line-strong);
  cursor: not-allowed;
}