/* ==========================================================================
   Campos de contacto (pregunta 9) y casilla de consentimiento.
   ========================================================================== */

.field-group {
  display: grid;
  gap: var(--gap-options);
}

.field__label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

.field__input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border-field);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-option);
  transition: border-color var(--dur-base) var(--ease-default);
}

/* 16px evita que iOS Safari haga zoom al enfocar el campo. */
@media (max-width: 480px) {
  .field__input { font-size: 16px; }
}

.field__input:focus {
  border-color: var(--border-active);
  outline: 2px solid var(--action-primary);
  outline-offset: 1px;
}

.field__input::placeholder { color: var(--text-faint); }

.field__input[aria-invalid='true'] {
  border-color: var(--state-error);
  background: var(--state-error-soft);
}

/* --- Consentimientos ----------------------------------------------------
   Son dos casillas separadas y ninguna viene premarcada: el aviso de
   privacidad y, aparte, el consentimiento expreso para datos de salud que
   exige la LFPDPPP. Ver docs/privacidad.md
   ------------------------------------------------------------------------ */
.consent {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

.consent__item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--text-muted);
  cursor: pointer;
}

.consent__box {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex: 0 0 auto;
  accent-color: var(--action-accent);
  cursor: pointer;
}

.consent__item a { text-decoration: underline; text-underline-offset: 2px; }