/* ================================================================
   Morla Energy — form-steps.css
   Capa ADITIVA y con nombres de clase propios (tf-*) para envolver el
   formulario existente de /alquiler-tejado-industrial/ (id="tejado-form")
   en un wizard de 3 pasos, igual que /alquiler-tejado-industrial-2/.

   Deliberadamente NO reutiliza selectores de home.css ni de landing.css
   (.section, .container, .form-label, .form-microcopy, .reveal...) para
   evitar colisiones con esas reglas ya existentes en la página (ver nota
   de QA del banner de cookies). Los campos en sí (.field, .radio-card,
   .checkbox-row, .field__error, .form-status...) se REUTILIZAN tal cual
   de home.css: no se tocan, no se redefinen aquí.

   Cargar SOLO en esta página, después de home.css.
   ================================================================ */

/* ── Indicador de scoring en tiempo real ─────────────────────────── */
.tf-scoring {
  max-width: 640px;
  margin: 0 auto var(--space-6);
  padding: var(--space-3) var(--space-5);
  border-radius: 10px;
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
  text-align: center;
  transition: background-color .2s ease, color .2s ease;
}
.tf-scoring--hidden { display: none; }
.tf-scoring--green {
  background: rgba(39, 179, 115, 0.14);
  color: var(--color-green-light);
}
.tf-scoring--amber {
  background: rgba(224, 168, 62, 0.14);
  color: #E0A83E;
}
.tf-scoring--red {
  background: rgba(192, 58, 47, 0.14);
  color: #E17364;
}

/* ── Indicador de pasos (dots + barra de progreso) ───────────────── */
.tf-steps { max-width: 640px; margin: 0 auto var(--space-8); }
.tf-steps__track {
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: var(--color-border-dark);
  margin-bottom: var(--space-4);
  overflow: hidden;
}
.tf-steps__fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0%;
  background: var(--color-green);
  transition: width .3s ease;
}
.tf-steps__dots { display: flex; justify-content: space-between; gap: var(--space-2); }
.tf-steps__dot {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  flex: 1;
  background: none; border: 0; padding: var(--space-1) 0;
  cursor: pointer;
  color: var(--color-text-soft-dark);
  font-family: inherit;
}
.tf-steps__num {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--color-border-dark);
  font-size: var(--text-sm); font-weight: var(--w-semibold);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.tf-steps__label { font-size: var(--text-xs); }
.tf-steps__dot.is-active,
.tf-steps__dot.is-done { color: var(--color-text-on-dark); }
.tf-steps__dot.is-active .tf-steps__num {
  background: var(--color-green); border-color: var(--color-green); color: #fff;
}
.tf-steps__dot.is-done .tf-steps__num {
  background: transparent; border-color: var(--color-green); color: var(--color-green-light);
}

/* ── Pasos: solo se ve el activo, transición suave ───────────────── */
.tf-step {
  display: none;
  opacity: 0;
  transform: translateX(12px);
}
.tf-step--active {
  display: block;
  animation: tf-step-in .28s ease forwards;
}
@keyframes tf-step-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .tf-step--active { animation: none; opacity: 1; transform: none; }
}

/* ── Navegación entre pasos (Siguiente / Anterior) ───────────────── */
.tf-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.tf-nav--submit { margin-top: 0; }
.tf-nav__prev { order: 0; }
.tf-nav__next,
.tf-nav--submit .btn--block { margin-left: auto; }