/* La capa permite unificar el enfoque incluso cuando el tema declara !important. */
@layer gc-form-focus {
	:where(form, [role="form"], .gc-work-form) :is(input:not(:where([type="hidden"], [type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"], [type="image"], [type="range"], [type="color"])), select, textarea) {
		--gc-field-focus-color: var(--gcd-ui-accent, #c7470d);
		outline-color: transparent !important;
		transition: border-color 120ms ease-out, outline-color 120ms ease-out !important;
	}

	:where(.is-invalid, .is-gc-invalid, .woocommerce-invalid) :is(input, select, textarea),
	:is(input, select, textarea):where([aria-invalid="true"], .is-invalid, .wpcf7-not-valid, :user-invalid) {
		--gc-field-focus-color: #c04439;
	}

	:where(form, [role="form"], .gc-work-form) :is(input:not(:where([type="hidden"], [type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"], [type="image"], [type="range"], [type="color"])), select, textarea):focus {
		border-color: var(--gc-field-focus-color) !important;
		outline: 1px solid var(--gc-field-focus-color) !important;
		outline-offset: -1px !important;
		box-shadow: none !important;
	}

	@media (prefers-reduced-motion: reduce) {
		:where(form, [role="form"], .gc-work-form) :is(input:not(:where([type="hidden"], [type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"], [type="image"], [type="range"], [type="color"])), select, textarea) {
			transition: none !important;
		}
	}

	@media (forced-colors: active) {
		:where(form, [role="form"], .gc-work-form) :is(input:not(:where([type="hidden"], [type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"], [type="image"], [type="range"], [type="color"])), select, textarea):focus {
			outline-color: Highlight !important;
		}
	}
}