/* Recomendador — estilos base del formulario (agnóstico)
   Se cargan solo si está activado "Cargar estilos base del formulario".
*/
.recom-form{
  max-width: 760px;
  margin: 1rem auto;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
}

.recom-form label{
  display:block;
  font-weight:600;
  margin: 0 0 6px;
}

.recom-form input[type="text"],
.recom-form input[type="email"],
.recom-form input[type="number"],
.recom-form select{
  width:100%;
  max-width:100%;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 10px;
  padding: 12px 12px;
  background:#fff;
  line-height: 1.4;
  min-height: 44px;
  box-sizing: border-box;
}

/* Evita texto "cortado" en selects */
.recom-form select{
  height: auto;
  min-height: 48px;
  line-height: normal;
  padding: 13px 40px 13px 12px;
}

.recom-form input:focus,
.recom-form select:focus{
  outline: none;
  border-color: rgba(0,0,0,.35);
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}

.recom-form .field{
  margin: 0 0 14px;
}

/* Decisión: no duplicar el valor */
.recom-form .recom-range-display{ display:none; }

.recom-form .help-text{
  display:block;
  margin-top: 6px;
  font-size: 13px;
  opacity: .75;
}

.recom-form .recom-privacy-label{
  font-weight: 500;
  line-height: 1.4;
}

.recom-form .recom-privacy-label input[type="checkbox"]{
  margin-right: 8px;
}

.recom-form button,
.recom-form input[type="submit"]{
  width:100%;
  border-radius: 12px;
  padding: 14px 16px;
  font-weight: 700;
}

/* ===================================================
   Slider + número sincronizados (tipo range)
   =================================================== */

/* Fila que contiene el number input + unidad, alineada a la derecha de la label */
.recom-form .field label + .recom-range-wrap,
.recom-form .field .recom-range-wrap {
  margin-top: 0;
}

/* La label del campo range ocupa toda la fila, con el valor a la derecha */
.recom-range-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 8px;
}

.recom-num-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Number input: sin spinners, tamaño compacto */
.recom-num-input {
  width: 88px !important;
  min-width: 0 !important;
  max-width: 88px !important;
  text-align: right !important;
  padding-right: 8px !important;
  padding-left: 8px !important;
  min-height: 36px !important;
  border-radius: 8px !important;
}
.recom-num-input::-webkit-inner-spin-button,
.recom-num-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.recom-num-input[type=number] { -moz-appearance: textfield; }

.recom-unit {
  font-size: 13px;
  color: rgba(0,0,0,.45);
  flex-shrink: 0;
}

/* Slider: track con fill via CSS custom property --pct */
.recom-slider {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    #0056A4 var(--pct, 0%),
    rgba(0,0,0,.12) var(--pct, 0%)
  );
  cursor: pointer;
  margin: 0;
  border: none;
  outline: none;
  padding: 0;
  min-height: 0;
}
.recom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #0056A4;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px #0056A4;
  cursor: pointer;
}
.recom-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #0056A4;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px #0056A4;
  cursor: pointer;
}
.recom-slider:focus {
  box-shadow: none;
  outline: none;
  border: none;
}

/* Min/max labels */
.recom-range-bounds {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(0,0,0,.4);
  margin-top: 4px;
}

/* Label y valor del range en la misma fila (Opción A) */
.recom-range-header {
  justify-content: space-between;
}
.recom-range-label {
  font-weight: 600;
  margin: 0 !important;
  display: block;
  flex: 1;
}