/* ============================================
   NUKA · CAMPOS DE FORMULARIO — ESTILO GLOBAL
   ============================================

   Archivo añadido en la conversión a WordPress. No forma parte del CSS del diseño aprobado,
   que se conserva intacto en el resto de assets/css/.

   Existe por dos motivos:

   1. JetFormBuilder genera su propio marcado y no usa las clases .nuka-form__* del diseño.
      Estas reglas le dan exactamente el mismo aspecto que tenía el formulario aprobado.
   2. Los estilos se declaran sobre el tipo de campo y no sobre la clase del formulario de
      contacto, de modo que cualquier formulario que se añada en el futuro, en la página que
      sea, hereda el mismo aspecto sin trabajo adicional.

   Los valores replican los de .nuka-form__* en components.css. Si cambia el diseño de un
   campo, hay que cambiarlo en los dos sitios o unificarlos entonces.
   ============================================ */

/* Grupo de campo.

   JetFormBuilder declara .jet-form-builder-row{margin:0} y carga su CSS después del tema, así
   que con un selector de una sola clase ganaría el plugin. Se resuelve por dos vías: se define
   su propia variable --jfb-row-mb, que es la vía prevista por el plugin, y se sube la
   especificidad a dos clases para que el resultado no dependa del orden de carga. */
.jet-form-builder {
  --jfb-row-mb: var(--space-lg);
  --jfb-row-mt: 0px;
}

.jet-form-builder .jet-form-builder-row,
.nuka-campo {
  margin-bottom: var(--space-lg);
  padding: 0;
}

/* El envoltorio interno del campo no lleva margen propio: el espaciado entre grupos lo pone
   la fila. Sin esto, cada campo suma el margen dos veces. */
.jet-form-builder__field-wrap {
  margin-bottom: 0;
}

/* El diseño aprobado no marca los campos obligatorios con asterisco. El atributo required se
   mantiene en el HTML, así que la validación del navegador sigue funcionando igual. */
.jet-form-builder__required {
  display: none;
}

/* Etiqueta.

   JetFormBuilder envuelve la etiqueta en un div .jet-form-builder__label y dentro pone el
   <label>. El margen va solo en el contenedor: si se pone en los dos, el espacio se duplica. */
.jet-form-builder__label {
  margin-bottom: var(--space-sm);
}

.jet-form-builder__label-text,
.nuka-campo__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

/* Campos de entrada */
.jet-form-builder input[type="text"],
.jet-form-builder input[type="email"],
.jet-form-builder input[type="tel"],
.jet-form-builder input[type="url"],
.jet-form-builder input[type="number"],
.jet-form-builder input[type="date"],
.jet-form-builder input[type="search"],
.jet-form-builder select,
.jet-form-builder textarea,
.jet-form-builder__field,
.nuka-campo__input,
.nuka-campo__textarea {
  width: 100%;
  padding: 16px 18px;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 300;
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0;
  transition: border-color var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

.jet-form-builder input[type="text"]:focus,
.jet-form-builder input[type="email"]:focus,
.jet-form-builder input[type="tel"]:focus,
.jet-form-builder input[type="url"]:focus,
.jet-form-builder input[type="number"]:focus,
.jet-form-builder input[type="date"]:focus,
.jet-form-builder input[type="search"]:focus,
.jet-form-builder select:focus,
.jet-form-builder textarea:focus,
.jet-form-builder__field:focus,
.nuka-campo__input:focus,
.nuka-campo__textarea:focus {
  border-color: var(--color-accent);
  outline: none;
}

.jet-form-builder textarea,
.nuka-campo__textarea {
  min-height: 180px;
  resize: vertical;
}

/* Botón de envío: replica .nuka-btn + .nuka-btn--primary de components.css, valor por valor */
.jet-form-builder button[type="submit"],
.jet-form-builder__submit,
.jet-form-builder input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 14px 36px;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-bg);
  background-color: var(--color-accent);
  border: 2px solid var(--color-accent);
  border-radius: 0;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.jet-form-builder button[type="submit"]:hover,
.jet-form-builder__submit:hover,
.jet-form-builder input[type="submit"]:hover {
  background-color: transparent;
  color: var(--color-accent);
}

/* Mensajes de error y de estado */
.jet-form-builder__field-error,
.jet-form-builder-message--error,
.nuka-campo__error {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-error);
  margin-top: var(--space-xs);
}

.jet-form-builder__field.has-error,
.jet-form-builder__field[aria-invalid="true"],
.nuka-campo.is-invalid .nuka-campo__input,
.nuka-campo.is-invalid .nuka-campo__textarea {
  border-color: var(--color-error);
}

.jet-form-builder-message--success {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-text-primary);
  border-left: 2px solid var(--color-accent);
  padding-left: var(--space-md);
  margin-top: var(--space-lg);
}

/* --- Casilla de aceptación de la política de privacidad ---
   La casilla hereda de las reglas de arriba, pensadas para campos de texto a todo el ancho, y
   sin esto sale deformada (38 x 34 px) y centrada respecto a una etiqueta de dos líneas. */

.jet-form-builder .checkradio-wrap .jet-form-builder__field-label.for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  cursor: pointer;
  font-family: var(--font-body);
  /* No usa --text-small: un consentimiento tiene que leerse sin esfuerzo para ser informado,
     y a 12 px queda por debajo de las etiquetas del propio formulario. */
  font-size: var(--text-label);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.jet-form-builder .checkradio-wrap input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  margin: 0;
  /* Alinea la caja con la primera línea del texto, no con el bloque entero. */
  margin-top: 2px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.jet-form-builder .checkradio-wrap a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--color-accent);
  transition: color var(--transition-fast);
}

.jet-form-builder .checkradio-wrap a:hover,
.jet-form-builder .checkradio-wrap a:focus-visible {
  color: var(--color-accent);
}

/* La fila de la casilla va más pegada al botón que los campos entre sí: forman una unidad. */
.jet-form-builder-row.field-type-checkbox-field {
  margin-bottom: var(--space-lg);
}

/* Campo trampa para bots: oculto por CSS, nunca con el atributo hidden */
.nuka-campo--hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Respetar la preferencia de movimiento reducido, igual que el resto del diseño */
@media (prefers-reduced-motion: reduce) {
  .jet-form-builder input,
  .jet-form-builder select,
  .jet-form-builder textarea,
  .jet-form-builder button[type="submit"],
  .nuka-campo__input,
  .nuka-campo__textarea {
    transition: none;
  }
}