/* ---------- contenedor ---------- */
.slider-field{
    position:relative;
    margin:0 10px 30px;
  }
  
  /* ---------- pista ---------- */
  .sliderInput{
    -webkit-appearance:none;
    width:100%;
    height:8px;
    border-radius:4px;
    background:var(--color-pretty-gray);
    outline:none;
    cursor:pointer;
  }

  .slider-field .form-label {
    font-family: 'Poppins', sans-serif;
    color: var(--color-text);
  }
  
  /* ---------- thumb nativo: mismo tamaño, pero invisible ---------- */
  .sliderInput::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:22px;
    height:22px;
    border-radius:50%;
    background:transparent;  /* se “borra” */
    border:none;
    cursor:pointer;
  }
  .sliderInput::-moz-range-thumb{
    width:22px;
    height:22px;
    border-radius:50%;
    background:transparent;
    border:none;
    cursor:pointer;
  }
  
  /* ---------- burbuja‑thumb visible ---------- */
  .slider-value{
    font-family: "Poppins", sans-serif;
    position:absolute;
    top:80%;                       /* centro vertical de la pista */
    left:0;                        /* JS la recoloca en X          */
    transform:translate(-50%,-50%);
    width:22px;
    height:22px;
    border-radius:50%;
    background: var(--color-primary);
    color:var(--color-bg-contrast);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.75rem;
    font-family:"Poppins",sans-serif;
    pointer-events:none;
    user-select:none;
    box-shadow:0 2px 4px var(--color-shadow);
    z-index:2;                     /* por encima de la pista */
  }