/* ============================================================
   formulario.css — Lo propio del formulario de registro.
   Lo genérico de los campos vive en campos.css, que se carga
   en todas las páginas.
   Depende de: base.css, campos.css
   ============================================================ */

/* ---------- Contenedor ---------- */
.tarjeta-formulario {
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-xl);
  box-shadow: var(--sombra-2);
  padding: clamp(var(--espacio-5), 4vw, var(--espacio-8));
}

.tarjeta-formulario__titulo {
  text-align: center;
  margin-bottom: var(--espacio-3);
}

.tarjeta-formulario__intro {
  margin-bottom: var(--espacio-6);
  max-width: 46rem;
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}

/* ============================================================
   Barra de progreso del formulario
   Queda fija bajo la navegación mientras se recorre la tarjeta,
   que es larga. La rellena registro.js.
   ============================================================ */
.progreso {
  position: sticky;
  /* +1px por el borde inferior de la barra de navegación: con un hueco,
     por pequeño que sea, asoma el contenido que pasa por detrás. */
  top: calc(var(--alto-nav) + 1px);
  z-index: 10;
  margin-bottom: var(--espacio-6);
  padding: var(--espacio-4) var(--espacio-5);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  background-color: var(--color-superficie);
  box-shadow: var(--sombra-2);
}

.progreso__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-3);
  margin-bottom: var(--espacio-3);
}

.progreso__titulo {
  margin: 0;
  font-size: var(--texto-sm);
  font-weight: 600;
  letter-spacing: var(--track-suelto);
  text-transform: uppercase;
  color: var(--color-texto-suave);
}

.progreso__porcentaje {
  margin: 0;
  font-size: var(--texto-2xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--track-apretado);
  color: var(--color-primario);
  font-variant-numeric: tabular-nums;
  transition: color var(--transicion);
}

.progreso__pista {
  height: 0.625rem;
  border-radius: var(--radio-full);
  background-color: var(--color-borde);
  overflow: hidden;
}

.progreso__relleno {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background-image: linear-gradient(
    90deg,
    var(--color-primario) 0%,
    var(--color-primario-suave) 100%
  );
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1),
              background-image var(--transicion);
}

/* Brillo que recorre la parte ya rellenada */
.progreso__relleno::after {
  content: "";
  display: block;
  height: 100%;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 100%
  );
  animation: progreso-brillo 2.4s ease-in-out infinite;
}

@keyframes progreso-brillo {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

.progreso__cuenta {
  margin: var(--espacio-3) 0 0;
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
}

/* --- Completo: cambia a verde y se detiene el brillo --- */
.progreso--completo .progreso__porcentaje { color: var(--color-exito); }

.progreso--completo .progreso__relleno {
  background-image: linear-gradient(
    90deg,
    var(--color-exito) 0%,
    color-mix(in srgb, var(--color-exito) 65%, #ffffff) 100%
  );
}

.progreso--completo .progreso__relleno::after { animation: none; }

.progreso--completo .progreso__cuenta {
  color: var(--color-exito);
  font-weight: 600;
}

/* El brillo es decorativo: se retira si se pide menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .progreso__relleno::after { animation: none; }
  .progreso__relleno { transition: none; }
}

/* En el teléfono la barra ocupa pantalla de forma permanente:
   se aprieta todo lo que se puede sin perder legibilidad. */
@media (max-width: 30rem) {
  .progreso { padding: var(--espacio-3) var(--espacio-4); }
  .progreso__cabecera { margin-bottom: var(--espacio-2); }
  .progreso__titulo { font-size: var(--texto-xs); }
  .progreso__porcentaje { font-size: var(--texto-lg); }
  .progreso__pista { height: 0.5rem; }
  .progreso__cuenta { margin-top: var(--espacio-2); }
}

/* ============================================================
   Resumen de errores del servidor
   Aparece solo cuando la validación del servidor rechaza el envío.
   ============================================================ */
.resumen-errores {
  margin-bottom: var(--espacio-6);
  padding: var(--espacio-5);
  border: 1px solid var(--color-error);
  border-left-width: 4px;
  border-radius: var(--radio-md);
  background-color: color-mix(in srgb, var(--color-error) 8%, transparent);
}

.resumen-errores h3 {
  margin: 0 0 var(--espacio-2);
  font-size: var(--texto-lg);
  color: var(--color-error);
}

.resumen-errores p {
  margin: 0 0 var(--espacio-3);
  font-size: var(--texto-sm);
  color: var(--color-texto);
}

.resumen-errores ul {
  margin: 0;
  padding-left: var(--espacio-5);
  display: grid;
  gap: var(--espacio-1);
  font-size: var(--texto-sm);
}

.resumen-errores a {
  color: var(--color-error);
  font-weight: 600;
}

.resumen-errores:focus { outline: none; }