input.form-control {
    box-shadow: none !important;
    border: 2px solid #ddd !important;  /* ✅ más oscuro */
    outline: none;
    border-radius: 12px; /* ✅ Mantener bordes redondeados en focus */

}

input.form-control:focus {
    box-shadow: none !important;
    border: 3px solid #007bff !important; /* ✅ más grueso y azul */
    border-radius: 12px; /* ✅ Mantener bordes redondeados en focus */
}


input.form-control,
select.form-select {
    max-width: 350px;      /* 👈 Hace el campo más estrecho */
    margin: 0 auto;        /* 👈 Centrado horizontal */
    display: block;        /* 👈 Para que margin auto funcione */
    border-radius: 12px; /* ✅ Mantener bordes redondeados en focus */

}

.input-icon-wrapper {
    position: relative;
    max-width: 350px;
    margin: 0 auto;
}

.input-icon-wrapper .input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    z-index: 2;
    opacity: 0.6;
}

.input-icon-wrapper input.form-control {
    padding-left: 40px; /* espacio para el icono */
}

.form-label {
    font-weight: 600;
    margin-bottom: 6px;
    padding-left: 40px;

}



/* 🔵 Slider personalizado */
.custom-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    margin-top: 12px; /* 💡 Alinea el slider con otros elementos */
    background: linear-gradient(to right, #007bff 50%, #ddd 50%);
    outline: none;
    transition: background 0.3s ease-in-out;
  }
  
  /* 🟢 Actualiza el gradiente dinámicamente vía JS */
  .custom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: white;
    border: 2px solid #007bff;
    cursor: pointer;
    margin-top: -2px; /* alinear con el track */
  }
  
  .custom-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    border: 2px solid #007bff;
    cursor: pointer;
  }
  
  /* 🧼 Texto más ligero */
  .text-normal {
    font-weight: 400 !important;
    font-size: 16px;
  }
  

  .custom-slider::-webkit-slider-thumb {
    transition: transform 0.2s ease;
  }
  .custom-slider:active::-webkit-slider-thumb {
    transform: scale(1.2); /* se agranda un poco al arrastrar */
  }