/**
 * ACATHI — Override de estilos Fluent Forms Pro
 * Compatible con Fluent Forms v5+.
 * Aplica los tokens de diseño ACATHI sobre los formularios de servicios.
 *
 * Carga: solo en páginas con formularios activos (ver functions.php).
 * Páginas: necesito-ayuda, voluntariado, inscripcion, sedes.
 */

/* ─── Variables locales mapeadas a tokens ACATHI ─────────────────────── */
.fluentform,
.fluentform {
  --ff-primary:        var(--primary, #310065);
  --ff-primary-hover:  color-mix(in srgb, var(--primary, #310065) 85%, black);
  --ff-radius:         var(--radius-lg, 16px);
  --ff-radius-sm:      var(--radius-md, 8px);
  --ff-font:           var(--font-body, 'Plus Jakarta Sans', sans-serif);
  --ff-surface:        var(--surface-container, #f3edf7);
  --ff-border:         var(--outline-variant, #cac4d0);
  --ff-text:           var(--on-surface, #1c1b1f);
  --ff-text-secondary: var(--on-surface-variant, #49454f);
  --ff-error:          var(--error, #b3261e);
}

/* ─── Contenedor principal ──────────────────────────────────────────── */
.fluentform {
  font-family: var(--ff-font) !important;
}

/* ─── Filas y grupos ────────────────────────────────────────────────── */
.fluentform .ff-el-group {
  margin-bottom: 20px !important;
}

/* ─── Labels ────────────────────────────────────────────────────────── */
.fluentform .ff-el-form-control-label,
.fluentform label {
  font-family: var(--ff-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ff-text) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* ─── Campos de texto, email, teléfono, textarea ────────────────────── */
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="number"],
.fluentform input[type="url"],
.fluentform textarea,
.fluentform select,
.fluentform .ff-el-form-control {
  font-family: var(--ff-font) !important;
  font-size: 16px !important;
  color: var(--ff-text) !important;
  background: var(--surface, #fff) !important;
  border: 1.5px solid var(--ff-border) !important;
  border-radius: var(--ff-radius-sm) !important;
  padding: 12px 16px !important;
  width: 100% !important;
  box-shadow: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  -webkit-appearance: none;
  appearance: none;
}

.fluentform input[type="text"]:focus,
.fluentform input[type="email"]:focus,
.fluentform input[type="tel"]:focus,
.fluentform textarea:focus,
.fluentform select:focus,
.fluentform .ff-el-form-control:focus {
  border-color: var(--ff-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ff-primary) 20%, transparent) !important;
  outline: none !important;
}

.fluentform textarea {
  min-height: 120px !important;
  resize: vertical !important;
}

/* ─── Select personalizado ──────────────────────────────────────────── */
.fluentform select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%2349454f' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 40px !important;
}

/* ─── Radio y Checkbox ──────────────────────────────────────────────── */
/*
 * Estructura real FF 6.2.5:
 *   .ff-el-input--content  (div, contenedor de todas las opciones)
 *     .ff-el-form-check    (div, wrapper por opción)
 *       label.ff-el-form-check-label
 *         input.ff-el-form-check-input.ff-el-form-check-radio  (radio)
 *         span  ← texto de la opción
 */

/* Wrapper div por opción: borde, sin padding propio */
.fluentform .ff-el-form-check {
  display: flex !important;
  align-items: stretch !important;
  margin-bottom: 8px !important;
  border: 1.5px solid var(--ff-border) !important;
  border-radius: var(--ff-radius-sm) !important;
  cursor: pointer !important;
  transition: border-color 0.2s, background 0.2s !important;
  user-select: none !important;
  overflow: hidden !important;
}

/* Label interna: flex row con input + texto */
.fluentform .ff-el-form-check .ff-el-form-check-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 16px !important;
  width: 100% !important;
  cursor: pointer !important;
  font-family: var(--ff-font) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--ff-text) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* Contenedor con radios → layout horizontal en fila */
.fluentform .ff-el-input--content:has(.ff-el-form-check-radio) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

/* Radio: forma pill */
.fluentform .ff-el-input--content:has(.ff-el-form-check-radio) .ff-el-form-check {
  border-radius: 100px !important;
  margin-bottom: 0 !important;
}

/* Radio: padding compacto en la pill */
.fluentform .ff-el-input--content:has(.ff-el-form-check-radio) .ff-el-form-check .ff-el-form-check-label {
  padding: 8px 18px !important;
}

/* Estado seleccionado */
.fluentform .ff-el-form-check:has(input:checked) {
  border-color: var(--ff-primary) !important;
  background: color-mix(in srgb, var(--ff-primary) 8%, transparent) !important;
}

/* Input nativo (radio/checkbox) */
.fluentform .ff-el-form-check-input {
  accent-color: var(--ff-primary) !important;
  width: 17px !important;
  height: 17px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  margin: 0 !important;
}

/* ─── Checkbox de RGPD ──────────────────────────────────────────────── */
.fluentform .ff-el-group--acceptance,
.fluentform .ff-el-group [data-name="gdpr_agreement"],
.fluentform .ff-el-group [data-name="gdpr"] {
  background: var(--ff-surface) !important;
  border: 1.5px solid var(--ff-border) !important;
  border-radius: var(--ff-radius-sm) !important;
  padding: 14px 16px !important;
}

.fluentform .ff-el-group--acceptance label,
.fluentform .ff-el-group [data-name="gdpr_agreement"] label,
.fluentform .ff-el-group [data-name="gdpr"] label {
  font-size: 13px !important;
  color: var(--ff-text-secondary) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

.fluentform .ff-el-group--acceptance a,
.fluentform .ff-el-group [data-name="gdpr"] a {
  color: var(--ff-primary) !important;
  text-decoration: underline !important;
}

/* ─── HTML personalizado (aviso RGPD, descripción) ──────────────────── */
.fluentform .ff-custom-html {
  background: color-mix(in srgb, var(--primary, #310065) 6%, transparent) !important;
  border-left: 4px solid var(--primary, #310065) !important;
  border-radius: 0 var(--ff-radius-sm) var(--ff-radius-sm) 0 !important;
  padding: 14px 16px !important;
  font-size: 14px !important;
  color: var(--ff-text) !important;
  margin-bottom: 20px !important;
  line-height: 1.6 !important;
}

.fluentform .ff-custom-html strong,
.fluentform .ff-custom-html b {
  color: var(--primary, #310065) !important;
}

/* ─── Mensajes de error ─────────────────────────────────────────────── */
.fluentform .error,
.fluentform .ff-el-is-error .ff-el-form-control,
.fluentform .ff-field-error {
  color: var(--ff-error) !important;
}

.fluentform .ff-el-is-error .ff-el-form-control {
  border-color: var(--ff-error) !important;
}

.fluentform .ff-field-error {
  font-size: 12px !important;
  margin-top: 4px !important;
  display: block !important;
}

/* ─── Botón de envío ────────────────────────────────────────────────── */
.fluentform .ff_submit_btn_wrap .ff-btn,
.fluentform .ff-btn-submit {
  font-family: var(--ff-font) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  background: var(--ff-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ff-radius) !important;
  padding: 14px 32px !important;
  cursor: pointer !important;
  transition: background 0.2s, transform 0.1s !important;
  letter-spacing: 0.02em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.fluentform .ff_submit_btn_wrap .ff-btn:hover,
.fluentform .ff-btn-submit:hover {
  background: var(--ff-primary-hover) !important;
}

.fluentform .ff_submit_btn_wrap .ff-btn:active,
.fluentform .ff-btn-submit:active {
  transform: scale(0.98) !important;
}

.fluentform .ff_submit_btn_wrap .ff-btn:disabled,
.fluentform .ff-btn-submit:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

/* Botón de ancho completo en móvil */
@media (max-width: 600px) {
  .fluentform .ff_submit_btn_wrap .ff-btn,
  .fluentform .ff-btn-submit {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ─── Mensaje de éxito ──────────────────────────────────────────────── */
.fluentform .ff-success-msg,
.fluentform .ff-message-success {
  background: color-mix(in srgb, #006e2e 10%, transparent) !important;
  border: 1.5px solid #006e2e !important;
  border-radius: var(--ff-radius) !important;
  padding: 24px 28px !important;
  color: #006e2e !important;
  font-family: var(--ff-font) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

/* ─── Spinner de envío ──────────────────────────────────────────────── */
.fluentform .ff-loader,
.fluentform .loading-spin {
  border-top-color: var(--ff-primary) !important;
}

/* ─── Responsive — apilado en móvil ─────────────────────────────────── */
@media (max-width: 600px) {
  .fluentform .ff-el-group {
    margin-bottom: 16px !important;
  }

  .fluentform input[type="text"],
  .fluentform input[type="email"],
  .fluentform input[type="tel"],
  .fluentform textarea,
  .fluentform select {
    font-size: 16px !important; /* evitar zoom iOS */
  }
}
.fluentform .ff-el-input--content:has(.ff-el-form-check-radio) .ff-el-form-check:has(input:checked) {
  background: var(--ff-primary) !important;
  border-color: var(--ff-primary) !important;
}
.fluentform .ff-el-input--content:has(.ff-el-form-check-radio) .ff-el-form-check:has(input:checked) .ff-el-form-check-label {
  color: #fff !important;
}
.fluentform .ff-el-input--content:has(.ff-el-form-check-radio) .ff-el-form-check:has(input:checked) .ff-el-form-check-input {
  accent-color: #fff !important;
}