/* Estilo del slider en general */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, #0AB8F2 50%, #ADADAD 50%);
    outline: none;
    opacity: 1;
    transition: background 0.15s;
  }
  
  /* Estilo del thumb (círculo que se desliza) */
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #0AB8F2;
    cursor: pointer;
    margin-top: -3px;
    position: relative;
    z-index: 2;
  }
  
  input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #3399ff;
    cursor: pointer;
  }
  
  /* Estilo de la pista */
  input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: transparent; /* El gradiente se maneja en el input */
  }
  
  /* Actualizar el gradiente dinámicamente basado en el valor */
  input[type="range"]::-moz-range-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: transparent;
  }
  
  input[type="range"]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: calc(var(--value) * 1%);
    height: 8px;
    background: #3399ff;
    z-index: 1;
  }
  
  input[type="range"]::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: calc(100% - var(--value) * 1%);
    height: 8px;
    background: #ddd;
    z-index: 1;
  }







/* Contenedor para los sliders */
.slider-wrapper {
    display: flex;
    align-items: center;
    gap: 8px; /* Espacio entre los íconos y el slider */
    width: 100%;
  }
  
  /* Estilos para los íconos */
  .icon {
    display: flex;
    align-items: center; /* Alinea verticalmente el icono dentro de su contenedor */
    justify-content: center;
    width: 16px;
    height: 16px;
    /* margin-top: 7px; */
  }
  
  
  /* Asegura que los sliders ocupen el espacio disponible */
  .cr-slider {
    flex-grow: 1;
    width: 100%;
  }