/* =====================================================
   RMD CF7 PROGRESSIVE FORMS
   Las clases activadoras no tienen estilos visuales.
   El diseño solo se activa cuando JS agrega .rmd-progressive-active.
===================================================== */

.rmd-cf7-progressive-mobile,
.rmd-cf7-progressive-desktop,
.rmd-cf7-progressive-all {
  /* Activadores técnicos: no tocar estructura ni diseño original */
}

.rmd-progressive-ui,
.rmd-progressive-nav {
  display: none;
}

.rmd-progressive-active {
  --rmd-pf-blue: #003a8c;
  --rmd-pf-blue-dark: #002f73;
  --rmd-pf-orange: #ff8a00;
  --rmd-pf-cyan: #0092ab;
  --rmd-pf-text: #13284b;
  --rmd-pf-muted: #667085;
  --rmd-pf-border: #e5eaf2;
  --rmd-pf-soft: #f7f9fc;
  --rmd-pf-error: #d72638;

  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.rmd-progressive-active *,
.rmd-progressive-active *::before,
.rmd-progressive-active *::after {
  box-sizing: border-box;
}

/* Solo barra de progreso: sin título, sin paginador, sin card pesada */
.rmd-progressive-active .rmd-progressive-ui {
  display: block;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.rmd-progressive-active .rmd-progressive-topline {
  display: none !important;
}

.rmd-progressive-active .rmd-progressive-track {
  position: relative;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf2f8;
}

.rmd-progressive-active .rmd-progressive-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--rmd-pf-blue), var(--rmd-pf-cyan));
  transition: width 0.25s ease;
}

/* Modo revelado progresivo: los bloques diligenciados quedan visibles */
.rmd-progressive-active .rmd-progressive-step {
  display: none !important;
}

.rmd-progressive-active .rmd-progressive-step.is-unlocked {
  display: block !important;
}

.rmd-progressive-active .rmd-progressive-step.is-active {
  animation: rmdPfStepIn 0.22s ease both;
}

.rmd-progressive-active .rmd-progressive-step.is-complete {
  opacity: 1;
}

.rmd-progressive-active .rmd-progressive-step + .rmd-progressive-step.is-unlocked {
  margin-top: 12px;
}

@keyframes rmdPfStepIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Ya no hay botones atrás / continuar */
.rmd-progressive-active .rmd-progressive-nav,
.rmd-progressive-active .rmd-progressive-help,
.rmd-progressive-active .rmd-progressive-btn,
.rmd-progressive-active .rmd-progressive-prev,
.rmd-progressive-active .rmd-progressive-next {
  display: none !important;
}

.rmd-progressive-active .rmd-pf-field-error,
.rmd-progressive-active .rmd-pf-field-error input,
.rmd-progressive-active .rmd-pf-field-error select,
.rmd-progressive-active .rmd-pf-field-error textarea,
.rmd-progressive-active input.rmd-pf-field-error,
.rmd-progressive-active select.rmd-pf-field-error,
.rmd-progressive-active textarea.rmd-pf-field-error {
  border-color: var(--rmd-pf-error) !important;
}

.rmd-progressive-active input.rmd-pf-field-error,
.rmd-progressive-active select.rmd-pf-field-error,
.rmd-progressive-active textarea.rmd-pf-field-error {
  box-shadow: 0 0 0 4px rgba(215, 38, 56, 0.08) !important;
}

@media (max-width: 767px) {
  .rmd-progressive-mobile-mode .rmd-progressive-track,
  .rmd-progressive-all-mode .rmd-progressive-track {
    height: 7px;
  }
}


/* =====================================================
   Scroll inteligente en móvil
   Evita saltos agresivos cuando se revelan filas automáticas.
===================================================== */
@media (max-width: 767px) {
  .rmd-cf7-progressive-mobile.rmd-progressive-active,
  .rmd-cf7-progressive-all.rmd-progressive-active {
    overflow-anchor: none;
  }

  .rmd-cf7-progressive-mobile.rmd-progressive-active .rmd-progressive-step,
  .rmd-cf7-progressive-all.rmd-progressive-active .rmd-progressive-step {
    scroll-margin-top: 84px;
  }
}

/* =====================================================
   Modo automático agrupado por campos
   data-rmd-group-size="3"
   Oculta filas vacías cuando todos sus campos internos siguen bloqueados.
===================================================== */
.rmd-progressive-active .rmd-progressive-empty-row {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}