/* Contador tipo cuentakilómetros (ver odometer.js) */
.odo {
    display: inline-flex;
    align-items: center;
    font-variant-numeric: tabular-nums;
}
.odo-digits { display: inline-flex; }
.odo-digit {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 1.5em;
    /* Degradado suave arriba y abajo: la cifra en reposo se ve entera y las
       que pasan por la rueda se difuminan */
    -webkit-mask-image: linear-gradient(to bottom,
        rgba(0,0,0,0) 0%, rgba(0,0,0,0.06) 5.5%, rgba(0,0,0,0.5) 11%,
        rgba(0,0,0,0.94) 16.5%, #000 22%, #000 78%,
        rgba(0,0,0,0.94) 83.5%, rgba(0,0,0,0.5) 89%,
        rgba(0,0,0,0.06) 94.5%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom,
        rgba(0,0,0,0) 0%, rgba(0,0,0,0.06) 5.5%, rgba(0,0,0,0.5) 11%,
        rgba(0,0,0,0.94) 16.5%, #000 22%, #000 78%,
        rgba(0,0,0,0.94) 83.5%, rgba(0,0,0,0.5) 89%,
        rgba(0,0,0,0.06) 94.5%, rgba(0,0,0,0) 100%);
}
.odo-wheel {
    display: block;
    will-change: transform;
}
.odo-face {
    display: block;
    height: 1.5em;
    line-height: 1.5em;
    text-align: center;
}
.odo-tail { white-space: pre; }

/* Barra de rayitas del slider de precio (|||||||): las del rango elegido en
   degradado naranja con brillo, las de fuera apagadas; las cercanas a cada
   tirador se estiran (efecto dock) y cada 10 hay una marca más larga. */
.ls-range-track-wrap.has-ticks { height: 34px; }
.ls-range-track-wrap.has-ticks .ls-range-track { display: none; }
.ls-range-track-wrap.has-ticks .ls-range-input { height: 34px; }
.ls-range-ticks {
    position: absolute; top: 0; bottom: 0; left: 8px; right: 8px;
    display: flex; justify-content: space-between; align-items: center;
    pointer-events: none;
}
.ls-range-tick {
    display: block; width: 2px; height: 12px; border-radius: 2px;
    background: rgba(255,255,255,0.14);
    transform: scaleY(var(--s, 1));
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.ls-range-tick.major { height: 18px; background: rgba(255,255,255,0.26); }
.ls-range-tick.on {
    background: linear-gradient(to top, #ff6b35, #ffab73);
    box-shadow: 0 0 7px rgba(255,107,53,0.55);
}
.ls-range-track-wrap.has-ticks .ls-range-input::-webkit-slider-thumb {
    width: 16px; height: 16px; border: 3px solid var(--primary-color, #ff6b35);
    box-shadow: 0 0 0 5px rgba(255,107,53,0.16), 0 2px 8px rgba(0,0,0,0.5);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ls-range-track-wrap.has-ticks .ls-range-input::-webkit-slider-thumb:hover {
    transform: scale(1.12);
    box-shadow: 0 0 0 7px rgba(255,107,53,0.22), 0 2px 10px rgba(0,0,0,0.55);
}
.ls-range-track-wrap.has-ticks .ls-range-input::-moz-range-thumb {
    width: 10px; height: 10px; border: 3px solid var(--primary-color, #ff6b35);
    box-shadow: 0 0 0 5px rgba(255,107,53,0.16), 0 2px 8px rgba(0,0,0,0.5);
}
html.light-theme .ls-range-tick,
body.light-theme .ls-range-tick { background: rgba(0,0,0,0.14); }
html.light-theme .ls-range-tick.major,
body.light-theme .ls-range-tick.major { background: rgba(0,0,0,0.26); }
html.light-theme .ls-range-tick.on,
body.light-theme .ls-range-tick.on { background: linear-gradient(to top, #ff6b35, #ffab73); }