/* Formulario de cotización: stepper, encabezado del paso, campos, uploads y
   pantalla de éxito. El contenedor es el wizard (assets/styles/components/wizard.css). */

/* ── Stepper ──────────────────────────────────────────────────────────────── */

.stepper {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1.75rem;
}

.stepper__link {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.stepper__icon {
  align-items: center;
  background-color: hsl(0 0% 100% / 0.05);
  border: 1px solid hsl(0 0% 100% / 0.1);
  border-radius: 0.8rem;
  color: hsl(var(--primary-foreground) / 0.35);
  display: flex;
  height: 2.5rem;
  justify-content: center;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
  width: 2.5rem;
}

.stepper__icon svg {
  height: 1.15rem;
  width: 1.15rem;
}

.stepper__label {
  color: hsl(var(--primary-foreground) / 0.28);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.stepper__link.is-active .stepper__icon {
  background-color: hsl(var(--accent));
  border-color: transparent;
  box-shadow: 0 10px 22px -10px hsl(var(--accent) / 0.95);
  color: hsl(var(--accent-foreground));
  transform: scale(1.06);
}

.stepper__link.is-active .stepper__label {
  color: hsl(var(--accent-light));
}

.stepper__link.is-done .stepper__icon {
  background-color: hsl(var(--accent) / 0.16);
  border-color: hsl(var(--accent) / 0.4);
  color: hsl(var(--accent-light));
}

.stepper__link.is-done .stepper__label {
  color: hsl(var(--primary-foreground) / 0.55);
}

.stepper__line {
  background-color: hsl(0 0% 100% / 0.12);
  height: 1px;
  width: 2.25rem;
}

/* ── Encabezado del paso ──────────────────────────────────────────────────── */

.quote-form__heading {
  margin-bottom: 1.5rem;
}

.quote-form__title {
  color: hsl(var(--primary-foreground));
  font-family: Outfit, Inter, sans-serif;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.quote-form__subtitle {
  color: hsl(var(--primary-foreground) / 0.6);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

/* ── Pasos ────────────────────────────────────────────────────────────────── */

.form-step[hidden] {
  display: none;
}

.form-step__fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.form-row {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}

.form-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

@media (min-width: 520px) {
  .form-row--split {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Campos ───────────────────────────────────────────────────────────────── */

.field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.field__label {
  color: hsl(var(--primary-foreground) / 0.62);
  font-size: 0.75rem;
  font-weight: 500;
}

.field__label:has(+ .field__control[required])::after,
.field__label:has(+ .field__control-file[required])::after {
  color: hsl(var(--accent-light));
  content: " *";
  font-weight: 700;
}

.field__control {
  background-color: #fff;
  border: 1px solid hsl(0 0% 100% / 0.2);
  border-radius: 0.8rem;
  color: hsl(var(--foreground));
  font-size: 0.9rem;
  height: 3rem;
  padding-inline: 0.85rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  width: 100%;
}

.field__control::placeholder {
  color: hsl(var(--muted-foreground));
}

.field__control:focus-visible {
  border-color: hsl(var(--accent) / 0.55);
  box-shadow: 0 0 0 3px hsl(var(--accent) / 0.25);
  outline: none;
}

textarea.field__control {
  height: auto;
  line-height: 1.5;
  padding-block: 0.7rem;
  resize: vertical;
}

select.field__control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 0.875rem center;
  background-repeat: no-repeat;
  background-size: 1.1rem;
  cursor: pointer;
  padding-right: 2.75rem;
}

.field__hint {
  color: hsl(var(--primary-foreground) / 0.5);
  font-size: 0.75rem;
}

.field--invalid .field__control {
  border-color: hsl(var(--destructive));
  box-shadow: 0 0 0 3px hsl(var(--destructive) / 0.25);
}

.field--invalid .upload {
  border-color: hsl(var(--destructive));
  border-style: solid;
}

.field__error {
  color: hsl(var(--destructive));
  font-size: 0.75rem;
}

/* Casilla de verificación (ej: único dueño) */
.field--check {
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
}

.field--check input {
  accent-color: hsl(var(--accent));
  height: 1.15rem;
  width: 1.15rem;
}

.field--check .field__label {
  color: hsl(var(--primary-foreground) / 0.8);
  cursor: pointer;
  font-size: 0.85rem;
}

.field-divider {
  background-color: hsl(0 0% 100% / 0.1);
  border: 0;
  height: 1px;
  margin-block: 0.75rem 0.25rem;
}

/* ── Uploads de fotos ─────────────────────────────────────────────────────── */

.field__control-file {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.upload {
  align-items: center;
  background-color: hsl(0 0% 100% / 0.96);
  border: 1px dashed hsl(0 0% 60% / 0.7);
  border-radius: 1rem;
  cursor: pointer;
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.upload:hover {
  border-color: hsl(var(--accent) / 0.6);
  box-shadow: 0 8px 20px -14px hsl(0 0% 0% / 0.7);
}

.field__control-file:focus-visible + .upload {
  border-color: hsl(var(--accent));
  box-shadow: 0 0 0 3px hsl(var(--accent) / 0.3);
}

.upload__icon {
  align-items: center;
  background-color: hsl(var(--accent) / 0.12);
  border-radius: 0.75rem;
  color: hsl(var(--accent));
  display: flex;
  flex-shrink: 0;
  height: 2.5rem;
  justify-content: center;
  overflow: hidden;
  width: 2.5rem;
}

.upload__icon svg {
  height: 1.15rem;
  width: 1.15rem;
}

.upload__preview {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.upload__text {
  color: hsl(var(--foreground));
  flex: 1;
  font-size: 0.75rem;
  font-weight: 600;
  min-width: 0;
}

.upload__hint,
.upload__file {
  color: hsl(var(--muted-foreground));
  display: block;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.upload__file {
  margin-top: 0.15rem;
}

.field--filled .upload {
  border-color: hsl(var(--accent) / 0.55);
  border-style: solid;
}

.field--filled .upload__file {
  color: hsl(var(--accent));
  font-weight: 600;
}

/* ── Errores de envío ─────────────────────────────────────────────────────── */

.form-error {
  color: hsl(var(--destructive));
  font-size: 0.85rem;
  margin-top: 0.75rem;
  text-align: center;
}

.form-error[hidden] {
  display: none;
}

/* ── Pantalla de éxito ────────────────────────────────────────────────────── */

.quote-success {
  align-items: center;
  animation: fade-slide-in 0.35s ease both;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-block: 2.5rem;
  text-align: center;
}

.quote-success__icon {
  align-items: center;
  background-color: hsl(var(--accent) / 0.15);
  border-radius: 50%;
  color: hsl(var(--accent-light));
  display: flex;
  height: 5rem;
  justify-content: center;
  width: 5rem;
}

.quote-success__title {
  color: hsl(var(--primary-foreground));
  font-family: Outfit, Inter, sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
}

.quote-success__text {
  color: hsl(var(--primary-foreground) / 0.62);
  font-size: 0.95rem;
  margin-inline: auto;
  max-width: 28rem;
}

.quote-success__badge {
  align-items: center;
  color: hsl(var(--accent-light));
  display: flex;
  font-size: 0.85rem;
  font-weight: 600;
  gap: 0.5rem;
}