/* --- Estilos compartidos de formularios: inputs, selects personalizados,
   checkboxes y modales tipo .preventa__modal. Extraído de preventa.css para
   poder reusarlo en otros formularios (ej. modal de separación) sin cargar
   el resto de estilos específicos del formulario largo de preventa. --- */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.form-label {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.required-field {
  color: #d5001c; /* Rojo GAC */
}

/* Ocultar elementos de forma accesible */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.form__select {
  position: relative;
  width: 100%;
  cursor: pointer;
}

.form__select-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border: 1px solid #d1d1d1;
  background-color: #fff;
  font-size: 18px;
  transition: border-color 0.3s ease;
}

.form__select-header:focus {
  border-color: #000;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.form__select.active .form__select-header {
  border-color: #000;
}

.form__options-container {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  border: 1px solid #000;
  z-index: 10;
  max-height: 250px;
  overflow-y: auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  scroll-behavior: smooth;
}

.form__select-text {
  font-size: 18px;
  font-weight: 600;
}

.form__input {
  width: 100%;
  padding: 16px 20px;
  border: 1px solid #d1d1d1;
  font-size: 18px;
  font-weight: 400;
  transition: border-color 0.3s ease;
  outline: none;
}

.form__input:focus {
  border-color: #000;
}

.form__btn-submit {
  background-color: #d5001c;
  color: #fff;
  border: none;
  padding: 16px 40px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 20px;
  width: 100%;
  transition: background-color 0.3s ease;
}

.form__btn-submit:hover {
  background-color: #b30018;
}

@keyframes selectDropdownFade {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.form__section{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form__select.active .form__options-container {
  display: block;
  animation: selectDropdownFade 0.2s ease-out forwards;
}

.form__option {
  padding: 16px 20px;
  font-size: 18px;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.form__option:hover {
  background-color: #f0f0f0;
  color: #d5001c;
}

.form__option.highlighted {
  background-color: #f0f0f0;
  color: #000;
  outline: none;
}

.form__option.selected {
  border-left: 4px solid #d5001c;
  background-color: #f9f9f9;
}

/* Flecha del select */
.form__select-header::after {
  content: "";
  width: 18px;
  height: 9px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 9' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1.5 9 7.5 17 1.5'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.form__select.active .form__select-header::after {
  transform: rotate(180deg);
}

/* Estilo para el contenedor del campo cuando hay un error */
.form-group.error .form__select-header {
  border-color: #d5001c !important;
  background-color: #fff8f8;
}

.error-message {
  color: #d5001c;
  font-size: 13px;
  font-weight: 600;
  margin-top: 4px;
  display: none;
}

.form-group.error .error-message {
  display: block;
}

/* Color (radios), reusando el patrón visual de .preventa__color de preventa.css
   pero con swatch de imagen en vez de color hex, porque el catálogo de colores
   de las páginas de vehículo trae imágenes (urlImageBtn), no códigos de color. */
.preventa__color input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.preventa__colors {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.preventa__color__swatch {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px #d8d8d8;
  cursor: pointer;
  transition: 0.2s ease;
}

.preventa__color input:checked + .preventa__color__swatch {
  box-shadow: 0 0 0 2px #000;
}

.preventa__color input:focus-visible + .preventa__color__swatch {
  outline: 2px solid #000;
  outline-offset: 2px;
}

.form-group.error .preventa__color__swatch {
  box-shadow: 0 0 0 1px #d5001c;
}

.preventa__other-city-notice {
  background: #eaf1ff;
  color: #1a56db;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  margin-top: 12px;
}

.form__input-checkbox:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.form__checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form__checkbox-label-autorizacion {
  color: var(--primary-color);
}

.form__checkbox-label-link {
  color: #1434db;
  text-decoration: none;
}

/* * Checkbox styles */
.form__input-checkbox {
  position: absolute;
  opacity: 0;
  width: 20px;
  height: 20px;
  flex: none;
  align-self: start;
  display: flex;
  cursor: pointer;
}

.form__checkbox-label {
  padding-left: 30px;
  font-size: 16px;
  position: relative;
  font-weight: 500;
  color: var(--border-color);
  cursor: pointer;
}

.form__required {
  color: #d40021;
}

/* El "cuadro" que simula el checkbox */
.form__checkbox-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background-color: #d9d9d9;
  transition: all 0.5s ease;
}

/* Estilos para el chulo (check) */
.form__checkbox-label::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 10px;
  transform: translateY(-50%) scale(0);
  width: 15px;
  height: 15px;
  background: url("/public/images/cotizador/check-icon.svg") no-repeat
    center/contain;
  transition: transform 0.5s ease;
}

/* Estilos cuando el checkbox está marcado */
.form__input-checkbox:checked + .form__checkbox-label::before {
  background-color: #fad4d8;
  /* Fondo suave rojo */
}

.form__input-checkbox:checked + .form__checkbox-label::after {
  transform: translateY(-50%) scale(1);
  /* Mostrar el check */
}

/* MODALES */
.preventa__modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.preventa__modal.is-open {
  display: flex;
}

.preventa__modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.55);
}

.preventa__modal__box {
  position: relative;
  background: #fff;
  border-radius: 16px;
  max-width: 460px;
  width: 100%;
  padding: 28px 24px 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  max-height: 90vh;
  overflow-y: auto;
}

.preventa__modal__box--center {
  text-align: center;
}

.preventa__modal__eyebrow {
  display: block;
  font-size: 11px;
  color: #b0b0b0;
  margin-bottom: 10px;
}

.preventa__modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.preventa__modal__header h3 {
  font-size: 19px;
  margin: 0;
  color: #1a1a1a;
}

/* Callout grande del abono, justo debajo del título del modal de separación
   (a diferencia de preventa, este modal no tiene un paso de "resumen" antes
   de pagar, así que el monto se muestra desde el inicio, no solo antes del
   botón). Oculto en el flujo "envio" por actualizarFlujoSeparacion(). */
.separacion-monto-hero {
  text-align: center;
  padding: 14px 16px;
  margin: 4px 0 18px;
  background: #fff8f8;
  border: 1px solid #fad4d8;
  border-radius: 10px;
}

.separacion-monto-hero__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #8a8a8a;
  margin-bottom: 2px;
}

.separacion-monto-hero__value {
  display: block;
  font-size: 30px;
  font-weight: 700;
  color: #d5001c;
}

.preventa__modal__close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #8a8a8a;
  flex-shrink: 0;
}

.preventa__modal__summary {
  border: 1px solid #ececec;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 18px;
}

.preventa__modal__summary__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #1a1a1a;
  margin: 0 0 12px;
}

.preventa__modal__summary__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid #f0f0f0;
  font-size: 13px;
}

.preventa__modal__summary__row:first-of-type {
  border-top: none;
  padding-top: 0;
}

.preventa__modal__summary__row span {
  color: #8a8a8a;
}

.preventa__modal__summary__row strong {
  text-align: right;
  color: #1a1a1a;
  font-weight: 600;
}

.preventa__modal__checks {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 18px;
}

.preventa__modal__checks p {
  color: #4a4a4a;
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 500;
  color: var(--border-color);
}

.preventa__modal__check-icon {
  color: #1f9254;
  font-weight: 700;
  flex-shrink: 0;
}

.preventa__modal__footnote {
  text-align: center;
  font-size: 11px;
  color: #8a8a8a;
  margin: 10px 0 0;
}

.preventa__modal__success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #dff4e7;
  color: #1f9254;
  font-size: 26px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.preventa__modal__box--center h3 {
  font-size: 18px;
  margin: 0 0 12px;
  color: #1a1a1a;
}

.preventa__modal__success-text {
  font-size: 13px;
  line-height: 1.6;
  color: #6a6a6a;
  margin: 0 0 22px;
}

.preventa__modal__checks__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* ACORDEÓN DE CONDICIONES (Paso 6 de preventa.css, copiado por el mismo
   motivo que el resto de este archivo: esta página no carga preventa.css). */
.preventa__terms {
  border: 1px solid #e2e2e2;
  overflow: hidden;
  margin-bottom: 16px;
}

.preventa__terms__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--secondary-color, #fff);
  border: 1px solid rgba(0, 0, 0, 0.5);
  cursor: pointer;
  font-family: inherit;
}

.preventa__terms__header__title {
  font-weight: 600;
  font-size: 15px;
  color: #1a1a1a;
}

.preventa__terms__header__icon {
  color: #1a1a1a;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.preventa__terms__accordion.is-collapsed .preventa__terms__header__icon {
  transform: rotate(-180deg);
}

.preventa__terms__content {
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.preventa__terms__accordion.is-collapsed .preventa__terms__content {
  max-height: 0 !important;
}

.preventa__terms__scroll {
  max-height: 260px;
  overflow-y: auto;
  padding: 16px 20px;
  font-size: 13px;
  line-height: 1.6;
  color: #4a4a4a;
  scrollbar-width: thin;
}

.preventa__terms__scroll::-webkit-scrollbar {
  width: 6px;
}

.preventa__terms__scroll::-webkit-scrollbar-thumb {
  background: #d0d0d0;
  border-radius: 3px;
}

.preventa__terms__progress {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 0;
}

.preventa__terms__progress__track {
  flex: 1;
  height: 4px;
  background: #e2e2e2;
  border-radius: 2px;
  overflow: hidden;
}

.preventa__terms__progress__fill {
  height: 100%;
  width: 0%;
  background: #d40021;
  border-radius: 2px;
  transition:
    width 0.15s ease,
    background 0.3s ease;
}

.preventa__terms__progress.is-complete .preventa__terms__progress__fill {
  background: #1f9254;
}

.preventa__terms__progress__percent {
  font-size: 12px;
  font-weight: 600;
  color: #d40021;
  min-width: 34px;
  text-align: right;
}

.preventa__terms__progress.is-complete .preventa__terms__progress__percent {
  color: #1f9254;
}

.preventa__terms__status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 16px;
}

.preventa__terms__status__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fce4e8;
  color: #d40021;
}

.preventa__terms__status.is-complete .preventa__terms__status__icon {
  background: #dff4e7;
  color: #1f9254;
}

.preventa__terms__status__text {
  display: flex;
  flex-direction: column;
  font-size: 13px;
}

.preventa__terms__status__text strong {
  color: #1a1a1a;
  font-size: 14px;
}

.preventa__terms__status__text span {
  color: #8a8a8a;
}

/* Checkbox "separacion_autorizacion" (Condiciones de separación): deshabilitado
   hasta que el usuario haga scroll completo del acordeón de términos. Mismo
   patrón que #autorizacion en preventa.css, pero con el id real de este
   formulario y con opacidad además de color, para que se note claramente que
   texto y checkbox siguen bloqueados. */
#separacion_autorizacion:disabled {
  accent-color: #c8c8c8;
  border-color: #c8c8c8;
  cursor: not-allowed;
}

#separacion_autorizacion:disabled + .form__checkbox-label-autorizacion {
  color: #c8c8c8;
  opacity: 0.6;
  cursor: not-allowed;
}

#separacion_autorizacion:disabled + .form__checkbox-label-autorizacion::before,
#separacion_autorizacion:disabled + .form__checkbox-label-autorizacion::after {
  opacity: 0.6;
}

#separacion_autorizacion,
.form__checkbox-label-autorizacion[for="separacion_autorizacion"] {
  transition:
    color 0.25s ease,
    opacity 0.25s ease,
    border-color 0.25s ease,
    background-color 0.25s ease;
}

/* Wrapper que agrupa el acordeón + los 2 checkboxes de condiciones de
   separación (para poder ocultarlo entero en el flujo "envio"). Sin esto,
   sus .form-group quedan sin el gap:16px de .form__section, porque pasan a
   ser nietos en vez de hijos directos de ese contenedor. */
#condiciones-separacion-step {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* LOADING */

.form__btn-submit.loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.form__btn-submit.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}