/*body {
	background-color: #f5f7f9;
}
.step { display: none; }
.step.active { display: block; }

.conditional { display:none; }
*/

/*
#009FBD
*/
body { background:#f4f6f8; }
.card {
	border-radius: 12px;
}
.form-section-title {
	font-weight: 600;
	margin-bottom: 1rem;
}


/* ===== Range 0-10 con gradiente rojo->verde ===== */
.range-wrap { display:flex; align-items:center; gap:12px; }
.range-value { min-width: 40px; text-align:center; font-weight:700; }
.range-help { font-size: .85rem; color: #6c757d; }

input[type="range"].score-range{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 14px;
  border-radius: 999px;
  outline: none;
  background: linear-gradient(90deg, #dc3545 0%, #ffc107 50%, #198754 100%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.15);
  position: relative;
}

/* “relleno” hasta el valor (se ajusta por JS con background-size) */
input[type="range"].score-range{
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-image:
	linear-gradient(90deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.55) 100%),
	linear-gradient(90deg, #dc3545 0%, #ffc107 50%, #198754 100%);
  /* capa 1 (blanca) crece; capa 2 (gradiente) queda debajo */
  background-blend-mode: screen;
}

/* Thumb */
input[type="range"].score-range::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid rgba(0,0,0,.2);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  cursor: pointer;
}
input[type="range"].score-range::-moz-range-thumb{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid rgba(0,0,0,.2);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  cursor: pointer;
}

/* Firefox track */
input[type="range"].score-range::-moz-range-track{
  height: 14px;
  border-radius: 999px;
  background: transparent;
}

/* Badge de valor */
.score-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 44px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
}






    .step { display:none; }
    .step.active { display:block; }
    .conditional { display:none; }
    .step-title { font-weight:700; }
    .req-hint { color:#6c757d; font-size:.9rem; }
    .error-box { display:none; }
    .scale-input { max-width: 140px; }
	
	
	/* Campo con error */
	.field-error {
	  border-color: #dc3545 !important;
	  box-shadow: 0 0 0 .2rem rgba(220,53,69,.25);
	}

	/* Animación suave (opcional, queda muy bien) */
	@keyframes shake {
	  0% { transform: translateX(0); }
	  25% { transform: translateX(-4px); }
	  50% { transform: translateX(4px); }
	  75% { transform: translateX(-4px); }
	  100% { transform: translateX(0); }
	  }
	.shake {
	  animation: shake .3s;
	}
























/* Mejor legibilidad y aire en móvil */
@media (max-width: 576px){
  .card-body { padding: 1rem !important; }
  h2 { font-size: 1.35rem; }
  .step-title { font-size: 1.05rem; }
  label.form-label { font-size: 1rem; }
  .req-hint { font-size: .9rem; }

  /* Botones a ancho completo en móvil */
  #btnPrev, #btnNext, #btnSubmit { width: 100%; }
  .d-flex.justify-content-between { flex-direction: column; gap: .5rem; }

  /* Range + badge apilados para que no se estreche */
  .range-wrap { flex-direction: column; align-items: stretch; }
  .score-badge { align-self: flex-end; }
}







.btn-primary, .btn:hover{
--bs-btn-bg: #009FBD;	
--bs-btn-border-color: #009FBD;
--bs-btn-disabled-bg: #009FBD;
--bs-btn-disabled-border-color: #009FBD;
background-color: #009FBD;
border-color: #009FBD;
}

.form-check-input:checked{
	background-color: #009FBD;
	border-color: #009FBD;
}

.progress, .progress-stacked{
	--bs-progress-bar-bg: #009FBD;
}





.score-field.field-error label { color: #dc3545; }
.score-field.field-error .range-wrap { outline: 2px solid #dc3545; border-radius: 10px; padding: 6px; }



.form-check .form-check-input{ border-color:#000000 !important}