.wtps-formV2 {
  background-color: var(--formv2bgcolor, transparent);
}

.wtps-formV2 form,
.wtps-formV2 .wtps-formV2-field,
.wtps-formV2 .wtps-formV2-recaptcha,
.wtps-formV2 .wtps-formV2-custom-response {
  font-family: var(--formv2fontfamily, inherit);
  font-weight: var(--formv2fontweight, inherit);
  letter-spacing: var(--formv2letterspacing, inherit);
}

.wtps-formV2 form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--formv2spacing, 24px);
}

.wtps-formV2 form > .wrapper {
  align-self: var(--formv2buttonalign, stretch);
}

.wtps-formV2 .wtps-formV2-field {
  width: 100%;
  display: flex;
  position: relative;
  flex-direction: column;
  font-size: var(--formv2fontsize, inherit);
  user-select: none;
  color: var(--formv2color, var(--bodycolortext));
}

.wtps-formV2 .wtps-formV2-container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--formv2columns, 2), 1fr);
  gap: var(--formv2spacing, 12px);
}

@media (max-width: 1024px) {
  .wtps-formV2 .wtps-formV2-container {
    grid-template-columns: 1fr;
  }
}

.wtps-formV2 .wtps-formV2-field:has(textarea),
.wtps-formV2 .wtps-formV2-field:has(input[type="checkbox"]) {
  grid-column: 1 / -1;
}

.wtps-formV2 .wtps-formV2-field-input {
  width: 100%;
  position: relative;
  display: inline-block;
  --field-padding: var(--formv2fieldpadding, 12px 14px);
}

.wtps-formV2 .wtps-formV2-field input:not([type="file"]),
.wtps-formV2 .wtps-formV2-field textarea,
.wtps-formV2 .wtps-formV2-field .select-selected {
  width: 100%;
  outline: none;
  font-family: inherit;
  font-size: var(--formv2fontsize, inherit);
  font-weight: inherit;
  letter-spacing: inherit;
  color: var(--formv2color, var(--bodycolortext));
  background-color: var(--formv2fieldbgcolor, var(--bodycolorbackground));
  padding: var(--field-padding);
  border-width: var(--formv2borderwidth, 1px);
  border-style: var(--formv2borderstyle, solid);
  border-color: var(--formv2bordercolor, var(--formv2color, var(--bodycolortext)));
  border-radius: var(--formv2-fieldborderradius);
  transition: all 200ms ease;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.wtps-formV2 .wtps-formV2-field textarea {
  min-height: 140px;
  resize: vertical;
}

.wtps-formV2 .wtps-formV2-field .wtps-formV2-field-title {
  width: 100%;
  pointer-events: none;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  margin-bottom: var(--formv2fieldtitlegap, 0px);
  color: var(--formv2titlecolor, var(--bodycolortext));
}

.wtps-formV2 .wtps-formV2-field .wtps-formV2-field-info {
  width: 100%;
  font-size: smaller;
  padding: 4px 0 0;
  opacity: 0.8;
  color: var(--formv2titlecolor, var(--bodycolortext));
}

.wtps-formV2 .wtps-formV2-field .error-message,
.wtps-formV2 .wtps-formV2-recaptcha .error-message {
  display: none;
}

.wtps-formV2 .wtps-formV2-field.field-error .error-message,
.wtps-formV2 .wtps-formV2-recaptcha.field-error .error-message {
  position: absolute;
  top: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  font-size: var(--formv2validationfontsize, calc(var(--formv2fontsize, 16px) * 0.8));
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: var(--formv2validationcolor, var(--formv2color, var(--bodycolortext)));
  padding: 4px 0 0;
}

.wtps-formV2 .wtps-formV2-field:has(:required) .wtps-formV2-field-title::after {
  content: "(obligatorio)";
  padding-left: 4px;
  opacity: 1;
}

.wtps-formV2 .wtps-formV2-field .wtps-field-password-icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: var(--field-padding);
  display: flex;
  cursor: pointer;
}

.wtps-formV2 .wtps-formV2-field .wtps-field-password-icon svg {
  fill: currentColor;
}

.wtps-formV2 .wtps-formV2-field:has(.wtps-field-password-icon) input {
  padding-right: 42px;
}

.wtps-formV2 .wtps-formV2-field:has(input[type="checkbox"]) {
  font-size: var(--formv2checkboxtextsize, var(--formv2-fontsize, inherit));
}

.wtps-formV2 .wtps-formV2-field .wtps-formV2-field-input:has(input[type="checkbox"]) {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Checkbox real oculto — sigue funcionando para el formulario */
.wtps-formV2 .wtps-formV2-field input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  padding: 0;
  margin: 0;
}

/* Checkbox falso */
.wtps-formV2 .wtps-checkbox-custom {
  flex-shrink: 0;
  width: var(--formv2checkboxsize, 1.2em);
  height: var(--formv2checkboxsize, 1.2em);
  border: var(--formv2checkboxborderwidth, var(--formv2borderwidth, 1px)) solid var(--formv2checkboxcolor, var(--formv2color, var(--bodycolortext)));
  border-radius: var(--formv2-fieldborderradius, 4px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 200ms ease, border-color 200ms ease;
  background-color: transparent;
  color: var(--formv2checkboxcolor, var(--formv2color, var(--bodycolortext)));
}

.wtps-formV2 .wtps-checkbox-custom svg {
  width: 70%;
  height: 70%;
  opacity: 0;
  transition: opacity 150ms ease;
  fill: currentColor;
}

.wtps-formV2.checkbox-style-card .wtps-checkbox-custom svg {
  fill: var(--formv2checkboxcolor, var(--formv2color, var(--bodycolortext)));
}

/* Checked: rellena el checkbox falso */
.wtps-formV2 .wtps-formV2-field-input:has(input[type="checkbox"]:checked) .wtps-checkbox-custom {
  background-color: var(--formv2checkboxcolor, var(--formv2color, var(--bodycolortext)));
  border-color: var(--formv2checkboxcolor, var(--formv2color, var(--bodycolortext)));
  color: var(--formv2fieldbgcolor, var(--bodycolorbackground));
}

.wtps-formV2 .wtps-formV2-field-input:has(input[type="checkbox"]:checked) .wtps-checkbox-custom svg {
  opacity: 1;
}

.wtps-formV2 .wtps-formV2-field:has(input[type="checkbox"]) .wtps-formV2-field-title {
  position: static;
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
}

.wtps-formV2 .wtps-formV2-field:has(input[type="checkbox"]) {
  margin: calc(var(--formv2spacing) * 1.5) 0 0;
}


.wtps-formV2 .wtps-formV2-field:has(input[type="checkbox"]) .wtps-formV2-field-title a {
  pointer-events: auto;
  color: var(--formv2linkcolor, var(--formv2titlecolor, var(--bodycolortext)));
  font-weight: var(--formv2linkfontweight, inherit);
  text-decoration: var(--formv2linktextdecoration, underline);
}

.wtps-formV2 .wrapper:has(button[type="submit"]) {
  margin-top: calc(var(--formv2spacing) * 1.5);
}

.wtps-formV2 .wtps-formV2-field:has(select) select {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.wtps-formV2 .select-selected:after {
  position: absolute;
  content: "";
  top: 50%;
  right: 10px;
  width: 10px;
  height: 10px;
  transform: translateY(-50%) rotate(180deg);
  transition: 320ms ease;
  background-color: var(--formv2color, var(--bodycolortext));
  clip-path: polygon(50% 20%, 0 80%, 100% 80%);
}

.wtps-formV2 .select-selected.select-arrow-active:after {
  transform: translateY(-50%) rotate(0deg);
}

.wtps-formV2 .select-items div,
.wtps-formV2 .select-selected {
  color: var(--formv2color, var(--bodycolortext));
  padding: var(--field-padding);
  background-color: var(--formv2fieldbgcolor, var(--bodycolorbackground));
  border-radius: var(--formv2-fieldborderradius);
  cursor: pointer;
  display: flex;
  align-items: center;
}

.wtps-formV2 .select-items {
  color: var(--formv2color, var(--bodycolortext));
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  overflow: hidden;
  box-shadow: 0 0 10px color-mix(in srgb, var(--formv2color, var(--bodycolortext)) 10%, transparent);
  border-radius: var(--formv2-fieldborderradius);
}

.wtps-formV2 .select-items::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-color: var(--formv2fieldbgcolor, var(--bodycolorbackground));
}

.wtps-formV2 .select-hide {
  display: none;
}

.wtps-formV2 .select-items div:hover,
.wtps-formV2 .same-as-selected {
  background-color: color-mix(in srgb, var(--formv2color, var(--bodycolortext)) 5%, transparent);
}

.wtps-formV2 .wtps-formV2-recaptcha {
  position: relative;
  width: 100%;
  display: flex;
  align-items: start;
  justify-content: start;
  flex-direction: column;
  gap: 4px;
}

.wtps-formV2 .wtps-form-custom-response {
  color: var(--formv2responsecolor, var(--bodycolortext));
  background-color: var(--formv2responsebgcolor, transparent);
}

/* ===== Visibilidad: Solo título ===== */
.wtps-formV2.field-label-only .wtps-formV2-field input::placeholder,
.wtps-formV2.field-label-only .wtps-formV2-field textarea::placeholder {
  color: transparent;
}

/* ===== Visibilidad: Solo placeholder ===== */
.wtps-formV2.field-placeholder-only .wtps-formV2-field .wtps-formV2-field-title {
  display: none;
}

/* ===== Comportamiento: Etiquetas flotantes ===== */
.wtps-formV2.field-style-floating .wtps-formV2-field {
  padding-top: 10px;
}

.wtps-formV2.field-style-floating .wtps-formV2-field .wtps-formV2-field-title {
  position: absolute;
  z-index: 1;
  top: 24px; /* 10px field padding-top + 14px input padding-top */
  left: 15px;
  margin-bottom: 0;
  line-height: 1;
  transition: top 150ms ease, font-size 150ms ease;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 30px);
}

.wtps-formV2.field-style-floating .wtps-formV2-field:focus-within .wtps-formV2-field-title,
.wtps-formV2.field-style-floating .wtps-formV2-field.wtps-field-has-value .wtps-formV2-field-title {
  width: fit-content;
  top: 2px;
  font-size: 0.75em;
  background-color: var(--formv2fieldbgcolor, transparent);
  padding: 4px;
}

.wtps-formV2.field-style-floating .wtps-formV2-field:has(textarea) {
  padding-top: 10px;
}

.wtps-formV2.field-style-floating .wtps-formV2-field:has(textarea) .wtps-formV2-field-title {
  top: 24px;
}

.wtps-formV2.field-style-floating .wtps-formV2-field:has(textarea):focus-within .wtps-formV2-field-title,
.wtps-formV2.field-style-floating .wtps-formV2-field:has(textarea).wtps-field-has-value .wtps-formV2-field-title {
  top: 2px;
}

/* El select siempre muestra texto, por eso el label siempre está flotado */
.wtps-formV2.field-style-floating .wtps-formV2-field:has(select) .wtps-formV2-field-title {
  width: fit-content;
  top: 2px;
  font-size: 0.75em;
  background-color: var(--formv2fieldbgcolor, transparent);
  padding: 0 4px;
}

/* Ocultar placeholder hasta que el label flote */
.wtps-formV2.field-style-floating .wtps-formV2-field input::placeholder,
.wtps-formV2.field-style-floating .wtps-formV2-field textarea::placeholder {
  opacity: 0;
  color: inherit;
  transition: opacity 300ms ease;
}

.wtps-formV2.field-style-floating .wtps-formV2-field:focus-within input::placeholder,
.wtps-formV2.field-style-floating .wtps-formV2-field:focus-within textarea::placeholder {
  opacity: 0.6;
}

/* Mantener checkbox sin cambios en modo floating */
.wtps-formV2.field-style-floating .wtps-formV2-field:has(input[type="checkbox"]) {
  padding-top: 0;
}

.wtps-formV2.field-style-floating .wtps-formV2-field:has(input[type="checkbox"]) .wtps-formV2-field-title {
  position: static;
  font-size: inherit;
  top: auto;
  left: auto;
  transform: none;
  padding: 0;
  background-color: transparent;
  white-space: normal;
  max-width: none;
}

/* ===== Comportamiento: Subrayado ===== */
.wtps-formV2.field-style-underline .wtps-formV2-field input:not([type="file"]):not([type="checkbox"]),
.wtps-formV2.field-style-underline .wtps-formV2-field textarea,
.wtps-formV2.field-style-underline .wtps-formV2-field .select-selected {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.wtps-formV2.field-style-underline .wtps-formV2-field .select-items {
  border-radius: 0;
  border: none;
  border-top: var(--formv2borderwidth, 1px) var(--formv2borderstyle, solid) var(--formv2bordercolor, currentColor);
}

/* ===== Estilo de Checkbox: Tarjeta ===== */
.wtps-formV2.checkbox-style-card .wtps-formV2-field-input:has(input[type="checkbox"]) {
  border-radius: var(--formv2-fieldborderradius, 4px);
  border: var(--formv2checkboxborderwidth, var(--formv2borderwidth, 1px)) var(--formv2borderstyle, solid) var(--formv2checkboxcolor, var(--formv2color, currentColor));
  padding: var(--field-padding);
  background-color: transparent;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.wtps-formV2.checkbox-style-card .wtps-formV2-field-input:has(input[type="checkbox"]:checked) {
  background-color: var(--formv2checkboxcolor, var(--formv2color, currentColor));
  border-color: var(--formv2checkboxcolor, var(--formv2color, currentColor));
}

/* Card checked: texto blanco */
.wtps-formV2.checkbox-style-card .wtps-formV2-field-input:has(input[type="checkbox"]:checked) .wtps-formV2-field-title {
  color: var(--formv2fieldbgcolor, var(--bodycolorbackground));
}

.wtps-formV2.checkbox-style-card .wtps-formV2-field-input:has(input[type="checkbox"]:checked) .wtps-formV2-field-title a {
  color: currentColor;
}

/* Card checked: checkbox falso blanco con checkmark del color del título */
.wtps-formV2.checkbox-style-card .wtps-formV2-field-input:has(input[type="checkbox"]:checked) .wtps-checkbox-custom {
  background-color: var(--formv2fieldbgcolor, var(--bodycolorbackground));
  border-color: var(--formv2fieldbgcolor, var(--bodycolorbackground));
  color: var(--formv2checkboxcolor, var(--formv2color, currentColor));
}

/* ===== Estilo de Checkbox: Toggle ===== */
.wtps-formV2.checkbox-style-toggle .wtps-checkbox-custom {
  width: 2.4em;
  height: 1.3em;
  border-radius: 2em;
  position: relative;
  overflow: visible;
}

/* Ocultar el SVG en toggle */
.wtps-formV2.checkbox-style-toggle .wtps-checkbox-custom svg {
  display: none;
}

/* Thumb del toggle */
.wtps-formV2.checkbox-style-toggle .wtps-checkbox-custom::before {
  content: "";
  position: absolute;
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  top: 50%;
  left: 0.15em;
  transform: translateY(-50%);
  transition: left 200ms ease, background-color 200ms ease;
  background-color: var(--formv2checkboxcolor, var(--formv2color, var(--bodycolortext)));
}

/* Toggle checked */
.wtps-formV2.checkbox-style-toggle .wtps-formV2-field-input:has(input[type="checkbox"]:checked) .wtps-checkbox-custom {
  background-color: var(--formv2checkboxcolor, var(--formv2color, var(--bodycolortext)));
  border-color: var(--formv2checkboxcolor, var(--formv2color, var(--bodycolortext)));
}

.wtps-formV2.checkbox-style-toggle .wtps-formV2-field-input:has(input[type="checkbox"]:checked) .wtps-checkbox-custom::before {
  left: calc(100% - 1.05em);
  background-color: var(--formv2fieldbgcolor, var(--bodycolorbackground));
}